// helpful variable
// it's global and is needed to know, if we still need to show popup
// or we can hide
var show_popup = true;
// waiting page is rendered by browser
$(document).ready(function()
{
    var acctStatusBackgClass = "green-status";
    if ($('#acct-status').hasClass('yellow_mark')) {
        acctStatusBackgClass = "yellow-status";
    } else if ($('#acct-status').hasClass('red_mark')) {
        acctStatusBackgClass = "red-status";
    }
    // copying to ie popup div content from all browsers popup div
    $(".ie_account_box").html($(".account_box").html());
    // extra actions on #acct-status hover
    $('#acct-status').hover(function()
    {
        show_popup = true;
        // activating css rules for "Account Status" link
        $.each($.browser, function(i)
        {
            if(!$.browser.msie)
            {
                $('#acct-status').addClass('openbox');
                $('#acct-status').addClass(acctStatusBackgClass);
                $('.account_box').show();
            }
            else
            {
                // ie branch
                $('#acct-status').addClass('openbox');
                $('#acct-status').addClass(acctStatusBackgClass);
                $('.ie_account_box').show();
            }
        });
    },
    // function make action, when we do not hover above #acct-status
    function()
    {
        show_popup = false;
        // waiting 1 second and hiding white blocks
        setTimeout(function()
        {
            if (show_popup == false)
            {
                $('#acct-status').removeClass('openbox');
                $('#acct-status').removeClass(acctStatusBackgClass);
                $('.account_box').hide();
                $('.ie_account_box').hide();
            }
        }, 1000);
    });

    // this function starts to work, when we are hovering above
    // .account_box
    // mozilla branch
    $('.account_box').hover(function()
    {
        show_popup = true;
        // activating css rules for "Account Status" link
        $('#acct-status').addClass('openbox');
        $('#acct-status').addClass(acctStatusBackgClass);
        // show pre defined block on user hover
        $('.account_box').show();
    }, function()
    {
        show_popup = false;
        // waiting 1 second and hiding white blocks
        setTimeout(function()
        {
            if (show_popup == false)
            {
                $('#acct-status').removeClass('openbox');
                $('#acct-status').removeClass(acctStatusBackgClass);
                $('.account_box').hide();
            }
        }, 1000);
    });

    // this function starts to work, when we are hovering above
    // .account_box
    // ie branch
    $('.ie_account_box').hover(function()
    {
        show_popup = true;
        // activating css rules for "Account Status" link
        $('#acct-status').addClass('openbox');
        $('#acct-status').addClass(acctStatusBackgClass);
        // show pre defined block on user hover
        $('.ie_account_box').show();
    }, function()
    {
        show_popup = false;
        // waiting 1 second and hiding white blocks
        setTimeout(function()
        {
            if (show_popup == false)
            {
                $('#acct-status').removeClass('openbox');
                $('#acct-status').removeClass(acctStatusBackgClass);
                $('.ie_account_box').hide();
            }
        }, 1000);
    });

});
