// Callback function when cancelling the event
function cancel(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }
  return false;
}

function refresh_total_costs(total_costs){

  $('#total-costs span').text(total_costs);
}

$(document).ready(function() {

    var total_costs = 0;

    refresh_total_costs(total_costs);

    // Get the #drop zone
    var drop = document.getElementById('drop');

    var draggedItem = null;

    // Add the Event Listener to each draggable item
    $('.dragable-item').each(function(index){
      $(this)[0].addEventListener('dragstart',function(e){

        draggedItem = jQuery(this);

        e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work

      },false);
    });


    drop.addEventListener('dragover', cancel);
    drop.addEventListener('dragenter', cancel);

    drop.addEventListener('drop', function (e) {

       e.preventDefault();

       var html = "<a id='parentDiv' style='margin-left: 10px;'><p id='childDiv' class='number'>" + $(draggedItem).data('title') + "</p></a><br /><input type='button' value='Remove Element' onClick='removeElement('parent','child');'>";

       $('#output').prepend( html );

       total_costs += parseInt($(draggedItem).data('price'));

       refresh_total_costs(total_costs);

      return false;
    });
});