// JavaScript for 3D rotatable image
// Copyright Matthew J Heaton 2008

// Calling HTML code can set following JavaScript variables:
// numimages = The number of 3D images in the rotation
// imgprefix = folder path and start of filename (e.g. "images/image" or "images/" or "http://www.site.com/images/")
// imgsuffix = file extension (e.g. ".jpg" or ".png")

// use defaults: 36 images in 'images' subfolder, called 0000.jpg, 0001.jpg ... 0035.jpg
var numimages;	// set this before calling script if it is relevant
if (!numimages) numimages=36;
var imgprefix;	// set this before calling script if it is relevant
if (!imgprefix) imgprefix="images/image_";
var imgsuffix;	// set this before calling script if it is relevant
if (!imgsuffix) imgsuffix=".jpg";

// must preload the images to get smooth animation
var images=new Array(numimages);
var spacer;
for(i=0;i<numimages;i++) {
  if (i<10) spacer='000';
  else if(i<100) spacer='00';
  else spacer='0';
  images[i]=new Image();
  images[i].src=imgprefix+spacer+i+imgsuffix;
}

var lastimage=0;
var startx=-1;
var isIE = document.all?true:false;
if (!isIE) document.captureEvents(Event.MOUSEMOVE);

function GetX(e) {
  if (!isIE) return e.pageX;
  else return event.clientX + document.body.scrollLeft;
}
function Start(e)
{
  // mouse-down - start tracking the mouse move events
  if (!e) e = window.event;
  startx = GetX(e);
  document.onmousedown = Dummy;
  document.onmouseup = Stop;
  document.onmousemove = Animate;
  return false;  // false = no default event handling
}
function Dummy(e)
{
  // prevent default document mouse-down processing in Gecko browsers
  return false;
}
function Animate(e)
{
  // track left-right mouse movement and display corresponding 3D image
  if (!e) e = window.event;
  var image;
  if (startx >= 0)
  {
    newx = GetX(e);
    image = Math.round((newx-startx)*numimages/360);
    if (image != 0)
    {
       image = lastimage + image;
       while (image<0) image+=numimages;
       image = image%numimages;
       document.rotate.src=images[image].src;
       lastimage = image;
       startx = newx;
    }
 }
 return false;  // false = no default event handling
}
function Stop()
{
  // mouse up - stop tracking the mouse move events
  startx = -1;
  document.onmousedown = null;
  document.onmouseup = null;
  document.onmousemove = null;
}