var boxes = [ "#box1", "#box2", "#box3", "#box4", "#box5", "#box6" ]
var aniboxes = [ false, false, false, false, false, false ]
var offset = 0
// insidebox width + margin (be aware that border increase by 2px)
var boxsize = "170"
var boxsizei = parseInt(boxsize, 10)

function boxoffset(box) {
    // parse out #box[num] and use to calculate position
    var num = box.substring(4)
    var offset = parseInt(num, 10) * boxsizei
    /*window.console.log("box offset for " + box + ", num = " + num + ", offset = " + offset)*/
    return offset
}

function animateMove(id, num, animateX) {
  $(id).animate({
    left: animateX,
  }, 1000, function() {
    aniboxes[num] = false
  })
}

function movePrevious() {
  move(function() {
    if (offset <= 0) {
      var left = (-boxoffset(boxes[boxes.length-1])).toString() + "px"
      $(boxes[boxes.length-1]).css("left", left)
      /*window.console.log("left = " + left + ", for box = " + boxes[boxes.length-1] + ", offset = " + offset)*/
      boxes.unshift(boxes[boxes.length-1])
      boxes.splice(boxes.length-1, boxes.length-1)
    } else offset--
  }, "+=" + boxsize)
}

function moveNext() {
  move(function() {
    if (offset >= 1) {
      var left = ((boxsizei * boxes.length) - boxoffset(boxes[0])).toString() + "px"
      $(boxes[0]).css("left", left)
      /*window.console.log("left = " + left + ", for box = " + boxes[0] + ", offset = " + offset)*/
      boxes.push(boxes.shift())
    } else offset++
  }, "+=-" + boxsize)
}

function move(offsetCheck, animateX) {
  for (var i = 0; i < aniboxes.length; i++)
    if (aniboxes[i])
      return

  offsetCheck();

  for (i in boxes) {
    aniboxes[i] = true
    animateMove(boxes[i], i, animateX)
  }
}