$(document).ready(function() {
	// Set the different image heights
	var wS = '96'
	var hS = '61'
	var wL = '157'
	var hL = '107'
	// How many items are there?
	var totalCarItems = $('#cdrCarousel > ul > li').length;
	// Set the base item width
	var itemWidth =  $('#cdrCarousel > ul > li:first').outerWidth(true);
	// Total item width before we mess with the DOM...
	var totalCarWidthPre = ((totalCarItems * itemWidth));
	// Total item width after we mess with the DOM...
	var totalCarWidthPost = (((itemWidth * 2) * totalCarItems));
	// Set the Carousel div css overflow to hidden
	$('#cdrCarousel').css({ overflow: 'hidden' })
	// Clone the 5 items and insert them before the first item
	$('#cdrCarousel > ul > li:first').before($('#cdrCarousel > ul > li').slice(- 5).clone().addClass('cloned'));
	// Clone the 5 items and insert them after the last item
	$('#cdrCarousel > ul > li:last').after($('#cdrCarousel > ul > li').slice(5).clone().addClass('cloned'))
	// Base ul width
	var ulWidth = 0;
	// Loop through the <li> elements and add them up for our total <ul> width
	$('#cdrCarousel > ul > li').each(function(i) {
		ulWidth += $(this).outerWidth(true) + 5;
	});
	// Set the first 'active' item and setup it's surrounding items
	$('#cdrCarousel > ul > li > a > img').eq(7).css({ width: wL+'px', height: hL+'px' }).parent().parent().addClass('active').children('div').css({ marginTop: '0', visibility: 'visible' });
	// Set the width of the <ul> from our above loop
	$('#cdrCarousel > ul').css('width', ulWidth);
	// Scroll our Carousel <div> to the correct starting left position
	$('#cdrCarousel').scrollLeft(totalCarWidthPre);
	$('#cdrCarouselContent > ul > li').eq(2).show();

	// Previous button click function
	$('#previousButton').click(function(){
		$('*:animated').stop(true,true);
		// Animate the Carousel to the previous video
		$('#cdrCarousel').animate({ scrollLeft : '-=' + itemWidth }, 1000, function () {
			// If we've reached the end of the Carousel, reset it back to the begining
			if ($(this).scrollLeft() == 0) {
				$('#cdrCarousel').scrollLeft(totalCarWidthPre);
				$('.active > a > img').css({ width: wS+'px', height: hS+'px' }).parent().prev('div').css({ visibility: 'hidden', marginTop: '25px' });
				$('#cdrCarousel > ul > li.active').removeClass('active')
				$('#cdrCarousel > ul > li > a > img').eq(7).css({ width: wL+'px', height: hL+'px' }).parent().parent().addClass('active').children('div').css({ marginTop: '0', visibility: 'visible' });
			}
		});
		// Reset the .active class to the previous <li> and reset the image heights and widths
		$('.active > a > img').animate({ width: wS+'px', height: hS+'px' }, 200).parent().prev('div').css({ visibility: 'hidden', marginTop: '25px' });
		$('#cdrCarousel > ul > li.active').removeClass('active').prev().addClass('active');
		$('.active > a > img').animate({ width: wL+'px', height: hL+'px' }, 200).parent().prev('div').css({ visibility: 'visible', marginTop: '0px' });
		// Show the appropriate panel information box
		var currentVideo = $('.active').children('div').text();
		var whichPanel = parseFloat(currentVideo.charAt(6) - 1);
		$('#cdrCarouselContent > ul > li').hide();
		$('#cdrCarouselContent > ul > li').eq(whichPanel).show();
	});
	
	// Next button click function
	$('#nextButton').click(function(){
		$('*:animated').stop(true,true);
		// Animate the Carousel to the next video
		$('#cdrCarousel').animate({ scrollLeft : '+=' + itemWidth }, 1000, function () {
			// If we've reached the end of the Carousel, reset it back to the begining
			if ($(this).scrollLeft() == totalCarWidthPost) {
				$('#cdrCarousel').scrollLeft(totalCarWidthPre);
				$('.active > a > img').css({ width: wS+'px', height: hS+'px' }).parent().prev('div').css({ visibility: 'hidden', marginTop: '25px' });
				$('#cdrCarousel > ul > li.active').removeClass('active')
				$('#cdrCarousel > ul > li > a > img').eq(7).css({ width: wL+'px', height: hL+'px' }).parent().parent().addClass('active').children('div').css({ marginTop: '0', visibility: 'visible' });
			}
		});
		// Reset the .active class to the next <li> and reset the image heights and widths
		$('.active > a > img').animate({ width: wS+'px', height: hS+'px' }, 200).parent().prev('div').css({ visibility: 'hidden', marginTop: '25px' });
		$('#cdrCarousel > ul > li.active').removeClass('active').next().addClass('active');
		$('.active > a > img').animate({ width: wL+'px', height: hL+'px' }, 200).parent().prev('div').css({ visibility: 'visible', marginTop: '0px' });
		// Show the appropriate panel information box
		var currentVideo = $('.active').children('div').text();
		var whichPanel = parseFloat(currentVideo.charAt(6) - 1);
		$('#cdrCarouselContent > ul > li').hide();
		$('#cdrCarouselContent > ul > li').eq(whichPanel).show();
	});
});