// THIS FUNCTION IS COPYRIGHT BY BABYSOFT
// NO CHANGE, MOTIFY, RE-DISTRIBUTE, COPY OR RESELL IS ALLOWED
// BUG REPORT: its@babysoft.ca
// BABYSOFT CONTACT: 1-905-940-5379

// THE MAIN ARRAY CONTAINS ALL DROPDOWN LIST DATA
var MENU;
var FOCUS_WORD;
var FOCUS;
var OUT_WORD;
var OUT;

// Initial all the required value for the dropdown menu
// param1: the background color when the mouse focus the cell
// param2: the color of the word when the mouse focus the cell
// param3: the background color when the mouse leave the cell
// param4: the color of the word when the mouse leave the cell
function init(f_bg,f_w,o_bg,o_w){
    MENU = new Array();
    FOCUS_WORD = f_w;
    FOCUS = f_bg;
    OUT_WORD = o_w;
    OUT = o_bg;
    return;
}


// Add the menu element into the array. 
// if ypos is 0, that will be the main category in the array
// param1: the x-coordinate of the menu in the matrix
// param2: the y-coordinate of the menu in the matrix
// param3: the display name of the element
// param4: the url which the element point to 
// param5: the title tooltip when the cursor point to it
function addElement(xpos, ypos, title, url, tooltip){
    if (MENU[xpos] == null){
	MENU[xpos] = new Array();
    }
    if (MENU[xpos][ypos] == null){
	MENU[xpos][ypos] = new Array(3);
    }

    MENU[xpos][ypos][0] = title;
    MENU[xpos][ypos][1] = url;
    MENU[xpos][ypos][2] = tooltip;

    return;

}

// show the menu when calling this function
// Param1: the count indicate which menu should be display, from left to right
function showMenu(count){
    document.getElementById("menu_" + count).style.visibility = "visible";
//alert ("TEST: " + "menu_" + count + " " + document.getElementById("menu_" + count));
}

// hidden the menu when calling this function
// Param1: the count indicate which menu should be hidden, from left to right
function hiddenMenu(count){
    document.getElementById("menu_" + count).style.visibility = "hidden";
}


// display the full menu
// if the parameter is true, the menu will automatically plug into the 
// id called "BABY_DROPDOWN_MENU", Otherwise, it will return the full 
// menu in html format
// Param: flag indicate should it return the HTML of the menu, or it
//        should return automatically plug into BABY_DROPDOWN_MENU
// Return: the html format of the menu if the parameter is true, otherwise
//         return null
function displayMenu(flag){
    var html = '';

    html += '<table cellspacing=0 cellpadding=0>';
    // ADD THE MAIN (FIRST LINE) MENU ELEMENT
    html += '<tr>';
    for (var i=0; i < MENU.length; i++){
	if (MENU[i][0][1] == ''){
	if ( i == 0 ){
	    html += '<td class="BABYMENU_topLeftElement" title="' + MENU[i][0][2] + '" valign=center onmouseover=style.backgroundColor="' +FOCUS+ '";style.color="'+FOCUS_WORD+'";showMenu(' + i + '); onmouseout=style.backgroundColor="' +OUT+ '";style.color="'+OUT_WORD+'";hiddenMenu(' + i + ');>';
	}else{
	    html += '<td class="BABYMENU_topElement" title="' + MENU[i][0][2] + '" valign=center onmouseover=style.backgroundColor="' +FOCUS+ '";style.color="'+FOCUS_WORD+'";showMenu(' + i + '); onmouseout=style.backgroundColor="' +OUT+ '";style.color="'+OUT_WORD+'";hiddenMenu(' + i + ');>';
	}
	}else{
	if ( i == 0 ){
	    html += '<td class="BABYMENU_topLeftElement" onclick=location.href="'+MENU[i][0][1] +'"; title="' + MENU[i][0][2] + '" valign=center onmouseover=style.backgroundColor="' +FOCUS+ '";style.color="'+FOCUS_WORD+'";showMenu(' + i + '); onmouseout=style.backgroundColor="' +OUT+ '";style.color="'+OUT_WORD+'";hiddenMenu(' + i + ');>';
	}else{
	    html += '<td class="BABYMENU_topElement" onclick=location.href="'+MENU[i][0][1] +'"; title="' + MENU[i][0][2] + '" valign=center onmouseover=style.backgroundColor="' +FOCUS+ '";style.color="'+FOCUS_WORD+'";showMenu(' + i + '); onmouseout=style.backgroundColor="' +OUT+ '";style.color="'+OUT_WORD+'";hiddenMenu(' + i + ');>';
	}
	}
        html += '<span>&nbsp;&nbsp;'+ MENU[i][0][0] +'&nbsp;&nbsp;</span>';
	html += '</td>';
    }
    html += '</tr>';

    // NOW ADD THE DROPDOWN LIST ELEMENT
    html += '<tr height=0>';
    for (var i=0; i < MENU.length; i++){
        html += '<td>';
	html += '<table id="menu_'+ i +'" class="BABYMENU_dropdownList" cellspacing=0 cellpadding=0 onmouseover=showMenu(' + i + '); onmouseout=hiddenMenu(' + i + ');>';

	for (var j=1; j < MENU[i].length; j++){
	    html += '<TR>';
	    if (MENU[i][j][1] == ''){
	        html += '<TD title="' + MENU[i][j][2] + '" valign=center class="BABYMENU_dropdownElement" onmouseover=style.backgroundColor="' +FOCUS+ '";style.color="'+FOCUS_WORD+'"; onmouseout=style.backgroundColor="' +OUT+ '";style.color="'+OUT_WORD+'";>';
	    }else{
	        html += '<TD onclick=location.href="'+MENU[i][j][1] +'"; title="' + MENU[i][j][2] + '" valign=center class="BABYMENU_dropdownElement" onmouseover=style.backgroundColor="' +FOCUS+ '";style.color="'+FOCUS_WORD+'"; onmouseout=style.backgroundColor="' +OUT+ '";style.color="'+OUT_WORD+'";>';
	    }
            html += '<span>&nbsp;&nbsp;'+ MENU[i][j][0] +'&nbsp;&nbsp;</span>';
	    html += '</td></tr>';
	}

	html += '</table>';
	html += '</td>';
    }
    html += '</tr>';
    html += '</table>';


    // Now html variable contains the whole table for the dropdown list
    // put it into the BABY_DROPDOWN_MENU if the flag is true, otherwise return the html variable
    if (flag == true){
	document.getElementById("BABY_DROPDOWN_MENU").innerHTML = html;
	return;
    }else{
	return html;
    }
    return;

}


