var hiding = new Array();
var showing = new Array();
var tog = new Array();

	function toggle(item) {
		if (item.substr(0,1) == 'z') {	//translation pane
			tt(item);
		} else {
			var charCodeCounter = 97;	//the letter 'a'
			var itemNumber = item.substr(1);
			while(document.getElementById(""+String.fromCharCode(charCodeCounter)+itemNumber) != null) {
				tt(String.fromCharCode(charCodeCounter)+itemNumber);
				charCodeCounter++;
			}
		}
	}
	
	function tt(item) {
		if (tog[item] == null) tog[item] = true;
		if (tog[item]) {
			changeOpac(0, item, true);
//			document.getElementById(item).style.visibility = "hidden";	//used to make the text selectable / copyable

			tog[item] = false;
		} else {
			tog[item] = true;
//			 document.getElementById(item).style.visibility = "visible";//used to make the text selectable / copyable
			changeOpac(20, item, false);
		}
	}

	function hide(item){
	  		if (tog[item] == null || tog[item]) {	//disable over-functions when toggled
	   	hiding[item] = true;
        	opacity(item, 0, 20, 1000);
       }
	}
	
	//show the item with fix for safari javascript firing bug
	function show(item) {
	  		if (tog[item] == null || tog[item]) {	//disable over-functions when toggled
	showing[item] = true;
	
/*	if (!e) var e = window.event;
	 if (e) {
	   var relTarg = e.relatedTarget || e.toElement;
       if (relTarg.id == null || relTarg.id.substr(0,4) != "text") opacity(item, 20, 0, 1000);
     } else {*/
       opacity(item, 20, 0, 1000);
       }
	}
	
	function opacity(id, opacStart, opacEnd, millisec) { 
    var speed = 25; 
    var timer = 0; 

    //determine the direction for the blending, if start and end are the same nothing happens 
    if(opacStart > opacEnd) { 
		var i = opacStart;
        for(i = opacStart; i >= opacEnd; i--) { 
            //if (i == opacEnd) setTimeout("hidecomplete('"+id+"')",(timer * speed));
             setTimeout("changeOpac(" + i + ",'" + id + "',true)",(timer * speed)); 
            timer++; 
        }
    } else {
		if(opacStart < opacEnd) { 
			var i = opacStart;
	        for(i = opacStart; i <= opacEnd; i++) { 
	           setTimeout("changeOpac(" + i + ",'" + id + "',false)",(timer * speed)); 
	            timer++; 
	        }
        }
	}
	}
	
//change the opacity for different browsers 
function changeOpac(opacity, id, showing) { 
	opacity = opacity * 5;

		function innerS(opacity, id, showing) {
			if ((showing && hiding[id] == null) || (!showing && showing[id]==null)) {
	
			if (document.getElementById(id) != null) {
			if (document.getElementById(id).style != null) {
			var object = document.getElementById(id).style; 
			if (object.opacity != null) object.opacity = (opacity / 100); 
			if (object.MozOpacity != null) object.MozOpacity = (opacity / 100); 
			if (object.KhtmlOpacity != null) object.KhtmlOpacity = (opacity / 100); 
			if (object.filter != null) object.filter = "alpha(opacity=" + opacity + ")"; 
			}}}
			
			if (showing && opacity == 0) showing[id] = null;
			if (!showing && opacity == 100) hiding[id] = null;    
			//if (opacity == 0) document.getElementById(id).style.visibility = "hidden";
			//if (opacity == 100) document.getElementById(id).style.visibility = "visible";
		}
	
	if (tog[id] == null || tog[id]) {	//disable over-functions when toggled			
		innerS(opacity, id, showing);
	} else {	//toggled mode so show everything
		innerS(0, id, showing);
	}
}




//defaults: 2.12 3.19 3.37 4.34 9.2 10.10 12.5 15.15 18.66
var chap = new Array(1,2,2,3,8,9,11,14,17);
var vers = new Array(11,18,36,33,1,8,3,12,63);
var mod = new Array(false,false,false,false,false,false,false,false,false);
var lengthOfArrays = 9;	//how many tabs we have
//var mod = new Array(true,true,true,true,true,true,true,true,true);

