var Board = function( $board ) {
  this.$board = $board;
  this.$board.on("click", this.addPostIt.bind(this));
};

Board.prototype.addPostIt = function() {
  var postIt = new PostIt(event.pageX, event.pageY);
  this.$board.append(postIt.$el);
};

var PostIt = function(x, y) {
  this.$el = $(PostIt.templateHTML).css({ position: 'absolute', left: x, top: y });
  this.$el.on('click', function($event) {
    $event.stopPropagation();
  });
  this.$el.draggable({ handle: ".header" });
  this.$el.resizable();
  this.$el.find('.delete').on("click", this.deletePostIt.bind(this));
};

PostIt.prototype.deletePostIt = function($event) {
  $event.stopPropagation();
  this.$el.remove();
};

$(function() {
  new Board($('#board'));
  PostIt.templateHTML = $('[data-name=post-it][type="text/html-template"]').text().trim();
});