(function($) {

	$.fn.albumDialog = function(options) {
	
    	return this.each(function() {
			$.albumDialog(this, options);
    	});
	};
	
    $.albumDialog = function(container, options) {
    	// container is anchor.
    	
		// Default properties.
		var defaults = {
			imageWidth:  450,
			imageHeight: 300,
			labelPrevious: 'vorige',
			labelNext:     'volgende',
			speed:         'fast',
			current:       0
		}; 
		
		// Extend properties with defaults.
		var properties = $.extend(defaults, options);
		
		// Add click handler to image.
		$(container).click(function () {
			// Reset current property.
			properties.current = 0;

			// Create div album dialog.
            $(this).closest('div')
                .after(
                    $('<div id="ui-album-dialog"></div>')
                        .css('overflow', 'hidden')
                        .append('<div id="ui-album-dialog-waiting">Album wordt geladen...</div>')
                        .append($('<div id="ui-album-dialog-panel"></div>')
            	    	    .css('width', properties.imageWidth)
	    		            .css('height', properties.imageWidth)
	    		            .css('padding', '5px')
                            .css('border', '1px solid #eeeeee')
                            .hide())
                        .append($('<div id="ui-album-dialog-buttons"></div>')
                        	.hide())
                );
			
            // Create the dialog and show it.
            $('div#ui-album-dialog').dialog({ modal:true, width:properties.imageWidth + 40, height:properties.imageWidth + 80,
            	close: function(event, ui) { $('div#ui-album-dialog').remove() } });
            $('div#ui-album-dialog').dialog('option', 'buttons', { 'sluiten': function() { $(this).dialog('close') } });
            $('div#ui-album-dialog').dialog('option', 'title', $(this).attr('title'));
	        $('div#ui-album-dialog').dialog('open');
            
            // Load the images content into the panel.
            $('div#ui-album-dialog-panel').load($(this).attr('href'), function() { 

				var elements = $('div#ui-album-dialog-panel li');
				
				// Add next link.
				$('div#ui-album-dialog-buttons').append(
					$('<p></p>').css('float', 'right')
						.html($('<a class="ui-album-dialog-next"></a>')
							.css('cursor', 'pointer')
							.html(properties.labelNext)
							.click(function() { $.albumDialog.next(elements, properties); }
					)));
				
				// Add previous link.
				$('div#ui-album-dialog-buttons').append(
					$('<p></p>').css('float', 'left')
						.html($('<a class="ui-album-dialog-prev"></a>')
							.css('cursor', 'pointer')
						    .hide()
						    .html(properties.labelPrevious)
							.click(function() { $.albumDialog.previous(elements, properties); }
					)));
				
		        if (elements.length > 1) {
		        	// Style the ul element.
		            $('div#ui-album-dialog-panel ul')
		            	.css('position', 'relative')
		            	.css('height', 'auto')
		            	.css('margin', '0px')
		            	.css('padding', '0px')
		            	.css('list-style', 'none')
		            	.addClass('ui-slide-show');
		            
		            // Style all il elements.
		            for (var i = 0; i < elements.length; i++) {
		                $(elements[i])
		                	.css('z-index', String(elements.length - i))
		                	.css('position', 'absolute')
		                	.hide();
		                
		                // Assign width, height and margins to images.
		                $(elements[i]).children("img[class!='portrait']")
		                	.css('width', properties.imageWidth)
		                	//.css('height', properties.imageHeight)
		                	.css('margin-top', (properties.imageWidth - properties.imageHeight) / 2);
		                $(elements[i]).children("img[class='portrait']")
			            	//.css('height', properties.imageWidth)
			            	.css('width', properties.imageHeight)
			            	.css('margin-left', (properties.imageWidth - properties.imageHeight) / 2);
		            };
		            
		            $(elements[properties.current]).show();
		        }

		        $('div#ui-album-dialog-waiting').hide();
		        $('div#ui-album-dialog-panel').show();
		        $('div#ui-album-dialog-buttons').show();
            });
            
            return false;
        });
    };

    $.albumDialog.next = function(elements, properties) {
		$(elements[properties.current]).fadeOut(properties.speed);
		
		if (properties.current < elements.length - 1) {
			properties.current += 1;
			$(elements[properties.current]).fadeIn(properties.speed);
		}
		if (properties.current == elements.length - 1) {
			$("a.ui-album-dialog-next").hide();
		}
		if (properties.current > 0) {
			$("a.ui-album-dialog-prev").show();
		}
	};
	
	$.albumDialog.previous = function(elements, properties) {
		$(elements[properties.current]).fadeOut(properties.speed);
		
		if (properties.current > 0) {
			properties.current -= 1;
			$(elements[properties.current]).fadeIn(properties.speed);
		}
		if (properties.current == 0) {
			$("a.ui-album-dialog-prev").hide();
		}
		if (properties.current < elements.length - 1) {
			$("a.ui-album-dialog-next").show();
		}
	};
	
})(jQuery);