//-------------COLOR CODE DEFINITIONS
var FrontierPurple = "#800080";
var FrontierRichPurple = "#AC2989";
var FrontierDarkPurple = "#C988B2";
var FrontierLightBlue = "#026BAC";
var FrontierDarkBlue = "#C3CFDF";
var FrontierLightGreen = "#316D6E";
var FrontierDarkGreen = "#03AF5D";
var DarkReddyBrown = "aa4455";
var LightReddyBrown = "cc6677";

//**************************************************************
//            DYNAMIC JAVASCRIPT MENU SYSTEM
//**************************************************************
divId = "menuId"

HeaderArray = new Array();
ChildArray = new Array();

//header menu elements (in order) (Dimensions - DisplayText, Url)
//eg.) HeaderArray[5] = "Dan, danspage.html";
HeaderArray[0] = "Home,index.html";
HeaderArray[1] = "T-Assessment,#";
HeaderArray[2] = "The Projects,#";
HeaderArray[3] = "Frontiers NoE,http://www.frontiers-eu.org";
HeaderArray[4] = "The Team,#";
HeaderArray[5] = "Downloads,http://www.frontiers-eu.org";
HeaderArray[6] = "Contact,POPUP[contact.html]";
HeaderArray[7] = "XtraHead,POPUP[contact.html]";

//child elements (no order) (Dimensions - DisplayText, Url, Parent)
//eg.) ChildArray[0] = "mainpage, main.html, 0";
//eg2.) ChildArray[0] = "mainpage, POPUP[main.html],0";

//*********************The Frontiers Team
ChildArray[0] = "Douglas Robinson,POPUP[TADouglas.html],4"
ChildArray[1] = "Arie Rip,POPUP[TAArie.html],4"
ChildArray[2] = "Martin Ruivenkamp,POPUP[TAMartin.html],4"
ChildArray[3] = "Tilo Propp,POPUP[TATilo.html],4"
ChildArray[4] = "Holger Winter,http://www.centech.de,4"
ChildArray[5] = "Jan-Willem Weener,POPUP[TAJanwillem.html],4"

//**********************The Projects
ChildArray[6] = "Cell-on-a-chip Innovation chains,cellchip.htm,2"
ChildArray[7] = "Targeted Drug Delivery,drugdelivery.htm,2"
ChildArray[8] = "Futures of Molecular Devices,molecular.htm,2" 
ChildArray[9] = "Risk Governance and Responsibility,Risk.pdf,2"   
ChildArray[10] = "The Frontiers Roadmapping Initiative,roadmap.htm,2"

//*********************T-Assessment
ChildArray[11] = "What is Tech-Assessment?,POPUP[TANote.html],1"


// main table style 
tableBackGroundColor = "Black";    //Blue
tableTextFont = "Tahoma";                    // Arial|Verdana etc....
tableTextAlign = "Center";                   // Center|Left|Right|Justify
tableTextColor = "White";
tableFontSize = "12"
tableBorderColor = "Black";
tableBorderWidth = "0.5pt";
tableCellSpacing = "0";
tableCellPadding = "0";
tableElementHeight = "13";
tableElementWidth = (1401/HeaderArray.length) - 2 - 50; //take off side values
tableTopPosition = "75";
tableLeftPosition = "-90";

// main table on hover style
tableOnHoverBackGroundColor = "#666666";        //light blue
tableOnHoverTextColor = "Yellow";
tableOnHoverBorderColor = "Black";

//hover menu hide timeout(1000 == 1 second)
tableHoverReleaseTimeOut = "200";

// child elements style
childrenBackGroundColor = DarkReddyBrown; //back - #800080
childrenTextFont = "Times Roman New";
childrenTextAlign = "Center";         
childrenTextColor = "White";
childrenTextSize = "10";
childrenBorderColor = "Black";
childrenBorderWidth = "1";
childrenBorderStyle = "solid"; //dash|solid|hidden|double etc...
childrenCellSpacing = "0";
childrenCellPadding = "1";
childrenElementHeight = "20";
childrenElementWidth = "180";

// child elements on hover style
childrenOnHoverBackGroundColor = LightReddyBrown;
childrenOnHoverTextColor = "White"; //"DarkGreen";
childrenOnHoverBorderColor = "Magenta";

//**************************************************************
//         POP UP WINDOWS CONTROL ASPECTS
//**************************************************************
 
var popupWidth = 400;
var popUpHeight = 500;  
var popUpTop = 300;
var popUpLeft = 300;

//**************************************************************
//         MAIN CODING SECTION BELOW HERE - IGNORE 
//**************************************************************

