// JavaScript Document
function popup(){
	
	width=highRes.width;
	height=highRes.height;
	newWindow=window.open(highRes.src,"","location=1,status=1,scrollbars=1,width="+width+",height="+height+"");
	
	
	
	
}
function loader(){

	var unclipped=document.getElementById('unclipped');
	
	alert(document.getElementById('included'));
var source=unclipped.src;
	highRes=new Image();
	var index=source.indexOf('_IMG_');

if(index!=-1)
source=source.substring(0,index)+"_BIG_"+source.substring(index+5,source.length);
index=source.indexOf('/IMG/');
if(index!=-1)
source=source.substring(0,index)+"/BIG/"+source.substring(index+5,source.length);
highRes.src=source

	highRes.onload=function(highRes){
		
	create();
}
	
}
function update(){
var parent=document.getElementById('thumbText').parentNode;
delImage=document.getElementById('thumbZoom');
	if(delImage)
parent.removeChild(delImage);
delImage=document.getElementById('thumbClick');
	if(delImage)
parent.removeChild(delImage);
	document.getElementById('included').style.clear="right";
	var unclipped=document.getElementById('unclipped');
	var division=document.getElementById('zoomDiv');
	delImage=document.getElementById('mask2');
	if(delImage)
division.removeChild(delImage);
delImage=document.getElementById('maskImage');
if(delImage)
division.removeChild(delImage);

delImage=document.getElementById('clipped');
if(delImage)
division.removeChild(delImage);


	
	var height=unclipped.height;
var width=unclipped.width;
division.style.height=height+"px";
division.style.width=width+"px";

	
	
	
	
	


var source=unclipped.src;
	highRes=new Image();
	var index=source.indexOf('_IMG_');

if(index!=-1)
source=source.substring(0,index)+"_BIG_"+source.substring(index+5,source.length);
index=source.indexOf('/IMG/');
if(index!=-1)
source=source.substring(0,index)+"/BIG/"+source.substring(index+5,source.length);
highRes.src=source

	highRes.onload=function(highRes){
		
		create();
}

	
}


function create(){
var thumbText=document.getElementById('thumbText');
var text1=document.createElement('p');
var text2=document.createElement('p');
text1.id="thumbZoom";
text2.id="thumbClick";
text1.innerHTML="Mouse over the image to zoom in";
text2.innerHTML="Click on the image for a bigger view";
thumbText.parentNode.insertBefore(text1,thumbText);
thumbText.parentNode.insertBefore(text2,thumbText);

var unclipped=document.getElementById('unclipped');
var division=document.getElementById('zoomDiv');
var source=unclipped.src;
var height=unclipped.height;
var width=unclipped.width;
division.style.height=height+"px";
division.style.width=width+"px";

var parent=unclipped.parentNode;



var oriHeight=highRes.height;
var oriWidth=highRes.width;








var mask2=document.createElement('img');
mask2.setAttribute("src","../../include/Scripts/ImageZoom/mask2.png");
mask2.id="mask2";

maskWidth=width-20;
maskHeight=height-20;
////////
mask2.setAttribute("onMouseMove","var Loupe=new ImageZoom("+height+","+width+","+oriHeight+","+oriWidth+");Loupe.zoom(event)");
mask2.setAttribute("onMouseOver","var Loupe=new ImageZoom("+height+","+width+","+oriHeight+","+oriWidth+");Loupe.show()");
mask2.setAttribute("onMouseOut","var Loupe=new ImageZoom("+height+","+width+","+oriHeight+","+oriWidth+");Loupe.hide()");
mask2.setAttribute("onClick","popup()");

mask2.setAttribute("style","clip:rect(20px,"+maskWidth+"px,"+maskHeight+"px,20px);position:absolute;top:0px;left:0px;z-index:20");


////////

mask2.style.clip="rect(20px,"+maskWidth+"px,"+maskHeight+"px,20px)";
mask2.style.position="absolute";
mask2.style.top="0px";
mask2.style.left="0px";
mask2.style.zIndex="20";
parent.appendChild(mask2);
if(IEtrue){
	mask2.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../include/Scripts/ImageZoom/mask2.png')";
	mask2.style.paddingTop=maskHeight+"px";
}


if(IEtrue){
over=function(){var Loupe=new ImageZoom(height,width,oriHeight,oriWidth);Loupe.show()};
out=function(){var Loupe=new ImageZoom(height,width,oriHeight,oriWidth);Loupe.hide()};

move=function(){var Loupe=new ImageZoom(height,width,oriHeight,oriWidth);Loupe.zoom(event)};
function popup2(){
	
	width=highRes.width;
	height=highRes.height;
	newWindow=window.open(highRes.src,"","location=1,status=1,scrollbars=1,width="+width+",height="+height+"");
	}
mask2.onmouseover=over;
mask2.onmouseout=out;
mask2.onmousemove=move;
mask2.onclick=popup2;
}

var maskImage=document.createElement('img');

maskImage.setAttribute("src","../../include/Scripts/ImageZoom/mask3.png");
maskImage.id="maskImage";
//////
//maskImage.setAttribute("style","position:absolute;top:0;left:0;z-index:-100");
//////
maskImage.style.position="absolute";
maskImage.style.top="0px";
maskImage.style.left="0px";
maskImage.style.zIndex="-100";
if(IEtrue){
	maskImage.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../include/Scripts/ImageZoom/mask3.png')";
	maskImage.style.paddingTop="1000px";
maskImage.style.paddingLeft="1000px";

}
parent.appendChild(maskImage);

//
}
function ImageZoom(height,width,oriHeight,oriWidth){
this.originalHeight=oriHeight;
this.originalWidth=oriWidth;
this.displayHeight=height;
this.displayWidth=width;
this.portSize=this.originalWidth/this.displayWidth*40;

}

