// Roll Control
// * use class names on thumbnail: roller target_[id]
// * [id] would be DOM id of larger image 

var Roll = Class.create();
Roll.prototype = {
  initialize:function(id,opts){
    this.opts = Object.extend({},opts);
    
    this.el = $(id);
    this.control = this.opts.control;
    this.el.classNames().each((function(name){
      target = name.match(/^target_(.*?)$/);
      if(target) this.target = $(target.last());
    }).bind(this));
    
    this.el.observe('mouseover', this.over.bind(this));

    this.container = this.target.up();
    var height = this.target.getHeight();

    if(this.container.getHeight() <= height)
      this.container.setStyle({height:height+'px'});
    
    this.target.setStyle({position:'absolute'});
  },
  over:function(){
    this.control.change(this);
  }
}

var RollControl = {
  rolls: [],
  queue: [],
  current: null,
  duration: 1,
  rolling: false,
  init:function(opts){
    this.opts = Object.extend({}, opts);
    
    $$('.roller').each((function(el){
      this.add_roll(el);
    }).bind(this));
        
    this.current = this.rolls.first();
  },
  
  add_roll:function(el){
    this.rolls.push(new Roll(el, {control:this}));
  },
  
  change:function(roll){
    if(this.current == roll) return;
    
    this.queue.push(roll);
    this.process();
  },
  
  process:function(){
    if(this.rolling || this.queue.length == 0) return;
    this.rolling = true;
    
    var roll = this.queue.shift();
    
    this.current.el.removeClassName('over');
    roll.el.addClassName('over');

    this.fade = Effect.Fade(this.current.target, {duration:this.duration, afterFinish:(function(){
      this.rolling = false;
      this.process();
    }).bind(this)});
    
    this.appear = Effect.Appear(roll.target, {duration:this.duration});
    this.current = roll;
  }
}
  
Event.observe(window,'load',function(){
  RollControl.init();
});