//////////////////////////////////////////////////////////////////
// Author: Lalit Kumar
// Purpose: This JavaScript creates the expression bar charts
// Since: 16 January 2009
/////////////////////////////////////////////////////////////////

//GLOBAL VARIABLES
varColors= new Array("#CC3333","#DD4477","#994499","#6633CC","#336699","#3366CC","#22AA99","#329262","#109618","#66AA00","#5C8D87","#AAAA11","#D6AE00","#EE8800","#A87070","#898951","#8C6D8C","#627487","#7083A8","#B08B59","#F0C2C2","#D1E6B3","#7799BB","#C3D9FF","#668CD9");
varTitles= new Array("Brain", "Spinal Cord", "CNS Nerves", "Peripheral Nervous System", "Ganglia", "Ear", "Eye", "Nose", "Alimentary System", "Salivary Gland", "Stomach and Gut", "Liver", "Pancreas", "Respiratory System", "Cardiovascular System", "Heart", "Renal/Urinary System", "Reproductive System", "Adrenal Gland", "Haemolymphoid System", "Skeleton", "Skeletal Muscles", "Limb", "Skin", "Cavities and their Linings");
varShortTitles= new Array("BRN","SPC","CNS","PNS","GNG","EAR","EYE","NOS","ALS","SLG","STG","LIV","PAN","RES","CAR","HRT","RUS","REP","ADG","HEM","SKL","SKM","LMB","SKN","CAV");
varEmptyValues="0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0"; //empty values

varTotalTerms=25;

function prepareGraph(templateID, exprValues, covValues, chartDiv)
{

if(exprValues!="")
var exprValues=exprValues;
else
var exprValues=varEmptyValues;

if(covValues!="")
var coverageValues=covValues;
else
var coverageValues=varEmptyValues;

//alert("ttttemplateID: " + templateID + "\nEXPRESSION: " + exprValues + "\nchartDiv: " + chartDiv)
//alert("templateID: " + templateID + "\nCOVERAGE: " + coverageValues + "\nchartDiv: " + chartDiv)

expressionArr=exprValues.split(",");
expressionArrLen=expressionArr.length;

coverageArr=coverageValues.split(",");
coverageArrLen=coverageArr.length;

varDiv=chartDiv;

graphDiv=document.getElementById(chartDiv);

//alert("EXPRESSION: " + expressionArr[5] + "    " + expressionArr[7] + "     " + expressionArr[expressionArrLen-1]);
//alert("COVERAGE: " + coverageArr[5] + "    " + coverageArr[7] + "     " + coverageArr[coverageArrLen-1]);

var varHTML="<div class='exprGraph'><table class='exprGraphTable' border=0 cellpadding=0 cellspacing=0 width=100%><tr class='exprGraphRow'>"

for(var i=0;i<=varTotalTerms-1;i++)
{
varHTML=varHTML+"<td class='exprGraphCell' align='center' style='border-bottom:0px solid #a5a5a5;'>" +
"<div id='" + varShortTitles[i] + "_transparentDivID' style='display: block; height:" + (100-expressionArr[i]) + "%; background-color: transparent;' class='exprGraphBarSpacer'></div>" +
"<div id='" + varShortTitles[i] + "' title='" + varTitles[i] + "&nbsp;[Expression&nbsp;Level=" + expressionArr[i] + "]'"
if(expressionArr[i]==0.0){
varHTML=varHTML+ "class='zeroExprGraphBar' style='height:" + expressionArr[i] + "%; background-color: transparent;'"}
else{
varHTML=varHTML+ "class='exprGraphBar' style='height:" + expressionArr[i] + "%; background-color: " + varColors[i] + ";'"}
varHTML=varHTML+ " onMouseOver=selectSimilarBars('" + varShortTitles[i] + "') onMouseOut=unselectSimilarBars('" + varShortTitles[i] + "')></div></td>";

}

varHTML=varHTML+"</td></tr><tr><td style='background-color:#ffffff; height:2px'></td></tr><tr class='coverageGraphRow'>";

for(var j=0;j<=varTotalTerms-1;j++)
{
varHTML=varHTML+"<td class='exprGraphCell' align='center' valign='top' style='border-top:0px solid #a5a5a5'>" +
"<div id='" + varShortTitles[j] + "' title='" + varTitles[j] + "&nbsp;[Coverage=" + coverageArr[j] + "]'"
if(coverageArr[j]==0){
varHTML=varHTML+ "class='zeroCoverageGraphBar' style='height:" + coverageArr[j] + "%; background-color: transparent;'"}
else{
varHTML=varHTML+ "class='coverageGraphBar' style='height:" + coverageArr[j] + "%; background-color: " + varColors[j] + ";'"}
varHTML=varHTML+ " onMouseOver=selectSimilarBars('" + varShortTitles[j] + "') onMouseOut=unselectSimilarBars('" + varShortTitles[j] + "')></div>" +
"<div id='" + varShortTitles[j] + "_transparentDivID' style='display: block; height:" + (100-coverageArr[j]) + "%; background-color: transparent;' class='exprGraphBarSpacer'></div></td>";

if(j==coverageArrLen)
varHTML=varHTML+"</td></tr></table></div>";
}

graphDiv.innerHTML=varHTML;

}

