var animating = false,

position = 0,
detail = {};

var X_OFFSET = 50,

Y_OFFSET = 50,
SLIDE_WIDTH,
SLIDE_HEIGHT;

$(function(){

SLIDE_WIDTH = $(".slide").outerWidth();
SLIDE_HEIGHT = $(".slide").outerHeight();

positionSlides();
bindKeys();
bindTouch();

});

function positionSlides() {

var initialPos = -(SLIDE_WIDTH / 2);

if (window.location.hash) {
  where = window.location.hash.slice(1).split(",");
  position = parseInt(where[0]);
  detail[position] = parseInt(where[1]) || 0;
  initialPos -= (SLIDE_WIDTH + X_OFFSET) * position;
}

$(".slide:not(.continue)").each(function(i){
  $(this).css("margin-left", initialPos);
  $(this).addClass("group-" + i);

  var yPos = (SLIDE_HEIGHT / 2) + Y_OFFSET;
  $(this).nextUntil(":not(.continue)").each(function(){
    $(this).css({
      "margin-left": initialPos,
      "margin-top": yPos
    });

    $(this).addClass("group-" + i);

    yPos += (SLIDE_HEIGHT + Y_OFFSET);
  });

  initialPos += SLIDE_WIDTH + X_OFFSET;
});

}

function bindKeys() {

$(document).bind("keydown", "left", function(){
  if (animating || position == 0)
    return;

  $(".slide").each(moveX(1));
});

$(document).bind("keydown", "right", function(){
  if (animating || position + 1 == $(".slide:not(.continue)").length)
    return;

  $(".slide").each(moveX(-1));
});

$(document).bind("keydown", "up", function(){
  var d = detail[position],
      group = $(".group-" + position);

  if (animating || d == 0)
    return;

  group.each(moveY(1));
});

$(document).bind("keydown", "down", function(){
  var d = detail[position],
      group = $(".group-" + position);

  if (animating || d + 1 == group.length)
    return;

  group.each(moveY(-1));
});

}

function bindTouch() {

var startX, endX;
$(".slides").bind("touchstart", function(e){
  startX = e.originalEvent.touches[0].pageX;
});

$(".slides").bind("touchmove", function(e){
  endX = e.originalEvent.touches[0].pageX;
  e.preventDefault();
});

$(".slides").bind("touchend", function(e){
  if ((startX - endX) > 50)
    $(".slide").each(moveX(-1));
  else if ((endX - startX) > 50)
    $(".slide").each(moveX(1));
});

}

function moveX(diff) {

animating = true;
position -= diff;

if (detail[position] == undefined)
  detail[position] = 0;

return function(){
  $(this).animate({
    "margin-left": getLeft($(this)) + ((SLIDE_WIDTH + X_OFFSET) * diff)
  }, {
    "duration": 250,
    "complete": (function(){
      animating = false;
      window.location.hash =
        position + "," + detail[position];
    })
  });
};

}

function moveY(diff) {

animating = true;
detail[position] -= diff;
return function(){
  $(this).animate({
    "margin-top": getTop($(this)) + ((SLIDE_HEIGHT + Y_OFFSET) * diff)
  }, {
    "duration": 250,
    "complete": (function(){
      animating = false;
      window.location.hash =
        position + "," + detail[position];
    })
  });
};

}

function getLeft(ele) {

return parseInt(ele.css("margin-left"), 10);

}

function getTop(ele) {

return parseInt(ele.css("margin-top"), 10);

}