var zoomLevel = 8;
var zoomHeight = 700;
var zoomWidth = 950;
var zoomDisplay = false;
var zoomSrc;

var zip = '/images/zoom/';

function switchZoomLevel(dir){

	if(!zoomDisplay){return;}

	var levels = ["200px","250px","350px","500px","700px","950px","1250px","1600px","2000px","2500px","3200px","4000px","6000px"];

	var oldw = levels[zoomLevel].replace(/px/i,"");
	oldw = (oldw == "auto" || oldw == "") ? 2000 : oldw * 1;

	var nl = zoomLevel + dir;

	zoomLevel = (nl >= 0 && nl < levels.length) ? nl : zoomLevel;

	var zim = $('#zoomImage');
	
	var w = levels[zoomLevel].replace(/px/i,"") * 1;
	
	var left = Math.floor(zim.css("left").replace(/px/i,"") * 1) + Math.floor((oldw-w)/2) ;
	var top = Math.floor(zim.css("top").replace(/px/i,"") * 1) + Math.floor(((oldw-w)/2) ) ;
	
	if (left > zoomWidth - (w/2) || top > zoomHeight - (w/2) || left + w <  (w/2)  || top + w < (w/2)){
		left =  Math.floor((zoomWidth - w)/2);
		top =  Math.floor((zoomHeight - w)/2);
	}
	
	left = (left < -w) ? 0 : left;
	top = (top < -w) ? 0 : top;
	
	zim.css("left",left + "px");
	zim.css("top",top + "px");
	
	zim.css("width",levels[zoomLevel]);
	zim.css("height","auto");
	
	var w_hi = (w < zoomWidth) ? zoomWidth : w;
	var h_hi = (w < zoomHeight) ? zoomHeight : w;
	var w_lo = (w < zoomWidth) ? 1 : zoomWidth - w;
	var h_lo = (w < zoomHeight) ? 1 : zoomHeight - w;
	
	zim.draggable('destroy');

	zim.draggable();
	
	
}


