/**
 * To make this work (as it's currently written) activate it like this:
 * <a href="some_image.jpg" target="_new"
 *    onMouseOver="display(this);"
 *    onMouseOut ="hide(this);">Image</a>
 */
const WINDOW_WIDTH=window.innerWidth?
                   window.innerWidth:
                   parent.document.body.clientWidth;
const WINDOW_HEIGHT=window.innerHeight?
                    window.innerHeight:
                    parent.document.body.clientHeight;
const ns=(document.layers)?true:false;
const ie=(document.all)?true:false;
const w3=(document.getElementById)&&(!ie);
var imgbox;
function img_box(id) {
   img_box.MAX_OFFSET_X=50;
   img_box.MAX_OFFSET_Y=50;
   img_box.MAX_WIDTH=300;
   img_box.MAX_HEIGHT=300;
   img_box.MAX_STEP=50;
   img_box.DEF_OFFSET_X=5;
   img_box.DEF_OFFSET_Y=5;
   img_box.DEF_STEP=1;
   var yOffset;
   var mouseOver;
   var mouseOffsetX;
   var mouseOffsetY;
   var mouseStep;
   var width;
   var height;
   var moveIntervalID;
   var container;
   // call to "construct()" at bottom ("not defined" errors)
   img_box.prototype.setContainer=function(argv,forceReset) {
      if (typeof forceReset=="boolean"&&forceReset) {
         container=null;
      }
      var type=(typeof argv);
      if (type="object"&&typeof argv.innerHTML!="undefined") {
         container=argv;
      } else if (type=="string"||type=="number") {
         container=get_by_id(id);
      }
      if (container==null) {
         container=document.createElement("div");
         container.style.position="absolute";
         if (type!="undefined") {
            container.id=id;
         }
         document.body.appendChild(container);
      }
   }
   img_box.prototype.setImgContent=function(src) {
      var img=document.createElement("img");
      img.src=src;
      var constraints=constrainWH(img.width ,width,
                                  img.height,height);
      img.width =constraints[0];
      img.height=constraints[1];
      while (container.firstChild) {
         container.removeChild(container.firstChild);
      }
      container.appendChild(img);
   }
   img_box.prototype.setStep=function(s) {
      mouseStep=s;
   }
   img_box.prototype.getStep=function() {
     return mouseStep;
   }
   img_box.prototype.setOffset=function(o) {
      var x=mouseOffsetX;
      if (!(img_box.prototype.setOffsetX(o)&&img_box.prototype.setOffsetY(o))) {
         mouseOffsetX=x;
         return false;
      }
      return true;
   }
   img_box.prototype.setOffsetX=function(o) {
      if (o<0||o>MAX_OFFSET_X) {return false;}
      mouseOffsetX=o;
      return true;
   }
   img_box.prototype.getOffsetX=function() {
      return mouseOffsetX;
   }
   img_box.prototype.setOffsetY=function(o) {
      if (o<0||o>MAX_OFFSET_Y) {return false;}
      mouseOffsetY=o;
      return true;
   }
   img_box.prototype.getOffsetY=function() {
      return mouseOffsetY;
   }
   img_box.prototype.setDims=function(o) {
      var w=width;
      if (!(img_box.prototype.setWidth(o)&&img_box.prototype.setHeight(o))) {
         width=w;
         return false;
      }
      return true;
   }
   img_box.prototype.setWidth=function(o) {
      if (o<0||o>MAX_WIDTH) {return false;}
      width=o;
      return true;
   }
   img_box.prototype.getWidth=function() {
      return width;
   }
   img_box.prototype.setHeight=function(o) {
      if (o<0||o>MAX_HEIGHT) {return false;}
      height=o;
      return true;
   }
   img_box.prototype.getHeight=function() {
      return height;
   }
   img_box.prototype.startMove=function(src) {
      beginXYcapture();
      img_box.prototype.setImgContent(src);
      mouseOver=true;
      img_box.prototype.moveContainerToMouse();
      img_box.prototype.showContainer();
      moveIntervalID=window.setInterval(img_box.prototype.moveContainerToMouse,25);
   }
   img_box.prototype.endMove=function() {
      if (moveIntervalID!="") {
         window.clearInterval(moveIntervalID);
      }
      moveIntervalID="";
      img_box.prototype.hideContainer();
      endXYcapture();
      mouseOver=false;
      container.innerHTML="";
      img_box.prototype.moveContainerToStart();
   }
   img_box.prototype.showContainer=function() {
      try {
         container.style.display='block';
         container.style.visibility='visible';
      } catch (err1) {
         return false;
      }
      return true;
   }
   img_box.prototype.hideContainer=function() {
      try {
         container.style.display='none';
         container.style.visibility='hidden';
      } catch(err1) {
         return false;
      }
      return true;
   }
   img_box.prototype.moveContainerToMouse=function() {
      if (!mouseOver) {
         return;
      }
      var divWidth =parseInt(container.offsetWidth);
      var divHeight=parseInt(container.offsetHeight);
      var x=X;
      var y=Y;
      var yMod=y-(y%mouseStep);
      var xMod=x-(x%mouseStep);
      var newLeft=xMod+mouseOffsetX;
      var newTop =yMod+mouseOffsetY;
      if (newLeft+divWidth>WINDOW_WIDTH) {
         newLeft=xMod-(mouseOffsetX+divWidth);
      }
      if (newTop+divHeight>WINDOW_HEIGHT) {
         newTop=yMod-(mouseOffsetY+divHeight);
      }
      container.style.left=newLeft+'px';
      container.style.top =newTop+'px';
   }
   img_box.prototype.moveContainerToStart=function() {
      container.style.left=0+'px';
      container.style.top =0+'px';
   }
   function construct(id) {
      mouseOver=false;
      mouseOffsetX=img_box.DEF_OFFSET_X;
      mouseOffsetY=img_box.DEF_OFFSET_Y;
      mouseStep=img_box.DEF_STEP;
      width=img_box.MAX_WIDTH;
      height=img_box.MAX_HEIGHT;
      moveIntervalID="";
      img_box.prototype.setContainer(id);
      var temp=0;
      if (ie) {
         temp=document.body.scrollTop;
      } else if (ns) {
         temp=window.pageYOffset;
      } else if (w3) {
         temp=pageYOffset;
      }
      yOffset=parseInt(temp);
   }
   construct(id);
}
// USED FOR X/Y CAPTURE
xyChange=false;
X=0;
Y=0;
ie=(document.all)?true:false;
function setMouseXY(e) {
   var tempX;
   var tempY;
   if (ie) {
      tempX=window.event.clientX+document.body.scrollLeft;
      tempY=window.event.clientY+document.body.scrollTop;
   } else {
      tempX=e.pageX;
      tempY=e.pageY;
   }
   if (tempY<0) {tempX=0;}
   if (tempY<0) {tempY=0;}
   if (X!=tempX||Y!=tempY) {
      xyChange=true;
   }
   X=tempX;
   Y=tempY;
   return true;
}
function XYchanged() {
   var ret=xyChange;
   xyChange=false;
   return ret;
}
function beginXYcapture() {
   if (!ie) {
      document.captureEvents(Event.MOUSEMOVE);
   }
   document.onmousemove=setMouseXY;
}
function endXYcapture() {
   document.onmousemove=null;
}
// END X/Y CAPTURE USE
function get_by_id(id) {
   return document.getElementById?document.getElementById(id):
          document.all?document.all[id]:0;
}
function constrainWH(width,maxWidth,height,maxHeight) {
   var divider;
   if (width>maxWidth&&width!=0) {
      divider=width/maxWidth;
      width/=divider;
      height/=divider;
   }
   if (height>maxHeight&&height!=0) {
      divider=height/maxHeight;
      width/=divider;
      height/=divider;
   }
   return [Math.round(width),Math.round(height)];
}
window.onload=function() {
   imgbox=new img_box('imgbox');
   imgbox.endMove();
}
function display(elem) {
   imgbox.startMove(elem.href);
}
function hide() {
   imgbox.endMove();
}

function mydisplay(elem) {
   imgbox.startMove(elem.href);
}
function myhide() {
   imgbox.endMove();
}