// JavaScript Document

/*CUSTOM VIEWER CLASS WRITTEN BY KEVIN YEO*/
/*contact@kevinyeo.com*/

var startX = 0;            
var startY = 0;
var offsetX = 0;           
var offsetY = 0;
var dragElement;         
	

function imageviewer (url) {
	
	createdom('div','viewermask',['width=100%','height=100%','background=#000000 none','opacity=0.5','top=0','left=0','margin=0','position=absolute','padding=0'],document.getElementById('container'));
	fader(document.getElementById('viewermask'),0,0.7,250);
	createdom('div','newdisplay',['width=600px','height=400px','background=#000000 none','opacity=0.9','left=50%','top=50%','margin=-200px 0 0 -300px','position=absolute'],document.getElementById('container')); 
	createdom('div','image',['width=600px','height=400px','background=#000000 none','top=50%','left=50%','margin=-200px 0 0 -300px','position=absolute','overflow=hidden'],document.getElementById('newdisplay')); 
	window.setTimeout(function () { setloader ('/wp-content/themes/enoshop/template_images/loading.gif','image'); }, 500);
	
	var setloader=function (loader_url,holderdiv) {
		this.newimage=new Image();
		this.newimage.onload= function () {
			this.newimgdom=createdom ('img',loader_url,['width=auto','height=auto','background=#000000 none','top=50%','left=50%','position=absolute'], document.getElementById('image'),'LOADING');
			this.newimgdom.style.margin='-'+this.newimgdom.offsetHeight/2+'px 0 0 -'+this.newimgdom.offsetWidth/2+'px';											
			this.newimgdom.setAttribute('onmousedown','javascript:return false');
			loadimage(holderdiv);
		}
		this.newimage.onerror=function () { 
			createdom('div','loadingerror',['width=100%','height=auto','top=48%','position=absolute','textAlign=center','font=12px Verdana','color=#FFFFFF'],document.getElementById('image'),'LOADING');
			loadimage(holderdiv);
		}
		this.newimage.src=loader_url;
	}
	
	var loadimage=function(holderdiv) {
		if (!document.image) {
			var newimage=new Image();
			newimage.onload = function () {
				var holder=document.getElementById(holderdiv);
				if (holder.getElementsByTagName('img')[0]) {
					with(holder) { 
						getElementsByTagName('img')[0].src=url; 
						getElementsByTagName('img')[0].style.visibility="hidden"; 
					}
				}
				if (holder.getElementsByTagName('div')[0]) {
					var divdom = holder.getElementsByTagName('div')[0];
					divdom.parentNode.removeChild(divdom);
					this.newimgdom=createdom ('img',url,['width=auto','height=auto','top=50%','left=50%','position=absolute','visibility=hidden'],document.getElementById(holderdiv));
				}
				this.preparedisplay = resizedisplay (holderdiv, this.width, this.height);
				document.getElementById('newdisplay').setAttribute('onmouseover','javascript:addlistener();');
				document.getElementById('newdisplay').setAttribute('onmouseout','javascript:removelistener();');
			}
			newimage.onerror=function () {
				var holder=document.getElementById(holderdiv);
				holder.getElementsByTagName('img')[0] ? imagenode = holder.getElementsByTagName('img')[0] :imagenode = holder.getElementsByTagName('div')[0];
				imagenode.parentNode.removeChild(imagenode);
				createdom ('div','errordiv',['width=100%','height=auto','top=48%','position=absolute','textAlign=center','font=12px Verdana','color=#FFFFFF'],holder,'Error Loading File<br/><br/>');
				createanchor(['href=#','onclick=javascript:removedivdom([\'newdisplay\',\'viewermask\']);return false'],'CLOSE',['color=#FFFFFF'],document.getElementById('errordiv'));
			}
			newimage.src=url;
		}
	}
	var resizedisplay = function (holderdiv, w, h) {
		
		this.element = document.getElementById(holderdiv);
		this.elementwidth = this.element.offsetWidth;
		this.elementheight = this.element.offsetHeight;
		this.parentnode = this.element.parentNode;
		this.imgheight = h;
		this.imgwidth = w;
		
		if (this.imgwidth>800) {
			this.newwidth=800; 
			this.newheight = Math.round(this.imgheight/(this.imgwidth/800));
			
			this.element.getElementsByTagName('img')[0].style.width=this.newwidth+'px';
			this.element.getElementsByTagName('img')[0].style.height=this.newheight+'px';
		
		} else {
			this.newwidth=this.element.getElementsByTagName('img')[0].offsetWidth; 
			this.newheight=this.element.getElementsByTagName('img')[0].offsetHeight;
		}
	
		with(this.element.getElementsByTagName('img')[0].style) { top='0'; left='0'; margin='0'; }
		
		this.timer=5;

		for (this.i=1; this.i<=50; this.i++) {		
			this.adjustwidth = (Math.round(this.elementwidth-(((this.elementwidth-this.newwidth)/50)*this.i)));
			this.adjustheight=(Math.round(this.elementheight-(((this.elementheight-this.newheight)/50)*this.i)));
			this.holderwidth=this.adjustwidth+10;
			this.holderheight=this.adjustheight+10;
			window.setTimeout('resetdimensions(\''+this.holderwidth+'\',\''+this.holderheight+'\',\''+this.parentnode.id+'\')',this.i*this.timer);
			window.setTimeout('resetdimensions(\''+this.adjustwidth+'\',\''+this.adjustheight+'\',\''+holderdiv+'\')',this.i*this.timer);
			if (this.i==50) { window.setTimeout( function () { imageisset(this.parentnode.id); },this.i*this.timer); }
		}
	}
	
	
	
	var imageisset = function (div_id) {
		document.getElementById(div_id).getElementsByTagName('img')[0].style.visibility="visible";
		fader(document.getElementById(div_id),0,1,500); setclosebutton(div_id); setcontrols(div_id);
	}

	var setclosebutton = function (div_id) {
		this.closeanchor=createanchor(['href=#','onclick=javascript:removedivdom([\'newdisplay\',\'viewermask\'],\'removelistener()\'); return false'],'none',[],document.getElementById(div_id));
		this.closeimg=createdom ('img','/wp-content/themes/enoshop/template_images/closetab.png',['width=auto','height=auto','top=5px','right=5px','position=absolute','border=0'],'none');
		this.closeanchor.appendChild(this.closeimg);
	}
	
	function setcontrols (div_id) {
		createdom ('div','controldiv',['width=160px','height=20px','background=transparent url(/wp-content/themes/enoshop/template_images/controldisplay.png) no-repeat','bottom=15px','left=15px','position=absolute'],document.getElementById(div_id));
		createdom ('div','zoomout',['width=20px','height=20px','margin=0','position=absolute'],document.getElementById('controldiv'));
		this.zoomoutanchor=createanchor(['href=#','onclick=javascript:zoom(\'-1\');return false'],'none',[],document.getElementById('zoomout'));
		this.zoomoutimg=createdom ('img','/wp-content/themes/enoshop/template_images/zoomout.png',['width=auto','height=auto','1','left=5px','position=absolute','border=0'],'none');
		this.zoomoutanchor.appendChild(this.zoomoutimg);
		createdom ('div','zoomin',['width=20px','height=20px','right=5px','position=absolute'],document.getElementById('controldiv'));
		this.zoominanchor=createanchor(['href=#','onclick=javascript:zoom(\'1\');return false'],'none',[],document.getElementById('controldiv')); 
		this.zoominimg=createdom ('img','/wp-content/themes/enoshop/template_images/zoomin.png',['width=auto','height=auto','top=0','right=5px','position=absolute','border=0'],'none');
		this.zoominanchor.appendChild(this.zoominimg);	
		createdom('div','zoomscroll',['width=81px','height=20px','background=transparent url(/wp-content/themes/enoshop/template_images/scrolltrack.png) no-repeat','right=40px','position=absolute'],document.getElementById('controldiv'));
		this.scrubber=createdom ('img','/wp-content/themes/enoshop/template_images/scrubber.png',['top=3px','left=0','position=absolute','border=0'],document.getElementById('zoomscroll'));
		this.scrubber.setAttribute('onmousedown','javascript:return false');
		this.navarrayimg=['/wp-content/themes/enoshop/template_images/zoomup.png','/wp-content/themes/enoshop/template_images/zoomleft.png','/wp-content/themes/enoshop/template_images/zoomright.png','/wp-content/themes/enoshop/template_images/zoombottom.png'];
		this.navidarray=['zoom_up','zoom_left','zoom_right','zoom_bottom'];
		this.navtoparray=['0','50%','50%',''];
		this.navleftarray=['50%','0','','50%'];
		this.navrightarray=['','','0',''];
		this.navbottomarray=['','','','0'];
		this.navmarginarray=['0 0 0 -7px','0 0 0 0px','-7px 0 0 0','-7px 0 0 0'];
		this.navtype=['top','left','right','bottom'];
		
		for (this.i in this.navarrayimg) {
			createdom ('div',this.navidarray[this.i],['width=15px','height=15px','top='+this.navtoparray[this.i],'right='+this.navrightarray[this.i],'bottom='+this.navbottomarray[this.i],'left='+this.navleftarray[this.i],'margin='+this.navmarginarray[this.i],'position=absolute'],document.getElementById('image'));
			this.newanchor=createanchor(['href=#','onclick=javascript:zoomnav(\''+this.navtype[this.i]+'\'); return false'],'none',[],document.getElementById(this.navidarray[this.i]));
			this.newimg=createdom ('img',navarrayimg[this.i],['width=15px','height=15px','position=absolute','border=0'],'none');
			this.newanchor.appendChild(this.newimg);	
		}
	}
	addlistener = function () {
		if (document.addEventListener) { 
			document.addEventListener('DOMMouseScroll',mousescrollzoom,false) || document.addEventListener('mousewheel',mousescrollzoom,false);
			document.addEventListener('mousedown',OnMouseDown,false);
			document.addEventListener('mouseup',OnMouseUp,false);
		} else {
			document.attachEvent = ('onmousewheel',mousescrollzoom);
			document.attachEvent('onmousedown',OnMouseDown);
			document.attachEvent('onmouseup',OnMouseUp);
		}
	}
	removelistener = function () {
		if (document.removeEventListener) { 
			document.removeEventListener("DOMMouseScroll",mousescrollzoom,false) || document.removeEventListener("mousewheel",mousescrollzoom,false);
			document.removeEventListener('mousedown',OnMouseDown,false);
			document.removeEventListener('mouseup',OnMouseUp,false);
		} else {
			document.detachEvent = ("onmousewheel",mousescrollzoom);
			document.detachEvent = ("onmousedown",OnMouseDown);
			document.detachEvent('onmouseup',OnMouseUp);
		}
		document.body.style.cursor='default';
	}
	function mousescrollzoom (e) {
		if (!e) e=window.event;
		if (!e.target) e.target=e.srcElement;
		if (e.target==document.getElementById('image').getElementsByTagName('img')[0]) {
			this.wheelData = e.detail ? (e.detail*-40) : e.wheelDelta;
			this.wheelData>0 ? zoom(this.wheelData) : zoom(this.wheelData); 
		}
	}
	function OnMouseDown (e) {
    	if (!e)  e=window.event;
		if (!e.target) e.target=e.srcElement;
		if ((e.button == 1 && window.event != null || e.button == 0) && e.target==document.getElementById('image').getElementsByTagName('img')[0]) {
			this.imageElement=document.getElementById('image').getElementsByTagName('img')[0]; this.imageparent=this.imageElement.parentNode;
			if (this.imageElement.offsetWidth>this.imageparent.offsetWidth) {
				document.body.style.cursor='move';
				startX = e.clientX;
				startY = e.clientY;
        		offsetX = ExtractNumber(e.target.style.left);
        		offsetY = ExtractNumber(e.target.style.top);
        		dragElement = this.imageElement;
				document.onmousemove = imgOnMouseMove;
        		document.body.focus();
				document.onselectstart = function () { return false; };
				e.target.ondragstart = function() { return false; };
				return false;
			} else return;
    	} 
	}
	function imgOnMouseMove (e) {
		if (!e) e = window.event;
		this.imageElement=document.getElementById('image').getElementsByTagName('img')[0];
		this.imageparent=this.imageElement.parentNode;
		this.currentleft=parseInt(this.imageElement.style.marginLeft.replace('px',''));
		this.currenttop=parseInt(this.imageElement.style.marginTop.replace('px',''));
		if (this.currentleft + (offsetX + e.clientX - startX)/15>0) {
			return;
		} else {
			if (this.currentleft + (offsetX + e.clientX - startX)/15<this.imageparent.offsetWidth-this.imageElement.offsetWidth) {
				this.imageElement.style.marginLeft = this.imageparent.offsetWidth-this.imageElement.offsetWidth+'px';
			} else {
				this.imageElement.style.marginLeft = this.currentleft + (offsetX + e.clientX - startX)/15 +'px';
			}
		}
		if (this.currenttop + (offsetY + e.clientY - startY)/15>0) {
			return;
		} else {
			if (this.currenttop + (offsetY + e.clientY - startY)/15<this.imageparent.offsetHeight-this.imageElement.offsetHeight) {
				this.imageElement.style.marginTop = this.imageparent.offsetHeight-this.imageElement.offsetHeight + 'px';
			} else {
				this.imageElement.style.marginTop = this.currenttop + (offsetY + e.clientY - startY)/15 + 'px'; 
			}
		}
	}
	function OnMouseUp (e) {
		if (dragElement != null) {
			document.body.style.cursor='default';
        	document.onmousemove = null;
        	document.onselectstart = null;
        	dragElement.ondragstart = null;
        	dragElement = null;
    	}
	}
	function ExtractNumber(value) {
    	this.n = parseInt(value);
    	return this.n == null || isNaN(this.n) ? 0 : this.n;
	}
}

