////ZOOM

var focusDiv=null;
var focusImg=null;
var contentDiv=null;

var imgTop=null;
var imgLeft=null;

var imgHeight=null;
var imgWidth=null;
var zoomHeight=null;
var zoomWidth=null;
var scalingFactor=null;

var box_inc=0;
var box_new=0;
var t;
var imgWidth;
var boxSpeed=20;
var boxMargin=12;
var removeLastImg=false;
var img_preview;
var boxLeft;
var boxTop;
var zoomOffset=10;
var magnify=false;
var img_description;

var zoomTrue=false;

function addListener(element, type, expression, bubbling)
{
  bubbling = bubbling || false;
  if(window.addEventListener)	{ // Standard
    element.addEventListener(type, expression, bubbling);
    return true;
  } else if(window.attachEvent) { // IE
    element.attachEvent('on' + type, expression);
    return true;
  } else return false;
}

var ImageLoader = function(url){
  this.url = url;
  this.image = null;
  this.loadEvent = null;
};

ImageLoader.prototype = {
  load:function(){
    this.image = document.createElement('img');
this.image.id ="newImage"; 
    var url = this.url;
    var image = this.image;
    var loadEvent = this.loadEvent;
	
    addListener(this.image, 'load', function(e){
      if(loadEvent != null){
        loadEvent(url, image);
      }
    }, false);
    this.image.src = this.url;
  },
  getImage:function(){
    return this.image;
  }
};


function putImageBox(image){ 
removeLastImg=true;


wh = document.documentElement.clientHeight; 
ww = document.documentElement.clientWidth;

if (image.height>((wh/100)*86)){
imgHeightOld=image.height;
image.height=(wh/100)*86;
image.width=(image.height/imgHeightOld)*image.width;
}

dw = image.width + boxMargin;
dh = image.height + boxMargin;

imgWidth=image.width;

boxLeft=(ww/2-dw/2)-(boxMargin*2)+zoomOffset;
boxTop=(wh/2-dh/2)-(boxMargin)-zoomOffset;

document.getElementById("box").style.position = 'fixed';

document.getElementById("box").style.top = (wh/2-dh/2)-14 +"px";
document.getElementById("box").style.left = (ww/2-dw/2)+"px";


document.getElementById("box").style.height =(dh+(boxMargin/2)+14)+"px";


document.getElementById("boxImage").appendChild(image);
document.getElementById("newImage").style.display='none';
document.getElementById("newImage").style.marginTop=(boxMargin/2)+'px';

box();

image.onmouseover=function() {mouseOver(200,img_preview,image.id);}
image.onmouseout=function() {mouseOut(focusDiv);}
} 
 

 
function loadImage(imageSelect,type){ 
 
var loader = new ImageLoader(imageSelect); 

if(type=="box"){
loader.loadEvent = function(url, image){ putImageBox(image); } 
}else if(type=="zoom"){
loader.loadEvent = function(url, image){ putImageZoom(image); } 	
}
loader.load(); 

} 


function box(){

if(box_inc<(imgWidth/boxSpeed)+boxMargin){
t=setTimeout("box()", 1);
box_inc++;
box_new=box_new+boxSpeed;

boxWidth=parseInt(document.getElementById("box").style.width);

if(boxWidth<(imgWidth+boxMargin)){
if(box_new>(imgWidth+boxMargin)){
box_new=imgWidth+boxMargin;
}
document.getElementById("box").style.width = box_new+"px";
}else{
clearTimeout(t);
document.getElementById("newImage").style.opacity =0;
document.getElementById("newImage").style.filter = 'alpha(opacity=' +0+ ')';
document.getElementById("newImage").style.display='inline';

document.getElementById("box_nav").style.display='block';
document.getElementById("box_nav").style.marginTop=(boxMargin/2)+'px';
document.getElementById("box_nav").style.marginRight=(boxMargin/2)+'px';
document.getElementById("img_des").innerHTML=img_description;

for (var i=0;i<11;i++){
		setTimeout('setOpacity('+i+')',100*i);
}
}

}

}


function setOpacity(value,type){
if(type=="fadeOut"){
document.getElementById("box").style.opacity = 1-(value*0.1);
document.getElementById("box").style.filter = 'alpha(opacity=' + (100-(value*10)) + ')';
if(value==10){
document.getElementById("box").style.display='none';
}
}else{
document.getElementById("newImage").style.opacity = value/10;
document.getElementById("newImage").style.filter = 'alpha(opacity=' + value*10 + ')';
}
}

