splitable and editable timeline

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
<body>
 
<div id="container" class="ui-widget-content">
  <div id="resizable1" class="a ui-state-active">
  </div>
  <div id="resizable2" class="a ui-state-active">
  </div>
  <div id="resizable3" class="a ui-state-active">
  </div>
</div>
 
</body>

CSS

#container { width: 300px; height: 20px; }
  .a{ background-position: top left; width: 40px; height: 16px; float:left}
  .a, #container {}
  
  .a{border-style: solid;}
#container {border-style: dotted;}

JavaScript

$(function() {
    $( "#resizable1" ).resizable({
      containment: "#container"
    });
	$( "#resizable2" ).resizable({
      containment: "#container"
    });
	$( "#resizable3" ).resizable({
      containment: "#container"
    });
  });
  
  $(function() {
    var isDragging = false;
	var okay = 0;
	var next;
    $(".a")
    .mousedown(function() {
		okay = 1;
        isDragging = false;
    })
    .mousemove(function() {
		if (okay == 1){
		next = $(".a").next();
		//console.log(next.attr('id'));
		
		
		var width = 0;
		$(this).parent().children().each(function() {
			width += $(this).outerWidth( true );
		});
		//console.log(next.parent().width());
		//console.log(width - next.width());
		//console.log(next.parent().width() - (width - next.width()));
		//width = width - next.width();
		next.width(next.parent().width() - (width - next.width()) - 2);
		//console.log(width);
        isDragging = true;
		console.log("dragging");
		}
     })
    .mouseup(function() {
		okay = 0;
        isDragging = false;
		console.log("no more");
    });
});