var PostIt = function(x, y, boardId) {
  //Create post-it

  var $div = $("<div class='post-it'><div class='header'><a href='#' id='close'>CLOSE</a></div><div class='content' contenteditable='true'></div></div>")

  this.$element = $div;
  var self = this;

  function initialize() {
    $div.draggable({
      handle: '.header',
      containment: '#'+boardId
    });
    $div.css("top", y);
    $div.css("left", x);

    $div.find('#close').on('click', function(e) {
      e.stopPropagation();
      self.remove(e);
    });
    $div.find('.content').on('click', function(e) { e.stopPropagation(); });
    $div.find('.header').on('click', function(e) { e.stopPropagation(); });
  }

  initialize();
};

PostIt.prototype = {
  remove: function(e) {
    $(e.target).parent().parent().remove();
  },

  setContent: function(text) {
    this.$element.find('.content').text(text);
  }
};


var Board = function(id) {
  this.id = id;
  this.$element = $('<div class="post-board" id="'+id+'"></div>')

  var self = this;
  function initialize() {
    self.$element.on('click', function(e) { self.newPostIt(e); });
  };

  initialize();
};

Board.prototype = {
  newPostIt: function(e) {
    var postIt = new PostIt(e.pageX, e.pageY, this.id);
    this.placePostIt(postIt);
  },

  placePostIt: function(postIt) {
    this.$element.append(postIt.$element)
  },

  fromArray: function(postItDataObjects) {
    for (var i in postItDataObjects) {
      var postItData = postItDataObjects[i];
      var postIt = new PostIt(
        postItData.position.left,
        postItData.position.top,
        this.id
      );
      postIt.setContent(postItData.content);
      this.placePostIt(postIt);
    }
  }
};


var BoardManager = function() {
  this.boardNum = 0;

  var self = this;
  function initialize() {
    $(document).on('click', '#new_board', function(e) { self.newBoard(e) });
    $(document).on('click', '#board_list button', function(e) { self.retrieveBoard(e) });
    $(document).on('click', '#load_samples', function(e) { self.loadSamples(e) });
  }

  initialize();
}

BoardManager.prototype = {  

  newBoard: function(e) {
    e.stopPropagation();
    this.addBoard(this.boardNum);
  },

  addBoard: function(id) {
    var board = new Board('post-board-'+id);
    $('.post-board').hide();
    $('body').append(board.$element);

    $('#board_list button').removeClass('current_board');
    $('#board_list').append("<button class='current_board'>"+ id + "</button><br>");
    this.boardNum++;
    return board;
  },

  retrieveBoard: function(e) {
    var boardId = $(e.target).text();
    $('.post-board').hide();
    $('#board_list button').removeClass('current_board');
    $(e.target).addClass('current_board');
    $('#post-board-'+boardId).show();
  },

  loadSamples: function(e) {
    $('#load_samples').remove();
    var self = this;
    $.each(SampleBoards, function(key, value) {
      var board = self.addBoard(key);
      board.fromArray(value);
    });

  }
}

$(function() {
  var boardManager = new BoardManager();
});