function writeMenu()
{
    buildArrays();
    var innerHTML = ""
    
    innerHTML += "<table id='menuTable' bordercolor="+tableBorderColor+" border="+tableBorderWidth+" cellspacing="+tableCellSpacing
                                +" cellpadding="+ tableCellPadding +" style='position:absolute; top:"+tableTopPosition+"px; left:"+tableLeftPosition+"px; cursor:hand; background-color:"
                                        +tableBackGroundColor+"; text-align:"+tableTextAlign+"; font-size:"+tableFontSize+"; font-family:"+tableTextFont+"; color:"+tableTextColor+"; '><tr height="+tableElementHeight+" >";
    
    //loop through array to create tables
    for(headLoop =0; headLoop < HeaderArray.length;headLoop++)
    {
        var indexOf = HeaderArray[headLoop].toString().indexOf(",",0);
        var endOf = HeaderArray[headLoop].toString().length;
        var name = HeaderArray[headLoop].toString().substring(0,indexOf);
        var url = HeaderArray[headLoop].toString().substring(indexOf+1,endOf);
    
        innerHTML += "<td id='menuItem"+headLoop.toString()+ "'"
        innerHTML += " onmouseover='ShowChildMenu("+ headLoop + "," + '"childof' + headLoop + '"' + ")'"
        
        if (url.indexOf("POPUP") >= 0)
        {
              url = url.replace("POPUP[","").replace("]","");
              innerHTML += " onmouseout='DelayHideChildMenu("+ headLoop + "," + '"childof' + headLoop + '"' + ")' onclick='popup(" + '"' + url + '"' + ")'>";
        }
        else
        {
            innerHTML += " onmouseout='DelayHideChildMenu("+ headLoop + "," + '"childof' + headLoop + '"' + ")' onclick='redirect(" + '"' + url + '"' + ")'>";
        }
        
        innerHTML += "<div style='width:"+tableElementWidth+";'>" + name + "</div>";
        innerHTML += "</td>";
    }
     
    document.getElementById(divId).innerHTML += innerHTML + "</tr></table>";
    writeFloats();
}

function buildArrays()
{
    var indexOf = HeaderArray[0].toString().indexOf(",",0);
    var endOf = HeaderArray[0].toString().length - indexOf;
    var name = HeaderArray[0].toString().substring(0,indexOf);
    var url = HeaderArray[0].toString().substring(indexOf,endOf);
}

function writeFloats()
{
    var html = "";
    
    //loop headers
    for(headLoop = 0; headLoop < HeaderArray.length; headLoop++)
    {
        var childHTML = ""; 
        childHTML += "<div style='border-color:"+childrenBorderColor+"; border-style:"+childrenBorderStyle+"; border-width:"+childrenBorderWidth+"px; visibility:hidden; position:absolute; top:"+GetChildY()+";left:"+GetChildX(headLoop)
        childHTML += "; color:"+childrenTextColor+"; cursor:hand; background-color:"+childrenBackGroundColor+"; font-family:"+childrenTextFont+""
        childHTML += ";' id='childof" + headLoop + "'>";
        
        var hasChildren = false;
        for(children=0; children < ChildArray.length; children++)
        {
            //calc values
            var indexOfFirst = ChildArray[children].toString().indexOf(",",0);
            var indexOfSecond = ChildArray[children].toString().indexOf(",",indexOfFirst+1);
            var endOf = ChildArray[children].toString().length;
            
            var childname = ChildArray[children].toString().substring(0,indexOfFirst);
            var childurl = ChildArray[children].toString().substring(indexOfFirst+1,indexOfSecond);
            var childParent = ChildArray[children].toString().substring(indexOfSecond+1, endOf);
            
            //add child if parent is correct
            if(childParent == headLoop)
            {   
                childHTML += "<div style='text-align:"+childrenTextAlign+"; font-size="+childrenTextSize+"; width:"+childrenElementWidth+";height:"+childrenElementHeight+";' id='baby"+headLoop+""+children+"'";
                childHTML += " onmouseout='LolightChildMenu("+headLoop+","+children+")'";
                childHTML += " onmouseover='HighlightChildMenu("+headLoop+","+children+")'";
                
                if (childurl.indexOf("POPUP") >= 0)
                {
                    childurl = childurl.replace("POPUP[","").replace("]","");
                    
                    childHTML += " onclick='popup(" + '"' + childurl + '"' + ")'><table><tr><td>";
                }
                else
                {
                    childHTML += " onclick='redirect(" + '"' + childurl + '"' + ")'><table><tr><td>";
                }
                
                childHTML += childname+"</td></tr></table></div>";
                
                hasChildren = true;
            }
        }
        childHTML += "</div>";
        
        if (hasChildren)
            html += childHTML
        else
            html += "<div id='childOf"+headLoop+"' ></div>";
    }
    document.getElementById(divId).innerHTML += html;
}
 
