var BarSlideList = new Class({
	initialize: function(menu, options) {
		this.setOptions(this.getOptions(), options);
		
		this.menu = $(menu), this.current = this.menu.getElement('li.current');
		
        
        window.addEvent('domready', function(){ this.domready(); }.bind(this));
        window.addEvent('resize', function(){ this.resize(); }.bind(this));
		
		this.menu.getElements('li').each(function(item){
			item.addEvent('mouseover', function(){ this.moveBg(item); }.bind(this));
			item.addEvent('mouseout', function(){ this.moveBg(this.current); }.bind(this));
			//item.addEvent('click', function(event){ this.clickItem(event, item); }.bind(this));
		}.bind(this));
				
		this.back = new Element('li').addClass('background').adopt(new Element('div').addClass('left')).injectInside(this.menu);
		this.back.fx = this.back.effects(this.options);
		
		$('barwhitetext').fx = $('barwhitetext').effects(this.options);
		if(this.current) this.setCurrent(this.current);
	},
	
	setCurrent: function(el, effect){
		this.back.setStyles({top: (el.offsetTop)+'px', height: (el.offsetHeight)+'px', width: (el.offsetWidth)+'px'});
		(effect) ? this.back.effect('opacity').set(0).start(1) : this.back.setOpacity(1);
		this.current = el;
	},
	
	getOptions: function(){
		return {
			transition: Fx.Transitions.sineInOut,
			duration: 500, wait: false,
			onClick: Class.empty
		};
	},

	clickItem: function(event, item) {
	    alert('hi');
		if(!this.current) this.setCurrent(item, true);
		this.current = item;
		this.options.onClick(new Event(event), item);
	},

	moveBg: function(to) {
		if(!this.current) return;
		
		
		this.back.fx.custom({
			top: [this.back.offsetTop, to.offsetTop],
			//width: [this.back.offsetWidth, to.offsetWidth],
			height: [this.back.offsetHeight, to.offsetHeight]
		});
		var whitetext = $('barwhitetext');
		whitetext.fx.custom({
			top: [whitetext.offsetTop, to.offsetTop +170]//,
			//width: [this.back.offsetWidth, to.offsetWidth],
			//height: [whitetext.offsetHeight, to.offsetHeight]
		});
		/*var targetid = to.id.substring(1, to.id.length);
		if ( targetid!=null && targetid!='' && this.currentFade != targetid) {
            $clear(this.fadeFunc);
            this.fadeOutOthers('');
            if ( targetid=='company' || targetid=='solutions' || targetid=='industries' || targetid=='services' ) {
                this.currentFade = targetid;
                this.fadeFunc = (function(){ this.fadeIn(targetid); }).delay(100, this);
            }
            //else if ( this.current == this.back )
           //     this.fadeOutOthers('');
		}*/
		/*
        if ( targetid =='company') {
            $clear(this.fadeFunc);
            this.fadeFunc = (function(){ this.fadeIn('company'); }).delay(100, this);
            //this.fadeOutOthers(targetid);
        }
        else if ( targetid =='solutions') {
            $clear(this.fadeFunc);
            this.fadeFunc = (function(){ this.fadeIn('solutions'); }).delay(100, this);
            //this.fadeOutOthers(targetid);
        }
        else if ( targetid =='industries') {
        	$clear(this.fadeFunc);
            this.fadeFunc = (function(){ this.fadeIn('industries'); }).delay(100, this);
            //this.fadeOutOthers(targetid);
        }
        else if ( targetid =='services') {
            $clear(this.fadeFunc);
            this.fadeFunc = (function(){ this.fadeIn('services'); }).delay(100, this);
            //this.fadeOutOthers(targetid);
        }
        else if ( targetid =='barbottom') {
           //this.fadeOutOthers('');
        }
        else {
            //$clear(this.fadeFunc);
            this.fadeOutOthers('');
            
        }*/
	},
	fadeIn: function(elm) {
	    if(this.current) {
	        $(elm).effect('opacity',{duration: 100}).set(0).start(1);
	    }
	},
	fadeOut: function(elm) {
	    if(this.current) {
	        $(elm).effect('opacity',{duration: 100}).set(1).start(0);
	    }
	},
	show: function(elm) {
        this.hideOthers(elm);
	    $('w'+elm).setOpacity(1);
	},
	hideOthers: function(elm) {
	        if( elm == 'company') {
		        $('wsolutions').setOpacity(0);
		        $('windustries').setOpacity(0);
		        $('wservices').setOpacity(0);
	        }
	        else if( elm == 'solutions') {
		        $('wcompany').setOpacity(0);
		        $('windustries').setOpacity(0);
		        $('wservices').setOpacity(0);
	        }
	        else if( elm == 'industries') {
		        $('wcompany').setOpacity(0);
		        $('wsolutions').setOpacity(0);
		        $('wservices').setOpacity(0);
	        }
	        else if( elm == 'services') {
		        $('wcompany').setOpacity(0);
		        $('wsolutions').setOpacity(0);
		        $('windustries').setOpacity(0);
	        }
	        else {
		        $('wcompany').setOpacity(0);
		        $('wsolutions').setOpacity(0);
		        $('windustries').setOpacity(0);	   
		        $('wservices').setOpacity(0);     
	        }
	},
	resize: function() {
		if(!this.current) return;
		this.back.fx.custom({
			width: [this.back.offsetWidth, this.current.offsetWidth]
		});
	},
	domready: function() {
		//should remove hard coding for reuseability
		$('ccompany').addEvent('mouseover', function(){ this.moveBg($('bcompany')); }.bind(this));
		$('ccompany').addEvent('mouseout', function(){ this.moveBg(this.current); }.bind(this));
		//$('ccompany').addEvent('click', function(event){ this.clickItem(event, $('bcompany')); }.bind(this));
		$('csolutions').addEvent('mouseover', function(){ this.moveBg($('bsolutions')); }.bind(this));
		$('csolutions').addEvent('mouseout', function(){ this.moveBg(this.current); }.bind(this));
		//$('csolutions').addEvent('click', function(event){ this.clickItem(event, $('csolutions')); }.bind(this));
	    $('cindustries').addEvent('mouseover', function(){ this.moveBg($('bindustries')); }.bind(this));
		$('cindustries').addEvent('mouseout', function(){ this.moveBg(this.current); }.bind(this));
		//$('cindustries').addEvent('click', function(event){ this.clickItem(event, $('cindustries')); }.bind(this));
		$('cservices').addEvent('mouseover', function(){ this.moveBg($('bservices')); }.bind(this));
		$('cservices').addEvent('mouseout', function(){ this.moveBg(this.current); }.bind(this));
		//$('cservices').addEvent('click', function(event){ this.clickItem(event, $('cservices')); }.bind(this));
		
		$('wcompany').setOpacity(0);
		$('wsolutions').setOpacity(0);
		$('windustries').setOpacity(0);
		$('wservices').setOpacity(0);
		
		$('ccompany').addEvent('mouseover', function(){ this.show('company'); }.bind(this));
		//$('ccompany').addEvent('mouseout', function(){ this.fadeOut('wcompany'); }.bind(this));
		$('csolutions').addEvent('mouseover', function(){ this.show('solutions'); }.bind(this));
		//$('csolutions').addEvent('mouseout', function(){ this.fadeOut('wsolutions'); }.bind(this));
		$('cindustries').addEvent('mouseover', function(){ this.show('industries'); }.bind(this));
		//$('cindustries').addEvent('mouseout', function(){ this.fadeOut('windustries'); }.bind(this));
		$('cservices').addEvent('mouseover', function(){ this.show('services'); }.bind(this));
		//$('cservices').addEvent('mouseout', function(){ this.fadeOut('wservices'); }.bind(this));
		$('cbartop').addEvent('mouseover', function(){ this.hideOthers(''); }.bind(this));
		$('cbarbottom').addEvent('mouseover', function(){ this.hideOthers(''); }.bind(this));
		$('barcover').addEvent('mouseout', function(){ this.hideOthers(''); }.bind(this));
	}
});

BarSlideList.implement(new Options);