ODIL_Initializer.add_selector_with_action('.hover_effects', function(element) {
	new HoverEffects().initialize_on_element(element);
});


var HoverEffects = Class.create(ODIL_Base, {
	namespace: function($super) {
		return $super() + 'hover_effects-';
	},
	
	main_element: null,
	underlay_image: null,
	overlay_image: null,
	lock: false,
	duration: 0.3,
	
	initialize_on_element: function(element) {
		this.main_element = element;
		var that = this;
		
		this.overlay_image = new Element('img', {src: element.readAttribute(this.namespace() + 'hover')});
		this.underlay_image = new Element('img', {src: element.readAttribute(this.namespace() + 'normal')});
		
		this.underlay_image.observe('load', function(event) {
			that.main_element.setStyle({
				position: 'relative',
				width: that.underlay_image.getWidth()+'px',
				height: that.underlay_image.getHeight()+'px'
			});
			
			that.underlay_image.setStyle({
				position: 'absolute',
				top: '0px',
				left: '0px',
				width: that.underlay_image.getWidth()+'px',
				height: that.underlay_image.getHeight()+'px'
			});
			
			that.overlay_image.setStyle({
				opacity: 0,
				position: 'absolute',
				top: '0px',
				left: '0px',
				width: that.underlay_image.getWidth()+'px',
				height: that.underlay_image.getHeight()+'px'
			});
		});
		element.appendChild(this.underlay_image);
		element.appendChild(this.overlay_image);
		
		element.observe('mouseover', function(event) {
			if(!that.lock) {
				new Effect.Opacity(that.overlay_image, {
					from: 0,
					to: 1,
					duration: that.duration,
					beforeStart: function() {
/* 						that.overlay_image.src = that.main_element.readAttribute('hover'); */
						that.overlay_image.show();
					}
				});
			}
		});
		
		element.observe('mouseout', function(event) {
			if(!that.lock) {
				new Effect.Opacity(that.overlay_image, {
					to: 0,
					duration: that.duration
				});
			}
		});
		
		element.observe('we:hover_effects:activate', function(event) {
			that.lock = true;
		});
		
		element.observe('we:hover_effects:deactivate', function(event) {
			that.lock = false;
			new Effect.Opacity(that.overlay_image, {
				to: 0,
				duration: that.duration
			});
		});
	},
	
	change_to_image: function(src) {
		var that = this;
		
		if(!this.lock) {
			new Effect.Opacity(this.overlay_image, {
				from: 0,
				to: 1,
				duration: that.duration,
				beforeStart: function() {
					that.overlay_image.src = src;
					that.overlay_image.show();
				}
			});
		}
	}
});