function writeThumbnails() {
  for (i=0 ; i<compCfg.stills.length ; i++) {
    document.writeln("<IMG onmousemove=\"oversmall(this,arguments[0])\" onmouseout=\"outsmall()\" width=75 onClick=\"initImages('"+compCfg.stills[i]+"');\" SRC=\""+compCfg.imagesLocation+compCfg.stills[i]+"/"+compCfg.smallThumbName+".jpg\">");
  }

}

function writeAnalysisSelector() {
  for (i=0 ; i<compCfg.contenders.length ; i++) {
    document.writeln("<DIV class=\"zoomSel\" id=\"sel"+compCfg.contenders[i]+"\"><input type=\"radio\" id=\"rad"+compCfg.contenders[i]+"\" name=\"bg\" onclick=\"setBgImage(id.substring(3))\"><SPAN onmousedown=\"setFgImage('"+compCfg.contenders[i]+"',this)\" onmouseup=\"hideFgImage(this)\">"+compCfg.contendersNames[i]+"</SPAN></DIV>");
  }
}

function writeAnalysisData(cols) {
  var top=0;
  var left=0;
  var col=1;
  for (i=0 ; i<compCfg.contenders.length ; i++) {
    document.writeln("<DIV style=\"top:"+top+"px;left:"+left+"px;\" class=\"zoom\" id=\"l"+compCfg.contenders[i]+
                     "\"><IMG ID=\"i"+compCfg.contenders[i]+"\" class=\"zoom\"></DIV><DIV class=\"zoomLabel\" style=\"top:"+(top+compCfg.windowHeight)+"px;left:"+left+"px;\" id=\"label"+compCfg.contenders[i]+"\">"+compCfg.contendersNames[i]+"</DIV>");
    col++;
    if (col>cols) {
      left=0;
      top += compCfg.windowHeight +20;
      col=1;
    } else {
      left += compCfg.windowWidth+1;
    }
      
  }
  
}

function oversmall(elem,event) {
  if (!event) event = window.event;
  var d = document.getElementById("floatingDiv");
  var i = document.getElementById("floatingImg");
  d.style.visibility="visible";
  i.src=elem.src;//.replace("origSmall","origMedium");
  
  var o = getMouseXY(event);
  d.style.top = o.y+2+"px";
  d.style.left = o.x+2+"px";


}

function outsmall() {
  var d = document.getElementById("floatingDiv");
  d.style.visibility="hidden";
}

function getMouseXY(e) // works on IE6,FF,Moz,Opera7
{ 
  var o = new Object();
  if (e)
  { 
    if (e.pageX || e.pageY)
    { 
      o.x = e.pageX;
      o.y = e.pageY;
    }
    else if (e.clientX || e.clientY)
    {
      o.x = e.clientX + document.body.scrollLeft;
      o.y = e.clientY + document.body.scrollTop;
    }  
  }
  return o;
}

function overhelp(elem,event,suff) {
  if (!event) event = window.event;
  var d = document.getElementById("exp_help_"+suff);
  d.style.visibility="visible";
  
  var o = getMouseXY(event);
  d.style.top = o.y+2+"px";
  d.style.left = o.x+2+"px";


}

function outhelp(suff) {
  var d = document.getElementById("exp_help_"+suff);
  d.style.visibility="hidden";
}



function DL_GetElementLeft(eElement)
{
    var nLeftPos = eElement.offsetLeft;          // initialize var to store calculations
    var eParElement = eElement.offsetParent;     // identify first offset parent element  
    while (eParElement != null)
    {                                            // move up through element hierarchy
        nLeftPos += eParElement.offsetLeft;      // appending left offset of each parent
        eParElement = eParElement.offsetParent;  // until no more offset parents exist
    }
    return nLeftPos;                             // return the number calculated
}

function DL_GetElementTop(eElement)
{
    var nTopPos = eElement.offsetTop;            // initialize var to store calculations
    var eParElement = eElement.offsetParent;     // identify first offset parent element  
    while (eParElement != null)
    {                                            // move up through element hierarchy
        nTopPos += eParElement.offsetTop;        // appending top offset of each parent
        eParElement = eParElement.offsetParent;  // until no more offset parents exist
    }
    return nTopPos;                              // return the number calculated
}

