// 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;

/*
var TOPLINEBLURCOLOR  = "#FFFFFF";
var TOPWORDBLURCOLOR  = "#333333";
var TOPLINEFOCUSCOLOR = "#FBEFD7";
var TOPWORDFOCUSCOLOR = "#70708D";
*/

var TOPLINEBLURCOLOR  = "#1B3F7B";
var TOPWORDBLURCOLOR  = "#FFFFFF";
var TOPLINEFOCUSCOLOR = "#FBEFD7";
var TOPWORDFOCUSCOLOR = "#70708D";


// 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 border=0 cellspacing=0 cellpadding=0>';
    // ADD THE MAIN (FIRST LINE) MENU ELEMENT
    // html += '<tr><td width="10"><img src="http://graphics.whitepanel.com/icons/leftCircle.jpg" border=0 /></td>';
    html += '<tr><td width=0></td>';
    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="' +TOPLINEFOCUSCOLOR+ '";style.color="'+TOPWORDFOCUSCOLOR+'";showMenu(' + i + '); onmouseout=style.backgroundColor="' +TOPLINEBLURCOLOR+ '";style.color="'+TOPWORDBLURCOLOR+'";hiddenMenu(' + i + ');>';
	}else{
	    html += '<td class="BABYMENU_topElement" title="' + MENU[i][0][2] + '" valign=center onmouseover=style.backgroundColor="' +TOPLINEFOCUSCOLOR+ '";style.color="'+TOPWORDFOCUSCOLOR+'";showMenu(' + i + '); onmouseout=style.backgroundColor="' +TOPLINEBLURCOLOR+ '";style.color="'+TOPWORDBLURCOLOR+'";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="' +TOPLINEFOCUSCOLOR+ '";style.color="'+TOPWORDFOCUSCOLOR+'";showMenu(' + i + '); onmouseout=style.backgroundColor="' +TOPLINEBLURCOLOR+ '";style.color="'+TOPWORDBLURCOLOR+'";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="' +TOPLINEFOCUSCOLOR+ '";style.color="'+TOPWORDFOCUSCOLOR+'";showMenu(' + i + '); onmouseout=style.backgroundColor="' +TOPLINEBLURCOLOR+ '";style.color="'+TOPWORDBLURCOLOR+'";hiddenMenu(' + i + ');>';
	}
	}
        html += '<span>&nbsp;&nbsp;'+ MENU[i][0][0] +'&nbsp;&nbsp;</span>';
	html += '</td>';
    }

///////////////////////////////////////////////////// TEMP USE ONLY
    // Temp use to hold the spot, when the forth drop down list element start to use, remove the following line
    // html += '<td style="cursor: default;background-color: #70708D;border-style: solid;border-color: #C0C0C0;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-right-width: 0px;width: 360px;height: 20px;" >&nbsp;</td>';
//////////////////////////////////////////////////// TEMP USE ONLY

    // html += '<td width="10"><img src="http://graphics.whitepanel.com/icons/rightCircle.jpg" border=0 /></td></tr>';
    html += '</tr>';

    // NOW ADD THE DROPDOWN LIST ELEMENT
    html += '<tr height=0><td></td>';
    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 += '<td></td></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("#FBEFD7","#70708D","#70708D","#FFFFFF");
    init("#FBEFD7","#70708D","#F3F3F3","#333333");
	
    addElement(0,0,"Products & Services","./index.php?f=VosetStandard","VoSet Business Phone System Solutions");
    addElement(0,1,"VoSet Description","./index.php?f=VosetStandardDescription","VoSet, as a complete phone system solutions");
    addElement(0,2,"Packages Comparison","./index.php?f=VosetPackages","VoSet Packages");
    addElement(0,3,"Outbound Saver Plan","./index.php?f=VosetPackages_outbound","Outbound Saver Packages");
    addElement(0,4,"Phone System Forwarding","./index.php?f=VosetPackages_sw2cell","Phone System Forwarding to Any Numbers");
    addElement(0,5,"SOHO / Small Office Plan","./index.php?f=VosetPackages_soho","SOHO / Small Office Packages");
    addElement(0,6,"Virtual Office Plan","./index.php?f=VosetPackages_virtual","Virtual Office / No Office Packages");
    addElement(0,7,"Corporation Plan","./index.php?f=VosetPackages_corporate","Corporation Packages");
    addElement(0,8,"Built-in Features","./index.php?f=VosetFeatureList","VoSet-R Build-in Features Description");
    addElement(0,9,"Telcom Buying Tips","./index.php?f=BuyingTips","How to choose a right telecom solution");
    addElement(0,10,"VoSet Pricing","./index.php?f=VosetPricing","VoSet-R Pricing");

    addElement(1,0,"Customizations","./index.php?f=CustomizationStandard","VoSet Business Phone System Solutions");
    addElement(1,1,"Feature Customizations","./index.php?f=FeatureCustomizations","Customize your own feature");
    addElement(1,2,"Secure VoSet Options","./index.php?f=SecureVoSet","Mission Critical, Secure your VoSet-R");
    addElement(1,3,"International Call Center","./index.php?f=InternationalCC","Build your International Call Center");

    addElement(2,0,"Support & FAQ","./index.php?f=userguide","VoSet Support, User Manual, FAQ and Forum");
    addElement(2,1,"User Manual","./index.php?f=userguide_usermanual","VoSet-R User Manual");
    addElement(2,2,"Frequently Ask Question","./index.php?f=userguide_faq","Frequently Ask Questions");
    addElement(2,3,"Technical Support","./index.php?f=userguide_troubleshoot","Technical Support Questions");

    addElement(3,0,"Wholesaler / Reseller","./index.php?f=ResellerStandard","Wholesaler / Reseller");
    addElement(3,1,"International Call Center","./index.php?f=InternationalCC","Build your International Call Center");
    addElement(3,2,"Wholesale Termination","./index.php?f=termination","Reliable and Cost Saving Wholesale Termination");
    addElement(3,3,"Reseller Packages","./index.php?f=reseller","Reseller Partners");

    //    addElement(4,0,"User Forum","http://www.mytelecomnetwork.com/","Enter our user forum");

    displayMenu(true);

}