// config vars
var z_loadingImg = thisUrl+'assets/images/loading.gif';
var z_loadingImgWidth = 45;
var z_background = 'white';
var z_missing_message = 'Sorry but this Zoom Image is not available';
// internal vars
var picId = null;
var alwaysVisible = true;
var popupZoom = false;
var clickable = true;
var notclickable = false;
var z_index = 2100;
//
var zoomloadlist = new Array;
var zoomersloaded = false;
var debug = null;
//
function initZoomers() {
  zoomersloaded = true;
  for (var i = 0; i < zoomloadlist.length; i++) {
    var a = zoomloadlist[i];
    if (a.proc == makeZoomable) {
      makeZoomable(a.imgid, a.zoomid, a.zoomClass, a.largeImg, a.alwaysVisible, a.loadPrompt, a.frigmag, a.floating);
    }
    if (a.proc == jbMakeZoomable) {
      jbMakeZoomable(a.imgid, a.largeImg, a.okToClick, a.clickOn, a.clickOff, a.frigpos);
    }
    if (a.proc == btMakeZoomable) {
      btMakeZoomable(a.imgid, a.largeImg, a.boxsize, a.options);
    }
  }
//debug = document.getElementById('debug');
}
//
function isIE() {
  if ((navigator.userAgent && navigator.userAgent.indexOf("MSIE") != -1)) {
//  && (navigator.vendor && navigator.vendor.indexOf("Apple") == -1)
//  && (navigator.userAgent && navigator.userAgent.indexOf("Firefox") == -1)) {
    return true;
  }
  return false;
}
//
function cssStyleZoom(el, property) {
  var res = el.style[property];
  if (!res) {
    if (el.currentStyle && el.currentStyle[property]) {
      res = el.currentStyle[property];
    } else {
      // this method uses 'background-image' not the passed format of 'backgroundImage'
      prop = "";
      for (var i=0; i < property.length; i++) {
        if (property.charAt(i) == property.charAt(i).toUpperCase()) {
          prop += '-' + property.charAt(i).toLowerCase(); }
        else {
          prop += property.charAt(i); }
      }
      try {
      res = getComputedStyle(el,'').getPropertyValue(prop);
      } catch(err) {}
    }
  }
  if (!res) { res = ''; }
  if (typeof(res) == 'string') { res = res.replace('px',''); }
  return res;
}
//------------
function createDynamicDiv(id ) {
  var div = document.getElementById(id);
  if (!div) {
    div = document.createElement('div');
    div.setAttribute('id', id);
    div.setAttribute('name', id);
    div.style.display = 'none';
    document.body.appendChild(div);
  }
  return div;
}
//
function mouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
   return evt.clientX + (document.documentElement.scrollLeft ?
   document.documentElement.scrollLeft :
   document.body.scrollLeft);
else return null;
}
//
function mouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
   return evt.clientY + (document.documentElement.scrollTop ?
   document.documentElement.scrollTop :
   document.body.scrollTop);
else return null;
}
//
function bodyMouseMove(event, el) {
  if (picId) { bodyMouseOver(event, picId); }
}
//
var zoomTimer = null;
var cc  = 0;
function zoomTimerShowit() {
  zoomTimer = setTimeout( 'zoomOnTimerShowit()' , 300 );
}
function zoomOnTimerShowit() {
  if (picId) {
    picId.data.zoomdiv.style.display = 'block';
    picId.data.zoomdiv.lastpos = '';
    hideSelects();
    zoomTimerRefreshPos();
  }
}
function zoomTimerRefreshPos() {
  if (picId) {
    try {
      if (picId.data.zoomdiv.bPos == undefined) { picId.data.zoomdiv.bPos = '0px 0px'; }
      if (picId.data.zoomdiv.lastpos != picId.data.zoomdiv.bPos) {
        picId.data.zoomdiv.style.backgroundPosition = picId.data.zoomdiv.bPos;
      }
    } catch(err) {
//      alert(picId.data.zoomdiv.lastpos+'|'+picId.data.zoomdiv.bPos);
    }
//    zoomTimer = setTimeout( 'zoomTimerRefreshPos()' , 50 );
  }
}
//
function bodyMouseOver(event, el) {
  event = event || window.event;
//  debug.innerHTML = x+' '+y+' '+picId.data.elL+' '+picId.data.elT+' '+(picId.data.elL + picId.data.elW)+' '+(picId.data.elT + picId.data.elH);
//if (debug) debug.innerHTML += ' in';
  if (picId) {
    if (event) {
      var x = mouseX(event);
      var y = mouseY(event);
    }

    var lpid = picId;
    if (el == undefined) { el = lpid; }
//if (debug) debug.innerHTML += ' '+lpid.data.imgid+' '+x+' '+y+' '+lpid.data.elL+' '+(lpid.data.elL + lpid.data.elW)+' '+lpid.data.elT+' '+(lpid.data.elT + lpid.data.elH);
//if (debug) debug.innerHTML += ' '+lpid.data.imgid;
    if ((lpid != el) || lpid.data.noImage || !event || (x <= lpid.data.elL) || (x >= lpid.data.elL + lpid.data.elW) || (y <= lpid.data.elT) || (y >= lpid.data.elT + lpid.data.elH)) {
      picId = null;
//if (debug) debug.innerHTML += ' tidy';

      if (lpid.data.magbox) {
        if (!lpid.data.alwaysOn) { lpid.data.magbox.style.display = 'none'; }
      }
      if (lpid.data.zoomdiv) {
        clearTimeout(zoomTimer);
        lpid.data.zoomdiv.style.display = (lpid.data.alwaysOn ? 'block' : 'none');
      }

      if (lpid.data.promptDiv) {
        lpid.data.promptDiv.style.display = 'none';
      }
      lpid.data.over = false;
      showSelects();
    }
  }
}
//
function getPos(el1) {
  var x = el1.offsetLeft; var y = el1.offsetTop;
  while (el1=el1.offsetParent) {
    x += el1.offsetLeft+(el1.clientLeft ? el1.clientLeft : 0);
    y += el1.offsetTop+(el1.clientTop ? el1.clientTop : 0);
  }
  return { x: x, y: y }
}
//
//
function windowHeight() {
  return  window.innerHeight != null ? window.innerHeight : document.documentElement && document.documentElement.clientHeight ?  document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null; }
