//var moduleNames=["home","daemons","map","tutorial",
//    "examples","problems","animations","slides","myAccount","help","blog"];
var aiFlag=new Array();   //Associative Array
aiFlag["home"]=0;
aiFlag["daemons"]=0;
aiFlag["map"]=0;
aiFlag["tutorial"]=0;
aiFlag["examples"]=0;
aiFlag["problems"]=0;
aiFlag["animations"]=0;
aiFlag["slides"]=0;
aiFlag["myAccount"]=0;
aiFlag["help"]=0;
aiFlag["blog"]=0;

// draw the bottom taskbar
function renderTaskBar(){
    document.write(getTableHTML());

}

// draw the bottom taskbar
function getTableHTML(){
    //var s = '<div class="borders"><table valign="bottom" height="100%"  width="100%" class="borders" cellpadding="0" cellspacing="0" border = "0">';
    //s += '<tr><td>';
    
    if(!VIDEOLINK) VIDEOLINK = 'visualtour/index.html';
    var s = '<div class="borders">';
    s += '<table valign="bottom"  height="100%"  width=100% bordercolor = "red"  border="0" cellpadding="0" cellspacing="0">';
    s += '<tr>';
    s += '<td valign="center" ><a id="home" class="notSelected" onclick=changeClassName("home"); onmouseover=mouseOver("home"); onmouseout=mouseout("home"); href="home.html" target="main" > Home&nbsp; </a></td>';
    s += '<td  valign="center" ><a id="map" class="notSelected" onclick=changeClassName("map") onmouseover=mouseOver("map") onmouseout=mouseout("map") href="Test/help/navigation.html" target="main"> Map&nbsp; </a></td>';
    s += '<td valign="center" ><a id="daemons" class="notSelected" onclick=changeClassName("daemons"); onmouseover=mouseOver("daemons"); onmouseout=mouseout("daemons"); href="Test/solve/solve.html" target="main"> Daemons&nbsp; </a></td>';
    s += '<td valign="center"><a id="animations" class="notSelected" onclick=changeClassName("animations") onmouseover=mouseOver("animations") onmouseout=mouseout("animations") href="vtAnimations/index.html" target="main"> Animations&nbsp; </a></td>';
    s += '<td valign="center"><a id="problems" class="notSelected" onclick=changeClassName("problems") onmouseover=mouseOver("problems") onmouseout=mouseout("problems") href="Test/problems/problemsIndex.html" target="main"> Problems&nbsp; </a></td>';
    s += '<td valign="center"><a id="examples" class="notSelected" onclick=changeClassName("examples") onmouseover=mouseOver("examples") onmouseout=mouseout("examples") href="Test/problems/problemsIndexEx.html" target="main"> Examples&nbsp; </a></td>';
    s += '<td valign="center"><a id="tutorial" class="notSelected" onclick=changeClassName("tutorial") onmouseover=mouseOver("tutorial") onmouseout=mouseout("tutorial") href="Test/intro/introcontrols/introIndex.html" target="main"> Tutorial&nbsp; </a></td>';
    s += '<td valign="center" ><a id="slides" class="notSelected" onclick=changeClassName("slides") onmouseover=mouseOver("slides") onmouseout=mouseout("slides") href="'+ VIDEOLINK + '" target="main"> <i>video</i>Tour&nbsp;&nbsp; </a></td>'; 
    s += '<td valign="center"><a id="myAccount" class="notSelected" onclick=changeClassName("myAccount") onmouseover=mouseOver("myAccount") onmouseout=mouseout("myAccount") href="myaccount.html" target="main"> <i>my</i>Account&nbsp;&nbsp; </a></td>';
    s += '<td valign="center"><a id="blog" class="notSelected" onclick=changeClassName("blog") onmouseover=mouseOver("blog") onmouseout=mouseout("blog") href="'+ FORUMLINK + '" target="main"> Forum&nbsp; </a></td>';
    s += '<td valign="center" ><a id="release" class="notSelected" onclick=changeClassName("release") onmouseover=mouseOver("release") onmouseout=mouseout("release") href="help.html" target="main"> <nobr>v:10.108; Copyright: Prof. Subrata Bhattacharjee</nobr></a></td>';
  
    s += '</tr>';

    //the width of each cell is specified below-->
    /*s += '<tr><td><img src="blank.gif" alt="home" width="57" height="1"></td><td><img src="blank.gif" alt="map" width="45" height="1"></td><td><img src="blank.gif" alt="Daemons" width="86" height="1"></td><td><img src="blank.gif" alt="Animations" width="99" height="1"></td>';
    s += '<td><img src="blank.gif" alt="problems" width="86" height="1" ><td><img src="blank.gif"  alt="examples" width="88" height="1"></td><td><img src="blank.gif"  alt="tutorial" width="71" height="1"></td><td><img src="blank.gif" alt="visualtour" width="90" height="1"></td>';
    s += '<td><img src="blank.gif" alt="myaccount" width="100" height="1"></td><td><img src="blank.gif" alt="blogs" width="63" height="1"></td>';
    s += '<td><img src="blank.gif" alt="version" width="600" height="1"></td>';
    s += '</tr>';*/
    s += '</table></div>';
    return s;

     

}
//change background color of a module on task bar to green
function  changeClassName(sModuleName, sLevel){

   //alert('in changename with '+sModuleName+' '+sLevel);
    if(!sLevel) sLevel = '1';
    for (var sName in aiFlag) aiFlag[sName]=0;
    aiFlag[sModuleName]=1;
    var oDoc, oModule;
    
    for (var sName2 in aiFlag){
        if (sLevel=='1')oDoc = parent.bottomPanel.document;
        else if (sLevel=='2') oDoc = parent.parent.bottomPanel.document;
        //oModule = top.bottomPanel.document.getElementById(sName2);
        if(oDoc){
          oModule = oDoc.getElementById(sName2);        
          if(oModule){
            oModule.className="notSelected";
            if(aiFlag[sName2]==1) oModule.className="selected";
          }
        }
    }

    
}



