/*!
 * 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 : 5,
  	frameColor: "#cecece",
  	frameWidth: 1,
  	re : /thumbs\//, 
  	replace : '',  
  	debug : false,
  	overlayBgColor : '#000',
    overlayOpacity:0.8,
    containerBorderSize: 10, 
    containerResizeSpeed : 400,
  	loaderContent: "",  // plain text or an image tag eg.: "<img src='yoursite.com/spinner.gif' />"
  	lightbox: false,
	highResImg:"",
	_thumbImgURL: "", 
	_viewerWidth:600, 
    _viewerHeight:300,
  	zoomIcon : "", // icon url, if not empty shown on the right-top corner of the image,
	_zoomEnable:true  
	}, settings);
	selfZoom = this;
	

	return this.each(function(){ 
	   var swapped = false;  
	  
	   window.mouseDownOnPexImage = false;
	   
		var $div = jQuery(this).css({width: settings._viewerWidth, height: settings._viewerHeight, overflow:'hidden'}).addClass("minizoompan");  
 
		var $plus = jQuery('<div class="ui-icon ui-icon-circle-plus gzoombuttonplus">&nbsp;</div>').insertBefore($div);  
		var $slider = jQuery('<div class="gzoomSlider"></div>').insertBefore($div).css({ width:'4px'}); 
		var $minus = jQuery('<div class="ui-icon ui-icon-circle-minus gzoombuttonminus">&nbsp;</div>').insertBefore($div);
		
	//	var $reset = jQuery('<div class="ui-icon ui-icon-reset gzoombuttonreset">&nbsp;</div>').insertBefore($div); 
		
	    $div.append('<img id="thumbImage" src="'  + settings.thumbImgURL  + '" style="display:none;" mousedown="if (event.preventDefault) { event.preventDefault(); }" ondragstart="return false;"/>'); 
 
		var $highResImage = jQuery('<img id="highResImage" src="'+ settings.highResImg + '" mousedown="if (event.preventDefault) { event.preventDefault(); }" ondragstart="return false;"/>').insertBefore(jQuery("#thumbImage")); 
		
	 
		showController(false);
		//$div.wrap('<div class="gzoomwrap"></div>').css({ width:settings._viewerWidth });
		
		var ig = $div.children().css({position: "relative"});
   
		
		jQuery("#thumbImage").load(function() {
 			 loadLargeImage(); 
		});
		
		  $("#highResImage").load(function() {
		 	 activateZoom();
		  });
		   
		
		$("#highResImage").error(function(){ 		
		 	disableZoom();
			
		});
	 
		//$("#zoomContainer").mousedown(function(evt){ window.mouseDownOnPexImage = true;});
		//$(document).mouseup(function(){if(window.mouseDownOnPexImage) window.mouseDownOnPexImage = false;});
		 
		jQuery("<span class='pexImageloader'>"+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'}); 
		}
		
		
		
		$plus.click(function() { 
		  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);
		});
		
		//$reset.click(function() {
		  //$slider.slider('value', 0);
		//});
		
		
		
		$slider.slider({value:0,
		            		min: 0,
		            		max: 100,
							orientation: 'vertical',
		            		step: settings.step, 
                    change: function(event, ui) { 
                    	if(!settings._zoomEnable)return false;
						if(!swapped) { 
								swapImage(true);
					   		    swapped = true;
						}
	                     
					 
                      val = ui.value;
  					  if(val == 0) { 
						 if(swapped) { 
						  swapImage(false); 
						  swapped = false;
						}
					  
					  }
                      newWidth = settings.sW+((settings.lW-settings.sW)*val)/100;
                      newHeight = settings.sH+((settings.lH-settings.sH)*val)/100;
                      ig_pos = ig.position();

                      if(settings.debug && typeof(console) != 'undefined') {
                        console.log('new dimensions:'+newWidth+'x'+newHeight);
                      }
                      
                      deltaWidth = ig.width()-settings.sW;
                      leftPos = Math.abs(ig_pos.left);
                      leftFactor = leftPos/deltaWidth;
                      newDeltaWidth = newWidth-settings.sW;
                      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; 
					  
					  if(newWidth <=  settings._viewerWidth) { 
					   	newLeft = (settings._viewerWidth - newWidth)/2;
					  }
					  
					  if(newHeight <=  settings._viewerHeight) { 
					    newTop = (settings._viewerHeight - newHeight)/2 ;
					  }
					  
              		  ig.css({ width: newWidth, height: newHeight, left:newLeft, top:newTop});
				 
                    }
               		});
		
		function showController(blnState) { 
			if(blnState){ 
				$(".gzoombuttonplus").show() 
				$slider.show()   
				$(".gzoombuttonminus").show()  
				//$(".gzoombuttonreset").show() 
				$(".pexImageloader").hide(); 
			}else { 
				$(".gzoombuttonplus").hide() 
				$slider.hide()   
				$(".gzoombuttonminus").hide()  
				//$(".gzoombuttonreset").hide()  
			} 
			 
		}
		
		function swapImage(blnShowHigh){ 
			if(blnShowHigh){ 
				$div.children("#thumbImage").hide();
				$div.children("#highResImage").show(); 
			}else { 
				$div.children("#thumbImage").show();
				$div.children("#highResImage").hide(); 
			}
		}
		
	 
		
		function loadLargeImage(){  
			//if (! $.browser.msie ) {  
			//  settings.sW = $("#thumbImage").attr("width");
			  //settings.sH = $("#thumbImage").attr("height");  
			 
			//}else { 
			  settings.sW = $("#thumbImage").width();
			  settings.sH = $("#thumbImage").height(); 
		//	}
		   
		  if(settings.sW > 0) {  
				if(settings._viewerWidth < settings.sW) {   
				 $('#thumbImage').css({
					width: settings._viewerWidth,
					height: (settings.sH / settings.sW) * settings._viewerWidth  
				});
				settings.sW =  settings._viewerWidth;
				settings.sH  =   (settings.sH / settings.sW) * settings._viewerWidth ;
				} 
			  $("#thumbImage").css("left", (settings._viewerWidth - settings.sW)/2);
			  centerImage( $("#thumbImage"), settings.sW, settings.sH)
			  $("#thumbImage").fadeIn(250);
			  if(settings._zoomEnable)$("span.pexImageloader").fadeIn(250);
		  }else {  
			setTimeout(loadLargeImage, 100);
			settings.thumbCheck++
			 
		  }
		 // $("#highResImage").attr("src"); 
		  
		}
		
		
	
		
		
		
		function centerImage(img, sw, sh){ 
			 $(img).css("left", (settings._viewerWidth - sw)/2);
			 $(img).css("top", (settings._viewerHeight - sh)/2);
		}
		 
		 function inMoveable(imgx) {
		 
		 	return ($(imgx).width() >  settings._viewerWidth  || $(imgx).height() >  settings._viewerHeight)  
		 }
		 
	
		function activateZoom() {   
			
			//if (! $.browser.msie ) {  
				//settings.lW = $("#highResImage").attr("width");
				//settings.lH = $("#highResImage").attr("height");   
			//}else { 
			  	settings.lW = $("#highResImage").width();
				settings.lH = $("#highResImage").height();  
			//}
			 
		  if(settings.lW > 0) {  
			 settings._zoomEnable = true; 
			$("span.pexImageloader").fadeOut();
			showController(true); 
 
		  }else {  
				setTimeout(activateZoom, 400); 
		  }
		  
		  
			
			 
		}
		
		function disableZoom(){    
			 
			 $("span.pexImageloader").hide();
			 showController(false);
			 settings._zoomEnable = false;
		}
		
		
		
		$div.mousemove(function(e){ 
			//if(!window.mouseDownOnPexImage) return false;
			var ix = ig[1]; 
			if(swapped) ix= ig[0]; 
		    if(inMoveable(ix)){ 
				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(settings.debug && typeof(console) != 'undefined') {
				  console.log('left:'+leftPan+'|Top:'+topPan);
				} 
				ig.css({left: leftPan, top: topPan});
			}else {  
				centerImage(ix, $(ix).width,  $(ix).height);
			}
		});    
		
		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(settings.re, settings.replace);
		  } else {
				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);
	  };
		
	});	
	
};

 
(function( window, document, $, undefined ){
	
if(typeof window.Philips == "undefined") {
	window.Philips = {};
}
var Philips = window.Philips;

/** @namespace */
Philips.PEX = Philips.PEX || {};

