$(document).ready(function() {
	$('.imageNavigation .items').wrapInner('<div class="wrapper"/>');
	var totalWidth = 0;
	var outerWidth = $('.imageNavigation .items').width();
	var difference = 0;
	var steps = 0;
	var faktor = 0
	var currentStep = 0;
	var a = 0;
	var b = 0;

	$('.imageNavigation .items .wrapper img').each(function() {
		var width = $(this).width();
		var marginLeft = parseInt($(this).css("margin-left").replace(/px/, ""));
		var marginRight = parseInt($(this).css("margin-right").replace(/px/, ""));
		totalWidth += width + marginLeft + marginRight;
	});

	difference = totalWidth - outerWidth;
	steps = Math.floor(totalWidth/outerWidth);
	faktor = 100 / steps / 100;

	if(totalWidth > outerWidth) {
		$('.imageNavigation .nextButton').css("display", "block");
		$('.imageNavigation .prevButton').css("display", "block");
	}

	$('.imageNavigation .nextButton').click(function() { goToStep('next'); });
	$('.imageNavigation .prevButton').click(function() { goToStep('prev'); });
	
	function goToStep(step) {
		if(step == "next") currentStep++;
		if(step == "prev") currentStep--;

		if(currentStep > steps) currentStep = steps;
		if(currentStep < 0) currentStep = 0;

		var marginLeft = -(difference * faktor * currentStep);
		$('.imageNavigation .items .wrapper').animate({"margin-left": marginLeft + "px"});
	}
});