function resetdimensions (newwidth,newheight, div_id) {
	document.getElementById(div_id).style.width=newwidth+'px'; 
	document.getElementById(div_id).style.height=newheight+'px';
	document.getElementById(div_id).style.margin='-'+(newheight/2)+'px 0 0 -'+(newwidth/2)+'px';
}

function removediv () {
	for (this.i=0; this.i<arguments.length; this.i++) {
		var newitem=document.getElementById(arguments[this.i]);newitem.parentNode.removeChild(newitem);
	}	
	removelistener();
}

function zoom (zoom) {
	Number(zoom) > 0 ? this.zoomin=true : this.zoomin=false;
	this.imageElement=document.getElementById('image').getElementsByTagName('img')[0];
	this.imageparent=this.imageElement.parentNode;				
	this.zoomin ? this.zoomconstantW=(this.imageparent.offsetWidth*5)/10 : this.zoomconstantW=(this.imageparent.offsetWidth*5)/10*-1;
	this.zoomin ? this.zoomconstantH=(this.imageparent.offsetHeight*5)/10 : this.zoomconstantH=(this.imageparent.offsetHeight*5)/10*-1;
	if (this.zoomin==true) {
		if(this.imageElement.offsetWidth<this.imageparent.offsetWidth*5) {
			this.imageElement.style.width=(this.imageElement.offsetWidth+this.zoomconstantW)+'px';
			this.imageElement.style.height=(this.imageElement.offsetHeight+this.zoomconstantH)+'px';
			this.newleft=parseInt(this.imageElement.style.marginLeft.replace('px',''))-(this.zoomconstantW/2);
			this.newtop=parseInt(this.imageElement.style.marginTop.replace('px',''))-(this.zoomconstantH/2);
			this.scrubvalue=10;
		} else return;
	}
	if (this.zoomin==false) { 
		if(this.imageElement.offsetWidth>this.imageparent.offsetWidth) {
			this.imageElement.style.width=(this.imageElement.offsetWidth+this.zoomconstantW)+'px';
			this.imageElement.style.height=(this.imageElement.offsetHeight+this.zoomconstantH)+'px';
			if(this.imageElement.offsetWidth+parseInt(this.imageElement.style.marginLeft.replace('px',''))+this.zoomconstantW/2<this.imageparent.offsetWidth) {
				this.newleft=(this.imageparent.offsetWidth-this.imageElement.offsetWidth);
			} else {
				this.leftequation=parseInt(this.imageElement.style.marginLeft.replace('px',''))-(this.zoomconstantW/2);
				this.leftequation < 0 ?  this.newleft=parseInt(this.imageElement.style.marginLeft.replace('px',''))-(this.zoomconstantW/2) : this.newleft=0;
			}
			if(this.imageElement.offsetHeight+parseInt(this.imageElement.style.marginTop.replace('px',''))+this.zoomconstantH/2<this.imageparent.offsetHeight) {
				this.newtop=(this.imageparent.offsetHeight-this.imageElement.offsetHeight)/2;
			} else {
				this.topequation=parseInt(this.imageElement.style.marginTop.replace('px',''))-(this.zoomconstantH/2);
				this.topequation < 0 ? this.newtop=parseInt(this.imageElement.style.marginTop.replace('px',''))-(this.zoomconstantH/2) : this.newtop=0;
			}
			this.scrubvalue=-10;
		} else return;
	}
	this.imageElement.style.marginTop=this.newtop+'px';
	this.imageElement.style.marginLeft=this.newleft+'px';
	document.getElementById('zoomscroll').getElementsByTagName('img')[0].style.left=document.getElementById('zoomscroll').getElementsByTagName('img')[0].offsetLeft+this.scrubvalue+'px';	
}

