var panel_timer;

$(function () {
     $('.toppanel', '#top_panels').hover(function () {
         window.clearTimeout(panel_timer);
         var panel_id = $(this).attr('rel');
         showPanel('tpm_' + panel_id, $(this).parent());
         $('.toppanel', '#top_panels').each(function (idx, el) {
             var el_panel_id = $(el).attr('rel');
             if (el_panel_id != panel_id) {
                 hidePanel('tpm_' + el_panel_id, $(this).parent());
             }
         });
     }, function () {
         // var panel_id = $(this).attr('rel');
         // hidePanel('tpm_' + panel_id);
     });
     
     $('.top_panel_more', '#top_panels').hover(function () {
         window.clearTimeout(panel_timer);
     }, function () {
         var panel_id = $(this).attr('id');
         hidePanel(panel_id, $(this).parent());
     });
     
     $('li', '#top_panels').hover(function () {
         window.clearTimeout(panel_timer);
     }, function () {
         var a = $(this).children();
         if ($(a).is('.toppanel')) {
             var panel_id = a.attr('rel');
             hidePanel('tpm_' + panel_id, $(this));
         }
     });
     
     $('.ppn_number', '.page_panels').click(function () {
        $('.ppn_content', '.page_panels').each(function (idx, el) {
            $(el).hide();
        });
        $('.ppn_number', '.page_panels').each(function (idx, el) {
            $(el).parent().removeClass('active');
        });
        
        var ppn_page = $(this).attr('rel');
        $(this).parent().addClass('active');
        $('#' + ppn_page).show();
    });
});

function showPanel(panel_id, li) {
    $('#' + panel_id).addClass('tpm_active');
    //$('#' + panel_id).slideDown();
    var li_class = $(li).attr('class');
    $(li).addClass(li_class + '_active');
}

function hidePanel(panel_id, li) {
    panel_timer = window.setTimeout(function () {
        $('#' + panel_id).removeClass('tpm_active');
        $('#' + panel_id).slideUp();
        var li_class = $(li).attr('class');
        li_class = li_class.split(' ');
        $(li).attr('class', li_class[0]);
    }, 10);
}