//menu object and definition
function Menu ( name, link , content)
{
    this.name = name;
    this.link = link;
    this.type = "menu";
    if ( arguments.length == 2 ) 
		this.content = new Array();
    else
		this.content = content;
}

//content object
function Content ( name, link )
{
    this.name = name;
    this.link = link;
    this.type = "content";
}
//top button Object
function MenuButton (imgOver, imgOut, link, pix) {
    this.imgOn = new Image();
    this.imgOn.src = "" + imgOver;
    this.imgOff = new Image();
    this.imgOff.src = "" + imgOut;
    this.link = link;
    this.pixColor = pix;
}

// div definition object, contain current menu and content object
function Display ()
{
    this.content = new Array();
    //index of expanded menu in the content array
    this.expanded = -1;
    this.selected = -1;
    this.menu_color = "#273E78";
    this.content_color = "#EBE8DF";
    this.menu_roll_color = "#2D4EB4";
    this.content_roll_color = "#FBEFCA";
    this.menu_text_color = "#FFFFFF";
    this.content_text_color = "#000000";
    this.back_color = "#FFFFFF";
    this.menu_sele_color = "";
    this.content_sele_color = "";
    this.pixel_color = "";
    this.square_color = "";
}

//add a content into an menu, used for init at start
function addContent ( menu, content)
{		
    menu.content[menu.content.length] =  content;
}

// get le maximum length that Display.content could reach (used to limit the number of div)
function getTotalLength()
{
    act_max = 0;
    for (var i=0; i < myMenu.length; i++)
	act_max = Math.max(act_max, myMenu[i].content.length);
    return (myMenu.length + act_max);
}

//function called on div mouseOver
function myMouseOver( index ) {
    if ( index < myDisplay.content.length && index != myDisplay.selected )
	document.getElementById("menu" + index).style.backgroundColor = eval ("myDisplay." + myDisplay.content[index].type + "_roll_color");
}

//function called on div mouseOut
function myMouseOut( index )
{
    if ( index < myDisplay.content.length )
	if ( index == myDisplay.selected )
	    document.getElementById("menu" + index).style.backgroundColor = eval ("myDisplay." + myDisplay.content[index].type + "_sele_color");
	else
	    document.getElementById("menu" + index).style.backgroundColor = eval ("myDisplay." + myDisplay.content[index].type + "_color");
    
}

//function called on div click
function myClick ( index , emul )
{
    if ( index < myDisplay.content.length && index != myDisplay.selected){
	if ( myDisplay.selected>=0 )
	    document.getElementById("menu" + myDisplay.selected).style.backgroundColor = eval ("myDisplay." + myDisplay.content[myDisplay.selected].type + "_color");
	myDisplay.selected = index;
	
	if ( emul != 2 )
	    openPage ( index );
    	else if (myDisplay.content[index].type == "menu")
	    changeMenu( index );
    }
}

// function used to change Display content
function changeMenu ( index )
{
    expandMenu ( index );
    drawMenu();
}

// function used to change display object content
function expandMenu ( index ) {
    // if selected object is expanded menu init to close it
    if ( index == myDisplay.expanded)
	index = -1;
    
    if (index >= 0)
	opened = myDisplay.content[index].name;
    else 
	{
	    opened = -1;
	    myDisplay.expanded = -1;
	    myDisplay.selected = -1;
	}
    
    //re-init display content
    myDisplay.content = new Array();
    
    //fill content
    for ( var i=0; i< myMenu.length; i++) {
	myDisplay.content[myDisplay.content.length] = myMenu[i];
	if ( myMenu[i].name == opened ) {
	    myDisplay.expanded = i;
	    myDisplay.selected = i;
	    for ( var j=0; j< myMenu[i].content.length; j++)
		myDisplay.content[myDisplay.content.length] = myMenu[i].content[j];
	}
    }
}

