(function()
 {
    YAHOO.util.Event.onContentReady('area', function()
        {
             /*** highlight function ***/
            var fnHighlight = function(e, o)
            {
                switch(o.sEvent)
                {
                    case 'mouseover':
                        this.style.backgroundColor = "#fef7ba";
                    break;
                    case 'mouseout':
                        this.style.backgroundColor = "#FFF";
                    break;
                }
            }
            
            /** search html elements to highlight #area **/            
            aElements = document.getElementById('area').childNodes;
            aIds = [];
            
            for(i = 0; i < aElements.length; i++ )
            {
                if(aElements[i].nodeType === 1)
                {
                    if(aElements[i].tagName === "LI")
                    {
                        if(aElements[i].id == "")
                            aElements[i].id="area_li_"+i;
                        aIds.push(aElements[i].id);
                    }
                }
            }

            YAHOO.util.Event.addListener( aIds, 'mouseover', fnHighlight, { sType:'area', sEvent:'mouseover'} );
            YAHOO.util.Event.addListener( aIds, 'mouseout', fnHighlight, { sType:'area', sEvent:'mouseout'} );
        }
    );
    
 })();