function zoomnav (direction) {
	this.imageElement=document.getElementById('image').getElementsByTagName('img')[0];
	this.imageparent=this.imageElement.parentNode;
	this.currentwidth=document.getElementById('image').getElementsByTagName('img')[0].offsetWidth;
	this.currentheight=document.getElementById('image').getElementsByTagName('img')[0].offsetHeight;
	this.minwidth=document.getElementById('image').offsetWidth;
	this.minheight=document.getElementById('image').offsetHeight;
	if (this.currentwidth>this.minwidth) {
		this.imgelement=document.getElementById('image').getElementsByTagName('img')[0];
		if(direction=='top' && Number(this.imgelement.style.marginTop.replace('px',''))+20 < 0) { this.imgelement.style.marginTop = Number(this.imgelement.style.marginTop.replace('px',''))+20+'px'; }
		if(direction=='left' && Number(this.imgelement.style.marginLeft.replace('px',''))+20 < 0) { this.imgelement.style.marginLeft = Number(this.imgelement.style.marginLeft.replace('px',''))+20+'px'; }
		if(direction=='right' && (this.minwidth-this.currentwidth)< Number(this.imgelement.style.marginLeft.replace('px',''))-20) {
			this.imgelement.style.marginLeft = Number(this.imgelement.style.marginLeft.replace('px',''))-20+'px';
		}
		if(direction=='bottom' && (this.minheight-this.currentheight) < Number(this.imgelement.style.marginTop.replace('px',''))-20) {
			this.imgelement.style.marginTop = Number(this.imgelement.style.marginTop.replace('px',''))-20+'px';
		}   
	} else {
		return;
	}
}