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");
        $('#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');
    });
});