var productImageElementId = "productImage";
var viewCount;

function rotateProductImage() 
{
  var image = document.getElementById(productImageElementId);

  // find the index of the current image source
  var sourceIndex = -1;
  for (var i = 0; i < productImageSources.length; i++) {
    if (image.src.indexOf(productImageSources[i]) != -1) {
      sourceIndex = i;
    }
  }
  
  // deactivate it
  
  var viewIndex = sourceIndex + 1;  
  if (viewIndex > 5) {
    viewIndex = 5;
  }
  
  var view = document.getElementById("view" + viewIndex);
  view.className = "nonactive";

  // increment the source index
  sourceIndex++;

  // if it overflows, reset it to the first index
  if (sourceIndex == productImageSources.length) {
    sourceIndex = 0;
  }
  
  // rotate the image  
  image.src = productImageSources[sourceIndex];
  
  viewIndex = sourceIndex + 1;
  if (viewIndex > 5) {
    viewIndex = 5;
  }
  
  var view = document.getElementById("view" + viewIndex);
  view.className = "active";
}

function rotateProductImageWithArg(image, imgArray) 
{
  // find the index of the current image source
  var sourceIndex = -1;
  for (var i = 0; i < imgArray.length; i++) {
    if (image.src.indexOf(imgArray[i]) != -1) {
      sourceIndex = i;
    }
  }
  
  // deactivate it
  
  var viewIndex = sourceIndex + 1;  
  if (viewIndex > 5) {
    viewIndex = 5;
  }
  
  var view = document.getElementById("view" + image.id + viewIndex);
  view.className = "nonactive";

  // increment the source index
  sourceIndex++;

  // if it overflows, reset it to the first index
  if (sourceIndex == imgArray.length) {
    sourceIndex = 0;
  }
  
  // rotate the image  
  image.src = imgArray[sourceIndex];
  
  viewIndex = sourceIndex + 1;
  if (viewIndex > 5) {
    viewIndex = 5;
  }
  
  var view = document.getElementById("view" + image.id + viewIndex);
  view.className = "active";
}