// list of html image elements
var sketchUpImageArray = new Array();
var currentPos = 0;
var addToPos = 0;
var imageCount = 0;

var sketchUpObj = null;

var mouseXOrig;
var mouseX = 0;
var mouseY = 0;
var mouseIsDown = false;


function init() {
  sketchUpObj = document.getElementById('sketchUpObj');
  imageCount = imageFileNameArray.length;

  for (i = 0; i < imageCount; i++) {
    sketchUpImageArray[i] = new Image();
    sketchUpImageArray[i].src = imageFileNameArray[i];
    sketchUpImageArray[i].className = 'sketchUpImage';

    hide(sketchUpImageArray[i]);
    sketchUpObj.appendChild(sketchUpImageArray[i]);
  }

  // create a transparent sheet over the images so that the mouse
  // events go it it
  var sheet = document.createElement("DIV");
  sketchUpObj.appendChild(sheet);
  sheet.id = "sheet";

 sheet.onmousemove = handleRotate;
  sheet.onmousedown = handleMouseDown;
  sheet.onmouseup = handleMouseUp;
  sheet.onmouseout = handleMouseUp;
  setOpacity(sheet, 0.0);

  currentPos = imageCount-1
  show(sketchUpImageArray[currentPos]);
}


/**
 * When the mouse goes down, start rotating the image
 *
 * @param {Event} mousedown event
 */
function handleMouseDown(e) {
  if (!e) { e = window.event; }
  getMouseXY(e);
  mouseXOrig = mouseX;
  addToPos = 0;
  mouseIsDown = true;
}

/**
 * When the mouse goes up, stop rotating the image
 *
 * @param {Event} mouseup event
 */
function handleMouseUp(e) {

  mouseIsDown = false;
  currentPos += addToPos;
}


/**
 * Divide the width of the html object by the number of images.
 * As the mouse moves over the html object, show the appropriate image
 * giving the illusion that the user is spinning the object.
 *
 * @param {Event} mousemove event
 */
function handleRotate(e) {
  if (!e) { e = window.event; }

  if (!mouseIsDown) {
    return;
  }

  getMouseXY(e);

  // STEP is how many pixels equals an image swap
  var STEP = 10;
  var width = sketchUpObj.offsetWidth;
  var delta = mouseX - mouseXOrig;

  addToPos = Math.floor(delta/STEP);

  //handle wrap around
  var wrap = (currentPos + addToPos) % imageCount;
  var newPos = (wrap < 0) ? imageCount + wrap : Math.abs(wrap);

  //hide everyone except the image we are over
  for (var i = 0; i < imageCount; i++) {
    hide(sketchUpImageArray[i]);
  }

  show(sketchUpImageArray[newPos]);

  return false;
}

/**
 * Get the mouse position from the event e
 * @param {Event} e mouse move event
 */
function getMouseXY(e) {
	
  if (e.pageX) {
		mouseX = e.pageX;
		mouseY = e.pageY;
  } else {
		mouseX = event.clientX + document.body.scrollLeft;
		mouseY = event.clientY + document.body.scrollTop;
  }
  if (mouseX < 0){mouseX = 0;}
  if (mouseY < 0){mouseY = 0;}
}

/**
 * Get the left coordinate of the element
 */
function getLeft(element) {
  var x = 0;
  while (element) {
    x += element.offsetLeft;
    element = element.offsetParent;
  }

  return x;
};


function setOpacity(element, opacity) {
  element.style.filter = "alpha(opacity=" + Math.round(opacity*100) + ")";
  element.style.opacity = opacity;
}

/**
 * Hides the HTML element.
 * @param element HTMLElement the element we hide
 */
function hide(element) {
  element.style.display = 'none';
}


/**
 * show the HTML element.
 * @param element HTMLElement the element we want to see.
 */
function show(element) {
  element.style.display = 'block';
}