//PREPARE THE HEADER ICONS FOR SORT PURPOSE
function prepareGraphTableHeaders(sortLink, sortBy, sortDir, chartTableHeadersDiv)
{
var chartTableHeaders=document.getElementById(chartTableHeadersDiv);
var varHTML="<div class='exprGraphHeader'><table class='exprGraphTable' border=0 align=center style='height:15px; padding:0px; border-collapse:collapse;'><tr>"
varShowSort=false;
varExprPrefix="kst_exr_value_";
varCovPrefix="kst_cov_value_";

if(sortDir=="ASC")
varDir="&darr;";
else if(sortDir=="DESC")
varDir="&uarr;";

//alert("sortDir= " + sortDir + "    varDir= " + varDir);

if(sortBy.substring(0,14)==varExprPrefix || sortBy.substring(0,14)==varCovPrefix)
varShowSort=true;


for(var i=0;i<=varTotalTerms-1;i++)
{
srtLnk="\"self.location.href=\'" + sortLink + varExprPrefix + (i+1) + "\'\"";
//alert(srtLnk);
varHTML=varHTML+"<td align='center' onClick=" + srtLnk + ">";

	if(varShowSort==true && (varExprPrefix + (i+1))==sortBy){
		varHTML=varHTML+"<div id='" + varShortTitles[i] + "' class='exprGraphBar' style='height:15px; border-color:#ffffff; background-color: " + varColors[i] + ";text-align:center;vertical-align:middle;' title=\"Expression:&nbsp;Sort&nbsp;by&nbsp;'" + varTitles[i] + "'\" onMouseOver=selectSimilarBars('" + varShortTitles[i] + "') onMouseOut=unselectSimilarBars('" + varShortTitles[i] + "')>" +
		"<span style='color:#ffffff;font-size:11px;font-weight:bold'>" + varDir + "</span>";
	}
	else{
		varHTML=varHTML+"<div id='" + varShortTitles[i] + "' class='exprGraphBar' style='height:15px; background-color: " + varColors[i] + ";text-align:center;vertical-align:middle;' title=\"Expression:&nbsp;Sort&nbsp;by&nbsp;'" + varTitles[i] + "'\" onMouseOver=selectSimilarBars('" + varShortTitles[i] + "') onMouseOut=unselectSimilarBars('" + varShortTitles[i] + "')>";
	}

varHTML=varHTML+"</div></td>";
}

varHTML=varHTML+"</tr><tr>";

for(var i=0;i<=varTotalTerms-1;i++)
{
srtLnk="\"self.location.href=\'" + sortLink + varCovPrefix + (i+1) + "\'\"";
//alert(srtLnk);
varHTML=varHTML+"<td align='center' onClick=" + srtLnk + ">";

	if(varShowSort==true && (varCovPrefix + (i+1))==sortBy){
		varHTML=varHTML+"<div id='" + varShortTitles[i] + "' class='exprGraphBar' style='height:15px; border-color:#ffffff; background-color: " + varColors[i] + ";text-align:center;vertical-align:middle;' title=\"Coverage:&nbsp;Sort&nbsp;by&nbsp;'" + varTitles[i] + "'\" onMouseOver=selectSimilarBars('" + varShortTitles[i] + "') onMouseOut=unselectSimilarBars('" + varShortTitles[i] + "')>" +
		"<span style='color:#ffffff;font-size:11px;font-weight:bold'>" + varDir + "</span>";
	}
	else{
		varHTML=varHTML+"<div id='" + varShortTitles[i] + "' class='exprGraphBar' style='height:15px; background-color: " + varColors[i] + ";text-align:center;vertical-align:middle;' title=\"Coverage:&nbsp;Sort&nbsp;by&nbsp;'" + varTitles[i] + "'\" onMouseOver=selectSimilarBars('" + varShortTitles[i] + "') onMouseOut=unselectSimilarBars('" + varShortTitles[i] + "')>";
	}

varHTML=varHTML+"</div></td>";
}

varHTML=varHTML+"</td></tr></table></div>";
chartTableHeaders.innerHTML=varHTML;

}

