// JavaScript Document
// Javascript
// <img dir="ltr" class="preview" style="margin:0; width:80px; height:107.5px; z-index:0" src="" alt="xxx" title="xxx" onmouseover="larger(this,160,215)" onmouseout="smaller(this,160,215)" />

// CSS
// /*div.previews { position: relative; }*/
// div.preview { margin: 0 8px 8px 0; }
// img.preview { position: absolute; }
// div.large-preview{
//	position: relative;
//  float: left;
//  margin: 0 2em 1em 0;
//}

function setZoom(img, dir, width, height, margin, zIndex, delay) {
  setTimeout(function() {
    if (img.dir == dir) {
      img.style.width = width;
      img.style.height = height;
      img.style.margin = margin;
      img.style.zIndex = zIndex;
      img.parentNode.parentNode.style.zIndex = zIndex;
    }
  }, delay);
}

function larger(img, width, height) {
  img.dir = 'rtl';
  var now = parseInt(img.style.zIndex);
	//var d = document.getElementById('ref1');
  for(var i=now+1; i<=10; i++) {
    w = (width*(10+i))/20+'px';
    h = (height*(10+i))/20+'px';
    m = (-i)+'px 0 0 '+(-width*i/40)+'px';
		//d.style.display = 'none';
    setZoom(img, 'rtl', w, h, m, i, 20*(i-now));
  }
}

function smaller(img, width, height) {
  img.dir = 'ltr';
  var now = parseInt(img.style.zIndex);
	//var d = document.getElementById('ref1');
  for(var i=now-1; i>=0; i--) {
    w = (width*(10+i))/20+'px';
    h = (height*(10+i))/20+'px';
    m = (-i)+'px 0 0 '+(-width*i/40)+'px';
		//d.style.display = 'block';
    setZoom(img, 'ltr', w, h, m, i, 20*(now-i));
  }
}