$(function(){
  // alias for main elements
  var $container = $("#news_container");
  var $roller = $("#news_roller");

  // initial position for increase
  var currentPos = 0;

  // standard increase/decrease for images
  var posIncrease = 579;

  // total of images (minus the 4 for loop effect)
  var totalImages = $container.find("img").length;

  var totalSize = totalImages * posIncrease;

  var offset = (955 - posIncrease) / 2;

  // check if animation is rolling
  var isAnimating = false;

  $container.animate({"left":currentPos}, 500, animationEnded);

  // function for changes
  function rollImages(forward){
    currentPos = forward ? currentPos - posIncrease : currentPos + posIncrease;

    if((currentPos + 10)  > totalSize){
      currentPos = 0;
    } else if(currentPos -10 < 0){
      currentPos = totalSize - posIncrease;
    }

    // change animation flag
    isAnimating = true;

    $container.animate({"left":(-currentPos + offset)}, 500, animationEnded);
  }

  function animationEnded(){
    isAnimating = false;
  }

  // bind click
  $roller.find(".left").click(function(){
    if(isAnimating){
      return false;
    }
    rollImages(true);
  });
  $roller.find(".right").click(function(){
    if(isAnimating){
      return false;
    }
    rollImages(false);
  });
});