var currentElement = 0;
var absoluteElement = 0;
var numberOfElements = 0;
var widthOfElements = 0;
var gameCollection, gameContainer;

function setText() {
	$('#texts').children('.text').hide().end().children('.text:nth-child('+ (absoluteElement + 1) +')').show();
}

$(function () {
	gameCollection = $('.game');
	gameContainer = $('#games');
	numberOfElements = $('.game').size();
	$('#texts .text:not(:first)').hide();
	
	$('#leftarrow').click(function() {
		gameContainer.stop(true, false);
		if(currentElement > 0) {
			gameContainer.animate({ left: --currentElement * -415}, 1500, 'easeOutQuad', setText);
		} else {
			gameContainer.prepend($('.game:last')).css('left', parseFloat(gameContainer.css('left')) - 415).animate({ left: 0}, 1500, 'easeOutQuad', setText);
		}
		absoluteElement--;
		if(absoluteElement < 0) {
			absoluteElement = numberOfElements - 1;
		}
	});
	$('#rightarrow').click(function() {
		gameContainer.stop(true, false);
		if(currentElement < numberOfElements - 1) {
			gameContainer.animate({ left: ++currentElement * -415}, 1500, 'easeOutQuad', setText);
		} else {
			gameContainer.append($('.game:first')).css('left', parseFloat(gameContainer.css('left')) + 415).animate({ left: currentElement * -415}, 1500, 'easeOutQuad', setText);
		}
		absoluteElement++;
		if(absoluteElement > (numberOfElements - 1)) {
			absoluteElement = 0;
		}
	});
	$(document.documentElement).keyup(function (event) {
	  if (event.keyCode == 37) {
		  $('#leftarrow').click();
	  } else if (event.keyCode == 39) {
		  $('#rightarrow').click();
	  }
	});
});