The LabelToggle issue!

A bug?

by sporritt

HTML

<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.9-all-min.js"></script>
<div id="demo">
  <div class="window" id="window1">A</div>
  <div class="window" id="window2">B</div>
</div>

CSS

.window { 
    border:0.2em solid black;  
    width:50px;
    height:50px;
    position:absolute;
    text-align:center;
    line-height:50px;
}

#window1 { left:2em;top:10em;}
#window2 { left:20em;top:10em;}

JavaScript

jsPlumb.ready(function() {

var connectorPaintStyle = {lineWidth:2, strokeStyle:"#008000", joinstyle:"round"};
    
var sepo = {endpoint:"Rectangle", paintStyle:{ fillStyle:"#225588",width:10, height:10, }, isSource:true, connectorStyle:connectorPaintStyle,connector:[ "Flowchart", { stub:40 } ],maxConnections:10};

var tepo = {sendpoint:"Dot", paintStyle:{ fillStyle:"#558822",radius:5 }, maxConnections:10, isTarget:true};

    jsPlumb.addEndpoint("window1", sepo, { anchor:"RightMiddle"});
    jsPlumb.addEndpoint("window2", tepo, { anchor:"LeftMiddle"});
    
jsPlumb.bind("jsPlumbConnection", function(info, originalEvent) {
    var cxn = info.connection;    
    var eps = cxn.endpoints;
    if (!cxn.initialised) {
        cxn.addOverlay([ "Label", {location:0.2, id:"label1",label:"A"}]);
    //cxn.hideOverlay("label1");
        cxn.addOverlay([ "Label", {location:0.8, id:"label2",label:"B"}]);
//    cxn.hideOverlay("label2");
    
        eps[0].bind("click", function(ep) {toggle(ep);});
        eps[1].bind("click", function(ep) {toggle(ep);});
    }
    cxn.initialised = true;
});
    
jsPlumb.draggable($(".window"));
    
});


function toggle(ep){
var cs = ep.connections;
for(var i=0;i<cs.length;i++){
var labelids = [];
var lays = cs[i].overlays;
for(var k=0;k<lays.length;k++){
if(cs[i].getOverlay(lays[k].id).isVisible()) {
cs[i].hideOverlay(lays[k].id);
if(k+1!=lays.length) {cs[i].showOverlay(lays[k+1].id);}
    else cs[i].showOverlay(lays[0].id);
break;
}
}
}                        
}