var selectedMenuItem = 0;

var menuData = [
    { text: "Home", url: "./index.html" },

    { text: "Residential Plans", submenu: {
        id: "residential",
        itemdata: [
                    { text: "Mettawas Lane", url: "./view.html?p=0" },
                    { text: "Southwood Plaza", url: "./view.html?p=1" }
                  ]
        }
    },

    { text: "Commercial Plans", submenu: {
        id: "commercial",
        itemdata: [
                    { text: "Southwood Plaza", url: "./view.html?p=1" }
                  ]
        }
    },
    { text: "Pictures", url: "./pictures.html" },
    { text: "Contact Us", url: "./contact_us.html" },
];


YAHOO.util.Event.onAvailable("doc", function() {
    var e1 = document.createElement("div");
    e1.setAttribute("id", "hd");
    
   
    var s = '<div id="header-banner">';
    s += '<div class="style1">Peaco<img alt="" src="img/maple-leaf.jpg" style="height: 44px; width: 26px;" /><span class="style2">Construction</span></div>';
    //s += '<p style="font-weight: 900; font-size: xx-large; height: 37px; top: 44px; left: 38px; width: 328px; right: 1043px;">PEACO<img src="img/treelogo.gif"style="height: 25px; width: 18px" />Construction</p>';
    //s += '<img alt="" src="img/peaco_logo.gif" />';
    s += '</div><div id="xxx" class="yuimenubar yuimenubarnav"></div>'
    //e1.innerHTML = '<div id="header-banner"><img alt="" src="img/peaco_logo.gif" /></div><div id="xxx" class="yuimenubar yuimenubarnav"></div>';
    e1.innerHTML = s;
    YAHOO.util.Dom.get('doc').insertBefore(e1, YAHOO.util.Dom.get('bd'));
    
});


YAHOO.util.Event.onContentReady("xxx", function() {
    var oMenuBar = new YAHOO.widget.MenuBar("xxx", {
        autosubmenudisplay: true,
        hidedelay: 250,
        lazyload: true
    });
    
    oMenuBar.cfg.setProperty("classname", "pi-top-menu");
    
    oMenuBar.addItems(menuData);

    var i = oMenuBar.getItem(selectedMenuItem);
    i.cfg.setProperty("classname", "pi-selected");

    oMenuBar.render();
    oMenuBar.show();

});