﻿	/*
	====================================
	Developed for Webfoot.Net
	Developed by Joe Noble
	Release Date: 3/13/2009
	Release Version: 1.2
	
	Please leave credit, do not delete.
	====================================
	*/
	var t;
	var newPic=new Array();
	var ie=(navigator.appName=="Microsoft Internet Explorer")?true:false;
	var showImage=false;
	var imgNumber;
	
	window.onload=function(){
		addDiv();
		var x=document.getElementsByName("magicLink");
		for(var i=0;i<x.length;i++){
			newPic[i]=new Image();
			newPic[i].src=x[i].href;
			x[i].onclick=function(){
				var preW=(ie)?this.childNodes[0].width:this.childNodes[1].width;
				var preH=(ie)?this.childNodes[0].height:this.childNodes[1].height;
				var imgURL=this.href;
				for(i=0;i<x.length;i++){
					var patt1=new RegExp(imgURL);
					if(patt1.test(newPic[i].src))break;					
				}
				setDivSize(newPic[i].width,newPic[i].height,imgURL,preW,preH);
				
				var sizeH=(ie)?document.documentElement.clientHeight:document.documentElement.clientHeight;
				var sizeH2=(ie)?document.documentElement.scrollTop:document.documentElement.scrollTop;
				var sizeW=(ie)?document.body.offsetWidth:window.innerWidth;
				if(!ie){if(sizeH2==0||sizeH2=="0")sizeH2=document.body.scrollTop;}
				
				document.getElementById("magicImage").style.top=(Math.round((sizeH/2)+sizeH2)-Math.round(newPic[i].height/2))+"px";
				document.getElementById("magicImage").style.left=(Math.round(sizeW/2)-Math.round(newPic[i].width/2))+"px";
				document.getElementById("darkLayer").style.height=Math.round(sizeH+sizeH2)+"px";
				document.getElementById("darkLayer").style.width=sizeW+"px";
				document.getElementById("darkLayer").style.display="block";
				showImage=true;
				imgNumber=i;
				eval("t=window.setInterval('magicImageGrow("+i+","+Math.round(sizeH+sizeH2)+","+findPosY(this)+","+sizeW+","+findPosX(this)+")',1);");
				return false;
			}
		}
		document.getElementById("darkLayer").onclick=function(){hideImage()}
	}
	
	window.onresize=function(){
		if(showImage){
			var sizeH=(ie)?document.documentElement.clientHeight:document.documentElement.clientHeight;
			var sizeH2=(ie)?document.documentElement.scrollTop:document.documentElement.scrollTop;
			var sizeW=(ie)?document.body.offsetWidth:window.innerWidth;
			if(!ie){if(sizeH2==0||sizeH2=="0")sizeH2=document.body.scrollTop;}
			document.getElementById("darkLayer").style.height=Math.round(sizeH+sizeH2)+"px";
			document.getElementById("darkLayer").style.width=sizeW+"px";
			
			document.getElementById("magicImage").style.top=(Math.round((sizeH/2)+sizeH2)-Math.round(newPic[imgNumber].height/2))+"px";
			document.getElementById("magicImage").style.left=(Math.round(sizeW/2)-Math.round(newPic[imgNumber].width/2))+"px";
		}
	}
	
	window.onscroll=function(){
		if(showImage){
			var sizeH=(ie)?document.documentElement.clientHeight:document.documentElement.clientHeight;
			var sizeH2=(ie)?document.documentElement.scrollTop:document.documentElement.scrollTop;
			var sizeW=(ie)?document.body.offsetWidth:window.innerWidth;
			if(!ie){if(sizeH2==0||sizeH2=="0")sizeH2=document.body.scrollTop;}
			document.getElementById("darkLayer").style.height=Math.round(sizeH+sizeH2)+"px";
			document.getElementById("darkLayer").style.width=sizeW+"px";
			document.getElementById("magicImage").style.top=(Math.round((sizeH/2)+sizeH2)-Math.round(newPic[imgNumber].height/2))+"px";
			document.getElementById("magicImage").style.left=(Math.round(sizeW/2)-Math.round(newPic[imgNumber].width/2))+"px";
		}
	}

	
	function addDiv(){
		var bodyEl = document.body;
		var a = document.createElement('div');
		a.id="magicImage";
		a.style.textAlign="center";
		a.style.border="1px solid gray";
		a.style.backgroundColor="white";
		a.style.display="none";
		a.style.position="absolute";
		a.style.width="100px";
		a.style.height="100px";
		a.style.zIndex="90";
		a.innerHTML = 'Loading Image ...';
		
		var b = document.createElement('div');
		b.id="darkLayer";
		b.style.textAlign="center";
		b.style.backgroundColor="black";
		b.style.display="none";
		b.style.position="absolute";
		b.style.width="100px";
		b.style.height="100px";
		b.style.filter="alpha(opacity=80);";
		b.style.opacity=".8";
		b.style.top="0px";
		b.style.left="0px";
		b.style.zIndex="80";
		b.innerHTML = '<p></p>';
		
		bodyEl.appendChild(b);
		bodyEl.appendChild(a);
	}
	
	function setDivSize(imgW,imgH,imgURL,preW,preH){
		var x=document.getElementById("magicImage");
		x.style.width=preW+"px";
		x.style.height=preH+"px";
		x.innerHTML="<img src='"+imgURL+"' style='width:"+preW+"px;height:"+preH+"px;' id='innerImage' />";
		x.style.display="block";
	}
		
	function findPosX(obj){
    	var curleft = 0;
    	if(obj.offsetParent)
        	while(1) {
          		curleft += obj.offsetLeft;
          		if(!obj.offsetParent)
            	break;
         	 obj = obj.offsetParent;
        	}
    	else if(obj.x)
        	curleft += obj.x;
    	return curleft;
  	}
  
  	 function findPosY(obj){
  	 	var curtop = 0;
    	if(obj.offsetParent)
        	while(1){
          		curtop += obj.offsetTop;
          		if(!obj.offsetParent)
            	break;
          		obj = obj.offsetParent;
        	}
    	else if(obj.y)
        	curtop += obj.y;
    	return curtop;
  	}
	
	function magicImageGrow(img,finalH,startPosY,finalW,startPosX){
		//define divs
		var x=document.getElementById("magicImage");
		var z=document.getElementById("innerImage");
		
		//define current width and height
		var currW=parseFloat(x.style.width.replace(/px/,""));
		var currH=parseFloat(x.style.height.replace(/px/,""));
		
		//define large res image size
		var targetWidth=newPic[img].width;
		var targetHeight=newPic[img].height+20;
		
		//set variable to retain current width/height
		var oldW=currW;
		var oldH=currH;
		
		//define divs current height and width
		currH=(newPic[img].width>newPic[img].height)?Math.round((currW+36)*(currH/currW)):currH+36;
		currW=(newPic[img].width>newPic[img].height)?currW+36:Math.round((currH+36)*(currW/currH));
		
		//booleen if width is larger than height
		var WW=(newPic[img].width>newPic[img].height)?true:false;
		
		
		//sets divs attributes
		x.style.width=currW+"px";
		x.style.height=currH+"px";
		z.style.width=currW+"px";
		z.style.height=currH+"px";
		
		//ends loop once image has grown to full res
		if(currW>=targetWidth&&currH>=targetHeight){	
			t=window.clearInterval(t);
			x.innerHTML="<a name='magicLink2' onclick=\"hideImage()\"><img src='"+newPic[img].src+"' style='border:1px solid gray;cursor:pointer;' /><br /><b style=\"cursor:pointer;clear:both;\">Close Image</b></a>";
		}
	}
	
	function hideImage(){
		var x=document.getElementById("magicImage");
		var y=document.getElementById("darkLayer");
		x.innerHTML="";
		x.style.display="none";
		x.style.width="1px";
		x.style.height="1px";
		x.style.left="0px";
		x.style.top="0px";
		
		y.innerHTML="";
		y.style.display="none";
		y.style.width="1px";
		y.style.height="1px";
		y.style.left="0px";
		y.style.top="0px";
		showImage=false;		
	}
