clearInterval(headerSliderIntervalHandle);

$(function(){
	var isAnimating = false;
	var picturesNum = 3;
	var currentPictureNum = 1;
	var interval = 8000;
	var picWidth = 862;
	var currSpaceShown = 4;
	var animationAutoDuration = 1000;
	var animationClickDuration = 300;
	var $picturesCont = $("div.id_pictures");
	
	var changeAuto = function() {
		changePictureAutomatically();
	};
	headerSliderIntervalHandle = setInterval(changeAuto, interval);
	$("div.header_nav").click(function(event){
		event.preventDefault();
		var $target = $(event.target);
		if(!$target.is("a")) {
			return;
		}		
		
		if(isAnimating) {
			return;
		}		
		isAnimating = true;
		
		var prevPictureNum = currentPictureNum;
		currentPictureNum = $target.attr("id").replace("header_nav_", "");
		currentPictureNum = parseInt(currentPictureNum);
		
		if(currentPictureNum > prevPictureNum) {
			var picNumDiff = 1;
			picNumDiff = currentPictureNum - prevPictureNum;
			if(currSpaceShown == picturesNum + 1) {
				updatePictures(picNumDiff);			
			} else if(currSpaceShown + picNumDiff <= picturesNum + 1){
				currSpaceShown += picNumDiff;
			} else {
				var pictureCountToUpdate = currSpaceShown + picNumDiff - (picturesNum + 1); 
				updatePictures(pictureCountToUpdate);
				currSpaceShown = picturesNum + 1; // last space
			}
		} else if(currentPictureNum < prevPictureNum) {
			picNumDiff = prevPictureNum - currentPictureNum;
			currSpaceShown -= picNumDiff; 
		}
		 
		showPicture(false, function(){
			isAnimating = false;
		});
 
		clearInterval(headerSliderIntervalHandle);
		headerSliderIntervalHandle = setInterval(changeAuto, interval);
	});
	
	
	function changePictureAutomatically() {
		if(isAnimating) {
			return;
		}
		isAnimating = true;
		
		var nextPictureNum = 1;
		if(currentPictureNum < picturesNum) {
			nextPictureNum = currentPictureNum + 1;
		} 
		currentPictureNum = nextPictureNum;
		
		if(currSpaceShown == picturesNum + 1) {
			updatePictures(1);
		} else if(currSpaceShown < picturesNum + 1){
			currSpaceShown ++;
		}
		
		showPicture(true, function(){
			isAnimating = false;
		});
	}
	
	function showPicture(isAuto, isAnimatingCallback) {				
		var scrollAmount = (currSpaceShown - 1) * (- picWidth);
		$('.header_nav_active').removeClass('header_nav_active');
		$('#header_nav_' + currentPictureNum).addClass('header_nav_active');
		
		var animationDuration = animationAutoDuration;
		if(!isAuto) {
			animationDuration = animationClickDuration;
		}
		
		$picturesCont.animate({
			"margin-left": scrollAmount
		}, animationDuration, function() {
			if($.isFunction(isAnimatingCallback)) {
				isAnimatingCallback();
			}
		});
	}	

	function updatePictures(pictureCountToUpdate) {
		var count = 1;
		for(count; count<= pictureCountToUpdate; count++) {
			deleteFirstPicture();
			copyFirstPictureAsLast();
		}
		
		var currMarginAmount = parseInt($picturesCont.css("margin-left"));
		var newMarginAmount = currMarginAmount - (-picWidth) * pictureCountToUpdate;
		$picturesCont.css("margin-left", newMarginAmount);
	}
	
	function copyFirstPictureAsLast() {
		var $firstPic = $("div:first-child", $picturesCont);
		$picToAdd = $firstPic.clone();
		$firstPic.addClass("id_remove");
		$picturesCont.append($picToAdd);
	}
	
	function deleteFirstPicture() {
		var $firstPic = $("div.id_remove", $picturesCont);
		$firstPic.remove();
	}
});