// This is javascript code to make the rotating pictures header thing work. It
// assumes mochikit has already been loaded.

// Defines a class that maintains state to rotate a set of picutres in a table.
// Constructor takes two arguments:
// - basePath: the path to the directory where all the images are stored.
// - rotatePhotoConfig: an array of objects. Each object contains a "id"
//   memeber which is the id of a DOM element and a "imgNames" memeber
//   which is an array of image file names to be rotated in the given member.
function RotatePics(basePath, rotatePhotoConfig) {
 this.photoConfig = clone(rotatePhotoConfig);
 for (var i = 0; i < this.photoConfig.length; ++i) {
   // The image that's curently showing in this slot
   this.photoConfig[i].curImgIndex = 0;
   var curContainer = $(this.photoConfig[i].id);
   this.photoConfig[i].container = curContainer;
   // Randomly shuffly the photos so its different each time you load
   // the page.
   this.photoConfig[i].imgNames = shuffle(this.photoConfig[i].imgNames);
   var curPics = this.photoConfig[i].imgNames;
   this.photoConfig[i].imgElements = [];
   for (var p = 0; p < curPics.length; ++p) {
     var img = IMG({'src': basePath + curPics[p]});
     curContainer.appendChild(img);
     this.photoConfig[i].imgElements.push(img);
     if (p != 0) {
       hideElement(img);
     }
   }
 }

 setTimeout(bind(this.switchPic, this), this.ROTATE_TIME);
}

// Change a picture every this many milliseconds.
RotatePics.prototype.ROTATE_TIME = 15000;

RotatePics.prototype.switchPic = function() {
  var effects = [];
  for (var slot = 0; slot < this.photoConfig.length; slot++) {
    var curSlot = this.photoConfig[slot];
    var oldImg = curSlot.imgElements[curSlot.curImgIndex];
    curSlot.curImgIndex += 1;
    curSlot.curImgIndex = curSlot.curImgIndex % curSlot.imgElements.length;
    var newImg = curSlot.imgElements[curSlot.curImgIndex];
    // effects.push(new Sequence([fade(oldImg, {sync: true}), appear(newImg, {sync: true, duration: 2})]));
    // Sequence(effects, {duration: 3});
    // fade(oldImg, {afterFinish: function() {MochiKit.Visual.appear(newImg, {delay: 2, duration: 25});}});
    fade(oldImg);
    appear(newImg, {delay: 1, duration: 2});
  }
  Parallel(effects);

  setTimeout(bind(this.switchPic, this), this.ROTATE_TIME);
}



function addPics() {
  var photoConfig = [{'id': 'head-image1',
                      'imgNames': ['leaping.jpg', 'boy.jpg', 'woman.jpg', 'cat.jpg']},
                     {'id': 'head-image2',
                       'imgNames': ['poppy.jpg', 'girl.jpg', 'walker.jpg', 'bag.jpg']}];
  var tmp = new RotatePics("/templates/metamorphosis/images/",
                           photoConfig);
}

addLoadEvent(addPics);


// Implementation of the Fischer-Yates shuffle algorithm take from
// StackOverflow.
function shuffle(arr) {
  var tmp, current;
  var top = arr.length;

  if(top) {
    while(--top) {
      current = Math.floor(Math.random() * (top + 1));
      tmp = arr[current];
      arr[current] = arr[top];
      arr[top] = tmp;
    }
  }

  return arr;
}