var magnificationFactor = 2;
var imgWidth = compCfg.imgWidth;
var imgHeight = compCfg.imgHeight;
var windowWidth = compCfg.windowWidth;
var windowHeight = compCfg.windowHeight;
var currentPattern;
var posX=0;
var posY=0;
var layerDisplayed = null;

function loadImage(imgPattern,suffix) {
  document.getElementById("i"+suffix).src=imgPattern+"/"+suffix+".jpg";
  document.getElementById("i"+suffix).style.width = (imgWidth * magnificationFactor) + "px";
  document.getElementById("i"+suffix).style.height = (imgHeight * magnificationFactor) + "px";
  shiftImage(suffix,0,0);
}
function updateZoom() {
  var i;
  for (i=0 ; i<compCfg.contenders.length ; i++) {
    document.getElementById("i"+compCfg.contenders[i]).style.width = (imgWidth * magnificationFactor) + "px";
    document.getElementById("i"+compCfg.contenders[i]).style.height = (imgHeight * magnificationFactor) + "px";
    shiftImage(compCfg.contenders[i],0,0);
  }
  document.getElementById("magDisplay").innerHTML=magnificationFactor+"X";
}

function shiftImage(suffix,X,Y) {
  //document.getElementById("l"+suffix).scrollTop = Y;
  //document.getElementById("l"+suffix).scrollLeft = X;
  document.getElementById("i"+suffix).style.top = -Y;
  document.getElementById("i"+suffix).style.left = -X;
}

var numClicks = 0;
function initImages(imgPattern) {
  numClicks++;
  //if (numClicks>=2) document.getElementById('exp_help').style.display='none';
  if (imgPattern)
    currentPattern = imgPattern;
  // optimization for low bandwidth
  var rep=compCfg.imagesLocation+currentPattern;
  document.getElementById("indexImage").src=rep+"/"+compCfg.medThumbName+".jpg";
  
  var i;
  for (i=0 ; i<compCfg.contenders.length ; i++)
    loadImage(rep,compCfg.contenders[i]);
  document.getElementById("magDisplay").innerHTML=magnificationFactor+"X";

  if (layerDisplayed) layerDisplayed.style.display = 'none';
  layerDisplayed = document.getElementById("exp_"+currentPattern);
  if (layerDisplayed) layerDisplayed.style.display = 'block';
}

function zoomIn() {
  if (magnificationFactor<10) magnificationFactor++;
  //initImages();
  updateZoom();
}
function zoomOut() {
  if (magnificationFactor>1) magnificationFactor--;
  //initImages();
  updateZoom();
}
function mouseOver(event) {
  var X,Y;
  X=event.clientX+document.body.scrollLeft;
  Y=event.clientY+document.body.scrollTop;
  
  X -= DL_GetElementLeft(document.getElementById("indexImage"));
  Y -= DL_GetElementTop(document.getElementById("indexImage"));
  X*=2;Y*=2;

  
  padding = windowWidth / (2*magnificationFactor);
  if (X<padding) X=padding;
  if (Y<padding) Y=padding;
  if (X+padding > imgWidth) X = imgWidth - padding;
  if (Y+padding > imgHeight) Y = imgHeight - padding;

  X *= magnificationFactor;
  Y *= magnificationFactor;
  
  X -= windowWidth/2;
  Y -= windowHeight/2;

  if (X+imgWidth<windowWidth) X=windowWidth - imgWidth;
  if (Y+imgHeight<windowHeight) Y=windowHeight - imgHeight;

  for (i=0 ; i<compCfg.contenders.length ; i++)
    shiftImage(compCfg.contenders[i],X,Y);
  
}

