(function (gds, $jq, undefined) {
    var $jq = jQuery.noConflict();
    var listWidth = 200;
    var brandLogoWidth = 200;
    var brandListCount;
    var brandListTotalWidth;
    var firstRightNav = 0;

    $jq(document).ready(function () {

        brandListCount = $jq('#gdEventListBar ul li').size();
        brandListTotalWidth = brandLogoWidth * brandListCount;

        $jq('#gdEventListBar ul').css({ 'width': brandListTotalWidth }); // set ul width

        $jq('#eventListBar li:first').before($jq('#eventListBar li:last')); // move last item to front
        $jq('#eventListBar').css({ 'left': '-200px' }); // adjust

        $jq('#gdEventListBarOuter .scrollLeft').click(function () {
            navigateLeft();
        });

        $jq('#gdEventListBarOuter .scrollRight').click(function () {
            navigateRight();
        });


        $jq('#eventListBar li a').each(function () {

            var marginLeft = (listWidth - $jq(this).width()) / 2;
            $jq(this).css("margin-left", marginLeft + "px");
            
            //KD for color
            var getWidth = $jq(this).width();
            $jq(this).css("background-position", "-" + getWidth + "px 0px");
            
            /*$jq(this).hover(
            function () {
            var getWidth = $jq(this).width();
            $jq(this).css("background-position", "-" + getWidth + "px 0px");
            }, function () {
            var getWidth = $jq('#eventListBar li a').width();
            $jq(this).css("background-position", "0px 0px");
            });*/
        });

    });

    // nav left
    function navigateLeft() {
        var leftIndent = parseInt($jq('#eventListBar').css('left')) + brandLogoWidth;

        $jq('#eventListBar:not(:animated)').animate({ 'left': leftIndent }, 500, function () {
            $jq('#eventListBar li:first').before($jq('#eventListBar li:last'));
            $jq('#eventListBar').css({ 'left': '-200px' });
        });
    }

    // nav right
    function navigateRight() {
        var leftIndent = parseInt($jq('#eventListBar').css('left')) - brandLogoWidth;

        $jq('#eventListBar:not(:animated)').animate({ 'left': leftIndent }, 500, function () {
            $jq('#eventListBar li:last').after($jq('#eventListBar li:first'));
            $jq('#eventListBar').css({ 'left': '-200px' });
        });
    }

} (window.gds = window.gds || {}, jQuery));