var imageFrame = $('imageFrame');
var imageStrip = $('imagesContainer');
var images = imageStrip.getElementsByTagName('img');
var count = $('imageCount');
var next = $('imageNext');
var prev = $('imagePrev')
var currentImageIndex = 0;
var currentImage = images[0];
var moving=false;

imageStrip.setStyle({ 
  width: (images.length * parseInt(imageFrame.getStyle('width')) + 3)  + "px",  
  height: "197px",
  clip: "rect(" + images[0].width + "px " + images[0].height + "px " + images[0].width + "px " + images[0].height + "px)",
  overflow:"hidden"   
});

for (var i =0; i < images.length; i++) {
  new Insertion.Bottom('imageNav','<a href="javascript:setImage(' + i + '); stopRotate();" id="imgNav'+i+'" onmouseover="imgnavOver(' + i + ');" onmouseout="imgnavOff(' + i + ');">+</a>');
}

function nextImage() {
    if (currentImageIndex == images.length - 1) {
      return;
    } else {
      setImage(currentImageIndex + 1);
    }
}

function prevImage() {
  if (currentImageIndex == 0) {
    return;
  } else {
    setImage(currentImageIndex - 1);
  }
}

function setImage(index) {
  if(moving==false) {
    moving=true;
    currentImage = images[ index ];
    highlightCurrent(index);
    var indexInterval = currentImageIndex - index;
    currentImageIndex = index;
    var moveByX = parseInt( imageFrame.getStyle('width') ) * indexInterval;
    showAll();
    var slide = new Effect.MoveBy( imageStrip, 0, moveByX, { 
      duration: 1, 
      transition: Effect.Transitions.sinoidal,
      afterFinish: hideOthers } );
  }
}

function showAll() {
  for(var i =0; i < images.length; i++) {
    images[i].parentNode.onclick = function() {return true};
    images[i].style.cursor = "hand";
  }
}

function hideOthers() {
  moving=false;
  for(var i =0; i < images.length; i++) {
    if (i != currentImageIndex) {
      images[i].parentNode.onclick = function() {return false};
      images[i].style.cursor = "hand";
    } 
  }
}

  function highlightCurrent(index) {
      for(var i =0; i < images.length; i++) {
          n='imgNav'+i;        
          if (i != index) {
              $(n).style.background='#aaa';         
          } else {
              $(n).style.background='#ddd';               
          }
      }    
}
function imgnavOver(index) {
   n='imgNav'+index;
   $(n).style.background='#ddd';
}
function imgnavOff(index) {
   if (index != currentImageIndex) {
       n='imgNav'+index;
       $(n).style.background='#aaa';    
      }
} 
    
  // auto rotation
var play = true;  
var rotateTimer = 7000;
function autoRotate() {
   if(play) {
  if (currentImageIndex == images.length - 1) {
    setImage(0);
  } else {
    setImage(currentImageIndex + 1);
  }
   }
}
function stopRotate() {
   clearInterval(autoPlay);
   play=false;
   setTimeout(startRotate,10000);
}

var autoPlay;
function startRotate() {
    play=true;
    autoPlay = setInterval(autoRotate,rotateTimer);
}