/*
* HOMEPAGE SCROLLING NEWS
*/
var AnimatedMenu = Class.create({
  initialize: function(container, interval) {
    this.main_ctn  = $$('#' + container + ' .main-container')[0];
    this.menu_ctn  = $$('#' + container + ' .menu-container')[0];
    this.menu_anim = $$('#' + container + ' .animated-menu')[0];
    this.items     = $$('#' + container + ' .item');
    this.active    = this.items.shift();
    
    // Overlay the png corners
    this.add_corners();
    
    // Add the first item into the menu
    var item = this.active.clone(true);
    this.toggle_image(item.select('img.large')[0]);
    this.menu_anim.insert(item);    
    this.items.push(item);

    // Needs more than 4 items to work
    if (this.items.length > 4) {
      var images = $A();
      
      this.menu_ctn.select('img.tiny').each( function(timg) {
        images.push(timg.readAttribute('src').replace('tiny.jpg', 'large.jpg'));
      });
      
      this.preload(images, function() {
        setInterval(this.scroll.bind(this), interval*1000);
      }.bind(this));
      return true;
    } else {
      return false;
    }
  },

  preload: function() {
    var args     = $A(arguments);
    var callback = Object.isFunction(args.last()) ? args.pop() : Prototype.emptyFunction;
    var urls     = Object.isArray(args[0]) ? $A(args[0]) : args;
    var loaded   = 0;
    var images   = $A();

    var onload = function() {
      if (++loaded == urls.length) {
        callback();

        // cleanup
        images.each(function(i) { delete i });
        images = callback = urls = null;
      }
    };

	if (urls.length > 0){
		urls.each(function(url) {
		  var image = new Image();
		  image.onload = image.onerror = onload;
		  image.src = url;
		  images.push(image);
		});
    }
  },

  scroll: function() {
    // grab the next image
    this.active = this.items.shift();
    
    // remove the active item from the menu
    this.menu_ctn.insert({top: this.active});
    
    // Slide the top menu item left
    new Effect.MoveBy(this.active, 0, this.active.getWidth() * -1, {duration: 0.70});
    
    // Slides the menu up
    new Effect.MoveBy(this.menu_anim, this.active.getHeight() * -1, 0, {duration: 0.70});
    
    // Display the new text
    this.main_ctn.select('.text')[0].replace(this.active.select('.text')[0].clone(true));
    
    // Aminate in the large image
    var image = this.active.select('.tiny')[0].clone();
    this.toggle_image(image);
    this.main_ctn.insert(image);

    new Effect.MoveBy(image, 0, image.getWidth() * -1, {
      delay: 0.35,
      duration: 0.5,
      afterFinish: this.reset.bind(this),
      beforeStart: function() {
        image.writeAttribute('style', 'top:0; left:' + image.getWidth() + 'px');
      }
    });
  },
  
  reset: function() {
    this.items.push(this.active);
    this.menu_anim.writeAttribute('style', '');
    this.items.invoke('writeAttribute','style', '');
    this.main_ctn.select('.large')[0].remove();
    this.menu_anim.insert(this.active);
  },
    
  toggle_image: function(image) {
    var from = image.classNames().toString();
    var to, size;

    if (from == 'tiny') {
      to   = 'large';
      size = 324;      
    } else {
      to   = 'tiny';
      size = 75;            
    }
            
    image.writeAttribute('src', image.readAttribute('src').replace(from + '.jpg', to + '.jpg'));
    image.writeAttribute('width', size);
    image.writeAttribute('height', size);
    image.writeAttribute('class', to);
  },

  add_corners: function() {
    if(window.XMLHttpRequest) { // dont load the transparent png's in IE6
      ['top-right', 'top-left', 'bottom-left', 'bottom-right'].each(function(c) {
        this.main_ctn.up().insert(new Element('div', {'class' : 'corner ' + c}));
      }.bind(this));      
    }
  }
});