// array of background colours
var background = Array();
background["vision"] = "#CC6600";
background["reality"] = "#339999";
background["community"] = "#E9BA00";
background["blogs"] = "#669933";

var fader = Class({

	// set up our element
	initialize: function(options) {
	
		// get element passed
		this.el = options.el;
		this.fadebox = (options.fadebox || false);
		
		// set hover state to false
		this.hover = false;
		
		// add events to our main element
		this.el.addEvent('mouseenter',function() { this.fadeIn(); }.bind(this));
		this.el.addEvent('mouseleave',function() { this.fadeOut.delay(100,this); }.bind(this));
		//this.el.addEvent('click',function() { this.click(); }.bind(this));
		
		// only do this bit if we are front page
		if(this.fadebox) {
		
			// add events to our fadeing in element
			var f = $E(".image div."+this.el.className);
			f.addEvent('mouseenter',function() { this.hover = true; }.bind(this));
			f.addEvent('mouseleave',function() { this.hover = false; this.el.fireEvent("mouseleave"); }.bind(this));
			
		}
		
	},
	
	fadeIn: function() {
	
		this.el.setStyle("cursor","pointer");
		this.el.setStyle("background-color","#000000");
		this.el.tween("background-color","#000000",background[this.el.className]);
		
		if(this.fadebox) {
			$E('div.'+this.el.className,'.image').setStyle('opacity',0);
			$E('div.'+this.el.className,'.image').fade(0.85);
		}
	
	},
	
	fadeOut: function() {
	
		if(!this.hover) {
	
			this.el.setStyle("background-color",background[this.el.className]);
			this.el.tween("background-color",background[this.el.className],"#000000");
			
			if(this.fadebox) {
				$E('div.'+this.el.className,'.image').setStyle('opacity',0.85);
				$E('div.'+this.el.className,'.image').fade(0);
			}
			
			this.hover = false;
			
		}
	
	},
	
	click: function() {
		location.href=$E('a',this.el).getProperty("href");
	}

});