function chapterSelect(tabID) {
	//determine if there is room to display "text" with firefox, not IE
	var tt = "# ";
	//if (navigator.appName.search(/microsoft/i) == 0) tt = "# "; 

	var box = document.getElementById("chapters"+tabID);
	var vbox = document.getElementById("verses"+tabID);
	var index = box.options[box.selectedIndex].value.substring(1);


	//clear the selection
	vbox.selectedIndex = -1;

	var l = vbox.options.length;
	//clear extra options left over from previous chapters
	for(j=l; j >= 0; j--) {
		vbox.remove(j);	//needs to be negative counting listing so the length doesn't get refreshed
	}
	
//	vbox.options.innerHTML= "";
//	document.getElementById("versesList").innerHTML = "<select STYLE=\"font-size: 10px;\" name=\"verses\" id=\"verses"+tabID+"\" size=\"8\" onChange=\"verseSelect("+tabID+")\"></select>";
	
	//build a new list of options for the verse numbers of this chapter
	for(i = 0; i < gita[index].length; i++) {
		var number = gita[index][i].number;
		vbox.options[i] = new Option(tt+number.substring(number.indexOf(".") + 1), "t"+i);
	}
	

	//alert(vbox.options[j-2].value);
}

function verseSelect(tabID) {
	 box = document.getElementById("chapters"+tabID);
	 vbox = document.getElementById("verses"+tabID);
	 index = box.options[box.selectedIndex].value.substring(1);
	 vindex = vbox.options[vbox.selectedIndex].value.substring(1);
	assignSelectToTab(tabID, gita[index][vindex]);
	
	vers[tabID-1] = vindex;
	chap[tabID-1] = index;
	saveCookie();	
}

/** saves the current state of the verses to a cookie */
function saveCookie() {
	
	var chapter = "";
	var verse = "";
	var modifing = "";
	for(i = 0; i < lengthOfArrays; i++) {
		chapter += chap[i] + ",";
	}
	for(i = 0; i < lengthOfArrays; i++) {
		verse += vers[i] + ",";
	}
	for(i = 0; i < lengthOfArrays; i++) {
		if (mod[i]) modifing += "1,";
		else modifing += "0,";
	}
	
	WebFXTabPane.setCookie( "slokaraja_chap", chapter);	
	WebFXTabPane.setCookie( "slokaraja_vers", verse);
	WebFXTabPane.setCookie( "slokaraja_mod", modifing);
}


function assignSelectToTab(tabID, sloka) {
	var translation = document.getElementById("text"+tabID);
	translation.innerHTML = sloka.translation;
	perfectHeight();
}

/* Called by the cookie session loader function (only). Tries to load from cookie, 
   or just uses the default, if no cookie is present. */
function syncVerses() {
	//loads the current verse positions from a cookie
	chapter = WebFXTabPane.getCookie( "slokaraja_chap");
	verse = WebFXTabPane.getCookie( "slokaraja_vers");
	modifing = WebFXTabPane.getCookie( "slokaraja_mod");
	
	if (chapter != null) chap = chapter.split(",");
	if (verse != null) vers = verse.split(",");
	
	if (modifing != null) {
		modifing = modifing.split(",");
		for(j = 0; j < modifing.length; j++) {
			if (modifing[j] == 1) {
				mod[j] = true;
				//set button string if the view is on this button at this moment
				if (parent.currentS-1 == j) parent.document.getElementById("editButton").value = parent.acc;
			}
			if (modifing[j] == 0) mod[j] = false;
		}
	}

	//assigns the correct verse to each tab
	for(var i=0; i < chap.length; i++) {
		if (chap[i] != null && chap[i] != "" && vers[i] != null && vers[i] != "" && mod[i] != null) {
			if (mod[i]) changeCurrentVerse(i+1);
			else assignVerseToTab(i+1, gita[chap[i]][vers[i]]);	//tabs are one indexed
		}
	}

	perfectHeight();
}


function changeCurrentVerse(tabID) {
	//change header
	document.getElementById("tab"+tabID).innerHTML = "?";	
	
	//flip modifying flag
	mod[tabID-1] = true;
	saveCookie();	
		
	//change page
	var page = document.getElementById("tabPage"+tabID);
	
var inner = "<div><select STYLE=\"font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 12px;\" name=\"chapters\" id=\"chapters"+tabID+"\" size=\"9\" onChange=\"chapterSelect("+tabID+")\">\n"+
"<option value=c0>1. Observing the Armies</option>\n"+
"<option value=c1>2. Contents of the Gita Summarized</option>\n"+
"<option value=c2>3. Karma-yoga</option>\n"+
"<option value=c3>4. Transcendental Knowledge</option>\n"+
"<option value=c4>5. Karma-yoga: Action in KC</option>\n"+
"<option value=c5>6. Dhyana-yoga</option>\n"+
"<option value=c6>7. Knowledge of the Absolute</option>\n"+
"<option value=c7>8. Attaining the Supreme</option>\n"+
"<option value=c8>9. Most Confidential Knowledge</option>\n"+
"<option value=c9>10. Opulence of the Absolute</option>\n"+
"<option value=c10>11. The Universal Form</option>\n"+
"<option value=c11>12. Devotional Service</option>\n"+
"<option value=c12>13. Nature, the Enjoyer &amp; Conscio...</option>\n"+
"<option value=c13>14. Three Modes Of Material Nature</option>\n"+
"<option value=c14>15. Yoga of the Supreme Person</option>\n"+
"<option value=c15>16. Divine And Demoniac Natures</option>\n"+
"<option value=c16>17. Divisions of Faith</option>\n"+
"<option value=c17>18. Perfection of Renunciation</option>\n"+
"</select>\n"+
"<select STYLE=\"font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 12px;\" name=\"verses\" id=\"verses"+tabID+"\" size=\"9\" onChange=\"verseSelect("+tabID+")\">\n"+
"</select>"+
"</div>\n"+
" 		<div class=\"brownbar\"><img src=\"images/translation.png\"></div>\n"+
"\n"+
"		<div class=\"trans_box3\" >\n"+
"			<div id=\"text"+tabID+"\" class=\"text3\">translation</div>\n"+
"		</div><div id='zzz"+tabID+"'></div>";	
	page.innerHTML = inner;
	
	//assign current verse to select list
	document.getElementById("chapters"+tabID).selectedIndex = chap[tabID-1];
	chapterSelect(tabID);
	document.getElementById("verses"+tabID).selectedIndex = vers[tabID-1];
	verseSelect(tabID);
}