//HIGHLIGHT THE EXPRESSION GRAPH BAR ON MOUSE OVER
function selectSimilarBars(barID)
{
	divElements=document.getElementsByTagName("DIV")

	for(var i=0;i<=divElements.length;i++)
	{
		if(divElements[i]!=null && divElements[i].className.substring(0,4)=="zero"){
			if(divElements[i].id==barID){
				divElements[i].style.border="1px solid transparent"
				divElements[i].style.borderTop="1px solid #969696"
			}
			if(divElements[i].id==barID+"_transparentDivID"){
				divElements[i].style.border="1px dotted #000000"
					divElements[i].style.borderBottom="0em solid transparent"
						divElements[i].style.borderTop="0em solid transparent"
			}
		}
		else{
			if(divElements[i]!=null && divElements[i].id==barID){
				divElements[i].style.border="1px solid #000000"
			}
			if(divElements[i]!=null && divElements[i].id==barID+"_transparentDivID"){
				divElements[i].style.border="1px dotted #969696"
					divElements[i].style.borderBottom="0em solid transparent"
						divElements[i].style.borderTop="0em solid transparent"
			}
		}
	}
}

//DIM THE EXPRESSION GRAPH BAR ON MOUSE OUT
function unselectSimilarBars(barID)
{
	divElements=document.getElementsByTagName("DIV")

	for(var i=0;i<=divElements.length;i++)
	{
		if(divElements[i]!=null && divElements[i].className.substring(0,4)=="zero"){
			if(divElements[i].id==barID){
				divElements[i].style.border="1px solid transparent"
				divElements[i].style.borderTop="1px solid #969696"
			}
			if(divElements[i].id==barID+"_transparentDivID"){
				divElements[i].style.border="0px dotted #969696"
			}
		}
		else{
			if(divElements[i]!=null && divElements[i].id==barID){
				divElements[i].style.border="1px solid #969696"
			}
			if(divElements[i]!=null && divElements[i].id==barID+"_transparentDivID"){
				divElements[i].style.border="0px dotted #969696"
			}
		}
	}
}

//PREPARES LEGENDS
function prepareLegends()
{
var legend="<table border=0 width=100%>"

for(var i=0;i<=24;i++){
legend=legend + "<tr><td id='legend_"+varShortTitles[i]+"' style='width:40px; background-color:" + varColors[i] + "' onMouseOver=\"selectSimilarBars('" + varShortTitles[i] + "')\" onMouseOut=unselectSimilarBars('" + varShortTitles[i] + "') style='border:1px solid transparent'></td><td onMouseOver=selectSimilarBars('" + varShortTitles[i] + "') onMouseOut=unselectSimilarBars('" + varShortTitles[i] + "')><span style='font-family:arial;font-size:8pt'>" + varTitles[i] + "</span></td></tr>";
}
legend=legend + "</table>";
document.getElementById("legendsDivID").innerHTML=legend;
}

function selectLegend(legendID){
	document.getElementById(legendID).style.border="2px solid #000000";
	alert(document.getElementById(legendID).style.border);
}

function unselectLegend(legendID){
	document.getElementById(legendID).style.border="2px solid #ffffff";
}