//TO DO: fix bug where fast clicking causes two DIVs to appear simultaneously.


window.addEvent('domready', function() {
	var featureListArray = $('feature-menu').getElements('li');
	var featureLinkArray = $('feature-menu').getElements('a');
	var featureArray = $('feature').getElements('div[class^=sample-content]');
	

	for(var i=0;i<featureArray.length;i++){
		if(i==0){
			featureArray[i].addClass('active');
			featureArray[i].setStyle('opacity',100);
			featureArray[i].setStyle('left','auto');
		}else{
			featureArray[i].setStyle('opacity',0);
			featureArray[i].setStyle('left','auto');
		}
	}

		//add click events to all sample menu links
	for(var i=0;i<featureLinkArray.length;i++){
		featureLinkArray[i].addEvent('click', function(e) {
			e.stop();
			//turn off current element
			$('feature-menu').getElement('li.active').removeClass('active');
			$('feature-menu').getElement('a.active').removeClass('active');
			
			//switch on this element
			this.addClass('active');
			this.getParent('li').addClass('active');
			
			var newFeature = this.getParent('li').id.substring(16);
			newFeature = $('featureContent_'+newFeature);
			//fade out current Feature
			$('feature').getElement('div.active').tween('opacity',1,0);
			$('feature').getElement('div.active').removeClass('active');
			//fade in new Feature
			newFeature.tween('opacity',0,1);
			newFeature.addClass('active');
		})
	}
});