var viewSize = 4;
var imageSize = 150;
var transitionSize = 4;
var totalImages;
var wait = 0;

$(function(){
  totalImages = $('#imageBoxInside').children().length;  
  handleControls();
  $("#control-previous").click(function () {
    if (wait == 0 && parseInt($('#imageBoxInside').css('left')) < 0) {
      wait = 1;
      moveToPrevious();
    };
  });
  $("#control-next").click(function () {
    if (wait == 0 && parseInt($('#imageBoxInside').css("left")) > -((imageSize * totalImages) - (imageSize * viewSize))) { 
      wait = 1;
      moveToNext();
    };
  });
});

function moveToPrevious() { 
  var sLeft = parseInt($("#imageBoxInside").css("left")) + (imageSize * transitionSize);
  $("#imageBoxInside").animate({left: sLeft}, 'slow',function() {wait = 0;handleControls();});   
};

function moveToNext() {
  var sLeft = parseInt($("#imageBoxInside").css("left")) - (imageSize * transitionSize);
  $("#imageBoxInside").animate({left: sLeft },'slow', function() {wait = 0;handleControls()});  
};

function handleControls() {
  var pos = Math.round(parseInt($("#imageBoxInside").css("left").replace("-","")) / imageSize);
  if (pos == 0) {
    $("#control-previous").addClass("disabled-control");
  } else {
     $("#control-previous").removeClass("disabled-control");
  };  
  if (pos >= (totalImages - viewSize)) {
    $("#control-next").addClass("disabled-control");
  } else {
    $("#control-next").removeClass("disabled-control");
  };  
}