YAHOO.namespace("featuresSlideshow");

YAHOO.util.Event.onContentReady("features", function() {
	YAHOO.featuresSlideshow.featuresSlideshow("0");
});

YAHOO.featuresSlideshow.featuresSlideshow = function(indexClicked) {
	var myElements = YAHOO.util.Dom.getElementsByClassName('section', 'div', document.getElementById('features'));
	//var myElements = YAHOO.util.Dom.getElementsBy(function(){return true}, 'div', document.getElementById('features'));
	
	// Display the div wrapping all the buttons
	if (myElements.length > 0) {
		var buttons = document.getElementById("featuresSlideshowButtons");
		
		// We want to move it in the DOM to before the first section div.
		// The CSS definition for featuresSlideshowButtons will then push 
		// it down to just below a 200 pixel tall image in each section. 
		YAHOO.util.Dom.insertBefore(buttons, myElements[0]);
		buttons.style.display = 'block';
	}
	for (var i = 0; i < myElements.length; i++) {
		
		// Display all the buttons that correspond to a feature section
		var button = document.getElementById("slideshowButton" + i);
		if (button != undefined) {
			button.style.display = 'inline';
		}
		
		if (i == indexClicked) {
			
			// Hide all sections other than the one that was clicked
			// (if no javascript all sections are displayed by default)
			// alert('here' + i + ';' + indexClicked + ';');
			myElements[i].style.display = 'block';
			
			// Change the color of the active link to red
	        YAHOO.util.Dom.removeClass(YAHOO.util.Dom.getElementsByClassName("slideshowLink", "a"), "slideshowLinkActive");
	        YAHOO.util.Dom.addClass(document.getElementById("slideshowLink" + i), "slideshowLinkActive");
			
		} else {
			myElements[i].style.display = 'none';
		}
	}
}