/* Monocle. A photo gallery with style. I say, indeed.
      MadeByCanvas. */

var Monocle = function(element, options){
  this.element = element;
  this.element.monocle = this;
  
  this.curr_index = 0;
  this.img_list = this.element.select("img");
  this.frequency = $H(options).get('frequency') || 16;
  this.duration = $H(options).get('duration') || 8;
  this.img_list.each((function(img){
    img.original_top = img.positionedOffset()[1];
    img.setStyle({
      opacity: 0,
      width: this.element.getWidth() +"px"
      });
  }).bind(this));
  
  this.update = function(){
    var img = this.img_list[this.next_index()];
    this.img_list.each((function(img){
      if(img.getStyle('opacity') == '1'){
        var end_top = -1*(Number(img.readAttribute('start'))/100)*img.getHeight();
        
        img.morph('opacity: 0; top:'+end_top+"px", {duration: this.duration});
      }
      else if(img.getStyle('opacity') == '0'){
        img.setStyle({display: 'none'});
      }
    }).bind(this));

    var start_top = -1*(Number(img.readAttribute('start'))/100)*img.getHeight();
    var start_top = start_top || 0;
    var end_top = -1*(Number(img.readAttribute('end'))/100)*img.getHeight();
    var end_top = end_top || 100;

    img.setStyle({
      top: start_top+"px",
      display: '',
      opacity: 0
    });

    img.morph('opacity: 1; top:'+end_top+"px", {duration: this.duration});
  };
  
  this.next_index = function(){
    var temp = this.curr_index;
    this.curr_index++;
    this.curr_index = this.curr_index % this.img_list.size();
    return temp;
  };
  
  this.update_image_list = function(){
    this.img_list = this.element.select("img");
    this.img_list.each((function(img){
      img.setStyle({
        width: this.element.getWidth() +"px"
        });
    }).bind(this));
  };
  
  this.update();
  var a = new PeriodicalExecuter(this.update.bind(this), this.frequency);
};

var TextMonocle = function(element, options){
  this.element = element;
  this.element.setStyle({
    display: 'block'
  });
  
  this.curr_index = 0;
  this.list = this.element.select("p");
  this.frequency = $H(options).get('frequency') || 16;
  this.percentage = $H(options).get('percentage') || 10;
  this.duration = $H(options).get('duration') || 4;
  this.top = this.list.first().positionedOffset()[1];
  this.width = this.list.first().getWidth();

  
  this.list.each(function(el){
    el.setStyle({
      opacity: 0
    });
  });

  this.update = function(){
    var p = this.list[this.next_index()];
    
    this.list.each((function(p){
      if(p.getStyle('opacity') == '1'){
        var end_left = -1*(this.width*this.percentage/100.0);
        
        p.morph('opacity: 0; margin-left:'+end_left+"px", {duration: this.duration});
      }
    }).bind(this));

    var start_left = (this.width*this.percentage/100.0);

    p.setStyle({marginLeft: start_left + "px"});

    p.morph('opacity: 1; margin-left: 0px', {duration: this.duration});
  };
  
  this.next_index = function(){
    var temp = this.curr_index;
    this.curr_index++;
    this.curr_index = this.curr_index % this.list.size();
    return temp;
  };
  
  this.update();
  var blah = new PeriodicalExecuter(this.update.bind(this), this.frequency);
};

var Monocleisor = {
  isAMonocle : function(element, options){
    var mon = new Monocle(element, options);
  },
  isATextMonocle : function(element, options){
    var mon = new TextMonocle(element, options);
  }
};

var MonocleSync = function(frequency){
  this.functions = $A();
  
  this.add_function = function(f){
    this.functions.push(f);
  };
  
};

Element.addMethods(Monocleisor);
    
Event.observe(window, 'load', function() {
  $$('.monocle').each(function(el){
    el.isAMonocle({
      frequency: 16,
      percentage: 25,
      duration: 8
    });
  });
  $$('.text_monocle').each(function(el){
    el.isATextMonocle({
      frequency: 16,
      percentage: 10,
      duration: 4
    });
  });
});