/**
 * list of image nodes to rotate
 * 
 * values are added to this with inline javascript blocks.
 */
var imagesToRotate = [];

/**
 * current state information for each rotating image
 */
var currentState = {};

/**
 * moo.fx objects for the crossfades
 */
var rotateImgFxObjects = {};

/**
 * preload imgs
 */
var rotateImgPreloads = [];

var RotateImgController = Class.create({
  
  init:function()
  {
    imagesToRotate.each(function(imageRec) {
      
      //preload images
      imageRec['images'].each(function(imgSrc) {
		    if(imgSrc == undefined ) return;  //IE7 fix, for trailing comma in imageRec array. Caused a browser redirect to /undefined when the page being loaded had just finished an http redirect
        var img = new Image();
        img.src = imgSrc;
        rotateImgPreloads.push(img);
      });
      
      // setup animation loop
      new PeriodicalExecuter(function(pe) {
        this.nextImageForRec(imageRec);
      }.bind(this), imageRec['time-between-slides']);
      
    }.bind(this));
  },
  
  nextImageForRec:function(imageRec)
  {
    // init the first time we animate this image
    if (!currentState[imageRec['tag-id']]) {
      // init to step 0, so the first time this is called it will switch to the second image
      currentState[imageRec['tag-id']] = {step:0};
      
      // create alternate image element
      imageRec['alt-tag-id'] = imageRec['tag-id'] + '-alt';
      var el = new Element('img', {
        'id': imageRec['alt-tag-id'],
        'src': $(imageRec['tag-id']).src,
        'width': $(imageRec['tag-id']).width,
        'height': $(imageRec['tag-id']).height,
        'alt': $(imageRec['tag-id']).alt
      });
      $(imageRec['tag-id']).parentNode.insertBefore(el, $(imageRec['tag-id']));
      
      // create FX objects
      rotateImgFxObjects[imageRec['tag-id']] = new fx.Opacity($(imageRec['tag-id']), {opacity: true, duration: imageRec['fade-anim-seconds']*1000, transition: Fx.Transitions.sineInOut});
      rotateImgFxObjects[imageRec['alt-tag-id']] = new fx.Opacity($(imageRec['alt-tag-id']), {opacity: true, duration: imageRec['fade-anim-seconds']*1000, transition: Fx.Transitions.sineInOut});
      rotateImgFxObjects[imageRec['alt-tag-id']].hide();
      
      if (imageRec['caption-id']) {
        rotateImgFxObjects[imageRec['caption-id']] = new fx.Opacity($(imageRec['caption-id']), {opacity: true, duration: imageRec['fade-anim-seconds']*1000, transition: Fx.Transitions.sineInOut});
      }
      
      // apply proper css to both images, and insert a placeholder to stop layout from breaking
      $(imageRec['tag-id']).style.position = 'absolute';
      $(imageRec['alt-tag-id']).style.position = 'absolute';
      
      var el = new Element('div', {
        'style': 'width: '+$(imageRec['tag-id']).width+'px; height: '+$(imageRec['tag-id']).height+'px;'
      });
      el.innerHTML = ' ';
      if ($(imageRec['tag-id']).nextSibling)
        $(imageRec['tag-id']).parentNode.insertBefore(el, $(imageRec['tag-id']).nextSibling);
      else
        $(imageRec['tag-id']).parentNode.appendChild(el);
      
      // we swap between two img tags, and record which one we're using now
      imageRec['areUsingAltImgTag'] = false;
    }
    
    // calculate the next image index
    currentState[imageRec['tag-id']].step++;
    if (currentState[imageRec['tag-id']].step >= imageRec['images'].length)
      currentState[imageRec['tag-id']].step = 0;
    
    // are we doing the alt img, or the non-alt img
    if (!imageRec['areUsingAltImgTag']) { // original img tag
      // show the image we're going to *hide* and give it a background z-index
      rotateImgFxObjects[imageRec['tag-id']].show();
      $(imageRec['tag-id']).style.zIndex = '5';
      
      // hide the image we're going to *show* and give it a foreground z-index
      rotateImgFxObjects[imageRec['alt-tag-id']].hide();
      $(imageRec['alt-tag-id']).style.zIndex = '10';
      
      // swap src of, and fade in the image we're going to show
      $(imageRec['alt-tag-id']).src = imageRec['images'][currentState[imageRec['tag-id']].step];
      rotateImgFxObjects[imageRec['alt-tag-id']].toggle();
      
      // record so we use the other img tag next time
      imageRec['areUsingAltImgTag'] = true;
    } else { // alternate img tag
      // show the image we're going to *hide* and give it a background z-index
      rotateImgFxObjects[imageRec['alt-tag-id']].show();
      $(imageRec['alt-tag-id']).style.zIndex = '5';
      
      // hide the image we're going to *show* and give it a foreground z-index
      rotateImgFxObjects[imageRec['tag-id']].hide();
      $(imageRec['tag-id']).style.zIndex = '10';
      
      // swap src of, and fade in the image we're going to show
      $(imageRec['tag-id']).src = imageRec['images'][currentState[imageRec['tag-id']].step];
      rotateImgFxObjects[imageRec['tag-id']].toggle();
      
      // record so we use the other img tag next time
      imageRec['areUsingAltImgTag'] = false;
    }
    
    // apply the new caption
    if (imageRec['caption-id']) {
      rotateImgFxObjects[imageRec['caption-id']].hide();
      $(imageRec['caption-id']).innerHTML = imageRec['captions'][currentState[imageRec['tag-id']].step];
      rotateImgFxObjects[imageRec['caption-id']].toggle();
    }
  }
  
});

document.observe('dom:loaded', function() {
  new RotateImgController().init();
});