var noOfButtons = 3; /*The number of link buttons required*/
	
function initialiseRollover(){
	if (noOfButtons > 0){
		var sideNav;
		addAdditionalText();
		hideText(noOfButtons);
		createTextContainer();
		sideNav = document.createElement("ul");
		sideNav.id = "sideNav";
		$("allergy").appendChild(sideNav);
		setupButtons();
	}else{
		throw("At least one link must be defined in JS file.");
	}
}

function addAdditionalText(){
	var additonalText, textToAddTo, textNodeContainer;
	var textToAddTo = $("endOfContent").firstChild.nodeValue;
	$("endOfContent").removeChild($("endOfContent").firstChild);
	textNodeContainer = document.createTextNode(textToAddTo + " (Prego cliccare i numeri per maggiori informazioni)");
	$("endOfContent").appendChild(textNodeContainer);
}

function setupButtons(){
	var button = Class.create();
	button.prototype ={
		initialize: function(buttonNumber, buttonType){
			var button, textNodeContainer, listItem;
			listItem = document.createElement("li");
			button = document.createElement("a");
			button.href = "javascript:void(0);";
			textNodeContainer = document.createTextNode("Etape " + (buttonNumber + 1));
			button.appendChild(textNodeContainer);
			if(buttonType == "navBtn"){
				button.id = "buttonLinkNo" + buttonNumber;
				listItem.appendChild(button);
				$("sideNav").appendChild(listItem);
			}else{
				button.id = "contentItemNo" + buttonNumber;
				listItem.appendChild(button);
				$("boxNav").appendChild(listItem);
			}
			this.id = button.id ;
			this.buttonNumber = buttonNumber;
		},
		
		observingButton: function(){
			this.loadTextBox();
		},
		
		loadTextBox:function(){
			var i;	
	
			for(i = 0; i < noOfButtons; i++){
				Event.stopObserving($("buttonLinkNo" + i), 'click', buttonBind);
				Event.stopObserving($("contentItemNo" + i), 'click', contentButtonBind);
				if(i == this.buttonNumber){
					$("buttonLinkNo" + i).addClassName("btnOn");
					$("contentItemNo" + i).addClassName("btnOn");
				}else{
					$("buttonLinkNo" + i).removeClassName("btnOn");
					$("contentItemNo" + i).removeClassName("btnOn");
				}
			}
			
			getLatestContent(this.buttonNumber);
			for(i = 0; i < noOfButtons; i++){
				Event.observe($("buttonLinkNo" + i), 'click', buttonBind);
				Event.observe($("contentItemNo" + i), 'click', contentButtonBind);
			}
		}
	};
	
	var buttonBind, contentButtonBind;
	var button0 = new button(0, "navBtn");
	var button1 = new button(1, "navBtn");
	var button2 = new button(2, "navBtn");
	var contentButton0 = new button(0, "contentBtn");
	var contentButton1 = new button(1, "contentBtn");
	var contentButton2 = new button(2, "contentBtn");

	for(i = 0; i < noOfButtons; i++){

		switch(i){
			case 0:
				buttonBind = button0.observingButton.bindAsEventListener(button0);
				Event.observe(button0.id, 'click', buttonBind);
				contentButtonBind = contentButton0.observingButton.bindAsEventListener(contentButton0);
				Event.observe(contentButton0.id, 'click', contentButtonBind);
				break;
			case 1:
				buttonBind = button1.observingButton.bindAsEventListener(button1);
				Event.observe(button1.id, 'click', buttonBind);
				contentButtonBind = contentButton1.observingButton.bindAsEventListener(contentButton1);
				Event.observe(contentButton1.id, 'click', contentButtonBind);
				break;
			case 2:
				buttonBind = button2.observingButton.bindAsEventListener(button2);
				Event.observe(button2.id, 'click', buttonBind);
				contentButtonBind = contentButton2.observingButton.bindAsEventListener(contentButton2);
				Event.observe(contentButton2.id, 'click', contentButtonBind);
				break;
		}
	}
}

function hideText(noOfButtons){
	var i, j, tempVar, rolloverContent;
	
	for(i = 0; i < noOfButtons; i++){
		tempVar = "rolloverItem" + i;
		rolloverContent = document.getElementsByClassName(tempVar);
		for(j = 0; j < rolloverContent.length; j++){
			rolloverContent[j].addClassName("hide");
		}
	}
}

function createTextContainer(){
	var container, closeButton, boxNav;
	
	container = document.createElement("div");
	container.id = "rolloverBox";
	container.className = "clear";
	boxNav = document.createElement("div");
	boxNav.id = "rolloverBox_Nav";
	boxNav.className = "clear";
	closeButton = document.createElement("a"); 
	closeButton.id = "closeBox";
	closeButton.href = "javascript:void(0);";
	boxNav.appendChild(closeButton);
	container.appendChild(boxNav);
	$("letterbox").appendChild(container);
	$("rolloverBox").style.display = "none";
	boxNav = document.createElement("ul");
	boxNav.id = "boxNav";
	$("rolloverBox_Nav").appendChild(boxNav);

	Event.observe($("closeBox") ,"click", closeTextBox);
}

function closeTextBox(){
	new Effect.Fade($("rolloverBox"), {duration: 0.3});	
	clearContainerText();
}

function getLatestContent(currentItemNo){
	var headerElementNode, headerElementNodeText, textElementNode, textElementNodeText, i, tempVar, rolloverContent, contentContainer;
	
	clearContainerText();
		
	contentContainer= document.createElement("div");
	contentContainer.id = "rolloverBoxContent";
	contentContainer.className = "clear";
	contentContainer.style.display = "none";
	$("rolloverBox").appendChild(contentContainer);
	
	tempVar = "rolloverItem" + currentItemNo;
	rolloverContent = document.getElementsByClassName(tempVar);
	for(i = 0; i < rolloverContent.length; i++){
		
		if(rolloverContent[i].nodeName == "H2"){
			headerElementNode = document.createElement("h2");
			headerElementNodeText = document.createTextNode(rolloverContent[i].firstChild.nodeValue);
			headerElementNode.appendChild(headerElementNodeText);
			$("rolloverBoxContent").appendChild(headerElementNode);
		}
		if(rolloverContent[i].nodeName == "P"){
			textElementNode = document.createElement("p");
			textElementNodeText = document.createTextNode(rolloverContent[i].firstChild.nodeValue);
			textElementNode.appendChild(textElementNodeText);
			$("rolloverBoxContent").appendChild(textElementNode);
		}
	}
	displayContent();
}

function clearContainerText(){
	if($("rolloverBoxContent")){
		$("rolloverBox").removeChild($("rolloverBoxContent"));
	}
}

function displayContent(){
	if($("rolloverBox").style.display == "block"){
		new Effect.Appear($("rolloverBoxContent"), {duration: 1.0, from: 0, to: 1, afterFinish:function(){}});	
	}else{
		new Effect.Appear($("rolloverBox"), {duration: 0.5, from: 0, to: 1.0, afterFinish:function(){$("rolloverBoxContent").style.display = "block";}});
	}
}

Event.observe(window,"load",initialiseRollover);