//change background of bottom modules to blue on mouse over
function mouseOver(sModuleName){
    document.getElementById(sModuleName).className="hover";
    //alert('here');
}
function mouseout(sModuleName){
    if(aiFlag[sModuleName]==0)
        document.getElementById(sModuleName).className="notSelected";
    else
        document.getElementById(sModuleName).className="selected";
}

//instead of using this function use changeClassName directly.
// this is called by most pages to change the hightlight of the selected item on task bar.
function highlight(){
    if(!parent.main) return;
    var ref = parent.main.location.href;
    //alert('refrence'+ref);
    //alert(document.getElementsByTagName(moduleNames[1]).style);
    if ( ref.indexOf("/myaccount.html")!= -1){
        changeClassName("myAccount");
        return ;
    }
    if ( ref.indexOf("/solve/")!= -1){
        changeClassName("daemons");
        return ;
    }
    if ( ref.indexOf("/intro/")!= -1){
        changeClassName("tutorial");
        return ;
    }

    if ( ref.indexOf("/problems/")!= -1&& ref.indexOf("Ex.html")!= -1){
        changeClassName("examples");
        return ;
    }
    if ( ref.indexOf("/problems/")!= -1){
        changeClassName("problems");
        return ;
    }
    if ( ref.indexOf("/vtAnimations/")!= -1){
        changeClassName("animations");
        return ;
    }
    if ( ref.indexOf("/visualtour/")!= -1){
        changeClassName("slides");
        return ;
    }    
    if ( (ref.indexOf("help.html")!= -1) 
        || (ref.indexOf("faq")!= -1)){
        //top.bottomPanel.changeIt(9);
        changeClassName("help");
        return ;
    }
    if ( ref.indexOf("navigation")!= -1){
        //top.bottomPanel.changeIt(2);
        changeClassName("map");
        return ;
    }
    if ( ref.indexOf("/testhome/")!= -1){
        //top.bottomPanel.changeIt(0);
        changeClassName("home");
        return ;
    }
}


  // display a specific chapter from the visual tour (called from tutorial toc.html)
  function displayClip(sChapter){   
//alert('change: '+sChapter);      
      changeClassName('slides',2); 
      var sLocation = '../../visualtour/clips/'+sChapter+'/index.html';
      //window.parent.parent.frames[0].location.replace("../../visualtour/clips/chapter01/index.html");
      window.parent.parent.frames[0].location.replace(sLocation);
      //top.location = sLocation;
  }


function loadCss(){
    var browserName=navigator.appName;
    //alert("browser: "+browserName);
    if (browserName=="Microsoft Internet Explorer")
    {
        //load ie friendly stylesheet
        document.write('<link rel="stylesheet" href="jscripts/styleSheetBottomIE.css" type="text/css">')
        //document.write('<link rel="stylesheet" href="jscripts/styleSheetBottomM.css" type="text/css">')
    }
    else
    {
        document.write('<link rel="stylesheet" href="jscripts/styleSheetBottomM.css" type="text/css">')
    }
}