//
function zoomMouseOver(event, el) {
  if (!el || !el.id) return;
  event = event || window.event;
//if (debug) debug.innerHTML += ' OVER '+el.data.imgid;
  if (el.data && el.data.over)  return;
  if (el.data.noImage) { bodyMouseOver(event, el); return; }
  if (picId && picId != el) { bodyMouseOver(event); if (picId != null) { return; } }
  el.data.over = true;
  picId = el;

//if (debug) debug.innerHTML += ' Picid set';

  pos = getPos(el);
  el.data.elT = pos.y;
  el.data.elL = pos.x;
  if (el.data.promptDiv) {
    el.data.promptDiv.style.left = (el.data.elL+10)+'px';
    el.data.promptDiv.style.top = (el.data.elT+10)+'px'; //Math.round(el.data.elT+(el.data.elH/2)-10)+'px';
    el.data.promptDiv.style.display = 'block';
  } else {
    z_index++;
    el.data.zoomdiv.style.zIndex = z_index+'';
//    el.data.zoomdiv.style.display = 'block';
    zoomTimerShowit();
    var ht = 0;
    if (cssStyleZoom(el.data.zoomdiv,'position') == 'absolute') {
      var marginLeft = cssStyleZoom(el.data.zoomdiv,'marginLeft')-0;
      el.data.zoomdiv.style.top = pos.y + 'px';
      el.data.zoomdiv.style.left = (pos.x + el.data.elW+marginLeft) + 'px';
//      el.data.zoomdiv.style.right = (pos.x + el.data.elW+marginLeft) + 'px';
    }
//  var debug = document.getElementById('debug');
//  debug.innerHTML = el.data.zoomdiv.style.height;

    if ( !el.data.loaded && !el.data.loading) {
      el.data.loading = true;
      el.data.zoomImg = null;
      el.data.zoomImg = new Image;
      el.data.zoomImg.onload = null;
      el.data.zoomImg.onerror = null;
//      el.data.zoomImg.src = '';
      el.data.zoomdiv.style.backgroundColor = z_background;
      el.data.zoomdiv.style.backgroundImage = 'url('+z_loadingImg+')';
      el.data.zoomdiv.style.backgroundPosition = (Math.round(el.data.zdW/2)-Math.round(z_loadingImgWidth/2))+'px '+(Math.round(el.data.zdH/2)-Math.round(z_loadingImgWidth/2))+'px';
//alert(el.data.zoomdiv.style.backgroundImage);
      el.data.zoomImg.onerror = function() {
        el.data.zoomImg.onload=null;
//        el.data.loaded = true;
        // loading is still true so it wont get here again
        el.data.noImage = true;
        el.data.zoomdiv.style.backgroundImage = '';
        el.data.zoomdiv.style.display = 'none';
        bodyMouseOver(event);
        if (z_missing_message && !el.data.floating) { alertX(z_missing_message); }
//        if (z_missing_message && el.data.floating) { document.title = el.data.largeImg; }
      }
      el.data.zoomImg.onload = function() { zoomloadzoom(event,el); }
      el.data.zoomImg.src = el.data.largeImg;
    }
  }
  if (!el.data.noImage) {
    el.data.magbox.style.display = 'block';
    if (!el.data.floating) { el.style.cursor = 'crosshair'; }
  }

//alert(el.data.zdH+' '+el.data.ratioH);
  if (picId) { zoomSetMagBoxSize(el) }

  if (picId) { zoomMouseMove(event, picId); }
//  var debug = document.getElementById('debug');
//  debug.innerHTML = el.data.zoomdiv.style.top+' '+el.data.zoomdiv.style.left+' '+el.data.zoomdiv.style.backgroundImage;

}
//
function resizeAndRepos(el) {
var posy = '';
  var maxht = windowHeight();
  var ht = el.data.zoomdiv.origHeight;
  var top = el.data.elT;
  var topM = cssStyleZoom(el.data.zoomdiv,'marginTop')-0;
  var hmin = (document.documentElement.scrollTop ? document.documentElement.scrollTop : (window.pageYOffset ? window.pageYOffset : 0));
  if (typeof(hmin) != 'number' || hmin < 0) { hmin = 0; }
  if (ht > el.data.ziH) { ht = el.data.ziH; } // shrink div to image size

//document.title = 'xxmaxht='+maxht + ' top=' + top + ' oldht+' + el.data.zoomdiv.origHeight + ' zih='+ el.data.ziH + ' hmin=' + hmin + ' posy='+posy + ' tot='+(top + ht - hmin);
  if (el.data.floating) {
    if (ht > maxht) { ht = maxht; }
    if (top + topM < hmin) { top = hmin - topM; }
    if (maxht-4 < top + ht - hmin) {
//      el.data.zoomdiv.style.marginTop = 0;
//document.title = 'maxht='+maxht + ' top=' + top + ' ht+' + ht + ' zih='+ el.data.ziH + ' hmin=' + hmin + ' tot='+(top + ht - hmin);
      top = maxht - ht + hmin-4 - topM;
//document.title = document.title + ' topm=' + topM;
    }
    if (top + topM < hmin) { top = hmin - topM; }
  } else {
    if (maxht-4 < top + ht - hmin) {
      ht = (maxht - top + hmin-4);
    }
  }
  el.data.zdH = ht;
  el.data.zoomdiv.style.height = ht + 'px';
  el.data.zoomdiv.style.top = top + 'px';
}
//
function zoomSetMagBoxSize(el) {
  resizeAndRepos(el)
  if (el.data.ratioH) {
//    el.data.zdH = cssStyleZoom(el.data.zoomdiv,'height')-0;
    if (el.data.ziH < el.data.zdH) { el.data.zdH = el.data.ziH; }
  		el.data.mgH = Math.round(el.data.zdH / el.data.ratioH);
    el.data.magbox.style.height = (el.data.mgH-2)+'px';
  }
  if (el.data.floating && (el.data.mgH == el.data.elH) && (el.data.mgW == el.data.elW)) {
    el.data.magbox.style.display = 'none';
  }
}
//
function zoomloadzoom(event, el) {
//alert(el.data.zoomImg.complete);
  if (el.data.loaded) return;
  el.data.loaded = true;  // cos ie doesnt set complete before the onload call
  el.data.loading = false;

		el.data.ziW = el.data.zoomImg.width;
		el.data.ziH = el.data.zoomImg.height;

  el.data.zoomImg = null;

  if (el.data.ziW < el.data.zdW) { el.data.zdW = el.data.ziW; }
  if (el.data.ziH < el.data.zdH) { el.data.zdH = el.data.ziH; }

  el.data.zoomdiv.style.width = el.data.zdW + 'px';
  el.data.zoomdiv.style.height = el.data.zdH + 'px';

		el.data.ratioW = (el.data.ziW) / (el.data.elW);
		el.data.ratioH = (el.data.ziH) / (el.data.elH);
		el.data.mgW = Math.round(el.data.zdW / el.data.ratioW);
		el.data.mgH = Math.round(el.data.zdH / el.data.ratioH);

  el.data.magbox.style.width = (el.data.mgW-2)+'px';  // -2 for border
  el.data.magbox.style.height = (el.data.mgH-2)+'px';

  el.data.zoomdiv.style.backgroundImage = 'url('+el.data.largeImg+')';
  zoomSetMagBoxSize(el)
  zoomMouseMove(event,el);
}
//
function magboxMouseMove(event, el) {
  zoomMouseMove(event, picId);
}
//
function magboxMouseOut(event, el) {
  bodyMouseOver(event);
}
//
function zoomClick(event, el) {
  event = event || window.event;
  if (picId) {
   if (picId.data.promptDiv) {
     picId.data.promptDiv.style.display = 'none';
     picId.data.promptDiv = null;
     opicId = picId;
     opicId.data.over = false;
     opicId.data.noImage = false;
     picId = null;
     zoomMouseOver(event,opicId);
   }
  }
}
//
function zoomMouseMove(event, el) {
  event = event || window.event;
//  if (!el || !el.id) return;
//if (debug) debug.innerHTML += ' MOVE '+el.data.imgid;
  if (!picId || picId != el) { zoomMouseOver(event, el); }
  if (!picId) return;
  if (picId.data.noImage) { picId.data.magbox.style.display = 'none'; return; }
  
  var ofsW = Math.round(picId.data.mgW/2)+1;
  var ofsH = Math.round(picId.data.mgH/2)+1;

  var x = mouseX(event) - ofsW
  if (x < picId.data.elL) x = picId.data.elL;
  if (x > picId.data.elL+picId.data.elW-picId.data.mgW-picId.data.frigmag.l) x = picId.data.elL+picId.data.elW-picId.data.mgW-picId.data.frigmag.l;

  var y = mouseY(event) - ofsH;
  if (y < picId.data.elT) y = picId.data.elT;
  if (y > picId.data.elT+picId.data.elH-picId.data.mgH-picId.data.frigmag.t) y = picId.data.elT+picId.data.elH-picId.data.mgH-picId.data.frigmag.t;

  picId.data.magbox.style.top = y+picId.data.frigmag.t-0+'px';
  picId.data.magbox.style.left = x+picId.data.frigmag.l-0+'px';

  if (!el.data.loaded) return

  if (picId.data.zoomdiv) {
    var x1 = Math.round((x-picId.data.elL)*picId.data.ratioW);
    var y1 = Math.round((y-picId.data.elT)*picId.data.ratioH);
    if (x1 > picId.data.ziW-picId.data.zdW) { x1 = picId.data.ziW-picId.data.zdW; }
    if (y1 > picId.data.ziH-picId.data.zdH) { y1 = picId.data.ziH-picId.data.zdH; }
    el.data.zoomdiv.bPos = (-x1)+'px '+(-y1)+'px';
//    picId.data.zoomdiv.style.backgroundPosition = (-x1)+'px '+(-y1)+'px';
  }

//  var debug = document.getElementById('debug1');
//  debug.innerHTML = (x)+' '+(y)+' '+(el.data.elT)+' '+el.data.elH+' '+(el.data.mgH)+' '+el.data.ziW;
  zoomTimerRefreshPos();
}
//
function makeZoomable2(imgid, zoomid, zoomClass, largeImg, alwaysVisible, loadPrompt, frigmag, floating) {
  zoomloadlist[zoomloadlist.length] = { 'proc':makeZoomable,
   'imgid':imgid, 'zoomid': zoomid, 'zoomClass': zoomClass,
   'largeImg': largeImg, 'alwaysVisible': alwaysVisible, 'loadPrompt': loadPrompt, 'frigmag': frigmag, 'floating': floating }
}
//
// if zoomid = '' then create a popup one
function makeZoomable(imgid, zoomid, zoomClass, largeImg, alwaysVisible, loadPrompt, frigmag, floating) {
  if (!zoomersloaded) {
    makeZoomable2(imgid, zoomid, zoomClass, largeImg, alwaysVisible, loadPrompt, frigmag, floating)
    return;
  }

  var el = document.getElementById(imgid);
  if (!el.data) { el.data = { }; }
  el.title = '';
  el.alt = '';
  el.data.imgid = imgid;
  el.data.zoomid = zoomid;
  el.data.zoomClass = zoomClass;
  el.data.largeImg = largeImg;
  el.data.alwaysOn = alwaysVisible;
  el.data.prompt = loadPrompt;
  el.data.floating = (floating ? true : false);
  el.data.loaded = false;
  el.data.loading = false;
  el.data.over = false;
  el.data.noImage = false;  // switch everything off if image is missing
  if (el.data.zoomdiv) {
    el.data.zoomdiv.style.display = (el.data.alwaysOn ? 'block' : 'none');
    el.data.zoomdiv.style.backgroundImage = '';
  }
  el.data.zoomImg = null;

  el.data.frigmag = { 'l':0, 't':0 }  // fix for ie padding screw up
  if (frigmag) {
    frigmag = frigmag.split(',');
    if (frigmag[0]) { el.data.frigmag.t = frigmag[0]-0; }
    if (frigmag[1]) { el.data.frigmag.l = frigmag[1]-0; }
    if (isIE()) {
      if (frigmag[2]) { el.data.frigmag.t += frigmag[2]-0; }
      if (frigmag[3]) { el.data.frigmag.l += frigmag[3]-0; }
    }
  }

  if (el.complete) { zoomloadimg(el); }
  else {
    el.onload = function () { zoomloadimg(el); };
  }
}
//
function zoomloadimg(el) {
  if (!el.data.zoomid) {
    el.data.zoomdiv = createDynamicDiv(el.data.imgid+'_zoom');
  } else {
    el.data.zoomdiv = document.getElementById(el.data.zoomid);
  }
  if (!el.data.zoomClass) {
    el.data.zoomdiv.style.position = 'absolute';
    el.data.zoomdiv.style.width = el.width + 'px';
    el.data.zoomdiv.style.height = el.height + 'px';
    el.data.zoomdiv.style.marginLeft = '20px';
  } else {
    el.data.zoomdiv.className = el.data.zoomClass;
  }

  // init in case next image is a different size to last one
  if (!el.data.zoomdiv.origHeight) {
    el.data.zoomdiv.origWidth = cssStyleZoom(el.data.zoomdiv,'width')-0;
    el.data.zoomdiv.origHeight = cssStyleZoom(el.data.zoomdiv,'height')-0;
  }
  el.data.zdH = el.data.zoomdiv.origHeight;
  el.data.zdW = el.data.zoomdiv.origWidth;
  el.data.ziH = el.data.zdH;
  el.data.ziW = el.data.zdW;
//  if (el.data.zdH = 'NaN') { el.data.zdH = 100; };

  el.data.zoomdiv.style.backgroundRepeat = 'no-repeat';
  el.data.zoomdiv.style.backgroundPosition = '0px 0px';
  el.data.zoomdiv.style.backgroundColor = 'white';

  el.data.elW = el.width;
  el.data.elH = el.height;
  el.data.mgW = (el.width >= 32 ? 32 : el.width);
  el.data.mgH = (el.height >= 32 ? 32 : el.height);
  el.data.ratioH = 0;  // bypass call to zoomSetMagBoxSize until zoom image size is known
  
  var magbox = createDynamicDiv(el.data.imgid+'_mag');
  magbox.className = 'zoomMagBox';
  magbox.style.position = 'absolute';
  magbox.style.width = (el.data.mgW-2)+'px';  // -2 for border
  magbox.style.height = (el.data.mgH-2)+'px';
  magbox.style.cursor = 'crosshair';
  magbox.data = { owner : el };

  el.data.magbox = magbox;
  if (!el.data.floating) el.style.cursor = 'crosshair';

  el.data.promptDiv = null;
  if (el.data.prompt) {
    el.data.promptDiv = createDynamicDiv(el.data.imgid+'_prompt');
    el.data.promptDiv.style.position = 'absolute';
    el.data.promptDiv.style.backgroundColor = 'white';
    el.data.promptDiv.style.border = '1px solid #039';
    el.data.promptDiv.style.width = 'auto';//(el.data.elW-20)+'px';
    el.data.promptDiv.style.height = '20px';
    el.data.promptDiv.style.padding = '0 10px';
    el.data.promptDiv.style.lineHeight = '20px';
    el.data.promptDiv.style.color = 'black';
    el.data.promptDiv.style.fontSize = '11px';
    el.data.promptDiv.style.textAlign = 'center';
    el.data.promptDiv.style.cursor = 'crosshair';
    el.data.promptDiv.innerHTML = el.data.prompt;
    el.data.promptDiv.onclick = function(event) { zoomClick(event, this); }
    el.data.magbox.onclick = function(event) { zoomClick(event, this); }
//    el.data.promptDiv.onmouseout = function(event) { magboxMouseOut(event, this); }
  }
//  var debug = document.getElementById('debug');
//  debug.innerHTML = el.data.elW+' '+el.data.elH+' '+el.data.mgW+' '+el.data.mgH+' '+el.data.zmW+' '+el.data.zmH;

  el.onmouseover = function(event) { zoomMouseOver(event, this); }
  el.onmouseout = function(event) { magboxMouseOut(event, this); }
  el.onmousemove = function(event) { zoomMouseMove(event, this); }
  magbox.onmouseout = function(event) { magboxMouseOut(event, this); }
  magbox.onmousemove = function(event) { magboxMouseMove(event, this); }
  document.body.onmouseover = function(event) { bodyMouseOver(event); }
//  document.body.onmousemove = function(event) { bodyMouseMove(event); }
}
//
function jbzoomMouseOver(event, el) {
  if (!el || !el.id) return;
  event = event || window.event;
  picId = el;
  el.alt = '';
  el.title = '';
  if (picId) { jbzoomMouseMove(event, picId); }
//  var debug = document.getElementById('debug');
//  debug.innerHTML = el.data.zoomdiv.style.top+' '+el.data.zoomdiv.style.left+' '+el.data.zoomdiv.style.backgroundImage;
}
//
function jbzoomMouseOut(event, el) {
  bodyMouseOver(event);
}
//
function jbzoomMouseMove(event, el) {
  event = event || window.event;
  if (!el || !el.id) return;
  if (!picId) jbzoomMouseOver(event, el);
  if (!picId) return;

  var picIdo = picId.data.owner;

  if (picIdo.data && !picIdo.data.loaded) return;

  var y = mouseY(event);
  var y1 = Math.round((y-picId.data.elT)*picIdo.data.ratioH);
  var x = mouseX(event);
  var x1 = Math.round((x-picId.data.elL)*picIdo.data.ratioW);

  if (x1 > picIdo.data.ziW-picId.data.elW) { x1 = picIdo.data.ziW-picIdo.data.elW; }
  if (y1 > picIdo.data.ziH-picId.data.elH) { y1 = picIdo.data.ziH-picIdo.data.elH; }

  if (picId) { picId.style.backgroundPosition = (-x1)+'px '+(-y1)+'px'; }

//  var debug = document.getElementById('debug1');
//  debug.innerHTML = (x1)+' '+(y1);
}
//
function jbMakeZoomable2(imgid, largeImg, okToClick, clickOn, clickOff, frigpos) {
  zoomloadlist[zoomloadlist.length] = { 'proc':jbMakeZoomable,
   'imgid':imgid, 'largeImg': largeImg,
   'okToClick': okToClick, 'clickOn': clickOn, 'clickOff':clickOff, 'frigpos':frigpos }
}
//
function jbMakeZoomable(imgid, largeImg, okToClick, clickOn, clickOff, frigpos) {
  if (!zoomersloaded) {
    jbMakeZoomable2(imgid, largeImg, okToClick, clickOn, clickOff, frigpos)
    return;
  }
  jbZoomStop(imgid);
  var el = document.getElementById(imgid);
  if (!el.data) { el.data = { }; }
  el.data.imgid = imgid;
//  largeImg = largeImg.replace('.jpg','_zoom.jpg');
  el.data.largeImg = largeImg;
  el.data.okToClick = okToClick;
  el.data.clickOn = clickOn;
  el.data.clickOff = clickOff;
  el.data.loaded = false;
  el.data.loading = false;

  el.data.frigpos = { 'l':0, 't':0, 'w':0, 'h':0 }
  if (frigpos) {
    frigpos = frigpos.split(',');
    if (frigpos[0]) { el.data.frigpos.t = frigpos[0]-0; }
    if (frigpos[1]) { el.data.frigpos.l = frigpos[1]-0; }
    if (frigpos[2]) { el.data.frigpos.w = frigpos[2]-0; }
    if (frigpos[3]) { el.data.frigpos.h = frigpos[3]-0; }
    if (isIE()) {
      if (frigpos[4]) { el.data.frigpos.t += frigpos[4]-0; }
      if (frigpos[5]) { el.data.frigpos.l += frigpos[5]-0; }
      if (frigpos[6]) { el.data.frigpos.w += frigpos[6]-0; }
      if (frigpos[7]) { el.data.frigpos.h += frigpos[7]-0; }
    }
  }

  if (el.data.zoomdiv) {
    el.data.zoomdiv.style.display = 'none';
    el.data.zoomdiv.style.backgroundImage = '';
  }
  el.data.zoomImg = null;

  if (el.complete) { jbzoomloadimg(el); }
  else {
    el.onload = function () { jbzoomloadimg(el); };
  }
}
//
function jbzoomloadimg(el) {
  el.data.elW = el.width-0+(el.data.frigpos.w-0);
  el.data.elH = el.height-0+(el.data.frigpos.h-0);

  var magbox = createDynamicDiv(el.data.imgid+'_mag');
  el.data.jbmagbox = magbox;  // called jbmagbox so the bodyOver func doesnt try to hide it
  magbox.data = { };
//  magbox.data.largeImg = largeImg;
  magbox.data.elW = el.data.elW;
  magbox.data.elH = el.data.elH;
  magbox.style.position = 'absolute';
  magbox.style.width = magbox.data.elW+'px';
  magbox.style.height = magbox.data.elH+'px';
  magbox.style.cursor = 'crosshair';
  magbox.data.owner = el;
  magbox.style.backgroundRepeat = 'no-repeat';
  magbox.style.backgroundColor = 'white';
//  magbox.style.zIndex = '1000';

  magbox.onmouseover = function(event) { jbzoomMouseOver(event, this); }
  magbox.onmouseout = function(event) { jbzoomMouseOut(event, this); }
  magbox.onmousemove = function(event) { jbzoomMouseMove(event, this); }
  document.body.onmouseover = function(event) { bodyMouseOver(event); }
//  document.body.onmousemove = function(event) { bodyMouseMove(event); }
  if (el.data.okToClick) {
    el.onclick = function(event) { jbZoomStart(this.id); }
    magbox.onclick = function(event) { jbZoomStop(this.data.owner.id); }
  }
}
//
function jbzoomloadzoom(el) {
  if (el.data.loaded) return;
  el.data.loaded = true;  // cos ie doesnt set complete before the onload call
  el.data.loading = false;

  z_index++;
  el.data.jbmagbox.style.zIndex = z_index+'';

		el.data.ziW = el.data.zoomImg.width;
		el.data.ziH = el.data.zoomImg.height;
  el.data.zoomImg = null;

		el.data.ratioW = (el.data.ziW-el.data.elW) / el.data.elW;
		el.data.ratioH = (el.data.ziH-el.data.elH) / el.data.elH;

  var zz = -Math.round((el.data.ziW-el.data.elW) /2)+'px '+(-Math.round((el.data.ziH-el.data.elH) /2))+'px';
  el.data.jbmagbox.style.backgroundPosition = zz;

  el.data.jbmagbox.style.backgroundImage = 'url('+el.data.largeImg+')';
}
//
function jbZoomStart(imgid) {
  var el = document.getElementById(imgid);
  if (!el.data) { return; }

  if (!el.data.loading) {
    el.data.jbmagbox.style.display = 'block';
    if (el.data.clickOn) { document.getElementById(el.data.clickOn).style.display = 'none'; }
    if (el.data.clickOff) { document.getElementById(el.data.clickOff).style.display = 'block'; }

    pos = getPos(el);
//    pos.x = (pos.x-0) + (cssStyleZoom(el,'marginLeft')-0);
//    pos.y = (pos.y-0) + (cssStyleZoom(el,'marginTop')-0);
    el.data.jbmagbox.data.elT = pos.y-0+(el.data.frigpos.t-0);
    el.data.jbmagbox.data.elL = pos.x-0+(el.data.frigpos.l-0);
    el.data.jbmagbox.style.left = el.data.jbmagbox.data.elL+'px';
    el.data.jbmagbox.style.top = el.data.jbmagbox.data.elT+'px';
  }

  if (!el.data.loaded && !el.data.loading) {
    el.data.loading = true;
    el.data.zoomImg = null;
    el.data.zoomImg = new Image;
    el.data.zoomImg.onload = null;
    el.data.zoomImg.onerror = null;
//    el.data.zoomImg.src = '';
    el.data.jbmagbox.style.backgroundColor = z_background;
    el.data.jbmagbox.style.backgroundImage = 'url('+z_loadingImg+')';
    el.data.jbmagbox.style.backgroundPosition = (Math.round(el.data.elW/2)-Math.round(z_loadingImgWidth/2))+'px '+(Math.round(el.data.elH/2)-Math.round(z_loadingImgWidth/2))+'px';
    el.data.zoomImg.onerror = function() {
      el.data.zoomImg.onload=null;
      if (z_missing_message) { alert(z_missing_message); }
      jbZoomStop(imgid);
      el.data.loading = false;
    }
    el.data.zoomImg.onload = function() { jbzoomloadzoom(el); }
    el.data.zoomImg.src = el.data.largeImg;
  }
}
//
function jbZoomStop(imgid) {
  var el = document.getElementById(imgid);
  if (el.data) {
    picId = null;
    el.data.jbmagbox.style.display = 'none';
    if (el.data.clickOn) { document.getElementById(el.data.clickOn).style.display = 'block'; }
    if (el.data.clickOff) { document.getElementById(el.data.clickOff).style.display = 'none'; }
    el.style.cursor = 'pointer';
    el.style.cursor = 'default';
  }
}
//
//
function btzoomMouseOver(event, el) {
  if (!el || !el.id) return;
  event = event || window.event;
  if (picId) { bodyMouseOver(event); }
  picId = el;
  if (!el.data.clicked) {
  } else {
    el.data.magbox.style.zIndex = '1000';
    el.data.magbox.style.display = 'block';
    pos = getPos(el);
    el.data.elT = pos.y;
    el.data.elL = pos.x;
    if (!el.data.loaded && !el.data.loading) {
      el.data.loading = true;
      el.data.zoomImg = null;
      el.data.zoomImg = new Image;
      el.data.zoomImg.onload = null;
      el.data.zoomImg.onerror = null;
//      el.data.zoomImg.src = '';
      el.data.magbox.style.backgroundColor = z_background;
      el.data.magbox.style.backgroundImage = 'url('+z_loadingImg+')';
      el.data.magbox.style.backgroundPosition = '0px 0px';
      btzoomMouseMove(event, el);
  //alert('');
      el.data.zoomImg.onerror = function() {
        el.data.zoomImg.onload=null;
        if (z_missing_message) { alert(z_missing_message); }
        // loading is still set so cant get back here
      }
      el.data.zoomImg.onload = function() { btzoomloadzoom(event, el); }
      el.data.zoomImg.src = el.data.largeImg;
    }
  }
}
//
function btzoomloadzoom(event, el) {
  if (el.data.loaded) return;
  el.data.loaded = true;  // cos ie doesnt set complete before the onload call
  el.data.loading = false;

		el.data.ziW = el.data.zoomImg.width;
		el.data.ziH = el.data.zoomImg.height;
  el.data.zoomImg = null;

  if (el.data.boxsize.w != undefined) {
    el.data.mgW = el.data.boxsize.w;
    el.data.mgH = el.data.boxsize.h;
  } else {
    el.data.mgW = Math.round(el.data.elW * el.data.boxsize / 100)-2;
    el.data.mgH = Math.round(el.data.elH * el.data.boxsize / 100)-2;
  }

		el.data.ratioW = el.data.ziW / (el.data.elW);
		el.data.ratioH = el.data.ziH / (el.data.elH);

  magbox = el.data.magbox;
  magbox.data.ziW = el.data.ziW;
		magbox.data.ziH = el.data.ziH;
  magbox.data.mgW = el.data.mgW;
  magbox.data.mgH = el.data.mgH;
  magbox.style.width = el.data.mgW+'px';   // -2 for border
  magbox.style.height = el.data.mgH+'px';

  el.data.magbox.style.backgroundImage = 'url('+el.data.largeImg+')';
  btzoomMouseMove(event, el);
//  var debug = document.getElementById('debug');
//  debug.innerHTML = el.data.magbox.style.top+' '+el.data.magbox.style.left+' '+el.data.magbox.style.backgroundImage;
}