// function used to display in div case of Display object content
function drawMenu () {
    for  ( var i=0; i< myDisplay.content.length; i++ ) {
	if (myDisplay.content[i].type == "menu") {
	    var str = "";
	    str += "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" height=\"20\" width=\"130\" ";
	    str += " style=\"border-bottom:1px solid white;\">";
	    str += "<tr><td width=\"124\" align=\"right\" height=\"20\" ";
	    str += "style=\"font-weight:bold; color:" + myDisplay.content[i].type  + "\">";
	    str += myDisplay.content[i].name;
	    str += "</td> <td width=\"2\">&nbsp;</td>";
	    str += "<td width=\"4\"> <img src=\"" + myDisplay.pixel_color + "\" width=\"4\" height=\"100%\" alt=\"\" border=\"0\"></td>";
	    str += "</tr>";
	    str += "</table>";
	    document.getElementById("menu" + i).innerHTML = str;
	} else {
	    var str = "";
	    str += "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" height=\"20\" width=\"130\" ";
	    str += " style=\"border-bottom:1px solid white;\" ";
	    str += "<tr><td width=\"4\" height=\"20\" bgcolor=\"FFFFFF\"></td>";
	    str += "<td align=\"right\">";
	    str += myDisplay.content[i].name;
	    str += "</td>";
	    str += "<td width=\"2\">&nbsp;</td>"
		str += "<td style=\"background-image: url(" + myDisplay.pixel_color + ");background-repeat: repeat-y; background-position: 50%;\" width=\"7\">";
	    str += "<img src=\"" + myDisplay.square_color + "\" width=\"7\" height=\"7\" alt=\"\" border=\"0\">";
	    str += "</td>";
	    str += "</tr>";
	    str += "</table>";
	    document.getElementById("menu" + i).innerHTML = str;
	}
	
	
	if ( i ==  myDisplay.selected ){
	    document.getElementById("menu" + i).style.backgroundColor = eval ("myDisplay." + myDisplay.content[i].type + "_sele_color");
	    document.getElementById("menu" + i).style.cursor = 'default';
	}
	else{
	    document.getElementById("menu" + i).style.cursor = 'hand';
	    document.getElementById("menu" + i).style.backgroundColor = eval ("myDisplay." + myDisplay.content[i].type + "_color");
	}
	document.getElementById("menu" + i).style.height = '20 px';
    }
    for (var i = myDisplay.content.length; i< getTotalLength(); i++)
	{
	    document.getElementById("menu" + i).innerHTML = "";
	    document.getElementById("menu" + i).style.height = '0 px';
	    document.getElementById("menu" + i).style.cursor = 'default';
	    document.getElementById("menu" + i).style.backgroundColor = myDisplay.back_color;
	}
}
//write header off a table
function writeTable () {
    return "<table cellpadding=\"0\" cellspacing=\"0\" width=\"130\" border=\"0\"><tr>";
}

//initiate all button
function initButtonMenu(path, start) {	
    for ( var i = 1; i< 6; i++ ) {
	myButton[i] = new MenuButton (path + "menus/menu_" + i + "_on.gif", path + "menus/menu_" + i + "_off.gif", topMenuLinks[i], selButtonColors[i]);
    }
    if ( MODE == 0 )
	myButton[6] = new MenuButton (path + "menus/menu_6_on.gif", path + "menus/menu_6_off.gif", topMenuLinks[6], selButtonColors[6]);
    else if (MODE == 3)
	myButton[6] = new MenuButton (path + "menus/menu_gris.gif", path + "menus/menu_gris.gif", topMenuLinks[6], selButtonColors[6]);
    else
	myButton[6] = new MenuButton (path + "menus/menu_6a_on.gif", path + "menus/menu_6a_off.gif", topMenuLinks[6], selButtonColors[6]);
}	

//swap image on rollover
function switchTopImage( index, on ) {
    document.getElementById("topImage" + index).src = eval("myButton[" + index + "].img" + on + ".src");
}

// on click and change page from sub menu
function openPage ( index ) {
    this.location.href = myDisplay.content[index].link;
}

// on click and change page from menu
function topMenu ( index ) {
    if ( LEVEL != 0){
	for ( var i= 1 ; i< 7; i++ )
	    document.getElementById("select" + i).style.backgroundColor = "#FFFFFF";
	document.getElementById("select" + index).style.backgroundColor = myButton[index].pixColor;
    }
    if (myButton[index].link != "")
	this.location.href = vsaLink(myButton[index].link);
}

function colorizeMenu(index) {
    if ( index > 0 && LEVEL != 0)
	document.getElementById("select" + index).style.backgroundColor = myButton[index].pixColor;
    else
	return;
}

// variables used in it
var myDisplay = new Display();
var myMenu = new Array();
var myButton = new Array();