// Magnify by Damien Di Fede (code.compartmental.net/magnify)
// 
// This script gradually magnifies an image as you move towards its original center,
// similar to effect used in the Dock on a Mac. All you need to do is 
// give an image's class attribute the value 'magnify', like so:
// 
// <img src="blah.jpg" class="magnify" />
// 
// This script will preserve any existing onmouseover and onmouseout handlers 
// that you add inline or with a script running before this one.
//
// If you want to add an image dynamically, you need to set the
// onmouseover and onmouseout handlers yourself, like so:
//
// myImg.onmouseover = startResize;
// myImg.onmouseout = stopResize;
//
// or, for more than one handler:
//
// myImg.onmouseover = function(e) { myHandler(e); startResize(e); }
//
// magLevel is the magnification factor.
// magLevel = 1 causes the largest magnification of an image to be 100% (ie no change)
// 2 results in 200%, 3 results in 300%, and so forth.

var magLevel = 3;
var activeImg;
var oldLoad = window.onload ;
if (typeof oldLoad != 'function') window.onload = initMenu;
else window.onload = function() { oldLoad(); initMenu(); }
if ( document.captureEvents )
{
  document.captureEvents(Event.MOUSEMOVE)
}
var oldMove = document.onmousemove;
if (typeof oldMove != 'function') document.onmousemove = trackMouse;
else document.onmousemove = function(e) { oldMove(e); trackMouse(e); }

function trackMouse(e)
{
  if ( !e ) e = window.event;
  mX = e.pageX || (e.clientX +
       (document.documentElement.scrollLeft || document.body.scrollLeft));
  mY = e.pageY || (e.clientY +
      (document.documentElement.scrollTop || document.body.scrollTop));
  if ( activeImg )
  {
    var d = activeImg.disCtr(mX, mY);
    var md = activeImg.maxDisCtr;
    var ml = magLevel;
    if ( d < md )
    {
//    linear
      var scale = (1-ml)*(d/md) + ml;
//    bottom half of an ellipse centered at (md, ml + 1)
//       var scale = (1 - ml) * (Math.sqrt(1 - Math.pow((d - md)/md, 2))) + ml;
//    top half on an ellipse centered at (0, ml)
//       var scale = (ml - 1) * Math.sqrt(1 - Math.pow(d/md, 2)) + ml - 1;
      activeImg.resize(scale);
    }
  }
}

function initMenu()
{
  var images = document.getElementsByTagName('img');
  for(i = 0; i < images.length; i++)
  {
    if ( images[i].className.match(/^\bmagnify\b$/) )
    {
      var oldOver = images[i].onmouseover;
      if (typeof oldOver != 'function') images[i].onmouseover = startResize;
      else images[i].onmouseover = function(e) { oldOver(e); startResize(e); }
      var oldOut = images[i].onmouseout;
      if (typeof oldOut != 'function') images[i].onmouseout = stopResize;
      else images[i].onmouseout = function(e) { oldOut(e); stopResize(e); }
      images[i].style.width = parseInt(images[i].offsetWidth) + 'px';
      images[i].style.height = parseInt(images[i].offsetHeight) + 'px';
    }
  }
}

function startResize(e)
{
  if (!e) e = window.event;
  var elem = e.target || e.srcElement;
  if ( !elem ) return;
  activeImg = new MenuItem(elem);
}

function stopResize(e)
{
  activeImg.reset();
  activeImg = null;
}


function MenuItem(htmlElement)
{
  this.elem = htmlElement;
  this.realW = parseInt(this.elem.offsetWidth);
  this.realH = parseInt(this.elem.offsetHeight);
  this.ctrX = findPosX(this.elem) + this.realW/2;
  this.ctrY = findPosY(this.elem) + this.realH/2;
  this.maxDisCtr = Math.sqrt( Math.pow(this.realW/2, 2) + Math.pow(this.realH/2, 2) );
  
  this.resize = function(percent) {
                  this.elem.style.width = (this.realW * percent) + 'px';
                  this.elem.style.height = (this.realH * percent) + 'px';
  }

  this.disCtr = function(x, y) {
                  var disCtrX = Math.abs(this.ctrX - x);
                  var disCtrY = Math.abs(this.ctrY - y);
                  return Math.sqrt( Math.pow(disCtrX, 2) + Math.pow(disCtrY, 2) );
  }
  
  this.reset = function() {
                 this.elem.style.width = this.realW + 'px';
                 this.elem.style.height = this.realH + 'px';
  }
  
  this.toString = function() { return this.elem.getAttribute('src'); }
}

// the following two functions are copied from quirksmode:
// http://www.quirksmode.org/js/findpos.html
function findPosX(obj)
{
  var curleft = 0;
  if (obj.offsetParent)
  {
    while (obj.offsetParent)
    {
      curleft += obj.offsetLeft;
      obj = obj.offsetParent;
    }
  }
  else if (obj.x) curleft += obj.x;
  return curleft;
}

function findPosY(obj)
{
  var curtop = 0;
  if (obj.offsetParent)
  {
    while (obj.offsetParent)
    {
      curtop += obj.offsetTop;
      obj = obj.offsetParent;
    }
  }
  else if (obj.y) curtop += obj.y;
  return curtop;
}