/*!
 * jQuery gzoom 0.1
 * 2009 Giovanni Battista Lenoci <gianiaz@gianiaz.net>
 * 
 * Based on minizoomPan plugin of Gian Carlo Mingati Version: 1.0 (18-JUNE-2009) http://www.gcmingati.net/wordpress/wp-content/lab/jquery/minizoompan/
 * Inspiration from jquery lightbox plugin http://leandrovieira.com/projects/jquery/lightbox/
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * Requires:
 * jQuery v1.3.2 or later
 * jQuery ui.core.js v.1.7.1
 * jQuery ui.slider.js v.1.7.1
 * 
 */
jQuery.fn.gzoom = function(settings) {
	settings = jQuery.extend({
  	sW: 10, // small image width
  	sH: 10, // small image height
  	lW: 20, // large image width
  	lH: 20, // large image height
  	step : 8,
  	/*frameColor: "#cecece",*/
  	frameWidth: 1,
  	re : /thumbs\//, 
  	replace : '',  
  	debug : false,
  	overlayBgColor : '#000',
    overlayOpacity:0.8,
    containerBorderSize: 10, 
    containerResizeSpeed : 400,
  	loaderContent: "<img src='http://www.minitissue.nl/nl/images/spinner.gif' alt='Bezig met laden' />",  // plain text or an image tag eg
  	lightbox: false,
  	zoomIcon : "" // icon url, if not empty shown on the right-top corner of the image
	}, settings);

	return this.each(function(){
	  
		var swapped = false;
		var $this=this;
		var $zdiv = $('.imgzoom');
		var $div = jQuery($zdiv).css({width: settings.sW+'px', height: settings.sH+'px', overflow:'hidden'}).addClass("minizoompan");
			$div.wrap('<div class="gzoomwrap"></div>').css({ width:settings.sW });
		var ig = $div.children().css({position: "relative"});
		

		jQuery(window).bind("load", function() {
  			//ig.width(settings.sW); 
  			//ig.height(settings.sH);
			vertical_middle();
			
			// not select
			var _preventDefault = function(evt) { evt.preventDefault(); };
			$($this).bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);
			
			// no right click
			$($this).bind("contextmenu",function(e){
				return false;
			});
			
		});
		
		
		jQuery("<span class='loader'>"+settings.loaderContent+"</span>").insertBefore(ig);
		if(settings.zoomIcon != '' && settings.lightbox) {
			var $zoom = jQuery('<img class="zoomIcon" src="'+settings.zoomIcon+'" alt="view larger" />').insertBefore(ig);
		  	$zoom.load(function() {
  		  		$zoom.css({'left':(settings.sW - $zoom.width())+'px'}).show();
		  	});
		  	$zoom.click(function() {
		    	drawIface();
		  	});
		} else if(settings.lightbox) {
			$div.click(function() {
			  	drawIface();
			});
			$div.css({'cursor':'pointer'}); 
		}
		
		var $sliderbox = $('#sliderbox');
		var $plus = jQuery('<div class="icon-plus gzoombutton">&nbsp;</div>').insertAfter($sliderbox);
		var $slider = jQuery('<div class="gzoomSlider"></div>').insertAfter($sliderbox).css({ width:($('.product-img-zoom').width()-50)+'px'});
		var $minus = jQuery('<div class="icon-minus gzoombutton">&nbsp;</div>').insertAfter($sliderbox);
		
		$plus.click(function() {
			var valore = parseInt($slider.slider('value')) + settings.step;
		  	$slider.slider('value', valore);
		});
		
		$minus.click(function() {
		  	valore = parseInt($slider.slider('value')) - settings.step;
		  	$slider.slider('value', valore);
		});
		
		
		$slider.slider({
				value:0,
				min: 0,
				max: 100,
				step: settings.step, 
			change: function(event, ui) { 
				if(swapped != ig.attr("id")) {
					$div.children("span.loader").fadeIn(250);
					var hiSrc = ig.attr("src").replace(/w225-h225/, 'w1000-h1000');
					swapImage(ig, hiSrc, false);
					swapped = ig.attr("id");
				}
					
				val = ui.value;
	
				//newWidth = 225+((settings.lW-settings.sW)*val)/100;
				//newHeight = 225+((settings.lH-settings.sH)*val)/100;
				ratio=settings.lH/225;
				newWidth = (settings.lW/ratio)+((settings.lW-settings.sW)*val)/100;
				newHeight = (settings.lH/ratio)+((settings.lH-settings.sH)*val)/100;
				//ig_pos = val==0?0:ig.position();
				get_ig_pos = ig.position();
				ig_pos = val==0?0:get_ig_pos;
				//ig_pos=0;
					
				if(settings.debug && typeof(console) != 'undefined') {
					console.log('new dimensions:'+newWidth+'x'+newHeight);
				}
			  
				deltaWidth = ig.width()-settings.lW;
				leftPos = Math.abs(ig_pos.left);
				leftFactor = leftPos/deltaWidth;
				newDeltaWidth = newWidth-settings.lW;
				newLeft = (leftFactor*newDeltaWidth)*-1;
			  
				deltaHeight = ig.height()-settings.sH;
				topPos = Math.abs(ig_pos.top);
				topFactor = topPos/deltaHeight;
				newDeltaHeight = newHeight-settings.sH;
				newTop = (topFactor*newDeltaHeight)*-1;
				
				//alert(newLeft);
				
				ig.css({width: newWidth, height: newHeight, left: (newLeft>0?newLeft:0), top: (newTop?newTop:get_ig_pos.top)});
				
				// vertical align
				//if(val==0) { vertical_middle(); }
				vertical_middle();
				//newTop= newTop?newTop:(($('.product-img-zoom').height()-ig.height())/2);
				
				//var $div = .css({width: settings.sW, height: settings.sH, overflow:'hidden'}).addClass("minizoompan");
				
			}
		});
		$('<br style="clear:both" />').insertAfter($plus);
		
		
		function swapImage(param, uri, resize){
			param.load(function () {
				$div.children("span.loader").fadeOut(250);
			}).error(function (){
  			alert("Image does not exist or its SRC is not correct.");
			}).attr('src', uri);
			if(resize==true) {
				$slider.slider('value',0);	
			}
		}
		/*
			image swap
		*/
		var $thumb = $('.product-img-thumbs img');
		$thumb.click(function() {			  	
	       $div.children("span.loader").fadeIn(250);
		   var hisrc = this.src.replace('w'+this.width+'-h'+this.height, 'w'+settings.lW+'-h'+settings.lH);
		   swapImage(ig, hisrc, true);
		});
		
		
		// vertical align to middle
		function vertical_middle() {
			var igtop = ($('.product-img-zoom').height()-ig.height())/2;
			ig.css({top: igtop+'px'});
		}
		
			
				  
			//mouse up

				
			$zdiv.mousemove(function(e){				
				if($slider.slider('value')>=5) {
					var divWidth = $div.width();
					var divHeight = $div.height();
					var igW = ig.width();
					var igH = ig.height();
					var dOs = $div.offset();
					var leftPan = (e.pageX - dOs.left) * (divWidth - igW) / (divWidth+settings.frameWidth*2);
					var topPan = (e.pageY - dOs.top) * (divHeight - igH) / (divHeight+settings.frameWidth*2);
					if(igW > divWidth && igH > divHeight) { ig.css({left: leftPan, top: topPan}); } 
					else if(igW > divWidth) { ig.css({left: leftPan}); }
					else if(igH > divHeight) { ig.css({top: topPan}); }
				}
			});
									
						
						/*
						var clicked = false;
						var start_x;
						var start_y;		
						
						
						
						
						
						//mouse down
						ig.mousedown(function(e){
							
							//hide the image & add as bg image
							//imgx = ig.width();
							//imgy = ig.height();
							
							
							
							ig.css('cursor', 'move');
							clicked = true;
							start_x = Math.round(e.pageX - ig.eq(0).offset().left);
							start_y = Math.round(e.pageY - ig.eq(0).offset().top);
							
							
							//mouse up
							ig.mouseup(function(e){
								ig.css('cursor', 'pointer');
								clicked = false;
							});
							
							
						});
						
						//mouse move
						ig.mousemove(function(e){
							if(clicked){ //as we only want this to work while they have clicked	

								
								leftpos = 0;
								toppos = 0;
								

								
								
								
								var mouse_x = Math.round(e.pageX - $div.eq(0).offset().left) - start_x;
								var mouse_y = Math.round(e.pageY - $div.eq(0).offset().top) - start_y;					
								var x = leftpos + (mouse_x);
								var y = toppos + (mouse_y);					
								//start_x = Math.round(e.pageX - ig.eq(0).offset().left);
								//start_y = Math.round(e.pageY - ig.eq(0).offset().top);	
												
								ig.css({left: x, top: y})			
								
							}
						});	
					
					
				
			
		//});*/
			
			/*
			var clicked = false;
			var start_x;
			var start_y;	
			var drag_div = this;
			
			
			//mouse up
			$(this).mouseup(function(e){
				$(this).css('cursor', 'default');
				clicked = false;
			});
			
			
			
			//mouse down
			$(this).mousedown(function(e){
				$(this).css('cursor', 'move');
				clicked = true;
				start_x = Math.round(e.pageX - $(this).eq(0).offset().left);
				start_y = Math.round(e.pageY - $(this).eq(0).offset().top);
			});
		
		
		
			//mouse move
			$(this).mousemove(function(e){
				if(clicked){ //as we only want this to work while they have clicked	


					
					var x = Math.round(e.pageX - $(this).eq(0).offset().left) - start_x;
					var y = Math.round(e.pageY - $(this).eq(0).offset().top) - start_y;					
			

									
					ig.css({left: x, top: y})
					
					
				}
			});
		*/

		
		if(typeof($.event.special.mousewheel) != 'undefined') {
			ig.mousewheel(function(event, delta) {
	      if (delta > 0) {
	        valore = parseInt($slider.slider('value')) + settings.step;
	  		  $slider.slider('value', valore);
	  		} else if (delta < 0) {
	  		  valore = parseInt($slider.slider('value')) - settings.step;
		  	  $slider.slider('value', valore);
		  	}
	      return false; // prevent default
	    });
	  }
		
	function resize_fx(intImageWidth,intImageHeight) {
		
      if(settings.debug && typeof(console) != 'undefined') {
        console.log('resize_fx('+intImageWidth+','+intImageHeight+')');
      }

			if(intImageWidth > ($(window).width()*80/100)) {
  			imgWidth = $(window).width()*80/100;
  			intImageHeight = (imgWidth/intImageWidth)*intImageHeight;
  			$('#zoomedimage').css({'width': imgWidth+'px', 'height':intImageHeight});
	      if(settings.debug && typeof(console) != 'undefined') {
	        console.log('Img dimensions 80% horizontal:'+imgWidth+'x'+intImageHeight);
	      }
			} else {
  			imgWidth = intImageWidth;
			}
			
			if(intImageHeight > $(window).height()*80/100) {
			  imgHeight = $(window).height()*80/100;
			  imgWidth = (imgHeight/intImageHeight)*imgWidth;
  			$('#zoomedimage').css({'width': imgWidth+'px', 'height':imgHeight});
	      if(settings.debug && typeof(console) != 'undefined') {
	        console.log('Img dimensions 80% vertical:'+imgWidth+'x'+imgHeight);
	      }
			} else {
			  imgHeight = intImageHeight;
			}
			
      if(settings.debug && typeof(console) != 'undefined') {
        console.log('Img dimensions:'+imgWidth+'x'+imgHeight);
      }
			
			// Get current width and height
			var intCurrentWidth = $('#imagebox').width();
			var intCurrentHeight = $('#imagebox').height();
			// Get the width and height of the selected image plus the padding
			var intWidth = (imgWidth + (settings.containerBorderSize * 2)); // Plus the imageŽs width and the left and right padding value
			var intHeight = (imgHeight + (settings.containerBorderSize * 2)); // Plus the imageŽs height and the left and right padding value

    
			
			// Diferences
			var intDiffW = intCurrentWidth - intWidth;
			var intDiffH = intCurrentHeight - intHeight;
			// Perfomance the effect
			$('#imagebox').animate({ width: intWidth, height: intHeight },settings.containerResizeSpeed,function() { _show_image(); });
			if ( ( intDiffW == 0 ) && ( intDiffH == 0 ) ) {
				if ( $.browser.msie ) {
					___pause(250);
				} else {
					___pause(100);	
				}
			} 
			$('#lboximgdatacontainer').css({ width: imgWidth });
		};
		

		function drawIface() {
		
			$('body').append('<div id="gzoomoverlay"></div><div id="gzoomlbox"><div id="imagebox"><div id="gzoom-cont-img"><img id="zoomedimage"><div id="gzoomloading"><a href="#" id="gzoomloadinglink"><img src="images/loading.gif"></a></div></div></div><div id="gzoomlbox-con-imgdata"><div id="lboximgdatacontainer"><div id="gzoomlbox-image-details"><span id="gzoom-image-caption"></span></div></div></div></div>');	
		
			$('#gzoomoverlay').css({
				backgroundColor:	settings.overlayBgColor,
				opacity:			settings.overlayOpacity,
				width:				$(window).width(),
				height:				$(document).height()
			}).fadeIn();
			
			// Calculate top and left offset for the gzoomlbox div object and show it
			$('#gzoomlbox').css({
				top:	$(window).scrollTop() + ($(window).height() / 10),
				left:	$(window).scrollLeft()
			}).show();
			
			$('#gzoomoverlay,#gzoomlbox').click(function() {
				close();									
			});
			// If window was resized, calculate the new overlay dimensions
			$(window).resize(function() {
				$('#gzoomoverlay').css({
					width:		$(window).width(),
					height:		$(window).height()
				});
				// Calculate top and left offset for the jquery-lightbox div object and show it
				$('#gzoomlbox').css({
					top:	$(window).scrollTop() + ($(window).height() / 10),
					left:	$(window).scrollLeft()
				});
			});
			
			_set_image_to_view();
		}

		function _set_image_to_view() { // show the loading
			// Show the loading
			$('#gzoomlbox-con-imgdata').hide();
			$('#zoomedimage').hide();
			$('#gzoomloading').show();
			// Image preload process
			var objImagePreloader = new Image();
      if(!swapped) {
				var hiSrc = ig.attr("src").replace('w'+ig.width()+'-h'+ig.height(), 'w1000-h1000');
				//var hiSrc = ig.attr("src").replace(settings.re, settings.replace);
		  } else {
				var hiSrc = ig.attr("src").replace('w'+ig.width()+'-h'+ig.height(), 'w1000-h1000');
				//var hiSrc = ig.attr("src").replace(settings.re, settings.replace);
		  }
			objImagePreloader.onload = function() {
				$('#zoomedimage').attr('src',hiSrc);
				resize_fx(objImagePreloader.width,objImagePreloader.height);
			};
		  objImagePreloader.src = hiSrc;
		};

		function _show_image() {
 			$('#gzoomloading').hide();
			$('#zoomedimage').fadeIn(function() {
				_show_image_data();
			});
		};

		/**
		 * Show the image information
		 *
		 */
		function _show_image_data() {
			$('#lightbox-loading').hide();
      $('#gzoom-image-caption').html(ig.attr('title'));
			$('#gzoomlbox-con-imgdata').slideDown('fast');
		}
		
		function close() {
			$('#gzoomlbox').remove();
			$('#gzoomoverlay').fadeOut(function() { $('#gzoomoverlay').remove(); });
			$('embed, object, select').css({ 'visibility' : 'visible' });
		}

    function ___pause(ms) {
  		var date = new Date(); 
	  	curDate = null;
		  do { var curDate = new Date(); }
  		while ( curDate - date < ms);
	  };
		
	});	
	
};