$j(document).ready(function() {
    $j('.brand-list-container').each(function() {
        var number_of_brands = $j('.brand-list > li').length;
        var number_of_pages = Math.ceil(number_of_brands / 7) - 1;
        
        $j('.brand-list').css('width', (number_of_brands * 130) + 'px');

        $j(this).data('number-of-pages', number_of_pages);
        $j(this).data('page', 0);
        $j(this).data('first-update', true);
    }).bind('update-position', function() {
        $j('.brand-list').stop();

        var left_offset = $j('.brand-list-container').data('page') * -910;

        $j('.brand-list').animate({
            'left': left_offset + 'px'
        }, 600, 'swing');

        var page_number = parseInt($j(this).data('page'));
        var number_of_pages = $j(this).data('number-of-pages');

        if (page_number > 0) {
            $j('.left-arrow', this).addClass('brandarrow_left_lit');
            $j('.left-arrow', this).removeClass('brandarrow_left');
        } else {
            $j('.left-arrow', this).addClass('brandarrow_left');
            $j('.left-arrow', this).removeClass('brandarrow_left_lit');
        }

        if (page_number < number_of_pages) {
            $j('.right-arrow', this).addClass('brandarrow_right_lit');
            $j('.right-arrow', this).removeClass('brandarrow_right');
        } else {
            $j('.right-arrow', this).addClass('brandarrow_right');
            $j('.right-arrow', this).removeClass('brandarrow_right_lit');
        }
    }).trigger('update-position');

    $j('.brand-list-container .left-arrow').click(function() {
            var page_number = parseInt($j('.brand-list-container').data('page'));
            if (page_number > 0) {
            $j('.brand-list-container').data('page', page_number - 1).trigger('update-position');
        }
    });

    $j('.brand-list-container .right-arrow').click(function() {
        var page_number = parseInt($j('.brand-list-container').data('page'));
        var number_of_pages = $j('.brand-list-container').data('number-of-pages');
        if (page_number < number_of_pages) {
            $j('.brand-list-container').data('page', page_number + 1);
            $j('.brand-list-container').trigger('update-position');
        }
    });

    $j('.brand-list li.has-children').hoverIntent({
        sensitivity: 30,
        interval: 120,
        over: function() {
            var popup = $j(this).children('.brand-list-popup');

            if (popup.html() != '') {
                $j('.brand-actual-popup').html(popup.html());
                $j('.shadow').remove();

                var left_offset = $j(this).offset().left - Math.floor(bbb_utils.width($j('.brand-actual-popup')) / 2) + Math.floor(bbb_utils.width($j(this)) / 2);
                var top_offset = $j(this).offset().top + bbb_utils.height($j(this));

                if( $j( this ).is( '.footer-container li' ))
                {
                    top_offset = $j(this).offset().top - bbb_utils.height($j('.brand-actual-popup'));
                }

                /* Drop shadow code: */
                for(var i = 0; i < 2; i++) {
                    var shadow_left_offset = left_offset - i;
                    var shadow_top_offset = top_offset - i + 13;
                    if( $j( this ).is( '.footer-container li' ))
                    {
                        shadow_top_offset = top_offset - i;
                    }
                    var shadow_width = bbb_utils.width($j('.brand-actual-popup')) + (2 * i);
                    var shadow_height = bbb_utils.height($j('.brand-actual-popup')) + (2 * i) - 13;
                    $j('.brand-actual-popup').after($j('<div>', {
                        'class': 'shadow',
                        'style': 'left: ' + shadow_left_offset + 'px; top: ' + shadow_top_offset + 'px; width: ' + shadow_width + 'px; height: ' + shadow_height + 'px;'
                    }));
                }

                $j('.brand-actual-popup').css({
                    'top': top_offset + 'px',
                    'left': left_offset + 'px'
                }).show();
            }
        },
        timeout: 250,
        out: function() {
        }
    });

    $j('.brand-actual-popup').hoverIntent({
        sensitivity: 30,
        interval: 120,
        over: function() {
            $j(this).show();
            $j('.shadow').show();
        },
        timeout: 250,
        out: function() {
            $j(this).hide();
            $j('.shadow').hide();
        }
    });
});