function mouseClick(event) {
  var X,Y;
  if (event.x) {
    X=event.x;
    Y=event.y;
  } else if (event.layerX) {
    X=event.layerX;
    Y=event.layerY;
  } else return;
  var dbg = X + "," + Y;
  
  X*=2;Y*=2;
  X -= DL_GetElementLeft(document.getElementById("indexImage"));
  Y -= DL_GetElementTop(document.getElementById("indexImage"));

  dbg += " scaled, shifted " + X + "," + Y;
  
  padding = windowWidth / (2*magnificationFactor);
  if (X<padding) X=padding;
  if (Y<padding) Y=padding;
  if (X+padding > imgWidth) X = imgWidth - padding;
  if (Y+padding > imgHeight) Y = imgHeight - padding;

  dbg += " padded " + X + "," + Y;

  X -= padding;
  Y -= padding;
  
  X *= magnificationFactor;
  Y *= magnificationFactor;
  
  for (i=0 ; i<compCfg.contenders ; i++)
    shiftImage(compCfg.contenders[i],X,Y);
/*  shiftImage("o",X,Y);
  shiftImage("23",X,Y);
  shiftImage("305",X,Y);
  shiftImage("tmpg",X,Y);
  shiftImage("tmpgv",X,Y);*/
  
}


function sideBySide() {
  document.getElementById("side_btn").className="modebtn_sel";
  document.getElementById("sup_btn").className="modebtn";
  windowWidth = compCfg.windowWidth;
  windowHeight = compCfg.windowHeight;
  magnificationFactor=2;
  updateZoom();
  var i;
  for (i=0 ; i<compCfg.contenders.length ; i++)
    setImgSBS(compCfg.contenders[i]);

  document.getElementById('analysisSelector').style.display="none";
  return false;
}

function setImgSBS(img) {
  var ie = document.getElementById("i"+img);
  var div = document.getElementById("l"+img);
  var lab = document.getElementById("label"+img);
  var rad = document.getElementById("rad"+img);
  div.style.visibility="visible";
  lab.style.visibility="visible";
  div.style.width=compCfg.windowWidth+"px";
  div.style.height=compCfg.windowHeight+"px";
  
  if (div.stl) {
    div.style.top = div.stl.top;
    div.style.left = div.stl.left;
    div.stl=null;
  }
}


function superposition() {
  document.getElementById("side_btn").className="modebtn";
  document.getElementById("sup_btn").className="modebtn_sel";
 
  windowWidth = compCfg.imgWidth;
  windowHeight = compCfg.imgHeight;
  magnificationFactor=1;
  updateZoom();
  var i;
  for (i=0 ; i<compCfg.contenders.length ; i++)
    setImgSuperposition(compCfg.contenders[i]);

  setBgImage("orig");
  document.getElementById('analysisSelector').style.display="";
  return false;
}

function setImgSuperposition(img) {
  var ie = document.getElementById("i"+img);
  var div = document.getElementById("l"+img);
  var lab = document.getElementById("label"+img);
  var rad = document.getElementById("rad"+img);
  div.style.visibility="hidden";
  lab.style.visibility="hidden";
  div.style.width=ie.style.width="720px";
  div.style.height=ie.style.height="480px";
  rad.checked=false;
  
  if (!div.stl) {
    div.stl=new Object();
    div.stl.top = div.style.top;
    div.stl.left = div.style.left;
  }
  div.style.top=0;
  div.style.left=0;
}

var bgImageCurrent = "";
function setBgImage(imgn) {
  bgImageCurrent = imgn;
  var img = document.getElementById("l"+imgn);
  var rad = document.getElementById("rad"+imgn);
  for (i=0 ; i<compCfg.contenders.length ; i++)
    document.getElementById("l"+compCfg.contenders[i]).style.visibility="hidden";
  img.style.visibility="visible";
  img.style.zIndex=1;
  rad.checked=true;
}
function setFgImage(imgn,elem) {
  if (bgImageCurrent==imgn) return;
  var img = document.getElementById("l"+imgn);
  hideFgImage();
  img.style.visibility="visible";
  img.style.zIndex=2;
  elem.style.backgroundColor="black";
  elem.style.color="white";
}
function hideFgImage(elem) {
  for (i=0 ; i<compCfg.contenders.length ; i++) {
    if (compCfg.contenders[i]!=bgImageCurrent) document.getElementById("l"+compCfg.contenders[i]).style.visibility="hidden";
  }
  if (elem) {
    elem.style.backgroundColor="";
    elem.style.color="";
  }
}