var hideList = true;
var timer;

function hideChannelList(){
    if(hideList){
        $('#channel_list').hide();
        hideList = true;
    }
}

$(function(){
    $('#channel_list').hover(
        function(){
            hideList = false;
        },
        
        function(){
            if(timer){
                clearTimeout(timer);
            }
            timer = setTimeout('hideChannelList()', 100);
            hideList = true;
        }
    );

    // when mouse is over element
    $('#channel_label').hover(
        function(){
            hideList = false;
            var top = $('#main_bar').position().top + $('#main_bar').outerHeight();
            var left = $(this).position().left;
            
            $('#channel_list').css('left', left);
            $('#channel_list').css('top', top);

            $('#channel_list').fadeIn();
        },
        function(){
            if(timer){
                clearTimeout(timer);
            }
            timer = setTimeout('hideChannelList()', 100);
            hideList = true;
        }
    );

    $('table#channels td').click(function(){
        window.location = $(this).children('a').attr('href');
    });
});