function zoom(imagepath){
	
	
	
	zoomSrc = (imagepath == undefined) ? zoomSrc : imagepath;
	
	var w = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
	var h = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
	
	zoomHeight = h - 150;
	zoomWidth = w - 150;
	
	zoomHeight = (zoomHeight < 37) ? 37 : zoomHeight;
	zoomWidth = (zoomWidth < 105) ? 105 : zoomWidth;
	
	var zDiv;
	var zClose;
	var zImg;
	var zDrag;
	var zFade;
	
	if($('#zoomDiv').length == 0){
		window.onresize = function(){if(zoomDisplay){zoom();}};
	}
	
	$('#zoomDiv').remove();
	$('#zoomFade').remove();
	
	zDiv = $(document.createElement("div")).attr("id","zoomDiv").hide();
	zClose = $(document.createElement("div")).attr("id","zoomClose");
	zDrag = $(document.createElement("div")).attr("id","zoomDrag");
	zImg = $(document.createElement("img")).attr("id","zoomImage");
	zFade = $(document.createElement("div")).attr("id","zoomFade");
	zLoad = $(document.createElement("img")).attr("id","zoomLoading");
	
	zFade.css("background-color","black");
	zFade.css("position","fixed");
	zFade.css("top","0px");
	zFade.css("left","0px");
	zFade.css("width",w + "px");
	zFade.css("height",h + "px");
	zFade.css("z-index","997");
	zFade.css("opacity","0.75");
	$(document.body).append(zFade);
	
	zDiv.css("position","fixed");
	zDiv.css("text-align","center");
	
	var l = ((w - zoomWidth)/2)-5;l = (l < 0) ? 0 : l;
	var t = ((h-zoomHeight)/2) - 25;t = (t < 0) ? 0 : t;
	
	zDiv.css("left", l+ "px");
	zDiv.css("top",  t+ "px");
	zDiv.css("width",zoomWidth + "px");
	zDiv.css("height",zoomHeight+"px");
	
	zDiv.css("z-index","998");
	
	zClose.html('<a style="font-size:24px;cursor:pointer;" onclick="$(\'#zoomFade\').fadeOut();$(\'#zoomDiv\').fadeOut();zoomDisplay = false;"><img src="' + zip + 'btn.zclose.png"/></a>');
	zClose.css("position","absolute");
	zClose.css("background-color","white");
	zClose.css("top","0px");
	zClose.css("right","0px");
	zClose.css("z-index","999");
	zClose.css("border","1px solid black");
	zDiv.append(zClose);
	
	zDrag.css("position","absolute");
	zDrag.css("background-color","white");
	zDrag.css("border","1px solid black");
	zDrag.css("top","35px");
	zDrag.css("right","0px");
	zDrag.css("overflow","hidden");
	zDrag.css("width",zoomWidth+"px");
	zDrag.css("height",zoomHeight+"px");
	zDrag.css("z-index","999");
	zDiv.append(zDrag);
	
	zImg.hide();
	
	zLoad.css("position","absolute");
	zLoad.css("left",((zoomWidth-100)/2) + "px");
	zLoad.css("top",((zoomHeight-100)/2) + "px");
	zLoad.css("z-index","999");
	
	zLoad.attr('src',zip + "/bigloading.gif");
	zDiv.append(zLoad);
	
	
	zImg.css("position","absolute");
	zImg.css("left",Math.floor((zoomWidth - 2000)/2)+"px");
	zImg.css("top",Math.floor((zoomHeight) - 2000)/2 + "px");
	zImg.css("cursor","move");
	zImg.css("z-index","999");
	zDrag.append(zImg);
	
	
	zImg.attr("src",zoomSrc + "?" + Math.floor(Math.random()*9999)).load(
		function(){
			$('#zoomLoading').fadeOut("fast",function(){
				$('#zoomImage').fadeIn();
			});
			
		}
	).error(function(e){alert(e);});
	
	var zOut = $(document.createElement("a"));
	zOut.css("position","absolute");
	zOut.css("cursor","pointer");
	zOut.css("right","10px");
	zOut.css("bottom","10px");
	zOut.css("width","20px");
	zOut.css("height","20px");
	zOut.css("text-align","center");
	zOut.css("z-index","999");
	zOut.css("display","block");
	zOut.html('<img src="' + zip + '/btn.out.png"/>');
	zOut.click(function(){switchZoomLevel(-1);});
	
	var zIn = $(document.createElement("a"));
	zIn.css("position","absolute");
	zIn.css("cursor","pointer");
	zIn.css("right","35px");
	zIn.css("bottom","10px");
	zIn.css("width","20px");
	zIn.css("height","20px");
	zIn.css("text-align","center");
	zIn.css("z-index","999");
	zIn.css("display","block");
	zIn.html('<img src="' + zip + '/btn.in.png"/>');
	zIn.click(function(){switchZoomLevel(1);});
	
	zDrag.append(zIn);
	zDrag.append(zOut);
	
	jQuery(document.body).append(zDiv);
	
	zFade.fadeIn();
	
	var zi = document.getElementById('zoomDrag');
	
	var callback = function(e){
		
		e = e ? e : window.event;
		var scroll = e.detail ? e.detail / -3 : e.wheelDelta / 120;
		scroll = (scroll < -1) ? -1 : ((scroll > 1) ? 1 : scroll); //just in case ;)
		switchZoomLevel(scroll);
		if(e.stopPropagation)
			e.stopPropagation();
		if(e.preventDefault)
			e.preventDefault();
		 
		e.cancelBubble = true;
		e.cancel = true;
		e.returnValue = false;
		return false;
	}
	
	
	if(zi.addEventListener)
	{
		zi.addEventListener('DOMMouseScroll', callback, false);  
		zi.addEventListener('mousewheel', callback, false);
	}else if(zi.attachEvent){
		zi.attachEvent("onmousewheel", callback);
	}

	var zi = document.getElementById('zoomFade');

	if(zi.addEventListener)
	{
		zi.addEventListener('DOMMouseScroll', callback, false);  
		zi.addEventListener('mousewheel', callback, false);
	}else if(zi.attachEvent){
		zi.attachEvent("onmousewheel", callback);
	}
	
	
	zoomDisplay = true;
	
	zoomLevel = 8;
	switchZoomLevel(0);
	
	zDiv.fadeIn();
	
}