var MysticNav = Class.create({
  initialize: function(item_class, image_class, highlight_class) {
    this.item = item_class;
    this.image = image_class;
    this.highlight = highlight_class;
    this.items = new Hash();

    // Creating a hash of items.
    $$('.' + item_class).each(function(element) {
      this.items.set(element.id,
        new MysticNavItem(element, this.item, this.image, this.highlight)
      );}.bind(this)
    );
    // console.log(this.items.get('lifeline_thumb'));
  },
  
  on: function() {
    var i = 1;
    this.items.each(function(item) {
      //console.log(item.value);
      t = i*200;
      setTimeout(function() { item.value.on(); }, t);
      i++;
    });
  }
});

var MysticNavItem = Class.create({
  initialize: function(element, base_item, base_image, base_highlight) {
    this._locked = 0;
    this.play_event = undefined;
    this.element = element;
    this.item = base_item;
    this.image = $$('#' + this.element.id + ' ' + base_image);
    this.highlight = $$('#' + this.element.id + ' .' + base_highlight)[0];

	new Event.observe(this.element, 'mouseover', this.appear.bind(this));
	new Event.observe(this.element, 'mouseout', this.fade.bind(this));
  },

  fade: function() {
	if (this.play_event != undefined) { this.play_event.cancel(); }
	if (this._locked == 0) { this.play_event = Effect.Fade(this.highlight.id, { duration: 0.5}); }
  },

  appear: function() {
  // console.log("Calling from appear: " + this.highlight.id);
	if (this.play_event != undefined) { this.play_event.cancel(); }
    this.play_event = Effect.Appear(this.highlight.id, { duration: 0.5});
  },
  
  lockOn: function() {
    this.appear();
    this._locked = 1;
  },
  
  on: function() {
    Effect.Appear(this.element.id);
  }
});