/*
	TABS MANAGEMENT FUNCTION
	CREATED BY: JOSE LAUREANO
	
	Requirements
		DIV tag with ID = tabheader
		DIV tag with ID = tabcontent
		Link to this js
		
	Use
		Inside the tabheader div place the tabs images and assign a onclick event
		as follow : onclick("showTab(tabNumber);")
		
		Inside the tabcontent div place all the divs with the content, to the
		first one assing the class selected, so it will be displayed when the
		page loads
		
		The filename of the images has to end in _on or _off to be able to switch
		the state.
	
	Example
	
		<div id="tabheader">
			<img onclick="showTab(1);"  alt="" src="../images/elmiron/tab_mc_1_on.png">
			<img alt="" onclick="showTab(2);" src="../images/elmiron/tab_mc_2_off.png">
			<img alt="" onclick="showTab(3);" src="../images/elmiron/tab_mc_3_off.png">
			<img alt="" onclick="showTab(4);" src="../images/elmiron/tab_mc_4_off.png">
			<img alt="" onclick="showTab(5);" src="../images/elmiron/tab_mc_5_off.png">
			<img alt="" onclick="showTab(6);" src="../images/elmiron/tab_mc_6_off.png">
		</div>
		<div id="tabcontent">
			<div class="selected">One</div>
			<div>Two</div>
			<div>Three</div>
			<div>Four</div>
			<div>Five</div>
			<div>Six</div>
		</div>


*/

function showTab(tabIndex) {
	
		var tabHeaderDiv = document.getElementById("tabheader");
		var tabs = tabHeaderDiv.getElementsByTagName("img");
		var tabContentDiv = document.getElementById("tabcontent");
		var contents = tabContentDiv.getElementsByTagName("div");
		
		var i = 0;
		
		for(i = 0; i < tabs.length; i++) {
			if(i == tabIndex - 1) {
				tabs[i].src = tabs[i].src.replace("_off","_on");
				contents[i].style.display = "block";
			} else {
				tabs[i].src = tabs[i].src.replace("_off","_disabled");
				contents[i].style.display = "none";
			}
		}
	}
	
function reset_tab() {
		var tabHeaderDiv = document.getElementById("tabheader");
		var tabs = tabHeaderDiv.getElementsByTagName("img");
		var tabContentDiv = document.getElementById("tabcontent");
		var contents = tabContentDiv.getElementsByTagName("div");
		
		var i = 0;
		
		for(i = 0; i < contents.length; i++) {
				tabs[i].src = tabs[i].src.replace("_disabled","_off");
				contents[i].style.display = "none";
			}
	}