function GetChildX(index)
{
    if(index > 0)
    {
        var retVal = parseInt(tableLeftPosition) 
                        + parseInt(index*parseInt(tableElementWidth)) 
                                + (index*parseInt(tableBorderWidth)*2)
                                      + (parseInt(tableBorderWidth)*1);
        return retVal;
    }
    else
        return parseInt(tableLeftPosition);
}

function GetChildY()
{   
    var retVal = parseInt(tableTopPosition) + parseInt(tableElementHeight) + (2*parseInt(tableBorderWidth));
    return retVal;
}
 
function ShowChildMenu(menuItemVal, childId)
{
    //parent
    var menuItemName = "menuItem" + menuItemVal;
    document.getElementById(menuItemName).style.color = tableOnHoverTextColor;
    document.getElementById(menuItemName).style.backgroundColor = tableOnHoverBackGroundColor;
    document.getElementById(menuItemName).borderColor = tableOnHoverBorderColor;
    
    document.getElementById(childId).style.visibility = 'visible';
}

function HighlightChildMenu(head, child)
{
    currentMenu = parseInt(head); //set to current
    var childId = "childOf" + head
    ShowChildMenu(head, childId);
    var childItem = "baby" + head + "" + child;
    
    document.getElementById(childItem).style.backgroundColor =  childrenOnHoverBackGroundColor;
    document.getElementById(childItem).style.color = childrenOnHoverTextColor;
    document.getElementById(childItem).style.borderColor = childrenOnHoverBorderColor;
}

function LolightChildMenu(head,child)
{
    currentMenu = -1; //set to current
    var childItem = "baby" + head + "" + child;
    var childId = "childOf" + head;
    
    document.getElementById(childItem).style.backgroundColor =  childrenBackGroundColor;
    document.getElementById(childItem).style.color = childrenTextColor;
    document.getElementById(childItem).style.borderColor = childrenBorderColor;
    
    HideChildMenu(head, childId);
}

var currentMenu = -1;
function DelayHideChildMenu(menu, child)
{   
    currentMenu = -1; //set to 0
    var command = "HideChildMenu('" + menu + "','" + child + "')";
    setTimeout(command, parseInt(tableHoverReleaseTimeOut));
}

function HideChildMenu(menuItemVal, childid)
{
    if(currentMenu != menuItemVal)
    {
        var menuItemName = "menuItem" + menuItemVal;
        document.getElementById(menuItemName).style.color = tableTextColor;
        document.getElementById(menuItemName).style.backgroundColor = tableBackGroundColor;
        document.getElementById(menuItemName).borderColor = tableBorderColor;
        
        document.getElementById(childid).style.visibility = 'hidden';
    }
}

//**************************************************************//
//*        FUNCTIONS TO CALCULATE MOVE CLICK POSITION          *//
//**************************************************************//

//function gets scrolled left position of the current window
function ScrollLeft()
{
	return GetPos(window.pageXOffset ? window.pageXOffset : 0,document.documentElement ? document.documentElement.scrollLeft : 0,document.body ? document.body.scrollLeft : 0);
}

//function gets scrolled top position of the current window
function ScrollTop() 
{
	return GetPos(window.pageYOffset ? window.pageYOffset : 0,document.documentElement ? document.documentElement.scrollTop : 0,document.body ? document.body.scrollTop : 0);
}

//function checks browser and returns correct result.
function GetPos(WinOff, DocElement, BodyScroll) 
{
	var Result = WinOff ? WinOff : 0;
	if (DocElement && (!Result || (Result > DocElement)))
		Result = DocElement;
	return BodyScroll && (!Result || (Result > BodyScroll)) ? BodyScroll : Result;
}

//**************************************************************//
//*          EXTRA FUNCTIONS FOR POPUPS, REDIRECT ET AL        *//
//**************************************************************//

function redirect(url)
{
    window.location.href(url);
}

function popup(url)
{
	var win = window.open(url,'','width='+popupWidth+',height='+popUpHeight+',top='+popUpTop+',left='+popUpLeft+',fullscreen=no,toolbar=no,menubar=no,location=no,directories=no,copyhistory=no,status=no,scrollbars=yes,resizable=no');
	
	if (!win)
	    alert('Error.  You have a pop-up blocker installed. \n\n  Please disable and then click link.');
}

var oldColor;
function hoverOver(newColor)
{
    oldColor = event.srcElement.style.color;
    event.srcElement.style.color = newColor;
    event.srcElement.style.fontWeight = "bold";
    event.srcElement.style.cursor = 'hand';
}

function hoverOut()
{
    event.srcElement.style.color = oldColor;
    event.srcElement.style.fontWeight = "normal";
}