ImageZoom.prototype.originalHeight;
ImageZoom.prototype.originalWidth;
ImageZoom.prototype.displayHeight;
ImageZoom.prototype.displayWidth;
ImageZoom.prototype.portSize;

ImageZoom.prototype.show= function(){

var unclipped=document.getElementById('unclipped');
source=unclipped.src;
var index=source.indexOf('_IMG_');
if(index!=-1)
source=source.substring(0,index)+"_BIG_"+source.substring(index+5,source.length);
index=source.indexOf('/IMG/');
if(index!=-1)
source=source.substring(0,index)+"/BIG/"+source.substring(index+5,source.length);
document.getElementById('maskImage').style.zIndex=10;
var clippedImage=document.createElement('img');
clippedImage.setAttribute('src',source);
clippedImage.id="zoomImage";


clippedImage.style.position="absolute";
clippedImage.style.width=this.originalWidth+"px";
clippedImage.style.height=this.originalHeight+"px";
clippedImage.style.clip="rect(0px, "+this.portSize+"px,"+this.portSize+"px,0px)";

var clipDiv=document.createElement('div');
clipDiv.id="clipped";

zoomTop=unclipped.height+10;
zoomLeft=unclipped.width-this.portSize;
clipDiv.style.position="absolute";
clipDiv.style.width=this.portSize+"px";
clipDiv.style.height=this.portSize+"px";
clipDiv.style.margin="auto";
clipDiv.style.left=zoomLeft+"px";
clipDiv.style.top=zoomTop+"px";


document.getElementById('zoomDiv').appendChild(clipDiv);
document.getElementById('clipped').appendChild(clippedImage);
clipped=document.getElementById('clipped');


clipped.style.position="absolute";
clipped.style.width=this.portSize+"px";
clipped.style.height=this.portSize+"px";
clipped.style.margin="auto";
clipped.style.left=zoomLeft+"px";
clipped.style.top=zoomTop+"px";
}

ImageZoom.prototype.hide=function(){
	
document.getElementById('maskImage').style.zIndex=-100;
delImage=document.getElementById('zoomImage');
document.getElementById('clipped').removeChild(delImage);

}
ImageZoom.prototype.zoom=function(evt){

if('number' == typeof evt.offsetX){
// this is used for IE 6 and 7
var x=evt.offsetX;
var y=evt.offsetY;
}else{
//and this emulates the offset property for all other browsers
var x=evt.pageX;
var y=evt.pageY;
var Element = evt.target ;
var CalculatedTotalOffsetLeft = CalculatedTotalOffsetTop = 0 ;
while (Element.offsetParent)
{
CalculatedTotalOffsetLeft += Element.offsetLeft ;
CalculatedTotalOffsetTop += Element.offsetTop ;
Element = Element.offsetParent ;
};
x= evt.pageX - CalculatedTotalOffsetLeft ;
y= evt.pageY - CalculatedTotalOffsetTop ;}


var myImage=document.getElementById('zoomImage');
factor=this.originalHeight/this.displayHeight;
myImage.style.left=(-(factor*x-this.portSize/2))+"px";
myImage.style.top=(-(factor*y-this.portSize/2))+"px";
topVal=factor*y-this.portSize/2;
leftVal=factor*x-this.portSize/2;
rightVal=(leftVal+this.portSize);
bottomVal=(topVal+this.portSize);

myImage.style.clip="rect("+topVal+"px "+rightVal+"px "+bottomVal+"px "+leftVal+"px)";

var maskImage=document.getElementById('maskImage');

maskImage.style.left=(x-320)+"px";
maskImage.style.top=(y-320)+"px";

//document.getElementById('testSpan').innerHTML="Xcoord "+(x-320)+" Ycoord "+(y-320);
topVal=320-y;
leftVal=320-x;
bottomVal=topVal+this.displayHeight;

rightVal=leftVal+this.displayWidth;
maskImage.style.clip="rect("+topVal+"px "+rightVal+"px "+bottomVal+"px "+leftVal+"px)";

//document.getElementById('test').innerHTML="rect("+topVal+"px "+rightVal+"px "+bottomVal+"px "+leftVal+"px)";
}