// 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;
		this.fadeing = false;
		
		// set up a couple of effectw
		this.fadeineffect = new Fx.Tween(this.el,'background-color',{ duration:250, onComplete: function() { }.bind(this) });
		this.fadeouteffect = new Fx.Tween(this.el,'background-color',{ duration:250,onComplete: function() { this.hover = false; }.bind(this) });
		
		if(this.fadebox) {
			
			$E('div.'+this.el.className,'.image').setStyle('opacity',0);
			this.fadeineffect2 = new Fx.Tween($E('div.'+this.el.className,'.image'),'opacity', { duration:250 });
			this.fadeouteffect2 = new Fx.Tween($E('div.'+this.el.className,'.image'),'opacity', { duration:250 });
			
		}
		
		// add events to our main element
		this.el.addEvent('mouseenter',function() { 
			this.hover = true; 
			this.fadeIn(); 
		
			// tell all the other links that the house isnt on them
			$$('.links ul li').each(function(l) { if(l != this.el) l.fireEvent('mouseleave'); }.bind(this));
			
		}.bind(this));
		this.el.addEvent('mouseleave',function() { this.hover = false; this.fadeOut.delay(10,this); }.bind(this));
		this.el.addEvent('click',function() { this.click(); }.bind(this));
				
	},
	
	fadeIn: function() {
		
		if(this.hover) {
	
			this.fadeouteffect.cancel();
			
			this.el.setStyle("cursor","pointer");
			this.el.setStyle("background-color","#000000");
			this.fadeineffect.start("#000000",background[this.el.className]);
			
			if(this.fadebox) {
				this.fadeouteffect2.cancel();
				$E('div.'+this.el.className,'.image').setStyle('opacity',0);
				this.fadeineffect2.start(0,0.85);
				$E('div.'+this.el.className,'.image').addEvent('mouseenter',function() { this.hover = true; }.bind(this));
				$E('div.'+this.el.className,'.image').addEvent('mouseleave',function() { this.el.fireEvent("mouseleave"); }.bind(this));
			}
			
		}
	
	},
	
	fadeOut: function() {
		
		if( (!this.hover) && (this.el.getStyle('background-color').toUpperCase() != "#000000") ) {
						
			this.fadeineffect.cancel();
	
			this.el.setStyle("background-color",background[this.el.className]);
			this.fadeouteffect.start(background[this.el.className],"#000000");
			
			if(this.fadebox) {
				this.fadeineffect2.cancel();
				$E('div.'+this.el.className,'.image').setStyle('opacity',0.85);
				this.fadeouteffect2.start(0.85,0);
				$E('div.'+this.el.className,'.image').removeEvents('mouseenter');
				$E('div.'+this.el.className,'.image').removeEvents('mouseleave');
			}
			
		}
	
	},
	
	click: function() {
		location.href=$E('a',this.el).getProperty("href");
	}

});