(function($) {

	$.fn.imageDialog = function(options) {
	
    	return this.each(function() {
			$.imageDialog(this, options);
    	});
	};
	
    $.imageDialog = function(container, options) {
		// Container is the source img.
    	
		// Default properties.
		var defaults = {
			imageLargeWidth:  450,
			imageLargeHeight: 300,
			imageSmallWidth:  210,
			imageSmallHeight:  140,
			defaultTitle: 'Foto',
			closeButtonText: 'Sluiten'
		}; 
		
		// Extend properties with defaults.
		var properties = $.extend(defaults, options);
		
		// Extend container image.
		$(container).css('cursor', 'pointer');
        
		// Resize it.
		if ($.imageDialog.isLandscape(container)) {
			$(container).css('width', properties.imageSmallWidth);
			$(container).css('height', properties.imageSmallHeight);
		} else {
			$(container).css('width', properties.imageSmallHeight);
			$(container).css('height', properties.imageSmallWidth);
		}			
		
		// Add click handler to image.
		$(container).click(function () {

			// Set image source.
            var img = $('<img />').attr('src', $(this).attr('src'));

            // Resize image and add margins.
            if ($.imageDialog.isLandscape(this)) {
                $(img).css('width', properties.imageLargeWidth)
                    .css('height', properties.imageLargeHeight)
                    .css('margin-top', (properties.imageLargeWidth - properties.imageLargeHeight) / 2)
                    .css('margin-bottom', (properties.imageLargeWidth - properties.imageLargeHeight) / 2);
            } else {
                $(img).css('height', properties.imageLargeWidth)
                    .css('width', properties.imageLargeHeight)
                    .css('margin-left', (properties.imageLargeWidth - properties.imageLargeHeight) / 2)
                    .css('margin-right', (properties.imageLargeWidth - properties.imageLargeHeight) / 2);
            }

            // Retrieve dialog title from image.
            var title = $(this).attr('title');
            
            if (title == null || title.length == 0) {      		
            	title = properties.defaultTitle;
            }
            
            $(this).closest('div').after(
                $('<div id="ui-image-dialog"></div>')
                    .css('margin', '5px')
                    .css('border', '1px solid #eeeeee')
                    .append($(img)));
            
            $('div#ui-image-dialog').dialog({ autoOpen:false, modal:true,
            	width:properties.imageLargeWidth + 40,
            	close: function(event, ui) { $('div#ui-image-dialog').remove() } });
            $('div#ui-image-dialog').dialog('option', 'buttons', { 'sluiten': function() { $(this).dialog('close'); } });
            $('div#ui-image-dialog').dialog('option', 'title', title);
            $('div#ui-image-dialog').dialog('open');
        });
    };

    $.imageDialog.isLandscape = function(container) {
    	return !$(container).hasClass('portrait');
    }
    
})(jQuery);