var offsetfrommouse=[15,-100]; //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 currentimageheight = 270; // maximum image size.

if (document.getElementById || document.all){
  document.write('<div id="trailimage">');
  document.write('</div>');
}


function showtrail(imagename,name,sku,colour) {
  newHTML = '<img src="' + imagename + '">';
  $("trailimage").innerHTML = newHTML;
  Event.observe(document, 'mousemove', followmouse);
  $("trailimage").style.visibility="visible";
}


function hidetrail(){
  $("trailimage").style.visibility="hidden";
  $("trailimage").style.left="-500px";
  Event.stopObserving(document, 'mousemove', followmouse);
}

function followmouse(e){

  var xcoord    = offsetfrommouse[0];
  var ycoord    = offsetfrommouse[1];

  var docwidth  = document.viewport.getWidth();
  var docheight = document.viewport.getHeight();

  var scrollOffsets = document.viewport.getScrollOffsets();
  
  if (docwidth - e.pointerX() < 300){
    xcoord = e.pointerX() - xcoord - 286; // Move to the left side of the cursor
  } else {
    xcoord += e.pointerX();
  }
  if (docheight - e.pointerY() < (currentimageheight + 50)){
    ycoord += e.pointerY() - Math.max(0,(50 + currentimageheight + e.pointerY() - docheight - scrollOffsets.top));
  } else {
    ycoord += e.pointerY();
  }
  //$("trailimage").innerHTML = xcoord+", "+ycoord;

  $("trailimage").style.left = xcoord+"px"
  $("trailimage").style.top = Math.max(290, ycoord)+"px"

}