// JavaScript Document
var FadingHilight=new Class({
	Implements:[Options,Events],
	options: {
		container:"",
		tagname:"div",
		backstyles: {
			backgroundColor: "transparent",
			backgroundImage: "none",
			backgroundAttachment: "fixed",
			backgroundRepeat: "no-repeat",
			backgroundPosition: "0 50%"
		},
		forestyles: ["color"],
		fadingIn: {
			transition: "linear",
			duration: 1000
		},
		fadingOut: {
			transition: "linear",
			duration: 1000
		},

			
		reversed:false
	},
	initialize: function(options) {
		this.setOptions(options);
		$$(this.options.selector).each(this.createHilight.bind(this));
	},
	createHilight: function(container) {
		var els=container.getChildren()
		if (els.length) {
			var element=els[0];
			var backEl=new Element("div");
			var backstyles=$H(this.options.backstyles);
			backstyles.each(function(x,prop) {
				 var val=element.getStyle(prop);
				 if (val)
					backEl.setStyle(prop,val);
				
			 });
			var width=element.getSize().x,height=element.getSize().y;
								 
			container.setStyles({
				position:"relative",
				width:width,
				height:height,
				padding:0
			});
			backEl.setStyles({
				position:"absolute",
				width:width,
				height:height,
				left:0,
				top:0,
				zIndex:0
			});
			if (!this.options.reversed) {
				backEl.set("opacity",0);
			}
			var extraWidth=addDimensions(element,["padding-left","padding-right"]);
			var extraHeight=addDimensions(element,["padding-top","padding-bottom"]);

			element.setStyles({
				position:"absolute",
				width:width-extraWidth,
				height:height-extraHeight,
				left:0,
				top:0,
				zIndex:1
			});
			element.setStyles(this.options.backstyles);

			backEl.inject(container,"top");
			
			
			var forestylesOn={}, forestylesOff={};


			$A(this.options.forestyles).each(function(prop) {
			  try {
				  var src=container.getStyle(prop);
				  var dst=element.getStyle(prop);
				if (!!src && !!dst && src!=dst) {
					forestylesOn[prop]=element.getStyle(prop);
					forestylesOff[prop]=container.getStyle(prop);
				}
			  } catch (ex) {};
			  }.bind(this));
			element.setStyles(forestylesOff);

			element.addEvent("mouseover",function() {
				backEl.set("tween",{
						   transition:this.options.fadingIn.transition,
						   duration:this.options.fadingIn.duration
						   });
				element.set("morph",{
						   transition:this.options.fadingIn.transition,
						   duration:this.options.fadingIn.duration
						   });
				if (this.options.reversed) {												  
					backEl.fade("out");
					element.morph(forestylesOff);
				} else {
					backEl.fade("in");
					element.morph(forestylesOn);
				}
			  }.bind(this));
			element.addEvent("mouseout",function() {
				backEl.set("tween",{
						   transition:this.options.fadingOut.transition,
						   duration:this.options.fadingOut.duration
						   });
				element.set("morph",{
						   transition:this.options.fadingOut.transition,
						   duration:this.options.fadingOut.duration
						   });
				if (this.options.reversed) {												  
					backEl.fade("in");
					element.morph(forestylesOn);
				} else {
					backEl.fade("out");
					element.morph(forestylesOff);
				}
			  }.bind(this));
		}
	}
	
});

function addDimensions(element, styles) {
	var result=0;
	for (var i=0;i<styles.length;i++) {
		var value=element.getStyle(styles[i]);
		result+=parseFloat(value);
	}
	return result;
}