var treeCreator = function(){};


  treeCreator.prototype.callbacktest = function(svgContainer){
  alert('the element has been dropped');
  };

  treeCreator.prototype.createTreeNode = function(theSVG){
      $('#tobeDropped').remove();
      theSVG.append("circle")
        .style("stroke","green")
        .style("fill","white")
        .attr("r",40)
        .attr("cx", 100)
        .attr("cy", 100)
        .on("mouseover", function () {
            d3.select(this).style("fill", "aliceblue");
        })
            .on("mouseout", function () {
            d3.select(this).style("fill", "red");
        });
 };

 $(document).ready(function(){

    $('#tobeDropped').draggable({containment:'#mainContainer'});

var theSVG = d3.select('#dropInSVG')
.append("svg")
.attr("width",200)
.attr("height",200);

var positionLabel = theSVG.append("text")
                .attr("x", 10)
                .attr("y", 30).text("begin log");
 theSVG.on("mousemove", function () {
            var position = d3.mouse(this);
            positionLabel.text(position);
        });

var tc = new treeCreator();

$('#dropInSVG').droppable({
    drop: function(){
        tc.createTreeNode(theSVG);
    }
});

  });

function updatePosition() {
  var position = d3.mouse(theSVG.node());
  positionLabel.text(position);
}

var dragging = false;

$('#tobeDropped').draggable({
  containment: '#mainContainer',
  start:       function() { dragging = true; },
  stop:        function() { dragging = false; },
  drag:        updatePosition
});

theSVG.on("mousemove", function () {
  if (dragging) return;
  updatePosition();
});