(function () {

    var Dom = YAHOO.util.Dom;
    var Event = YAHOO.util.Event;
    var Selector = YAHOO.util.Selector;
    
    
    Event.onDOMReady(function() {
        
            /** highlight function **/
            var fnHighlight = function(e, o) {
                
                if(o.sEvent === "mouseover")
                    document.body.style.cursor = 'pointer';
                else if( o.sEvent === "mouseout")
                    document.body.style.cursor = 'default';
                    
                /**
                *@desc make sure that the image file name is like 'popular_{$id}.gif' and 'popular_{$id}_hover.gif'
                **/
                
                var uri = "/sites/geencentteveel/images/popular_"+this.id;
                var a = Selector.query('a', this, true);
                
                switch(o.sEvent) {
                    
                    case 'mouseover':
                        this.style.backgroundImage = "url('" + uri + "_hover.gif')";
                        Dom.addClass(a, 'orange');                        
                        break;
                    
                    case 'mouseout':
                        this.style.backgroundImage = "url('" + uri + ".gif')";
                        Dom.removeClass(a, 'orange');
                        break;
                    
                    case 'click':
                        location.href = a.href;
                        break; 
                }
  
            };
            
            var div = Selector.query('div#content ul#popular', null, true);
            var listElements = Selector.query('li', div);
            
            Event.addListener(listElements, "mouseover", fnHighlight, {sEvent:"mouseover"} );
            Event.addListener(listElements, "mouseout", fnHighlight, {sEvent:"mouseout"} );
            Event.addListener(listElements, "click", fnHighlight, {sEvent:"click"} );
        } 
    );
   
    
    

})();