var intervalTime = 20000;
var returnRotationIntervalTime = 20000;
var currentElementId = 1;
var rotationIntervalRef;
var returnRotationIntervalRef;
$(document).ready(function () {
  rotationIntervalRef = setInterval(selectNewLi, intervalTime);
  $('div.NumbersPosition a').click(function(){
    clearInterval(rotationIntervalRef);
    clearInterval(returnRotationIntervalRef);
    currentElementId  = $(this).attr("id");
    changeSelection(currentElementId);
    returnRotationIntervalRef = setInterval(returnRotation, returnRotationIntervalTime);
  });
});

function returnRotation(){
  clearInterval(returnRotationIntervalRef);
  rotationIntervalRef = setInterval(selectNewLi, intervalTime);
}

function selectNewLi(){
  if(currentElementId == 3){
    currentElementId = 0;
  }
  changeSelection(++currentElementId);
}

function changeSelection(newElementId){
  var mainPhotos = $("div.MainPhotos");
  var mainPhotosMask = $("div.MainPhotosMask");
  var newLI = mainPhotos.find("ul li." + newElementId);
  var newPosition = newLI.position().left;
  var itemWidth = newLI.outerWidth();
  mainPhotosMask.animate({scrollLeft: (newElementId - 1) * itemWidth}, 1000);
  $('div.NumbersPosition a.NumberLinkSelected').attr("class", "NumberLink");
  $('div.NumbersPosition a#' + newElementId).attr("class", "NumberLinkSelected");
}