/*
/*  hover.js
*/

var HoverLink = Class.create({
  initialize: function (el) {
    this.el    = el;
    this.imgEl = el.down("img");
    
    this.normalImgURL = this.imgEl.getAttribute("src");
    this.hoverImgURL  = this.normalImgURL.
      gsub(/(\.[a-z]{3,})$/, "b#{1}")
    
    this.preloadHoverImage();
  },
  
  preloadHoverImage: function () {
    var image = new Image();
    image.src    = this.hoverImgURL;
    image.onload = this.obeserveElements.bind(this);
  },
  
  obeserveElements: function () {
    var self = this;
    this.el.observe("mouseover", function () {
      self.showHover();
    });
    this.el.observe("mouseout", function () {
      self.showNormal();
    })
  },
  
  showNormal: function () {
    this.imgEl.src = this.normalImgURL;
  },
  
  showHover: function () {
    this.imgEl.src = this.hoverImgURL;
  }
});

document.observe("dom:loaded", function () {
  $$(".hover a").each(function (el) {
    new HoverLink(el);
  });
});