ContentBox = Class.create();
ContentBox.prototype = {
  animations: {},
  
  initialize: function() {
    this.cycling = true;
    this.cycle_interval = 7; // in seconds

    this.item_template = TrimPath.parseDOMTemplate('content_box_list_item_jst');
    
    this.content_box = $('content_box');
    this.image_container = this.content_box.down('.image_container');
    this.primary_image = this.image_container.down('img');
    this.secondary_image = $(document.createElement('img'));

    // initialize secondary image
    this.secondary_image.addClassName('picture');
    this.secondary_image.setOpacity(0);
    this.image_container.appendChild(this.secondary_image);

    this.description_container = this.content_box.down('.description_container');
    this.description = this.description_container.down('.description');
    this.description_headline = this.description.down('h1');
    this.description_text = this.description.down('p');

    // load data and generate HTML
    this.menu = this.content_box.down('ul');
    this.load_data();
    console.log("Items: ", this.items);
    this.build_html();    
    this.menu_items = this.menu.select('li');
    this.menu_items.each(function(li) {
        Event.observe(li, 'click', this.handle_item_click.bind(this, li));
    }.bind(this));
    
    this.current_menu_item = 0;
    
    this.cycle_timeout = this.cycle.bind(this).delay(this.cycle_interval);
  },

  load_data: function() {
    this.data_container = $('content_box_data');
    this.items = this.data_container.select('div.item').map(function(item) {
      return {
        short_headline: item.down('.short_headline').innerHTML,
        short_description: item.down('.short_description').innerHTML,
        long_headline: item.down('.long_headline').innerHTML,
        long_description: item.down('.long_description').innerHTML,
        image_url: item.down('.picture').innerHTML
      };
    });
    for (var i=0; i<30; ++i) { this.items.sort(function() { return 0.5 - Math.random() }) }
  },
  
  build_html: function() {
    (4).times(function(i) {
      var item = this.items[i];
      item.number = i+1;
      this.menu.insert({
        bottom: this.item_template.process(item)
      })
    }.bind(this));
    
    this.menu.down('li').addClassName('selected');
    
    // set up initial state
    this.primary_image.src = this.items[0].image_url;
    this.description_headline.update(this.items[0].long_headline);
    this.description_text.update(this.items[0].long_description);
  }, 
  
  handle_item_click: function(li) {
    this.stop_cycling();
    this.change_to_item(li);
  },
  
  stop_cycling: function() {
    if (this.cycle_timeout) {
      clearTimeout(this.cycle_timeout);
    }
    this.cycling = false;
  },
  
  cycle: function() {
    if (this.current_menu_item < this.menu_items.length-1) {
      this.current_menu_item ++;
    }
    else {
      this.current_menu_item = 0;
    }
    this.change_to_item(this.menu_items[this.current_menu_item]);
    if (this.cycling) {
      this.cycle_timeout = this.cycle.bind(this).delay(this.cycle_interval);
    }
  },
  
  change_to_item: function(li) {
    this.menu_items.each(function(item) {
      if (li == item) {
        if (item.hasClassName('selected')) {
          return;
        }
        item.addClassName('selected');
        var headline = item.down('h1.long_headline').innerHTML;
        var text = item.down('p.long_description').innerHTML;
        var img_src = item.down('img').src;
        this.change_description(headline, text);
        this.change_image(img_src);
      }
      else {
        item.removeClassName('selected');
      }
    }.bind(this));
  },
  
  hide_description: function(options) {
    if (this.animations.description && this.animations.description.isAnimated()) {
      this.animations.description.stop();
    }
    this.animations.description = new YAHOO.util.Anim(this.description, {
      height: { to: 0 }
    });
    this.animations.description.method = YAHOO.util.Easing.easeIn;
    this.animations.description.duration = 0.3;
    if (options && options.onComplete) {
      this.animations.description.onComplete.subscribe(options.onComplete);
    }
    this.animations.description.animate();
  },
  
  show_description: function(options) {
    if (this.animations.description && this.animations.description.isAnimated()) {
      this.animations.description.stop();
    }
    this.animations.description = new YAHOO.util.Anim(this.description, {
      height: { to: 76 }
    });
    this.animations.description.method = YAHOO.util.Easing.easeOutStrong;
    this.animations.description.duration = 0.75;
    if (options && options.onComplete) {
      this.animations.description.onComplete.subscribe(options.onComplete);
    }
    this.animations.description.animate();
  },
  
  change_description: function(heading, text) {
    this.hide_description({
      onComplete: function() {
        this.description_headline.update(heading);
        this.description_text.update(text);
        this.show_description();
      }.bind(this)
    })
  },
  
  change_image: function(src) {
    if (this.animations.image && this.animations.image.isAnimated()) {
      this.animations.image.stop();
    }
    this.secondary_image.src = src;
    
    this.animations.image = new YAHOO.util.Anim(this.secondary_image, {
      opacity: { from: 0, to: 1 }
    });
    
    this.animations.image.onComplete.subscribe(function() {
      this.primary_image.src = src;
      this.secondary_image.setOpacity(0);
    }.bind(this))
    
    this.animations.image.duration = 0.75;
    
    this.animations.image.animate();      

  }
};

YAHOO.util.Event.onContentReady('content_box', function() {
  content_box = new ContentBox();
});