/**
 * 
 * QuickLook jQuery plugin.
 * 
 */
(function($) {
	$.fn.quicklook = function(options) {	
			// set default values
			options = $.extend({
				effects			: 'fade', 				// show | fade | slide
				dataType		: 'inline', 			// inline | html
				source			: '#quicklook-source',	// id if dataType is inline
				resizable		: true,					// true | false
				draggable		: true, 				// true | false
				transparency	: 100, 
				opacity			: 0, 
				modalBgId		: 'modalBg', 
				modalWidth		: '415px',				// modal window width
				modalHeight		: '220px',				// modal window height
				modalClass		: 'quicklook',			// model window class name
				onbeforeload	: function(){}			// before display
			}, options || {});
		
			return this.each(
				function() {
					var $this = $(this);					
					$this.click(function() {
						$('div.quicklook').remove();
											
						/**
						 * Modal background
						 * - creation of modal if not existing
						 * - removal of background if user clicks on outside the modal window
						 **/
						if (options.opacity > 0 && $('#' + options.modalBgId).css('display')!='block') {
							$('body').append('<div id="' + options.modalBgId + '"></div>');
							$('#' + options.modalBgId)
								.css({
									'height': document.body.offsetHeight + 'px', 
									'opacity': options.opacity / 100
								})
								.click(function(){
									removeModal();
								});
						}
						
						
						/**
						 * Creating Modal window
						 */
						 
						// Get left and top position to make the modal window appear center on screen						
						var windowWidth 	= 0;
						var windowHeight 	= 0;
						
						
						// Creating the modal window						
						var this_box  = '';
						var attribute = '';
						var img_width = 0;
						var img_height= 0;
						
						if ($this.attr('id')!='') {						
							this_box  = '#' + $this.attr('id') + 'Dynamic';
							attribute = 'id="' + $this.attr('id') + 'Dynamic"';
							img_width = $('#' + $this.attr('class') + ' img').width();
							img_height= $('#' + $this.attr('class') + ' img').height();
						} else {
							this_box  = '.' + $this.attr('class') + 'Dynamic';
							attribute = 'class="' + $this.attr('class') + 'Dynamic"';
							img_width = $('.' + $this.attr('class') + ' img').width();
							img_height= $('.' + $this.attr('class') + ' img').height();
						}		
						
						// determine the position of the modal box
						var pos		= $this.offset();
						var screenY = $.browser.msie==true ? pos.top : (pos.top - img_height) - 12;
						
						// making sure left position does not exceed the width size
						var screenX = (pos.left + parseInt(options.modalWidth)) > $('#wrapper').width() ? 
								       pos.left + img_width + 12 - parseInt(options.modalWidth) : pos.left;						
						
						// making sure there are no same window opened
						$(this_box).remove();
												
						$('body').append('<div '+ attribute +'></div>')
						$(this_box)							
							.addClass(options.modalClass)
							.css({
								'display'	: 'none', 
								'height'	: options.modalHeight, 
								'width'		: options.modalWidth, 
								'position'	: 'absolute', 
								'left'		: screenX + 'px', 
								'top'		: screenY + 'px', 
								'z-index'	: '100'
							});
						
						
						/**
						 * Applying Effects
						 */
						if (options.effects=='fade') {
							$(this_box).fadeIn();
						} else if (options.effects=='slide') {
							$(this_box).slideDown();
						} else {
							$(this_box).show();
						}
						
						
						/** 
						 * Apply Transparency on Modal window
						 */
						if (options.transparency < 100) {
							$(this_box).css('opacity', options.transparency/100);							
						}
						
						
						/**
						 * Load the source html
						 */
						if (options.dataType=='inline') {
							$(this_box).html($(options.source).html());
						} else if (options.dataType=='image') {
							$(this_box).html('<div class="quicklook-close"><a class="close-icon" href="#"><span>close</span></a></div><img src="' + this.href + '" height="380px" width="400px" />');
						} else {
							$(this_box).load(this.href);
						}
						 
						
						/**
						 * Apply Draggable Modal window 
						 */
						if (options.draggable) {
							$(this_box).draggable();						
						}
						
						/**
						 * Applying Resizable Modal window
						 */
						if (options.resizable) {
							$(this_box).resizable({ 
							    handles: "all",
							    transparent: true 
							});
						}					
						
						/**
						 * Apply events
						 */
					    if (options.onbeforeload) {
					    	options.onbeforeload();
					    }
					    
						return false;
					});
					
					
					// Close button
					$('body').click(function(e) {
				        var e = e || window.event;
				        var elem = e.target || e.srcElement;
				        if (elem.className.toLowerCase() == "close-icon") {
				        	removeModal();
				        	return false;		        	
				        }        
				    });
					
										
					removeModal = function() {
						$('#' + options.modalBgId).remove();	// remove the modal background
						$('.' + options.modalClass).remove();		
						$('div.quicklook').remove();
						$('div.quickcompare-style').remove();
					}
					
				}
				
			);			
	}
})(jQuery);