function createFlyoutTable()
    {
        table = document.createElement("TABLE");
        table.className = "flyoutTable";
        tbody  = document.createElement("TBODY");
        row    = document.createElement("TR");

        tbody.appendChild(row);
        table.appendChild(tbody);
        document.body.insertAdjacentElement("afterBegin", table)

        this.addMainSeperator = addMainSeperator;
    }


    function createFlyout( headText, bgColor, fNum)
    {
        column = document.createElement("TD");
        column.className = "container";
        column.style.backgroundColor = bgColor;

        div = document.createElement("DIV");
        div.id = "flyout" + fNum;
        div.className = "flyout";
        div.style.backgroundColor = bgColor;

        link = document.createElement("A");
        link.className = "flyoutLink";
        link.appendChild(document.createTextNode(headText));

        column.appendChild(link);
        column.appendChild(div);
        row.appendChild(column);

        this.addItem = addItem;
        this.addSeperator = addSeperator;
        this.showMenu = showMenu;
        this.hideMenu = hideMenu;
        this.css = eval(div.id + ".style");

        this.css.left = column.offsetLeft;
        this.css.top = column.offsetTop + column.offsetHeight;

        if (fNum == 3 && (div.offsetLeft + table.offsetLeft + div.offsetWidth) > document.body.clientWidth)
            this.css.left = div.offsetLeft - ((div.offsetLeft + div.offsetWidth + table.offsetLeft) - document.body.clientWidth);

        column.onmouseover = new Function('showMenu(' + fNum + ')');
        column.onmouseout  = new Function('hideMenu(' + fNum + ')');
    }


    function addMainSeperator(bgColor)
    {
        column = document.createElement("TD");
        column.className = "container";
        column.align = "center";
        column.width = 7;
        column.style.backgroundColor = bgColor;

        column.appendChild(document.createTextNode("|"));
        row.appendChild(column);
    }


    function addSeperator()
    {
        seperator = document.createElement("DIV");
        seperator.className = "flyoutSep";

        div.appendChild(seperator);
    }


    function addItem(itemURL, itemText)
    {
        paragraph = document.createElement("P");
        paragraph.className = "flyoutText";

        link = document.createElement("A");
        link.className = "flyoutLink";
        link.href = itemURL;
        link.appendChild(document.createTextNode(itemText));

        paragraph.appendChild(link);
        div.appendChild(paragraph);
    }



    function showMenu(fNum)
    {
        flyout[fNum].css.visibility = "visible"
    }


    function hideMenu(fNum)
    {
        flyout[fNum].css.visibility = "hidden"
    }


    function initMenu()
    {
        flyout = new Array();

        flyoutTable = new createFlyoutTable();

        flyout[0] = new createFlyout( '本會簡介', '#40ffff', 0);
        flyout[0].addItem('agchis1.html', '本會簡史');
       flyout[0].addSeperator();
 flyout[0].addItem('belief1.html', '本會信仰');
flyout[0].addSeperator();
flyout[0].addItem('creator1.html', '創辦人生平');
flyout[0].addSeperator();
        flyout[0].addItem('dirmem1.html', '董事');
        flyout[0].addSeperator();
        flyout[0].addItem('coworker1.html', '同工團');
        flyoutTable.addMainSeperator('#40ffff');

        flyout[1] = new createFlyout( '差傳事工', '#40ffff', 1);
        flyout[1].addItem('mission/index.html', '差傳');
        flyoutTable.addMainSeperator('#40ffff');


 flyout[2] = new createFlyout( '屬校/補習社', '#40ffff', 2);
        flyout[2].addItem('http://www.waiyankin.edu.hk/', '屬校-懷恩幼稚園');
 flyout[0].addSeperator();
flyout[2].addItem('ntagc/school.html','屏山堂補習社');
        flyoutTable.addMainSeperator('#40ffff');



        flyout[3] = new createFlyout( '堂會網頁', '#40ffff', 3);

flyout[3].addItem('http://yl.ntagc.org.hk', '元朗堂');   
    flyout[0].addSeperator(); 
flyout[3].addItem('http://tm.ntagc.org.hk', '屯門堂');
flyout[0].addSeperator();
flyout[3].addItem('http://ps.ntagc.org.hk', '屏山堂');
        flyoutTable.addMainSeperator('#40ffff');


        flyout[4] = new createFlyout( '場地租借', '#40ffff', 4);
       flyout[4].addItem('psrent1.html', '本會禮拜堂'); 
        flyoutTable.addMainSeperator('#40ffff');

        flyout[5] = new createFlyout( '會員福利', '#40ffff', 5);
       flyout[5].addItem('volunter.pdf', '義工津貼');
flyout[0].addSeperator(); 
flyout[5].addItem('lhwdetail.pdf', '李希望教士神學教育基金細則'); 
flyout[0].addSeperator();
flyout[5].addItem('lhwapp.pdf', '李希望教士神學教育基金申請表'); 
    flyoutTable.addMainSeperator('#40ffff');

 flyout[6] = new createFlyout( '聯絡我們', '#40ffff', 6);
        flyout[6].addItem('mailto:tsedy@ntagc.org.hk', '董事');
       flyout[0].addSeperator();
flyout[6].addItem('mailto:cheungsm@ntagc.org.hk', '元朗堂');   
     flyout[0].addSeperator();
flyout[6].addItem('mailto:hosp@ntagc.org.hk', '屯門堂');
flyout[0].addSeperator();
flyout[6].addItem('mailto:wongsk@ntagc.org.hk', '屏山堂');
flyout[0].addSeperator();
flyout[6].addItem('mailto:ntagcmaster@ntagc.org.hk', '網站管理員');
 flyoutTable.addMainSeperator('#40ffff');

 flyout[7] = new createFlyout( '友好連結', '#40ffff', 7);
flyout[7].addItem('http://www.hk-ebc.edu/', '神召神學院 ');
       flyout[0].addSeperator();
 flyout[7].addItem('http://www.chinesepastor.com/', '華人教牧網頁 ');
      flyout[0].addSeperator();
  flyout[7].addItem('http://www.christiantimes.org.hk/', '時代論壇');
       flyout[0].addSeperator();
 flyout[7].addItem('http://www.alpha.org.hk/', '?發課程');
 flyoutTable.addMainSeperator('#40ffff');
}

    window.onload = initMenu;