var Menu = Class.create(
  {
    _menu: null,
    _submenus: [],
    _backgrounds: ['black', 'green', 'blue', 'yellow', 'orange'],

    initialize: function(menuElement) {
      this._menu = menuElement;
      this._submenus = this._menu.select('.submenu');
      this._submenus.each((function(s, index) {
	s.observe('click', this.showSubMenu.bindAsEventListener(s, this));
	s.collapsed = true;
	s.index = index;
      }).bind(this));
      this.randomizeColors();
    },

    /**
     * Change background image in the menu to be in different colors
     */
    randomizeColors: function() {
      this._menu.getElementsBySelector('a').each(
	(function(s, index) {
	  var img = this._backgrounds[index % this._backgrounds.length];
	  s.setStyle({
	    backgroundImage: 'url(/images/skateboards/' + img + '.png)'
	  });
	  s.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader("
	    + "src='/images/skateboards/" + img + ".png')";
	}).bind(this));
    },

    hideSubMenu: function(event, that) {
      this.collapsed = true;
      this.stopObserving('click');
      this.observe('click', that.showSubMenu.bindAsEventListener(this, that));
      Effect.SlideUp(this.down('ul'), { duration: 0.1, queue: { scope: "e",
								position: 'end'} });
    },

    showSubMenu: function(event, that) {
      that.hideOtherSubmenus();
      this.collapsed = false;
      this.stopObserving('click');
      this.observe('click', that.hideSubMenu.bindAsEventListener(this, that));
      Effect.SlideDown(this.down('ul'), { duration: 0.1, queue: { scope: "e",
								  position: 'end'} });
    },

    hideOtherSubmenus: function() {
      this._submenus.each((function(s, index) {
	if(s.collapsed === false) {
	  s.collapsed = true;
	  s.stopObserving('click');
	  s.observe('click', this.showSubMenu.bindAsEventListener(this));
	  s.down('div').down('ul').hide();
	}
      }).bind(this));
    }
  });

var Thumbs = Class.create(
  {
    initialize: function() {
      var thumbs = $$('.thumb');
      thumbs.each(function(elem, index) {
	elem.down('img').observe('load', function(event) {
	  var img = Event.element(event);
	  var height = img.height;
	  img.setStyle({
	    position: 'absolute',
	    top: ((90 - height) / 2 + 5) + "px"
	  });
	});
      });
    }
  });

var BackgroundAdjuster = Class.create(
  {
    initialize: function() {
      var elem = $('bottom-right');
      if(document.viewport.getHeight() < $(document.body).getHeight()) {
	elem.setStyle({ top: ($(document.body).getHeight()) + 'px' });
      }
    }
  });

document.observe('dom:loaded', function(event) {
  new Menu($('menu')); // setup menu animation and look

  // setup the scrollbar
  var scrollable = undefined;
  if((scrollable = $$('.scrollable')[0]) !== undefined) {
    var template = new Template('<div id="scrollbar_container">'
      + '<div id="scrollbar_track">'
      + '<div id="scrollbar_handle"></div></div>'
      + '<div id="scrollbar_content">'
      + '#{content}'
      + '</div></div>');
    var elem = template.evaluate({ content: scrollable.innerHTML });
    Element.replace(scrollable, elem);

    var options = {
      proportional: false
    };
    var scrollbar = new Control.ScrollBar(
      'scrollbar_content',
      'scrollbar_track',
      options
    );
  }

  new Thumbs(); // center thumbs vertically
  new BackgroundAdjuster(); // adjust background graphics
});