var MysticGallery = Class.create({
  initialize: function(item_class) {
    this.item_class = item_class;
    this.items = new Hash();

    // Creating a hash of items.
    $$('.' + item_class).each(function(element) {
      this.items.set(element.id,
        new MysticGalleryItem(element, this.item_class)
      );}.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 MysticGalleryItem = Class.create({
  initialize: function(element, item_class) {
    this._locked = 0;
    // this.play_event = undefined;
    this.element = element;
    this.item_class = item_class;
    this.image = $$("#" + element.id + " img")[0];
    // console.log("ELEMENT: " + this.image.src  );

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

  fade: function() {
    this.image.src = this.image.src.replace(/-hover\.([a-zA-Z0-9]+)$/, '.$1');
  // 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() {
    this.image.src = this.image.src.replace(/\.([a-zA-Z0-9]+)$/, '-hover.$1');
  // 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);
  }
});