//tab image src, arrays are zero-based
//the pane will be displayed on showTab ID
/*
var tabs = [
	['images/subtitle1a.jpg','images/subtitle1a_sel.jpg','pane0'],
	['images/subtitle1b.jpg','images/subtitle1b_sel.jpg','pane1']
];
*/

function preloadImages(){
	for(var j=0; j<2; j++){
		for(var i=0; i<tabs.length; i++) {
			image = new Image();
			image.src = tabs[i][j];
		}
	}
}

function drawTabs(){
	var strTabs = "";
	var tabid	= "";
	var tabsrc	= "";
	var paneid	= "";		//tab1,tab2
	
	strTabs = "<table width='' cellspacing='0' cellpadding='0' border='0'><tr>";
	for (var i=0; i<tabs.length; i++) {
		paneid = tabs[i][2];	
		tabid  = "tab"+i;
		tabsrc = tabs[i][0];
		strTabs += "<td width='0'><a href=\"javascript:switchTab('"+tabid+"'); showPane('"+paneid+"');\"><img name='"+tabid+"' border='0' src='"+tabsrc+"'></a></td>";
	}
	strTabs +="</table>";
	document.write(strTabs);
}

function showPane(selpaneid){
	var paneid  = "";
	var objpane = "";
	
	//reset the panes to hidden
	for (var i=0; i<tabs.length; i++) {
		paneid = tabs[i][2];
		objpane = document.getElementById(paneid).style;
		if(paneid==selpaneid){
			objpane.visibility="visible";
			objpane.position="static";
			objpane.display="inline";
		} else {
			objpane.visibility="hidden";
			objpane.position="absolute";
			objpane.display="none";
		}

	}
}

function switchTab(selid) {
	var tabsrc = "";
	var tabid  = "";	
	
	//reset src of tabs	
	for (var i=0; i<tabs.length; i++) {
		tabid  = "tab"+i;
		tabsrc = tabs[i][0];
		
		if(tabid==selid){
			tabsrc = tabs[i][1];
		}
		document.images[tabid].src = tabsrc;
	}
	
		
	
} 


//load event
preloadImages();