//
function btzoomMouseOut(event, el) {
  bodyMouseOver(event);
}
//
function btmagboxMouseOut(event, el) {
  bodyMouseOver(event);
}
//
function btmagboxMouseMove(event, el) {
  btzoomMouseMove(event, picId);
}
//
function btzoomMouseMove(event, el) {
  event = event || window.event;
  if (!el || !el.id) return;
  if (!picId) btzoomMouseOver(event, el);
  if (!picId.data.clicked) { return }

  var ofsW = Math.round(picId.data.mgW/2);
  var ofsH = Math.round(picId.data.mgH/2);

  var xm = mouseX(event);
  var x = xm - ofsW
  if (x < picId.data.elL) x = picId.data.elL;
  if (x > picId.data.elL+picId.data.elW-picId.data.mgW) x = picId.data.elL+picId.data.elW-picId.data.mgW;

  var ym = mouseY(event);
  var y = ym - ofsH;
  if (y < picId.data.elT) y = picId.data.elT;
  if (y > picId.data.elT+picId.data.elH-picId.data.mgH) y = picId.data.elT+picId.data.elH-picId.data.mgH;
  picId.data.magbox.style.top = y+'px';
  picId.data.magbox.style.left = x+'px';

  if (!picId.data.loaded) return;

  var x1 = Math.round((xm-picId.data.elL-2)*picId.data.ratioW)+x-xm;
  if (x1 > picId.data.ziW-picId.data.mgW+2) { x1 = picId.data.ziW-picId.data.mgW+2; }
  var y1 = Math.round((ym-picId.data.elT-2)*picId.data.ratioH)+y-ym;
  if (y1 > picId.data.ziH-picId.data.mgH+2) { y1 = picId.data.ziH-picId.data.mgH+2; }
  picId.data.magbox.style.backgroundPosition = (-x1)+'px '+(-y1)+'px';

//  var debug = document.getElementById('debug');
//  debug.innerHTML = x+' '+y+' >'+(x1)+' >'+(y1)+' '+(xm-picId.data.elL);
}
//
function btzoomClick(event, el) {
  event = event || window.event;
  if (picId) {
//   if (picId.data.promptDiv) {
//     picId.data.promptDiv.style.display = 'none';
//     picId.data.promptDiv = null;
     opicId = picId;
     opicId.data.over = false;
     opicId.data.noImage = false;
     opicId.data.clicked = true;
     picId = null;
     btzoomMouseOver(event,opicId);
//   }
  }
}
//
function btMakeZoomable2(imgid, largeImg, boxsize, options) {
// boxsize can be a single % figure or can be { w:100, h:100 } array
  zoomloadlist[zoomloadlist.length] = { 'proc':btMakeZoomable,
   'imgid':imgid, 'largeImg': largeImg,  'boxsize': boxsize, 'options':options }
}
//
function btMakeZoomable(imgid, largeImg, boxsize, options) {
  if (!zoomersloaded) {
    btMakeZoomable2(imgid, largeImg, boxsize, options)
    return;
  }
  // options is a json array and can have
  // 'clicktozoom':'anyvalue' to delay zoom image load until image is clicked

  var el = document.getElementById(imgid);
  if (!el.data) { el.data = { }; }

  el.data.imgid = imgid;
  if (!largeImg) { largeImg = el.getAttribute('src'); }
  el.data.largeImg = largeImg;
		if (!boxsize) { boxsize = 20; }
  el.data.boxsize = boxsize;
  el.data.clicktozoom = (options && options.clicktozoom && options.clicktozoom != undefined ? true : false);
  el.data.clicked = !el.data.clicktozoom;
  el.data.loaded = false;
  el.data.loading = false;
  if (el.data.zoomdiv) {
    el.data.zoomdiv.style.display = 'none';
    el.data.zoomdiv.style.backgroundImage = '';
  }
  el.data.zoomImg = null;

  if (el.complete) { btzoomloadimg(el); }
  else {
    el.onload = function () { btzoomloadimg(el); };
  }
}
//
function btzoomloadimg(el) {
  el.data.elW = el.width-0;
  el.data.elH = el.height-0;
  el.data.mgW = z_loadingImgWidth;
  el.data.mgH = z_loadingImgWidth;

  var magbox = createDynamicDiv(el.data.imgid+'_mag');
  el.data.magbox = magbox;
  magbox.data = { };
  magbox.data.largeImg = el.data.largeImg;
  magbox.data.elW = el.data.elW;
  magbox.data.elH = el.data.elH;

  magbox.className = 'zoomMagBox';
  magbox.style.position = 'absolute';
  magbox.style.width = z_loadingImgWidth+'px';
  magbox.style.height = z_loadingImgWidth+'px';
  magbox.style.cursor = 'crosshair';
  magbox.data.owner = el;
  magbox.style.backgroundRepeat = 'no-repeat';
  magbox.style.backgroundColor = 'black';
  magbox.style.zIndex = '1000';
  magbox.data.mgW = el.data.mgW;
  magbox.data.mgH = el.data.mgH;

 //  var debug = document.getElementById('debug');
//  debug.innerHTML = el.data.elW+' '+el.data.elH+' '+el.data.mgW+' '+el.data.mgH+' '+el.data.zmW+' '+el.data.zmH;

  el.onmouseover = function(event) { btzoomMouseOver(event, this); }
  el.onmouseout = function(event) { btmagboxMouseOut(event, this); }
  el.onmousemove = function(event) { btzoomMouseMove(event, this); }
  magbox.onmouseout = function(event) { btmagboxMouseOut(event, this); }
  magbox.onmousemove = function(event) { btmagboxMouseMove(event, this); }
  document.body.onmouseover = function(event) { bodyMouseOver(event); }
  el.onclick = function(event) { btzoomClick(event, this); }
//  document.body.onmousemove = function(event) { bodyMouseMove(event); }
}

/*function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}*/
addLoadEvent(initZoomers);