// carosel Javascript File

	$(document).ready(function() {
		
		//Set the variables and arrays
		
		//Count the number of jswrappers with style of count
		var max_jswrapper = $('div.count').size();
		var gameWidthVar = new Array(max_jswrapper);
		var gameInnerWidthVar = new Array(max_jswrapper);
		var animateVarWidth = new Array(max_jswrapper);
		var countClick = new Array(max_jswrapper);

		
		//Loops through the jswrappers adding functionality
		for (var i = 1; i <= max_jswrapper; i++) {
			
			//Removes the nonjs class and adds new js class
			$('#js_wrapper_' + i).removeClass('nonjs_wrapper');
			$('#js_wrapper_' + i).addClass('js_wrapper');
			
			//Count the game wrappers
			$.gamecount = $('#js_wrapper_' + i + ' div.gamewrapper').size();
			
			//Get the width of the game wrapper 
			gameWidthVar[i-1] = $('#js_wrapper_' + i).width();
		
			//Mulitply the width of game wrapper by game count to get innerwidth
			gameInnerWidthVar[i-1] = $.gamecount * gameWidthVar[i-1];
			
			//Apply the width to the js_innerwrapper
			$('#js_innerwrapper_' + i).css('width', gameInnerWidthVar[i-1]);
			
			//Hide the back button when the page loads
			$('#carosel_back_' + i).css('visibility', 'hidden');
			
			//Hide the forward button if there is only one game
			if($.gamecount <= 1){
				$('#carosel_forward_' + i).css('visibility', 'hidden');
			}
			
			//Apply the IE6 png fix to the images
			$('div.js_wrapper img').css('behavior', 'url(js/iepngfix.htc)');
			
			//Sets the button click variable
			countClick[i] = 1;
		
		
			//Assigns an onclick function to the forward button and binds the countClick variable
			$('#carosel_forward_' + i).bind('click', {msg: i}, function(event){
	
				//Count the gamewrappers
				$.gameCount = $(this).parent().find('.gamewrapper').size();
				//Get the width of the outer container
				$.getWidth = $(this).parent().parent().parent().parent().width();
				//Work out the total width
				$.totalWidth = $.getWidth * $.gameCount;
				
				//Make the back button visible
				$(this).parent().find('.carosel_back').css('visibility', 'visible');
				
				//Add 1 to the count click
				countClick[event.data.msg] += 1;
				
				//If the count click is the same as game count, hide the the forward button
				if (countClick[event.data.msg] == $.gameCount) {
					$(this).parent().find('.carosel_forward').css('visibility', 'hidden')
				}	
				
				//Slide the innerwrapper to the left
				$(this).parent().find('.js_innerwrapper').animate({
					left: "-=" + $.getWidth
				}, 1200, 'easeOutSine');

				return false;
			});
			
			
			//Assigns an onclick function to the back button and binds the countClick variable
			$('#carosel_back_' + i).bind('click', {msg: i}, function(event){
				
				//Count the gamewrappers
				$.gameCount = $(this).parent().find('.gamewrapper').size();
				//Get the width of the outer container
				$.getWidth = $(this).parent().parent().parent().parent().width();
				//Work out the total width
				$.totalWidth = $.getWidth * $.gameCount;
				
				//Make the forward button visible
				$(this).parent().find('.carosel_forward').css('visibility', 'visible');
				
				//Add 1 to the count click
				countClick[event.data.msg] -= 1;
				
				//If the count click is the same as game count, hide the the back button
				if (countClick[event.data.msg] == 1) {
					$(this).parent().find('.carosel_back').css('visibility', 'hidden')
				}	
				
				//Slide the innerwrapper to the right
				$(this).parent().find('.js_innerwrapper').animate({
					left: "+=" + $.getWidth
				}, 1200, 'easeOutSine');
				
				return false;
			});
		
		}
			
	});