//Wait for jsPLumb library to load
jsPlumb.ready(function() {


// Double cliclk to add a node.
//---------------------------------------------------------
  var i = 0;
  var a = 0;

  $('#container').dblclick(function(e) {

    //Create divs to be inserted into the container
    var newState = $('<div>').attr('id', 'state' + i).addClass('item');
    var title = $('<div>').addClass('title');
    var stateName = $('<input>').attr('type', 'text');    // input for name
    title.append(stateName);



    var addChoice = $('<button>').text('Add Choice').attr('id', a);

    var connect = $('<div>').addClass('connect');

    // ensure that the div is placed where the user double clicks
    newState.css({
      'top': e.pageY,
      'left': e.pageX
    });

    // Makes the new div  a target
    jsPlumb.makeTarget(newState, {
      anchor: 'TopLeft'
    });

    // Makes the new div Draggable
    jsPlumb.draggable(newState, {
      containment: 'parent'
    });

    // Makes the connect div a source
    jsPlumb.makeSource(connect, {
      parent: newState,
      anchor: 'Continuous',
      endpoint: 'Rectangle'
    });

    // When you double click on the div, it disappears
    /*newState.dblclick(function(e) {
      jsPlumb.detachAllConnections($(this));
      // alert(this.id);
      $(this).remove();
      e.stopPropagation();
    });*/

    // Function that links to button to add new div
    addChoice.click(function(e) {
        var pDoc = document.getElementById(this.id);
        var parent = (pDoc.parentNode.id);

        var choice = $('<div>').addClass('title');    // make class "choice" and add .addClass(choice);
        var choiceInput = $('<input>').attr('type', 'text');    // input for name
        choiceInput.keyup(function(e) {
          if (e.keyCode === 13) {
            $(this).parent().text(this.value);
          }
        });
        choice.append(choiceInput);
        newState.append(choice);
        choiceInput.focus();

    });



    stateName.keyup(function(e) {
      if (e.keyCode === 13) {
        // THe following is used to reset the id of the div, But use caution because there can be no two identiacal id's
        // var state = $(this).closest('.item');      // Find the div that represents the state.
        // state.children('.title').text(this.value); // Change the title text.
        // state.attr('id', this.value);              // Alter the id of the div.

        $(this).parent().text(this.value);          // Sets the value of the text equal to the input
      }
    });
    stateName.focus();

    // At the connect divs to the main newState div
    newState.append(title);
    newState.append(addChoice);
    newState.append(connect);

    // Add the div to the container
    $('#container').append(newState);


    i++;

  });

});