var renderArea = document.getElementById('render');

var button1 = document.getElementById('addFrameBtn');

var input1 = document.getElementById('currentFrame');

var notes;

var data = [];

​

var refresh = function (){

  var result = "",

      frange,

      content,

      i;

  // Empty Array

  data = [];

  for(i=0;i<notes.length; i++) {

    frange = notes[i].getAttribute('data-frange');

    content = notes[i].value;   

    data.push({f:frange, c:content});

  }

  render();

};

​

​

var addNote = function(e){

  var attr = input1.value;

  var n = document.createElement('textarea');

  var p = document.getElementById('notesContainer');

  removeNoteListeners();

  n.className = 'note';

  n.setAttribute('data-frange', attr);

  p.appendChild(n);

  addNoteListeners();

  refresh();

};

​

var refreshNotesArray = function(){

  console.log("refresh");

  notes = document.getElementsByClassName('note');

};

​

var removeNoteListeners = function(){

  var note,i;

  for(i=0; i<notes.length; i++){

    note = notes[i];

    note.removeEventListener('keyup', refresh );

  }

};

​

var addNoteListeners = function(){

  var note,i;

  refreshNotesArray();

  for(i=0; i<notes.length; i++){

    note = notes[i];

    note.addEventListener('keyup', refresh, false );

  }

};

​

var focus = function(i){

  console.log(i);

  notes[i].focus();

};

​

var syncDiv2Textarea = function(div, i){

  var content = div.innerHTML;

  notes[i].value = content;

};

​

var render = function(){

  var arr = data;

  // Clear Contents

  while (renderArea.firstChild) {

    renderArea.removeChild(renderArea.firstChild);

  }

  //Build Divs

  for (i=0; i<arr.length; i++){

    str = "";

    if(arr[i]){

      if(arr[i].f) str = str + arr[i].f;

      //if(arr[i].f) str = str + "-" + arr[i].f;

      var div = document.createElement('div');

      var label = document.createElement('span');

      var content = document.createElement('div');

      label.innerHTML = str;

      content.innerHTML = arr[i].c;

      div.className = "noteRender";

      label.className= "noteLabelRender";

      content.className = "noteContentRender";

      div.appendChild(label);

      div.appendChild(content);

      renderArea.appendChild(div);

      content.contentEditable = true;

      (function(content, i, str) {

          content.addEventListener("keyup", function(e) {syncDiv2Textarea(content, i);});

          content.addEventListener("focus", function(e) {console.log(str);});

      })(content, i, str);   

​

    }

  }

  return;

};

​

​

var init = function() {

  button1.addEventListener('click', addNote );

  addNoteListeners();

  refresh();

};

​

init();