function imageMagnify(imageSelect,preview,description){
if(!magnify){
img_description=description;
magnify=true;
img_preview=preview;
document.getElementById("box").style.display='block';
document.getElementById("box").style.opacity = 1;
document.getElementById("box").style.filter = 'alpha(opacity='+100+')';

if(removeLastImg){
document.getElementById("boxImage").innerHTML="";
}

document.getElementById("box_nav").style.display='none';

imgDisplay=document.getElementById("boxImage");
document.getElementById("box").style.width = box_new+"px";
loadImage(imageSelect,'box');
box_new=0;
box_inc=0;

document.getElementById("box").style.width ="0px";
}
}


function closeBox(){
for (var i=0;i<11;i++){
setTimeout('setOpacity('+i+',"fadeOut")',60*i);
}
magnify=false;

}



function putImageZoom(image){ 
zoomHeight=image.height;
zoomWidth=image.width;

scalingFactor=zoomHeight/imgHeight;

document.getElementById(focusImg).appendChild(image);



var mousex = 0;
var mousey = 0;

init();

function init(){
	

  document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE
  update();


}

function getMouseXY(e){ 


  if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)

  if (e)
  { 
    if (e.pageX || e.pageY)
    { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
      mousex = e.pageX;
      mousey = e.pageY;
      algor = '[e.pageX]';
      if (e.clientX || e.clientY) algor += ' [e.clientX] '
    }
    else if (e.clientX || e.clientY)
    { // works on IE6,FF,Moz,Opera7
      mousex = e.clientX + document.body.scrollLeft;
      mousey = e.clientY + document.body.scrollTop;
      algor = '[e.clientX]';
      if (e.pageX || e.pageY) algor += ' [e.pageX] '
    }  
  }
}




function update(e){

if(zoomTrue){	

getMouseXY(e); // NS is passing (event), while IE is passing (null)


document.getElementById(focusDiv).style.display ="block";

if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode

document.getElementById(focusDiv).style.top =(mousey+zoomOffset+document.documentElement.scrollTop)+'px';
document.getElementById(focusDiv).style.left = (mousex+zoomOffset+document.documentElement.scrollLeft)+'px';
  
//mousey+= document.documentElement.scrollTop;
//mousex+= document.documentElement.scrollLeft;

}else{
document.getElementById(focusDiv).style.top =(mousey+zoomOffset)+'px';
document.getElementById(focusDiv).style.left = (mousex+zoomOffset)+'px';

mousey-= document.body.scrollTop;
mousex-= document.body.scrollLeft;
}
	



if(((mousey-imgTop)*scalingFactor)>100 ){

if((imgHeight-(mousey-imgTop))<(50/scalingFactor)){
document.getElementById(focusImg).style.top = (imgHeight-(100/scalingFactor))*scalingFactor*-1 +50  +'px';
}else{
document.getElementById(focusImg).style.top = (mousey-imgTop)*scalingFactor*-1 +100 +'px';
}

}else if(mousey-imgTop<0){
document.getElementById(focusDiv).style.display ="none";
}

if(((mousex-imgLeft-zoomOffset)*scalingFactor)>100 ){

if((imgWidth-(mousex-imgLeft))<(50/scalingFactor)){
document.getElementById(focusImg).style.left = (imgWidth-(100/scalingFactor))*scalingFactor*-1 +50+'px'; //right edge
}else{
document.getElementById(focusImg).style.left = (mousex-imgLeft)*scalingFactor*-1 +100+'px'; //left edge
}


}else if(mousex-imgLeft<0){
document.getElementById(focusDiv).style.display ="none";
}


}


}

} 
 
 

function mouseOver(wWidth,imageUrl,imgID){

imgLeft=document.getElementById(imgID).offsetLeft+boxLeft;
imgTop=document.getElementById(imgID).offsetTop+boxTop;

imgHeight=document.getElementById(imgID).offsetHeight;
imgWidth=document.getElementById(imgID).offsetWidth;


var d = new Date();
var t = d.getTime();
focusDiv=t+'newid';
createWindow(focusDiv,wWidth,imageUrl);

zoomTrue=true;


loadImage(imageUrl,'zoom');



}







function createWindow(divId,wWidth,imageUrl){

newWindow=document.createElement('div');
newWindow.id=divId;
document.body.appendChild(newWindow);

newWindow.style.position='absolute';
newWindow.style.display='block';
newWindow.style.height='150px';
newWindow.style.width='150px';

newWindow.style.overflow='hidden';
newWindow.style.zIndex='1000';

newImageDiv=document.createElement('div');
focusImg=divId+"image";
newImageDiv.id=focusImg;

newImageDiv.style.position='relative';

document.getElementById(divId).appendChild(newImageDiv);



}




function mouseOut(focusDiv){
zoomTrue=false;
var del = document.getElementById(focusDiv);
del.parentNode.removeChild(del);
}