var currentlyShowing = -1;
// array with titles, that should be linked
var titleArray = Array();
// array with indices of the elements, that should be display tabbed
var indexArray = Array();

function displayTabbedContent() {
	var contentElement = document.getElementById("content");
	contentElement.style.position = "relative";
	var contentChildren = contentElement.childNodes;
	var counter = 0;
	for(var i=0;i<contentChildren.length;i++) {
		if(contentChildren[i].className == "content-element") {
			if(contentChildren[i].firstChild.className == "csc-frame-indent") {
				//alert("444");
				//alert(contentChildren[i].firstChild.className);
				contentChildren[i].style.position = "absolute";
				contentChildren[i].style.top = "0";
				contentChildren[i].style.left = "0";
				contentChildren[i].id = "tabbedContent_"+counter;
				counter++;
				//contentChildren[i].style.visibility = "hidden";
				contentChildren[i].style.display = "none";
				var titleElement = contentChildren[i].getElementsByTagName("h2")[0];
				
				//alert("i="+i+" "+contentChildren[i]);
				titleArray.push(titleElement.firstChild.nodeValue);
				indexArray.push(i);
			}
		}
	}
	var spacerHTML = '<div style="width: 500px; height: 200px;margin-left:10px;font-size:11px" >&nbsp;</div>';
	var naviHTML = '<div style="position: absolute; top: 0; left: 0px; width: 170px; margin-top:15px;font-size:12px;">';
	//var naviHTML = '<div style="position: absolute; top: 0; left: -320px; width: 310px;">s';
	var aTagStyle = 'display: block; padding: 8px 0 1px 0;';
	var divTagStyle = 'border-bottom: 1px solid transparent;';
	for(var i=0;i<titleArray.length;i++) {
		naviHTML+= '<div id="tabbedContentLink_'+i+'" class="tabbed_content_links" style="'+divTagStyle+'">';
		naviHTML+= '<a onMouseOver="showTabContent('+i+')" style="'+aTagStyle+'" id="prodtablink">'+titleArray[i]+'</a></div>';
	}
	
	naviHTML+= '</div>';
	contentElement.innerHTML = spacerHTML+naviHTML+contentElement.innerHTML;
	showTabContent(0);
}

function showTabContent(index) {
	//alert("hide: "+currentlyShowing+" show: "+index);
	if(currentlyShowing >= 0) {
		// hide current and unset current in menu
		if(document.getElementById("tabbedContent_"+currentlyShowing)) {
			document.getElementById("tabbedContent_"+currentlyShowing).style.display = "none";
					document.getElementById("tabbedContentLink_"+currentlyShowing).className = 'prodtablinkno'; 
		}
		// unset current in menu
		//document.getElementById("tabbedContentLink_"+currentlyShowing).style.backgroundColor = 'transparent';
		//document.getElementById("tabbedContentLink_"+currentlyShowing).style.borderTop = '1px solid transparent';
	}
	// set new index as current
	currentlyShowing = index;
	// display the content and mark current in menu
	var elem = document.getElementById("tabbedContent_"+index);
	if(document.getElementById("tabbedContent_"+index)) {
		document.getElementById("tabbedContent_"+index).style.display = "block";
			document.getElementById("tabbedContentLink_"+currentlyShowing).className = 'prodtablink'; 
	}
	// mark current in menu
	//document.getElementById("tabbedContentLink_"+currentlyShowing).style.backgroundColor = 'white';
	//document.getElementById("tabbedContentLink_"+currentlyShowing).style.borderTop = '1px solid #dae8f0';
}