var MicroSubNav = {
	options:{
		mainSubNav: [],
		mainSubFx: [],
		current: 0
	},

	start: function() {
		if ( (BrowserDetect.browser == 'Explorer') && (BrowserDetect.version <= 6) ) {
			window.addEvent('load', MicroSubNav.start_now.bind(MicroSubNav));
		}
		else {
			MicroSubNav.start_now();
		}
	},
	start_now: function() {	
		this.hideElements();     
		this.setUpNav();   	
	},
	
	hideElements: function() { //hide all elements....
		var temp = $$('#swapdiv .divholder');
		temp.each(function(element,i) {
			element.setStyle('display', 'none');
		});
	},
	
		setUpNav: function() { //initalize the nav
		this.options.mainSubNav = $$('ul.alphabet li');	
		this.options.mainSubNav.each(function(button, i){
			
			this.options.mainSubFx[i] = new Fx.Styles(button, {wait:false, duration: 300});	
//			button.addEvent('mouseover', function(){ this.options.mainSubFx[i].start({'background-color': '#AB2C40'});}.bind(this));
//			button.addEvent('mouseout', function(){ this.options.mainSubFx[i].start({'background-color': '#333'}); }.bind(this));
			button.addEvent('click', function(){ 														 
				if (!button.hasClass('active')) { //if it isn't selected, then select
					this.swapDiv(button, i); 
					this.setActive(button, i);
					this.options.current = i;
				}																											 													 
			}.bind(this));
		}.bind(this));
		
		this.options.mainSubFx[0].start({ 'color': '#fff', 'background-color': '#222222'	});
		this.options.mainSubNav[0].addClass('active');
		$('itMeans').setStyle('display', 'block');
		$('itMeans').addClass('active');
	},
	
	
	setActive: function(element, i){
		element.removeEvents('mouseover');
		element.removeEvents('mouseout');
		this.options.mainSubFx[i].start({	'color': '#fff', 'background-color': '#222222'	}); 
		
	},
	
	swapDiv:function(divId, i){
		var navDiv = $$('li.active');			//find active in nav and remove
	
/*		navDiv.addEvent('mouseover', function(){ 
				this.options.mainSubFx[this.options.current].start({	'background-color': '#AB2C40'	});
			}.bind(this));
			
		navDiv.addEvent('mouseout', function(){ 
				this.options.mainSubFx[this.options.current].start({	'background-color': '#333' });  
			}.bind(this));
*/		
		this.options.mainSubFx[this.options.current].start({	'background-color': '#33333', 'color':'#8d8d8d' }); 
		navDiv.removeClass('active');
		
		var hideDiv = $$('#swapdiv .active'); //find the div within swapdiv that has class active and remove
  	hideDiv.removeClass('active');
	  hideDiv.setStyle('display', 'none');		//turn off current div

		if(i == 0){
			var turnOn = $('itMeans');
			$('swapwrapper').setStyle('border-color', '#0676A6');
			turnOn.setStyle('display', 'block');
			turnOn.addClass('active');
		}
		if(i == 1){
			$('swapwrapper').setStyle('border-color', '#8a2a45');
			var turnOn = $('scaling');
			turnOn.setStyle('display', 'block');
			turnOn.addClass('active');
		}
		if(i == 2){
			$('swapwrapper').setStyle('border-color', '#e6962f');
			var turnOn = $('readyGet');
			turnOn.setStyle('display', 'block');
			turnOn.addClass('active');
		}
		if(i == 3){
			
			var turnOn = $('formMeets');
			$('swapwrapper').setStyle('border-color', '#538919');
			turnOn.setStyle('display', 'block');
			turnOn.addClass('active');
		}
		if(i == 4){
			$('swapwrapper').setStyle('border-color', '#0676A6');
			var turnOn = $('rightConnections');
			turnOn.setStyle('display', 'block');
			turnOn.addClass('active');
		}
		if(i == 5){
			$('swapwrapper').setStyle('border-color', '#8a2a45');
			var turnOn = $('parentTv');
			turnOn.setStyle('display', 'block');
			turnOn.addClass('active');
		}
	
	
	}
};
window.addEvent('domready', MicroSubNav.start.bind(MicroSubNav));