var PEX = Philips.PEX; 

PEX.imageZoom = function (options) { 
	 
	this._def = {	 
		_viewerWidth:958, 
		_viewerHeight:384,
		_fullImage:'',
	    _thumbImage:'',
		_debug:true,
		_baseHtml:'',
		_controlDiv:options._controlDiv
	} 
   
	this._def._baseHtml  = $( this._def._controlDiv).html();
 
	 
	
} 
 
PEX.imageZoom.prototype.launch = function(options){
	//$( this._def._controlDiv).html(this._def._baseHtml); 
	
	this._options = $.extend({}, this._def, options);
//	$(".imageviewer .gzoombuttonreset").remove();
	$(".imageviewer .gzoombuttonplus").remove();
	$(".imageviewer .gzoomSlider").remove();
	$(".imageviewer .gzoombuttonminus").remove();
//	console.log(this._def._baseHtml);

  this._options._viewerDiv.empty();
 //   $( this._def._controlDiv).html( this._def._baseHtml);
	if (typeof this._options._viewerDiv == "undefined" || this._options._viewerDiv == null) {
		this._log("viewerDiv should be a jQuery reference to a div(" + (typeof this._options._viewerDiv) + " " + this._options._viewerDiv + ")");
		return;
	}
	
	
	
	if(this._options._fullImage ==  '' ||  this._options._thumbImage ==  '' ) { 
		this._log("Image urls are not defined");
		return;
	}
	   
	 this._options._viewerDiv.gzoom({ 
			_viewerWidth:this._options._viewerWidth, 
			_viewerHeight:this._options._viewerHeight,
			highResImg:this._options._fullImage,
			thumbImgURL:this._options._thumbImage
	});
	
	
		
 
}


PEX.imageZoom.prototype._LargeImageLoadError = function(){ 
this._log("image is not loading")
}
 

PEX.imageZoom.prototype._log = function(strMsg){ 
	if(this._debug)console.log(strMsg);
}

})(window, document, jQuery);