var tabContentPrefix = 'c_tab_';



	var currentContentTab = 0;

	var contentTabArray = new Object();

	





	function contentClick(tabKey) {

		

		var tab = document.getElementById(tabContentPrefix+tabKey);

		

		if (contentTabArray[tabKey]['state']) {}

		else if (!contentTabArray[tabKey]['state']){

			tab.innerHTML = getOnContentString(tabKey);


				document.getElementById(tab).style.textAlign = "center";
				document.getElementById(tab).style.whiteSpace = "nowrap";
				document.getElementById(tab).style.borderBottom = "1px solid #fff";
		

			contentTabArray[tabKey]['state'] = true;

			// disable previous

			var oTab = document.getElementById(tabContentPrefix+currentContentTab);

			oTab.innerHTML = getOffContentString(currentContentTab);


				document.getElementById(tab).style.textAlign = "center";
				document.getElementById(tab).style.whiteSpace = "nowrap";
				document.getElementById(tab).style.borderBottom = "1px solid #000000";

			

			contentTabArray[currentContentTab]['state'] = false;

			currentContentTab = tabKey;



			

	

		}

		else {

			alert('tab is missing ...')

		}

		

	}



	function getOnContentString(tabKey) {

		return '<div class="c_outer_on"><div class="c_inner_on"><div class="content_tab_on"><span class="c_on" onclick="contentClick('+tabKey+');">'+contentTabArray[tabKey]['name']+'</span></div></div></div>';

	}



	function getOffContentString(tabKey) {

		return '<div class="c_outer_off"><div class="c_inner_off"><div class="content_tab_off"><span class="c_off" onclick="contentClick('+tabKey+');">'+contentTabArray[tabKey]['name']+'</span></div></div></div>';

	}