StackOverFlow jsPlumb Test

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.7.16/js/jsplumb.min.js"></script>
<html>
    <head>
        <title></title>
    </head>
<body>
        <div id="main">
			<div id="render"></div>
			<div class="w" id="opened">begin<div class="ep"><img src="http://www.nwoods.com/go/beatpaths/ind_logo-50x50.png"/></div></div>
			<div class="w" id="phone1">phone interview 1<div class="ep"></div></div>
			<div class="w" id="phone2">phone interview 2<div class="ep"></div></div>
			<div class="w" id="inperson">in person<div class="ep"></div></div>
			<div class="w" id="rejected">rejected<div class="ep"></div></div>			
		</div>
</body>
</html>

CSS

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
 	src:local('Open Sans'), 
 		local('OpenSans'),
 		url("../font/OpenSans-Regular.ttf") format('truetype'),
 		url("../font/OpenSans.woff") format('woff'); 		
}

body {
    padding:0;
    margin:0;
    background-color:white;    
    font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;    
}

#explanation {
    text-align: center;
}

#headerWrapper {
	width:100%;
	background-color:black;
	position:fixed;
	top:0;left:0;
    z-index:10000;
	height:44px;
	padding:0;
	border-bottom:1px solid #999;
    box-shadow: 0px 2px 19px #aaa;
   -o-box-shadow: 0px 2px 19px #aaa;
   -webkit-box-shadow: 0px 2px 19px #aaa;
   -moz-box-shadow: 0px 2px 19px #aaa;
   
   opacity:0.8;
}

#header {
	margin-top:0;
    height:44px;
    font-size:13px;
	margin-left:auto;
	margin-right:auto;    
    width:950px;
    background-image:url(logo_bw_44h.jpg);
    background-repeat:no-repeat;    
}

#intro {
	margin-top:59px;
}

 #main {
    /* these two margins settings are here just to ensure that jsPlumb handles
    margins properly.*/  
    margin-top:44px;
    margin-left: auto;
    position: relative;
    font-size: 80%;
    margin-right: auto;
    width: 850px;
    border-left: 2px solid #456;
    border-right: 2px solid #456;
    border-bottom: 2px solid #456;
    height: 600px;
    overflow: hidden;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color:#eaedef;
}

#sidebar {            
    margin-left:auto;
	margin-right:auto;
    width:800px;        
    font-size:13px;    
}


/* demo elements */

.menu,#render, #explanation { 
    
	background-color:#fff;	    
}

.menu {    
    height: 15px;
	float:right;
    padding-top:1em;
    padding-bottom:0.4em;   
    background-color: transparent;
	margin-right:30px;
}

#render {
	padding-top:2px;
    margin-left:auto;
	margin-right:auto;
    z-index:5000;
	margin-top:0px;  
    text-align:...

JavaScript

$(document).ready(function() {


	// helper method to generate a color from a cycle of colors.
	var curColourIndex = 1, maxColourIndex = 24, nextColour = function() {
		var R,G,B;
		R = parseInt(128+Math.sin((curColourIndex*3+0)*1.3)*128);
		G = parseInt(128+Math.sin((curColourIndex*3+1)*1.3)*128);
		B = parseInt(128+Math.sin((curColourIndex*3+2)*1.3)*128);
		curColourIndex = curColourIndex + 1;
		if (curColourIndex > maxColourIndex) curColourIndex = 1;
		return "rgb(" + R + "," + G + "," + B + ")";
	 };	
		

	// setup some defaults for jsPlumb.	
    jsPlumb.importDefaults({
        Endpoint : ["Dot", {radius:2}],
        HoverPaintStyle : {strokeStyle:"#42a62c", lineWidth:2 },
        ConnectionOverlays : [
            [ "Arrow", { 
                location:1,
                id:"arrow",
                length:14,
                foldback:0.8
            } ],
            [ "Label", { label:"FOO", id:"label" }]
        ]
    });
    
    // initialise draggable elements.  
    jsPlumb.draggable($(".w"));
    
    // bind a click listener to each connection; the connection is deleted. you could of course
    // just do this: jsPlumb.bind("click", jsPlumb.detach), but I wanted to make it clear what was
    // happening.
    /* jsPlumb.bind("click", function(c) { 
        jsPlumb.detach(c); 
    }); */
    
    // make each ".ep" div a source and give it some parameters to work with.  here we tell it
    // to use a Continuous anchor and the StateMachine connectors, and also we give it the
    // connector's paint style.  note that in this demo the strokeStyle is dynamically generated,
    // which prevents us from just setting a jsPlumb.Defaults.PaintStyle.  but that is what i
    // would recommend you do. Note also here that we use the 'filter' option to tell jsPlumb
    // which parts of the element should actually respond to a drag start.
    $(".w").each(function(i,e) {			
        jsPlumb.makeSource($(e), {
            filter:".ep",
           ...