function getY( oElement )
{
	var iReturnValue = 0;
	while( oElement != null ) {
		iReturnValue += oElement.offsetTop;
		oElement = oElement.offsetParent;
	}
	return iReturnValue;
}

function assignVerseToTab(tabID) {
	mod[tabID-1] = false;	//flip modifying flag
	saveCookie();	
	
	var sloka = gita[chap[tabID-1]][vers[tabID-1]];
	
	var charCodeCounter = 97;	//the letter 'a'
	var page = document.getElementById("tabPage"+tabID);
	
	var inner = "		<div class=\"brownbar\"><img src=\"images/sanskrit.png\"></div>\n";
if (navigator.appName.search(/microsoft/i) == 0) inner+="<div style='line-height: 0px; margin-bottom: -4px;' class=\"top\"></div>\n";
else inner+="		<div class=\"top\"></div>\n";

for(var j = 0; j < sloka.sanskrit.length; j++) {
inner +="		<div class=\"trans_box1\" onClick=\"toggle('"+String.fromCharCode(charCodeCounter)+tabID+"')\" onMouseOver=\"show('"+String.fromCharCode(charCodeCounter)+tabID+"');\" onMouseOut=\"hide('"+String.fromCharCode(charCodeCounter)+tabID+"');\" >\n"+
"			<div id=\"text"+tabID+"\" >"+sloka.sanskrit[j]+"</div>\n";
if (navigator.appName.search(/microsoft/i) == 0) inner+= "<div id=\""+String.fromCharCode(charCodeCounter)+tabID+"\" class=\"trans_box2\"><img height='20px' width='100%' src='css/hide-99.png' /></div>\n";
	else inner+= "<div id=\""+String.fromCharCode(charCodeCounter)+tabID+"\" class=\"trans_box2\"></div>\n";
inner+="		</div>";
charCodeCounter++;
}

if (navigator.appName.search(/microsoft/i) == 0) inner+="<div style='line-height: 0px; margin-bottom: -4px;' class=\"top\"></div>\n";
else inner+="		<div class=\"top\"></div>\n";
inner+="		\n"+
" 		<div class=\"brownbar\"><img src=\"images/translation.png\"></div>\n"+
"\n"+
"		<div class=\"trans_box3\" onClick=\"toggle('z"+tabID+"')\" onMouseOver=\"show('z"+tabID+"');\" onMouseOut=\"hide('z"+tabID+"');\" >\n"+
"			<div id=\"text"+tabID+"\" class=\"text3\">"+sloka.translation+"</div>\n";
if (navigator.appName.search(/microsoft/i) == 0) inner+= "<div id=\"z"+tabID+"\" class=\"trans_box4\"><img  width='100%' src='css/hide-99.png' /></div>\n";
	else inner+= "<div id=\"z"+tabID+"\" class=\"trans_box4\"></div>\n";
inner+="		</div><div id='zzz"+tabID+"'></div>";
		page.innerHTML = inner;
		document.getElementById("tab"+tabID).innerHTML = sloka.number;
		
}


function perfectHeight() {
	var maxH = 0;
	for(k=1;k <= lengthOfArrays;k++ ) {
		h = getY(document.getElementById("zzz"+k));
		if (h > maxH) maxH = h;
	} 
	if (navigator.appName.search(/microsoft/i) == 0) maxH += 12;
    maxH += 12;	//perfect offset number
	if (maxH % 2 == 0) maxH+= 1;	//keeps the arrows nicely meshing with the background
	parent.changeHeight(maxH);
}
