jQuery(function ($) {

    $('#networkCarousel .carouselWrapper').css('padding', '2px 38px').css('width', '480px');

    $('#networkCarousel .carouselControls').html('<a href="#" class="networkCarouselPrev inactiveLeft">previous</a> <a href="#" class="networkCarouselNext">next</a>');
    $('#networkCarousel .carouselFrames').css('width', '480px');
    $('#networkCarousel .carouselWrapper').serialScroll({
        target: '.carouselFrames',
        lazy: true,
        items: 'li',
        prev: 'a.networkCarouselPrev',
        next: 'a.networkCarouselNext',
        offset: 0,
        start: 0,
        duration: 400,
        force: true,
        stop: true,
        lock: false,
        cycle: false, //change to true to go back beginning once you reach the end
        jump: false,
        constant: false,
        exclude: 4,
        onBefore: function (e, elem, $pane, $items, pos) {
            var $controls = $pane.closest('.carouselWrapper').find('.carouselControls');
            $controls.find('a.networkCarouselNext').removeClass('inactiveRight');
            $controls.find('a.networkCarouselPrev').removeClass('inactiveLeft');
            if (pos == 0) {
                $controls.find('a.networkCarouselPrev').addClass('inactiveLeft');
            }
            if ((($items.length) - pos) == 6) {
                $controls.find('a.networkCarouselNext').addClass('inactiveRight');
            }
        }

    });
    // Page loads, do what the function below does.
    var $carouselID = 'carousel1';
    $('#networkCarousel .carouselFrames').trigger('goto', [0]);
    $('#networkCarousel .carouselWrapper').hide();
    $('#' + $carouselID).show();
    //alert(($('#'+$carouselID).find('ul').children().size()));
    if (($('#' + $carouselID).find('ul').children().size()) < 7) {
        $('#networkCarousel .carouselControls').hide();
        var $width = 96 * ($('#' + $carouselID).find('ul').children().size());
        $('#networkCarousel .carouselWrapper').css('padding', '2px 3px').css('width', $width + 'px');
        $('#networkCarousel .carouselFrames').css('width', $width + 'px');
    }
    else {
        $('#networkCarousel .carouselControls').show();
        $('#networkCarousel .carouselWrapper').css('padding', '2px 38px').css('width', '480px');
        $('#networkCarousel .carouselFrames').css('width', '480px');
    }

    $('.carouselWrapper a.networkCarouselPrev').removeClass('inactiveLeft');
    $('.carouselWrapper a.networkCarouselNext').removeClass('inactiveRight');

    // Slected index changed function
    $('select').change(function () {
        var $carouselID = $(this).attr("value");
        if ($carouselID != "") {

            $('#networkCarousel .carouselFrames').trigger('goto', [0]);
            $('#networkCarousel .carouselWrapper').hide();
            $('#' + $carouselID).show();
            //alert(($('#'+$carouselID).find('ul').children().size()));
            if (($('#' + $carouselID).find('ul').children().size()) < 7) {
                $('#networkCarousel .carouselControls').hide();
                var $width = 96 * ($('#' + $carouselID).find('ul').children().size());
                $('#networkCarousel .carouselWrapper').css('padding', '2px 3px').css('width', $width + 'px');
                $('#networkCarousel .carouselFrames').css('width', $width + 'px');
            }
            else {
                $('#networkCarousel .carouselControls').show();
                $('#networkCarousel .carouselWrapper').css('padding', '2px 38px').css('width', '480px');
                $('#networkCarousel .carouselFrames').css('width', '480px');
            }

            $('.carouselWrapper a.networkCarouselPrev').removeClass('inactiveLeft');
            $('.carouselWrapper a.networkCarouselNext').removeClass('inactiveRight');

        }
    });
});