/*
 * .myClipZoom - jQuery Image Zoom
 *
 * Copyright (c) 2010 Dennis Jørgensen (http://www.denjo.de/) -
 * for myClip Studios by Voss & Sonneberg GmbH (http://www.myclip.de/)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * Version: 1.0.1
 * Updated: 2011-03-17
 *
 * Requires jQuery 1.3.x or higher
 */

$.fn.onedetailimgzoom = function(options) {

	var defaults={ zoomCloseText:"Click To Close" };
	mobileDevice=(/iphone|ipod|ipad|android/i).test(navigator.userAgent);
	return this.each(function(){
		var config=$.extend(defaults,options),t=$(this),pool=$(document),width=t.attr('width'),height=t.attr('height'),src=t.attr('src'),classes=t.attr('class')
		var $body=$("body");
		var $zoomDiv=$("<div>").addClass("onedetailimgzoomDiv");
		var $zoomClose=$('<span>').addClass("onedetailimgzoomClose").html(config.zoomCloseText);
		var $zoomCloseButton=$('<span>').addClass("onedetailimgzoomCloseButton");
		var zoomDivWidth=$(window).width();
		var zoomDivHeight=$(window).height();
		var zoomImgWidth=0;
		var zoomImgHeight=0;
		var startX=0;
		var startY=0;
		var endX=0;
		var endY=0;
		var distX=0;
		var distY=0;
		var sumX=0;
		var sumY=0;
		var topPan=0;
		var leftPan=0;
		var overflowY=0;
		var overflowX=0;

		t.click(function(e){
			$("#page").hide(); // <--
			$body.css("overflow","hidden").append($zoomDiv);
			$zoomDiv.fadeIn();
			var $imgSrc=$(this).attr("href");
			var img=new Image();
			
			var loadinggif = new Image();
			$(loadinggif).attr("src", "out/picard/src/img/ajax-loader.gif");
			$(loadinggif).addClass("zoomloadinggif").hide();
			$("body").append(loadinggif);
			$(loadinggif).fadeIn();
			$(loadinggif).css({"left": (zoomDivWidth / 2 - 64) + "px", "top": (zoomDivHeight / 2 - 7) + "px"});

			

			$(img).load(function(){
				$(loadinggif).fadeOut();

				$zoomImg=$(this);
				zoomImgWidth=this.width;
				zoomImgHeight=this.height;
				$zoomImg.attr("width",this.width).attr("height",this.height);
				overflowY=zoomDivHeight-zoomImgHeight;
				overflowX=zoomDivWidth-zoomImgWidth;
				$zoomDiv.append($zoomImg.fadeIn());
				moveZoomImg(e.pageX,e.pageY);				
			}).error(function(){
				alert("error loading zoom image!")}).attr("src",$imgSrc).hide();
			return false;
		});
		if(!mobileDevice){
			$zoomDiv.append($zoomClose);
			$zoomDiv.mousemove(function(event){
				moveZoomImg(event.pageX,event.pageY);
			});
			$zoomDiv.click(function(){
				closeDivZoom();
			});
			$(document).keydown(function(e) {
		  	  // ESCAPE key pressed
		  	  if (e.keyCode == 27) {
		        closeDivZoom();
		      }
			});
		}else{
			$zoomDiv.append($zoomCloseButton);
			$zoomDiv.bind("touchstart",function(event){
				startX=event.originalEvent.touches[0].pageX;
				startY=event.originalEvent.touches[0].pageY;
				sumX=leftPan;
				sumY=topPan;
			});
			$zoomDiv.bind("touchmove",function(event){
				event.preventDefault();
				moveZoomImgTouch(event.originalEvent.touches[0].pageX,event.originalEvent.touches[0].pageY);
			});
			$zoomDiv.bind("touchend",function(event){
			event.preventDefault();
			$(this).find("img").css({
				left:leftPan,top:topPan});
			});
			$zoomCloseButton.click(function(){
				closeDivZoom();
			});			
		};

		var moveZoomImg=function(x,y){
			mx=x;
			my=y-$(window).scrollTop();
			var topPan=my*(zoomDivHeight-zoomImgHeight)/zoomDivHeight;
			if(zoomDivWidth<zoomImgWidth){
				var leftPan=mx*(zoomDivWidth-zoomImgWidth)/zoomDivWidth;
			}else{
				var leftPan=(zoomDivWidth-zoomImgWidth)/2;
			}
			$zoomDiv.find("img").css({left:leftPan, top:topPan});
			$zoomClose.css({top:(my+10)+"px",left:(mx+10)+"px"});
		};
		var closeDivZoom=function(){
			$("#page").show(); // <--
			$zoomDiv.fadeOut(function(){
				$zoomDiv.html("").detach();
				$body.css("overflow","auto")
			});
		};
		var moveZoomImgTouch=function(x,y){
			endX=x;
			endY=y;
			distX=startX-endX;
			distY=startY-endY;
			topPan=sumY-distY;
			leftPan=sumX-distX;
			var tensionX=0;
			var tensionY=0;
			if(topPan<=overflowY){
				tensionY=topPan-overflowY;
				topPan=overflowY;
			}else if(topPan>=0){
				tensionY=topPan;
				topPan=0;
			};
			if(leftPan<=overflowX){
				tensionX=leftPan-overflowX;
				leftPan=overflowX;
			}else if(leftPan>=0){
				tensionX=leftPan;
				leftPan=0;
			};
			var maxOvershoot=45/(Math.PI/2);
			$zoomDiv.find("img").css({left:leftPan+Math.atan(tensionX/maxOvershoot)*maxOvershoot,top:topPan+Math.atan(tensionY/maxOvershoot)*maxOvershoot});
		};
	});
};