jQuery.parseURI = function(uri) {
        var m = /^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/.exec(uri);

        var q = m[7].split('&');
        var p = {};
        while (q.length > 0) {
                var x = q.shift().split('=');
                p[x[0]] = x[1];
        }

        return {
                // Generic components (as specified in RFC3986)
                scheme: m[2],
                authority: m[4],
                path: m[5],
                query: m[7],
                fragment: m[9],

                // window.location compatible properties
                hash: m[8],
                host: m[4],
                hostname: m[4].split(':')[0],
                href: uri,
                pathname: m[5],
                port: m[4].split(':')[1] || '',
                protocol: m[1],
                search: m[6],

                // The parsed query string:
                params: p
        };

};




var thumbs = new Array();
var heads = new Array();
var total = 0;
var current = 0;
var thumbWidth =0;
var thumbHeight =0;
var headWidth = 0;
var headHeight = 0;
var phHead;
var phDescription;
var phCounter;
var phStrip;
var loading;

$().ready(function() {
	
	
	$('#DialogPopup').jqm({
		zIndex : 1000,
		overlay: 30, 
		modal: false,
		overlayClass: 'Overlay'}).jqDrag('.jqDrag');
    

  
  // Close Button Highlighting. IE doesn't support :hover. Surprise?
  $('div.jqmdX')
  .hover(
    function(){ $(this).addClass('jqmdXFocus'); }, 
    function(){ $(this).removeClass('jqmdXFocus'); })

	// Work around for IE's lack of :focus CSS selector
  if($.browser.msie)
    $('input.jqmdX')
      .focus(function(){$(this).addClass('iefocus');})
      .blur(function(){$(this).removeClass('iefocus');});
     

	$('a.AlbumWindow').each(
			function(intIndex) {
				$(this).bind(
					"click",
					function() {
						loading = new Image();
						//$(loading).css("width",128);
						//$(loading).css("height",128);
						//loading.className = 'loading';
						//loading.src = './loading.gif';
						var alb_id = $.parseURI(this).params['id'];
						$('.jqmdMSG').empty();
						//$('.jqmdMSG').html(loading);
						$('#DialogPopup').jqmShow();
						
						// nu gegevens ophalen
						var params = 'id='+alb_id;
						params += "&time=" + new Date().getTime();						
						$.ajax({
							type: "POST",
							url: "ajax_album.aspx",
							data: params ,
							dataType : "xml",
							success: function(xml){
							
								// set all variables
								headWidth = parseInt($(xml).find('headWidth').text());
								headHeight = parseInt($(xml).find('headHeight').text());
								thumbWidth = parseInt($(xml).find('thumbWidth').text());
								thumbHeight = parseInt($(xml).find('thumbHeight').text());
								total = $(xml).find('row').length;
								heads = new Array();
								thumbs = new Array();
								current = 0;
								
								// calculate windowheight
								var height = headHeight;
								height += thumbHeight;
								height += 100;

								// calculate windowwidth
								var width = headWidth;
								width += thumbWidth;
								width += 50;
								
								// set window-dimensions
								$('#DialogPopup').css("height", height+50);
								$('#DialogPopup').css("width", width);
								
								// set window-title
								$('.jqmdTC').text($(xml).find('name').text());
									
								// create inner placeholders
								// create the photo-album-placeholder
								var pa = document.createElement('div');
								pa.className = 'photoAlbum';
								$(pa).css("height", height )

								// create the counter-placeholder
								phCounter = document.createElement('div');
								phCounter.className = 'photoCounter';
								$(phCounter).text('1/'+total);
								pa.appendChild(phCounter);
								
								// create the prev-navigation placeholder
								var pp = document.createElement('div');
								pp.className = 'photoPrev';
								$(pp).bind("click",function(){photoPrev();})
								pa.appendChild(pp);
								
								// create the next-navigation placeholder
								var pn = document.createElement('div');
								pn.className = 'photoNext';
								$(pn).bind("click",function(){photoNext();})
								pa.appendChild(pn);
								
								
								
								// create the headphoto placeholder
								phHead = document.createElement('div');
								phHead.className = 'photoHead';
								pa.appendChild(phHead);
								
								// create the headdescription placeholder
								phDescription = document.createElement('div');
								phDescription.className = 'headDescription';
								pa.appendChild(phDescription);									
								$(phDescription).css("bottom",thumbHeight+30);
								$(phDescription).css("width",headWidth+30);
								
								//$(txt).css("margin-left",((parseInt($(xml).find('headWidth').text())+50)/2)*-1);
								
								// create the thumbs placeholder
								phStrip = document.createElement('div');
								phStrip.className = 'thumbs';
								height -= thumbHeight;
								$(phStrip).css("height",thumbHeight+20);
								$(phStrip).css("top",height-20);
								
								pa.appendChild(phStrip);
								
								var ul = document.createElement('ul');
								phStrip.appendChild(ul);
								
								// initialize the thumbs
								var i=0;
								$(xml).find('row').each(function(index){
									var li = document.createElement('li');
									//$(li).html(loading);
									//li.className = 'item';

									var desc = $(this).find('description').text();
									var id = $(this).find('id').text();
									
									var image = new Image();
									image.onload = function(){
										image.onload = null;
										//$(loading).hide()
										
									}

									image.src = 'webfile.aspx?id='+$(this).find('id').text()+'&height='+$(xml).find('thumbHeight').text()+'&width='+$(xml).find('thumbWidth').text();
									image.index = index;
									image.id = id;
									image.altText = desc;											
									
									thumbs[i++] = image;
									
									$(image).bind("click",function(){
											showHeadThumb(this);

									
											});
									li.appendChild(image);
									ul.appendChild(li);
									
								
								});
								
								$('.jqmdMSG').append(pa);
								showHeadThumb(thumbs[0]);
							},
							error: function(xml) {
								alert('error')
							}
						});
						
												
						
						return false;
					}
					
				);
			}
	);
		
		function photoNext()
		{
			// de-hilite selected photo
			$(thumbs[current]).parent().removeClass('selected');

			current++;
			if (current >= total){
				current = 0;
			}
			
			showHeadThumb(thumbs[current]);
		}
		
		function photoPrev()
		{
			// de-hilite selected photo
			$(thumbs[current]).parent().removeClass('selected');
		
			current--;
			if (current < 0){
				current = total-1;
			}
			
			showHeadThumb(thumbs[current]);
		}
		
		
		function showHeadThumb(obj)
		{
			if (obj != null)
			{
				var hi;
				if(heads[obj.index]!=null)
				{
					hi = heads[obj.index];
				}
				else
				{
					hi = new Image();
					hi.src = 'webfile.aspx?id='+obj.id+'&height='+headHeight+'&width='+headWidth;
					heads[obj.index] = hi;				
				}
				
				// hilite selected photo
				$(thumbs[current]).parent().removeClass('selected');
				current = obj.index;
				$($(thumbs[current]).parent()).addClass('selected');
				//alert($(thumbs[current]).parent().position().left);
				
				
			
				// show selected photo
				$(phHead).empty();
				$(phHead).append(hi);
				$(hi).hide();
				$(hi).fadeIn("slow");
				
				// set new description corresponding the selected photo
				$(phDescription).html(obj.altText);
				
				// set phCounter with new info
				$('.photoCounter').text(current + 1 + '/'+total);
				
				

				// set scrollbar
				phStrip.scrollLeft = $(thumbs[current]).parent().position().left;				
			}
			return false;
		}

		

	
/*	
	$('#AlbumPopup') 
		
				.jqDrag('.jqDrag')
				.jqResize('.jqResize')
				.jqm({
						trigger: '.AlbumWindow',
						overlay: 50, 
						overlayClass: 'Overlay',
						closeClass : 'jqmClose',
						modal: true
					});
		  
				
	  // Close Button Highlighting. IE doesn't support :hover. Surprise?
	  $('input.jqmdX')
	  .hover(
		function(){ $(this).addClass('jqmdXFocus'); }, 
		function(){ $(this).removeClass('jqmdXFocus'); })
	  .focus( 
		function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
	  .blur( 
		function(){ $(this).removeClass('jqmdXFocus'); });	
*/	
/*
		$('a.AlbumWindow').each(
				function(intIndex) {
					$(this).bind(
						"click",
						function() {
							//var alb_id = $.parseURI(this).params['id'];
							$('#AlbumPopup').jqmShow();
							
							return false;
						}
					);
				}
		);
	
*/

	});