// Globals Rotator
var rotatorOldImg = 0;
var rotatorFirstImg = 1;
var imgElements = 0;
var rotatorCount = 0
var rotatorCurrent = 1;
var periodTimer = 0;
var exampleFx = false;
var tempTextCount = 0; 
var animationAvtive = 0;
var picNr = 0;
var fxDelay = null;

window.addEvent('domready', function() {
  // Set de Rotator-objects in the elements.
  imgElements = $$('div.rotatorImages img');
  textElement = $$('ul#bulletsText li');
  bulletElement = $$('a.bullet');
  
  // Count image elements. If there are more than 1 image start the rotator...
  rotatorCount = imgElements.length;
  if (rotatorCount > 1){
    periodTimer = null;
    startRotator(imgElements);
  } 
  
  // Set the click events...
  setClickEvents();
});


// Start the rotator.
startRotator = function(imgElements) {
  // Set the z-index values at start up.
  imgElements.each( function(img, key){
    var temp = key + 1;
    if (temp == rotatorCurrent){
      img.setStyle('z-index','50');
      img.setStyle('opacity','1');        
    }
    else {
      img.setStyle('z-index','49');
      img.setStyle('opacity','0');
    }
  });
  
  // Start the timer for ratation...
  $clear(periodTimer);
  periodTimer = nextRotator.periodical(5000); 
}

// Determine the next rotation cicle. If value is set, set the current item to the value.
nextRotator = function(value) {  
  // If the value is not set go to the next item.
  if (value){
    var tempvalue = rotatorCurrent;
    rotatorCurrent = value ;
  }
  else{
    if (rotatorCurrent < rotatorCount){
      rotatorOldImg = rotatorCurrent;
      rotatorCurrent ++;
    }
    else {
      rotatorOldImg = rotatorCurrent;
      rotatorCurrent = 1;
    }
  }
  
  // Run the rotation cicle...
  changeImage(tempvalue);
}

// Run the rotation cicle...
changeImage = function(value){
  // Stop, Clear and restart the timer for the next rotation cicle...
  $clear(periodTimer);
  if (fxDelay != null) $clear(fxDelay);
  periodTimer = nextRotator.periodical(5000); 
   
  // if the rotation is currently active stop the animation.
  if (rotatorCurrent != value){
    if (exampleFx){
      exampleFx.cancel();
    }
    // Set the bullets...
    activatebullet(rotatorCurrent);
    
    // Animate the image with a delay. 
    imgElements.each( function(img, key){
      var temp = key + 1;
      if (temp == rotatorCurrent){
        img.setStyle('z-index','51');
        animationAvtive = 1;
        fxDelay = (function(){
          exampleFx = new Fx.Tween(this, {
            property: 'opacity',
            duration: 500, 
            transition: Fx.Transitions.Quart.easeInOut,
            onComplete: function() { 
              // Hide underlying images
              imgElements.each( function(img, key){
                var temp = key + 1;
                if (temp == rotatorCurrent){
                }
                else {
                  img.setStyle('opacity', '0');
                }
              });
              animationAvtive = 0;
            }
          });
          exampleFx.start([0,1], exampleFx);
        }).delay(400, img);    
      }
      else if (temp == rotatorOldImg) {
        // Move old image down.
        img.setStyle('z-index','50'); 
      }
      else {
        // Move not active image down.
        img.setStyle('z-index','49'); 
      }
    });
  }
}

setClickEvents = function() {
  // activate click on bullets
  bulletElement.addEvent('click', function() {
    picNr = this.get('rel');
    nextRotator(picNr);
  });
  
  // activate next button
  $$('a.rotatorNext').addEvent('click', function() {
    if (rotatorCurrent < rotatorCount){
      picNr = rotatorCurrent.toInt() + 1;
    }
    else {
      picNr = 1;
    }
    nextRotator(picNr);
  });
  
  // activate previous button
  $$('a.rotatorPrev').addEvent('click', function() {
    picNr = rotatorCurrent - 1;
    if (rotatorCurrent == 1){
      picNr = rotatorCount.toInt();
    }
    else {
      picNr = rotatorCurrent.toInt() - 1;
    }
    nextRotator(picNr);
  });
}

activatebullet = function(nr) {
  // Remove active class from all text blocks.
  textElement.removeClass('active');
  
  // Add active class to active text block.
  textElement.each( function(bullet, key){
    tempTextCount = key + 1;
    if (tempTextCount == nr){
      bullet.addClass('active');
    }
  });
  
  // Remove and add active class to bullet.
  $$('a.bullet').removeClass('active');
  $$('a.bullet'+nr).addClass('active');
}