// EDIT THIS FUNCTION TO CUSTOMIZE YOUR OWN MENU
function controlMenu(){
    // Initial the requried value and color behaviour when mouse highlight
    init("A57245","#4A3E33","#4A3E33","#FFFFFF");
	
    addElement(0,0,"Sebastian Kitchen","","Kitchen Designs By Sebastian");
    addElement(0,1,"ORCHESTRA","orchestra.html","ORCHESTRA KITCHEN");
    addElement(0,2,"CONTEMPO","./contempo.html","CONTEMPO KITCHEN");
    addElement(0,3,"SCANICA","./scanica.html","SCANICA KITCHEN");
    addElement(0,4,"HARMONY","./harmony.html","HARMONY KITCHEN");
    addElement(0,5,"AVANTE","./avante.html","AVANTE KITCHEN");
    addElement(0,6,"BACK TO HOME","./index.html","Back to home");


    addElement(1,0,"BAMAX Kitchen","","BAMAX Kitchen");
    addElement(1,1,"FIOCCODISETA","fioccodiseta.html","BAMAX FIOCCODISETA IN CUCINA");
    addElement(1,2,"ALTAMAREA","altamarea.html","BAMAX ALTAMAREA IN CUCINA");
    addElement(1,3,"SHOGUN","shogun.html","BAMAX SHOGUN IN CUCINA");
    addElement(1,4,"BACK TO HOME","./index.html","Back to home");

    addElement(2,0,"Essebi Kitchen","","Essebi Kitchen");
    addElement(2,1,"ANNA","anna.html","ESSEBI ANNA");
    addElement(2,2,"ATHENA","athena.html","ESSEBI ATHENA");
    addElement(2,3,"KYRA","kyra.html","ESSEBI KYRA");
    addElement(2,4,"LINDOS","lindos.html","ESSEBI LINDOS");
    addElement(2,5,"MERIDIANA","meridiana.html","ESSEBI MERIDIANA");
	addElement(2,6,"PAOLA","paola.html","ESSEBI PAOLA");
	addElement(2,7,"IDRA","idra.html","ESSEBI IDRA");
	addElement(2,8,"PETRA","petra.html","ESSEBI PETRA");
	addElement(2,9,"KEA","kea.html","ESSEBI KEA");
    addElement(2,10,"BACK TO HOME","./index.html","Back to home");

    addElement(3,0,"Moretuzzo Kitchen","","Moretuzzo Kitchen");
    addElement(3,1,"ESSENTIA","essentia.html","Moretuzzo Essentia Kitchen");
    addElement(3,2,"FUTURA","futura.html","Moretuzzo Futura Kitchen");
    addElement(3,3,"FUTURA LAM","futuralam.html","Moretuzzo Futura Lam Kitchen");
    addElement(3,4,"VELIKA","velika.html","Moretuzzo Velika Kitchen");
    addElement(3,5,"BACK TO HOME","./index.html","Back to home");


    addElement(4,0,"Company Info","","Information About Kitchen World Designs");
    addElement(4,1,"About Us","aboutus.html","About Kitchen World Designs");
    addElement(4,2,"Contact Us","contactus.html","Contact Us Information");
    addElement(4,3,"FURNICRAFT","http://www.furnicraft.com","FURNICRAFT WEBSITE");
    addElement(4,4,"Credits","./credits.html","Credits");
    addElement(4,5,"BACK TO HOME","./index.html","Back to home");



    displayMenu(true);

}