var SaturatedImage = new Class({
  
  initialize: function(img) {
    this.img = img;
    var lnk = this.img.getParent();
    this.img_wrapper = new Element('div', { styles: { position: 'relative' } });
    this.img_wrapper.wraps(img);
    this.hover_img = null;
    var a_img_loc = img.get('src').replace('_gray', '_');
    var new_image =  new Asset.image( a_img_loc, { alt: img.get('alt'), 'class': 'hoverimg', onload: this.addImage.bind(this) } );
    
    //set up events
    lnk.addEvent('mouseenter', this.mouseOver.bind(this));
    lnk.addEvent('mouseleave', this.mouseOut.bind(this));
    
  },
  
  addImage: function(img) {
    var orig = this.img;
	var w = orig.getSize().x;
	w = w * -1;
    this.hover_img = img;
    this.hover_img.setOpacity(0);
    this.hover_img.set('morph', { duration: 350 });
    this.hover_img.setStyles({position: 'absolute', top: 0, left: 0});
	if(Browser.Engine.version && Browser.Engine.version == '4') {
		this.hover_img.setStyle('margin-left', w);	
	}
    this.hover_img.inject(this.img_wrapper, 'top');
  },
  
  mouseOver: function(event) {
    if(this.hover_img) {
      this.hover_img.morph({opacity: 1});
    }
  },
  
  mouseOut: function(event) {
    if(this.hover_img) {
      this.hover_img.morph({opacity: 0});
    }
  }
  
});

window.addEvent('domready', function(e) {
  $$('.desaturated').each(function(img) { var s = new SaturatedImage( img ); });
});