//
//	ImageTrail.js
//		Image trail script for mouseovers
//    

/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact

2007-08-09
Modified to move the image into position before making it visible, for an IE problem.
With the large image, it was visible in the original 0,0 position before moving,
  which immediately fired a mouseout event before it could move the image.
  This then fired a mouseover, etc. The image would flicker in place.
Init'ing the image away from the source image helped, 
  except if you quickly moved the mouse over the large image,
  this was also a mouseout, causing the same problem.
Moving the image first guarantees that it won't appear underneath the mouse.

2006-11-16
Modified from original to put on image mouseovers instead of always, as on jadefish.
Trailing styled text instead of a div. Can generalize for different callers.
*/

var trailimage;
var offsetfrommouse=[10,10] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0 //duration in seconds image should remain visible. 0 for always.
var showstate = 0;    // 0 = not yet visible, 1 = flag to set visible, 2 = visible.
var imagename = "";

if (document.getElementById || document.all)
  document.write('<div id="trailimageid" style="position:absolute;visibility:hidden;left:0px;top:0px;width:0px;height:0px;z-index:100;"></div>');

function gettrailobj(){
  if (document.getElementById)
    return document.getElementById("trailimageid").style;
  else if (document.all)
    return document.all.trailimagid.style;
}

function gettrailobject(){
  if (document.getElementById)
    return document.getElementById("trailimageid");
  else if (document.all)
    return document.all.trailimagid;
}

function truebody(){
  return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

function showtrail(imagenameReq){
  showstate = 1;
  imagename = imagenameReq;

  document.onmousemove=followmouselg;     // Default large LG product image.
  
  //var newHTML = '<div align="center" style="padding: 8px 2px 2px 2px;"><img src="' + imagename + '" border="0"></div>';
  //var newHTML = '<img src="' + imagename + '" border="0">';  // Pass in imagename if it varies.
  //var newHTML = '<div class="MouseTrailText">Click here to enlarge</div>';
  
  //gettrailobject().innerHTML = newHTML;
  //gettrailobj().visibility = "visible";
  //if (displayduration>0)
  //  setTimeout("hidetrail()", displayduration * 1000);
}

function showtrailmd(imagenameReq){
  showstate = 1;
  imagename = imagenameReq;

  document.onmousemove=followmousemd;   // Medium MD product image.
}

function hidetrail(){
  gettrailobj().visibility="hidden";
  document.onmousemove="";
  showstate = 0;        // Not really necessary, but the 3 states clarify it.
}

// Outer calls for various size background classes and footnotes.
function followmouselg(e){
  followmouse(e, "ProdImageTrail", "");
}

function followmousemd(e){
  followmouse(e, "ProdImageTrailMD", "Click thumbnail for larger image");
}

function followmouse(e, divclassname, footnote)     // Call only from a specific wrapper, to pass arguments.
{
  var xcoord = offsetfrommouse[0];
  var ycoord = offsetfrommouse[1];

  if (typeof e != "undefined"){
    xcoord += e.pageX;
    ycoord += e.pageY;
  }
  else if (typeof window.event != "undefined"){
    xcoord += truebody().scrollLeft + event.clientX;
    ycoord += truebody().scrollTop + event.clientY;
  }

  // Screen edge checking.
  //var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
  //var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
  //if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)
  //  gettrailobj().display="none"
  //else 
  //  gettrailobj().display=""

  // Set the position.
  gettrailobj().left = xcoord + "px";
  gettrailobj().top = ycoord + "px";

  // Moved the visibility down here. See comments at the top.
  if (showstate == 1)
  {
    showstate = 2;
    
    //var newHTML = '<div align="center" style="padding: 8px 2px 2px 2px;"><img src="' + imagename + '" border="0"></div>';
    var newHTML = '<div align="center" class="' + divclassname + '"><img src="' + imagename + '" border="0">';
    if (footnote != '')
    {
      newHTML += '<div class="MouseTrailText">' + footnote + '</div>';
    }
    newHTML += '</div>';
    
    //var newHTML = '<img src="' + imagename + '" border="0">';  // Pass in imagename if it varies.
    //var newHTML = '<div class="MouseTrailText">Click here to enlarge</div>';
    
    gettrailobject().innerHTML = newHTML;
    gettrailobj().visibility = "visible";
    if (displayduration>0)
      setTimeout("hidetrail()", displayduration * 1000);
  }

}

// document.onmousemove=followmouse