/*
	Element selection script. 
	Copyright Mark de Cates, 2007.
	
	Allows display of different HTML elements in order, based on user clicking on 'prev/next' 
	elements, by using CSS class replacement. 
*/

var prevButton;
var nextButton;
var elements;
var showCssClass;
var hideCssClass;
var selectedIndex;

/*
	Setup function - called on initialization. Displays the first element.
	prevElementId - the elementId of the 'previous' clickable element
	nextElementId - the elementId of the 'next' clickable element
	elementIds - a corresponding array of the elementIds to be selected (displayed) between
	shownCssClass - the CSS class given to the element being displayed
	hiddenCssClass - the CSS class given to elements being hidden
*/
function SelectorSetup( prevElementId, nextButtonId, elementIds, shownCssClass, hiddenCssClass ) {
	prevButton = prevElementId;
	nextButton = nextButtonId;
	elements = elementIds;
	showCssClass = shownCssClass;
	hideCssClass = hiddenCssClass;
	if(elementIds.length > 0) {
		SelectElement(0);
	}
}

/*
	Selects the given element, and hides the others.
*/
function SelectElement( index ) {
	//Display prev/next buttons as appropriate and do a parameter-check
	if(index >= elements.length) {
		index = elements.length - 1;
	}
	if(index < 0) {
		index = 0;
	}
	
	if(index == 0) {
		SwapCssClass(prevButton, showCssClass, hideCssClass);
	}
	else {
		SwapCssClass(prevButton, hideCssClass, showCssClass);
	}
	
	if( index == (elements.length - 1) ) {
		SwapCssClass(nextButton, showCssClass, hideCssClass);
	}
	else {
		SwapCssClass(nextButton, hideCssClass, showCssClass);
	}
	
	for(var i in elements) {
		if(i == index) {
			SwapCssClass(elements[i], hideCssClass, showCssClass);
		}
		else {
			SwapCssClass(elements[i], showCssClass, hideCssClass);
		}
	}
	
	selectedIndex = index;
}

/*
	Selects the previous element.
*/
function SelectPrev() {
	SelectElement (selectedIndex - 1);
}

/*
	Selects the next element.
*/
function SelectNext() {
	SelectElement (selectedIndex + 1);
}

/*
	Applies a new CSS class to a given element, removing an old one if it exists.
	elementId - ID of the element to swap styles for
	old - CSS class name to replace if it's present
	newer - new CSS class name to apply to the given element 
*/
function SwapCssClass(elementId, old, newer)
{
	var element = document.getElementById(elementId);
	var newRegExp = new RegExp('\\b'+newer+'\\b');
	var oldRegExp = new RegExp('\\b'+old+'\\b');
	//if ( (new RegExp('\\b'+old+'\\b').test(element.className)) ) {
	
	var newMatch = element.className.match(newRegExp);
	var oldMatch = element.className.match(oldRegExp);
	if ( element.className.match(oldRegExp) ) {
		element.className = element.className.replace(oldRegExp,newer);
		return;
	}
	else if (element.className.match(newRegExp) ) {
		return;
	}
	else {
		element.className += ' ' + newer;
		return;
	}
}