fi = null;
curFront = 1;

if (!Array.prototype.shuffle) {
    Array.prototype.shuffle = function() {
        // Clone this array.
        var result = this.concat();

        // Swap each element with another randomly selected one.
        for (var i = 0; i < result.length; i++) {
            var j = i;
            while (j == i) {
                j = Math.floor(Math.random() * result.length);
            }
            var contents = result[i];
            result[i]    = result[j];
            result[j]    = contents;
        }

        return result;
    };
}

function initFront() {    
  fi = $('frontImage');

  images = images.shuffle();
  
  divImg = new Element('div', {id: 'frontContainers' });
  fi.update(divImg);
      
  div1 = new Element('div', {id:'front[1]', className:'frontContainer'});
  divImg.update(div1);
  div1.absolutize();
  var url = getFrontImageUrl(images.first()[0]);
  div1.insert(new Element('img', { src: url } ));
  
  div2 = new Element('div', {id:'front[2]', className:'frontContainer'});
  div2.hide();
  divImg.insert(div2);
  div2.absolutize().clonePosition(div1);
  
  divC = new Element('div', { id:'frontCaption' });
  divC.innerHTML = images.first()[1];
  fi.insert(divC);
  
  divImg.hide();
  divImg.appear();
  
  new PeriodicalExecuter(nextFront, 5);
}

function nextFront() {
  var oldDiv = $('front['+curFront+']');
  var newDiv = $('front['+(3-curFront)+']');
    
  images = images.shuffle();
  nextImage = images.first();
  
  var url = getFrontImageUrl(nextImage[0]);
  var img = new Element('img', { src: url });
  newDiv.update(img);
    
  var func = ((curFront==2)?'fade':'appear');
  
  Event.observe(img, 'load', function() {
    new Effect.Fade($('frontCaption'));    
    $('front[2]')[func]({duration:2.5, afterFinish: function() {
      new Effect.Appear($('frontCaption').update(nextImage[1]));    
    }});
  });
  
  curFront = 3-curFront;
}

function getFrontImageUrl(file) {
  return 'image.php?width=240&height=180&shadow=0&sb=255,255,255&src=images/front/'+file;
}

Event.observe(window, 'load', initFront);
