var board, marker;

var input = {
  width  : $("#marker-width"),
  height : $("#marker-height"),
  snapX  : $("#snap-x"),
  snapY  : $("#snap-y"),
  size   : $("#board-size")
};

$("form").submit(init);

// BOARD ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
board = {
  _bounds : null,
  size    : null,
  target  : $("#board"),

  get bounds() { return this._bounds || this.target[0].getBoundingClientRect(); },
  set bounds(bounds) { this._bounds = bounds; },

  get cols() { return Math.floor(100 / marker._snapX); },
  get rows() { return Math.floor(100 / marker._snapY); },

  get width() { return this.bounds.width; },
  get height() { return this.bounds.height; }
}

// MARKER :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
marker = {
  _snapX   : null,
  _snapY   : null,
  target   : $("#marker"),
  dragger  : createDraggable("#marker"),
  width    : null,
  height   : null,
  xPercent : 0,
  yPercent : 0,

  get snapX() { return this._snapX + 100 % this._snapX / board.cols; },
  set snapX(snapX) { this._snapX = snapX; },

  get snapY() { return this._snapY + 100 % this._snapY / board.rows; },
  set snapY(snapY) { this._snapY = snapY; },

  get x() { return this.dragger.x; },
  get y() { return this.dragger.y; }
};

init();

// DRAGGABLE ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
function createDraggable(target) {

  return new Draggable(target, {
    type      : "top,left",
    onPress   : onPress,
    onDrag    : onDrag,
    onRelease : onRelease
  });
}

function onPress() {

  // this will cause it to recalculate
  board.bounds = null;

  setAbsolute();
  this.update();
}

function onRelease() {

  board.bounds = null;

  this.update();
  setRelative();
}

function onDrag() {

  // snap the marker when it's on the board
  if (this.hitTest(board.target)) {

    // calculate position as a percent
    var xPercent = this.x / board.width  * 100;
    var yPercent = this.y / board.height * 100;

    // calculate snap as a percent and store the value
    marker.xPercent = Math.round(xPercent / marker.snapX) * marker.snapX;
    marker.yPercent = Math.round(yPercent / marker.snapY) * marker.snapY;

    // set snap value in px
    TweenLite.set(this.target, {
      left : board.width  * marker.xPercent / 100,
      top  : board.height * marker.yPercent / 100
    });

  } else {
    marker.xPercent = 0;
    marker.yPercent = 0;
  }
}

// POSITIONING ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
function setAbsolute() {

  // calculate px value
  var left = marker.xPercent * board.width  / 100;
  var top  = marker.yPercent * board.height / 100;

  TweenLite.set(board.target, { zIndex: 30 });
  TweenLite.set(marker.target, { left: left, top: top });
}

function setRelative() {

  // if the percent isn't set, calculate it
  marker.xPercent = marker.xPercent || marker.x / board.width  * 100;
  marker.yPercent = marker.yPercent || marker.y / board.height * 100;

  TweenLite.set(board.target, { zIndex: 10 });
  TweenLite.set(marker.target, {
    left : marker.xPercent + "%",
    top  : marker.yPercent + "%"
  });
}

// SIZING :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
function updateSize() {

  var winWidth  = window.innerWidth;
  var winHeight = window.innerHeight;
  var landscape = (winWidth > winHeight);

  var min  = Math.min(winWidth, winHeight);
  var max  = Math.max(winWidth, winHeight);
  var size = board.size * min / 100;

  TweenLite.set(board.target, {
    xPercent   : -50,
    yPercent   : -50,
    width      : size / (landscape ? max : min) * 100 + "%",
    paddingTop : size / (landscape ? max : min) * 100 + "%"
  });

  TweenLite.set(marker.target, {
    width  : marker.width  + "%",
    height : marker.height + "%"
  });
}

// GRID :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
function createGrid() {

  // remove previous cells
  $(".cell").remove();

  for (var row = 0; row < board.rows; row++) {
    for (var col = 0; col < board.cols; col++) {

      // skip every other one to create a checkerboard pattern
      if (((row % 2) && !(col % 2)) || (!(row % 2) && (col % 2))) continue;

      var target = $("<div class='cell' />").appendTo(board.target);

      TweenLite.set(target, {        
        width  : marker.snapX + "%",
        height : marker.snapY + "%",
        left   : col * marker.snapX + "%",
        top    : row * marker.snapY + "%"
      });
    }
  }
}

// INIT :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
function init(event) {

  // prevent when called by submit
  event && event.preventDefault();

  // cast input values to numbers
  board.size    = +input.size.val();
  marker.snapX  = +input.snapX.val();
  marker.snapY  = +input.snapY.val();
  marker.width  = +input.width.val();
  marker.height = +input.height.val();

  createGrid();
  updateSize();

  // snap the marker
  if (Draggable.hitTest(marker.target, board.target)) {
    onDrag.call(marker.dragger);
  	onRelease.call(marker.dragger);
  }
}