Просмотр исходного кода

Changes in the skills trees (currently not working)

Julio Montoya 13 лет назад
Родитель
Сommit
06b08d52fa

+ 3 - 6
main/admin/skills_profile.php

@@ -30,7 +30,6 @@ $tpl = new Template(get_lang('Skills'));
 
 $form = new FormValidator('profile_search');
 
-
 $form->addElement('header', get_lang('SearchSkills'));
 $form->addElement('select', 'skills', null, null, array('id'=>'skills'));
 $form->addElement('style_submit_button', 'submit', get_lang('Search'), 'class="btn"');
@@ -56,10 +55,10 @@ if ($form->validate()) {
         $_SESSION['skills'] = $skills;
         
     } else {
-        $skills = isset($_SESSION['skills']) ? $_SESSION['skills']: null ;
+        $skills = isset($_SESSION['skills']) ? $_SESSION['skills']: array();
     }
 } else {
-    $skills = isset($_SESSION['skills']) ? $_SESSION['skills']: null ;
+    $skills = isset($_SESSION['skills']) ? $_SESSION['skills']: array();
 }
 
 $user_list = array();
@@ -96,8 +95,6 @@ if (!empty($users)) {
     }
 }
 
-
-
 //$tpl->assign('user_list', $user_list);
 $tpl->assign('order_user_list', $ordered_user_list);
 $tpl->assign('total_search_skills', $count_skills);
@@ -125,7 +122,7 @@ $id     = isset($_REQUEST['id']) ? intval($_REQUEST['id']) : null;
 switch ($action) {
     case 'remove_skill':
         $new_skill = array();      
-        foreach($skills as $skill_id) {
+        foreach ($skills as $skill_id) {
             if ($id != $skill_id) {
                 $new_skill[] = $skill_id;
             }            

+ 249 - 241
main/inc/lib/javascript/skills.js

@@ -1,253 +1,261 @@
 // Arrow settings
 
-    var exampleDropOptions = {
-        tolerance:'touch',
-        hoverClass:'dropHover',
-        activeClass:'dragActive'
-    };
+var debug = 1;
 
-    var connectorPaintStyle = {
+var exampleDropOptions = {
+    tolerance:'touch',
+    hoverClass:'dropHover',
+    activeClass:'dragActive'
+};
+
+var connectorPaintStyle = {
+    lineWidth:5,
+    strokeStyle:"#deea18",
+    joinstyle:"round"
+};
+// .. and this is the hover style. 
+var connectorHoverStyle = {
+    lineWidth:7,
+    strokeStyle:"#2e2aF8"
+};    
+
+//Admin arrows
+var edit_arrow_color = '#ccc';        
+
+var editEndpoint = {  
+    //connectorStyle:connectorPaintStyle,
+    connector:[ "Flowchart", { stub:28 } ],
+    hoverPaintStyle:connectorHoverStyle,
+    connectorHoverStyle:connectorHoverStyle,
+    anchors: ['BottomCenter','TopCenter'],                
+    endpoint:"Rectangle",
+    paintStyle:{ width:10, height:10, fillStyle:edit_arrow_color },
+    isSource:true,
+    scope:'blue rectangle',
+    maxConnections:10,
+    connectorStyle : {
+        gradient:{
+            stops:[[0, edit_arrow_color], [0.5, edit_arrow_color], [1, edit_arrow_color]]
+        }, //gradient stuff
+        lineWidth:2,
+        strokeStyle: edit_arrow_color
+    },
+    isTarget:true,
+    dropOptions : exampleDropOptions
+};
+
+
+//Student arrows    
+
+//If user does not completed the skill
+var default_arrow_color = '#ccc';     //gray  
+var defaultEndpoint = {
+    connector:[ "Flowchart", { stub:28 } ],
+    anchors: ['BottomCenter','TopCenter'],            
+    endpoint:"Rectangle",
+    paintStyle:{ width:1, height:1, fillStyle:default_arrow_color },
+    isSource:false,
+    scope:'blue rectangle',
+    maxConnections:10,
+    connectorStyle : {
+        gradient:{ stops:[[0, default_arrow_color], [0.5, default_arrow_color], [1, default_arrow_color]] },
         lineWidth:5,
-        strokeStyle:"#deea18",
-        joinstyle:"round"
-    };
-    // .. and this is the hover style. 
-    var connectorHoverStyle = {
-        lineWidth:7,
-        strokeStyle:"#2e2aF8"
-    };
-    
-    
-    //Admin arrows
-    var edit_arrow_color = '#ccc';        
-        
-    var editEndpoint = {  
-        //connectorStyle:connectorPaintStyle,
-        connector:[ "Flowchart", { stub:28 } ],
-        hoverPaintStyle:connectorHoverStyle,
-        connectorHoverStyle:connectorHoverStyle,
-        anchors: ['BottomCenter','TopCenter'],                
-        endpoint:"Rectangle",
-        paintStyle:{ width:10, height:10, fillStyle:edit_arrow_color },
-        isSource:true,
-        scope:'blue rectangle',
-        maxConnections:10,
-        connectorStyle : {
-            gradient:{
-                stops:[[0, edit_arrow_color], [0.5, edit_arrow_color], [1, edit_arrow_color]]
-            }, //gradient stuff
-            lineWidth:2,
-            strokeStyle: edit_arrow_color
-        },
-        isTarget:true,
-        dropOptions : exampleDropOptions
-    };
-    
-    
-    //Student arrows    
-    
-    //If user does not completed the skill
-    var default_arrow_color = '#ccc';     //gray  
-    var defaultEndpoint = {
-        connector:[ "Flowchart", { stub:28 } ],
-        anchors: ['BottomCenter','TopCenter'],            
-        endpoint:"Rectangle",
-        paintStyle:{ width:1, height:1, fillStyle:default_arrow_color },
-        isSource:false,
-        scope:'blue rectangle',
-        maxConnections:10,
-        connectorStyle : {
-            gradient:{ stops:[[0, default_arrow_color], [0.5, default_arrow_color], [1, default_arrow_color]] },
-            lineWidth:5,
-            strokeStyle:default_arrow_color
-        },
-        isTarget:false,          
-        setDraggableByDefault : false,      
-    };            
-    
-    // If user completed the skill 
-    var done_arrow_color = '#73982C'; //green   
-    var doneEndpoint = {                
-        connector:[ "Flowchart", { stub:28 } ],
-        anchors: ['BottomCenter','TopCenter'],    
-        endpoint:"Rectangle",
-        paintStyle:{ width:1, height:1, fillStyle:done_arrow_color},
-        isSource:false,
-        scope:'blue rectangle',
-        maxConnections:10,
-        connectorStyle : {
-            gradient:{ stops:[[0, done_arrow_color], [0.5, done_arrow_color], [1, done_arrow_color]] },
-            lineWidth:5,
-            strokeStyle:done_arrow_color
-        },
-        isTarget:false,
-        setDraggableByDefault : false,                         
-    };
-    
-    
-        
-    
-    //Functions   
-    
+        strokeStyle:default_arrow_color
+    },
+    isTarget:false,          
+    setDraggableByDefault : false,      
+};            
 
-    /* Clean window block classes*/
-    function cleanclass(obj) {
-        obj.removeClass('first_window');
-        obj.removeClass('second_window');
-        obj.removeClass('third_window');
-    }
-    
-    /* When clicking the red block */
-    function open_parent(parent_id, id) {   
-        console.log("open_parent call : id " + id + " parent_id:" + parent_id);                
-        var numeric_parent_id = parent_id.split('_')[1];
-        var numeric_id = id.split('_')[1];        
-        load_parent(numeric_parent_id, numeric_id);
-    }
-    
-    /* When clicking a children block 
-        @param string block id i.e "block_1" 
-     * */
+// If user completed the skill 
+var done_arrow_color = '#73982C'; //green   
+var doneEndpoint = {                
+    connector:[ "Flowchart", { stub:28 } ],
+    anchors: ['BottomCenter','TopCenter'],    
+    endpoint:"Rectangle",
+    paintStyle:{ width:1, height:1, fillStyle:done_arrow_color},
+    isSource:false,
+    scope:'blue rectangle',
+    maxConnections:10,
+    connectorStyle : {
+        gradient:{ stops:[[0, done_arrow_color], [0.5, done_arrow_color], [1, done_arrow_color]] },
+        lineWidth:5,
+        strokeStyle:done_arrow_color
+    },
+    isTarget:false,
+    setDraggableByDefault : false,                         
+};
+
+//Functions   
+
+/* Clean window block classes*/
+function cleanclass(obj) {
+    obj.removeClass('first_window');
+    obj.removeClass('second_window');
+    obj.removeClass('third_window');
+}
+
+/* When clicking the red block */
+function open_parent(parent_id, id) {   
+    if (debug) console.log("open_parent call : id " + id + " parent_id:" + parent_id);                
+    var numeric_parent_id = parent_id.split('_')[1];
+    var numeric_id = id.split('_')[1];        
+    load_parent(numeric_parent_id, numeric_id);
+}
+
+/* 
+ *  
+ *  When clicking a children block 
+    @param  string block id i.e "block_1" 
+    @param  int load user data or not
     
-    function open_block(id, load_user_data) {
-        console.log("open_block id : " + id);      
-        var numeric_id = id.split('_')[1];  
-        for (var i = 0; i < skills.length; i++) {
-            //Remove everything except parents
-            if (jQuery.inArray(skills[i].element, parents) == -1) {
-                 //console.log('deleting this'+ skills[i].element);
-                 jsPlumb.deleteEndpoint(skills[i].endp);
-                 $("#"+skills[i].element).remove();                 
-            }
-        }        
-       
-        //Modifying current block position
-        pos = $('#'+id).position();        
-        left_value  = center_x; 
-               
-        if (parents.length == 2) { 
-            top_value  = space_between_blocks_y + offset_y;
-        } else {
-            top_value = 100;
-        }        
-        jsPlumb.animate(id, { left: left_value, top:top_value }, { duration:duration_value });       
-        
-        //Modifying root block position
-        pos_parent = $('#'+parents[0]).position();
-        jsPlumb.animate(parents[0], { left: center_x, top:offset_y }, { duration:duration_value });       
-        
-        top_value = 2*space_between_blocks_y +offset_y ; 
-        load_children(numeric_id, top_value, load_user_data);   
-    }
+*/
+
+function open_block(id, load_user_data) {
+    if (debug) console.log("open_block id : " + id+" load_user_data: " +load_user_data);      
+    var numeric_id = id.split('_')[1];    
     
-    function open_block_student(id) {
-        open_block(id, 1)
-    }
+    for (var i = 0; i < skills.length; i++) {
+        //Remove everything except parents
+        if (jQuery.inArray(skills[i].element, parents) == -1) {
+            if (debug) console.log('deleting this skill '+ skills[i].element + " id: " + i);
+            jsPlumb.deleteEndpoint(skills[i].endp);
+            $("#"+skills[i].element).remove();                 
+        }
+    }        
+
+    //Modifying current block position
+    pos = $('#'+id).position();        
+    left_value  = center_x; 
+
+    if (parents.length == 2) { 
+        top_value  = space_between_blocks_y + offset_y;
+    } else {
+        top_value = 100;
+    }       
     
-    /* Loads parent blocks */
-    function load_parent(parent_id, id) {
-        console.log("load_parent call : id " + id + " parent_id:" + parent_id);
-        var ix= 0;         
-        $.ajax({
-            url: url+'&a=load_direct_parents&id='+id,
-            async: false, 
-            success: function(json) {                
-                var json = jQuery.parseJSON(json);
-                
-                $.each(json,function(i,item) {
-                    left_value  = center_x + space_between_blocks_x * ix;
-                    top_value   = offset_y;
-                    
-                    $('body').append('<div id="block_'+item.id+ '" class="open_block window " >'+item.name+'</div>');                
-                    var es  = prepare("block_" + item.id,  editEndpoint);
-                    var es2 = prepare("block_" + id,  editEndpoint);
-                      
-                    jsPlumb.connect({
-                        source: es, target:es2 
-                    });                    
-                    jsPlumb.animate("block_" + item.id, { left: left_value, top : top_value }, { duration : duration_value});
-                    
-                    if (item.parent_id) {
-                        console.log('setting hidden_parent '+item.parent_id);
-                        hidden_parent = "block_" + item.parent_id;                        
-                    } else {
-                        console.log('setting NO--- hidden_parent ');
-                    }
-                    ix++;   
-                });                
-            }
-         });
-    }
+    jsPlumb.animate(id, { left: left_value, top:top_value }, { duration:duration_value });       
+
+    //Modifying root block position
+    pos_parent = $('#'+parents[0]).position();
+    jsPlumb.animate(parents[0], { left: center_x, top:offset_y }, { duration:duration_value });       
+
+    top_value = 2*space_between_blocks_y +offset_y ; 
+    load_children(numeric_id, top_value, load_user_data);   
+}
+
+function open_block_student(id) {
+    open_block(id, 1)
+}
+
+function load_children(my_id, top_value, load_user_data) {
+    if (debug) console.log("load_children : my_id " + my_id + ", top_value:" + top_value +", load_user_data: "+load_user_data);
+
+    //Loading children
+    var ix = 0;
     
-    function load_children(my_id, top_value, load_user_data) {
-        console.log("load_children call : my_id " + my_id + " top_value:" + top_value);
-          
-        //Loading children
-        var ix = 0;
-        $.getJSON(url+'&a=load_children&load_user_data='+load_user_data+'&id='+my_id, {},         
-            function(json) {                
-                $.each(json,function(i,item) {
-                    console.log('Loading children: #' + item.id + " " +item.name);
-                    left_value  = ix*space_between_blocks_x +  center_x/2 - block_size / 2;
-                    //top_value   = 300;
-                    //Display::url($skill['name'], '#', array('id'=>'edit_block_'.$block_id, 'class'=>'edit_block'))
-                    item.name = '<a href="#" class="edit_block" id="edit_block_'+item.id+'">'+item.name+'</a>';                    
-                                        
-                    var status_class = ' ';
-                    my_edit_point = editEndpoint;
-                    
-                    if (item.passed == 1) {
-                        my_edit_point = doneEndpoint;
-                        status_class = 'done_window';
-                    }
-                                        
-                    $('body').append('<div id="block_'+item.id+ '" class="third_window open_block window '+status_class+'" >'+item.name+'</div>');
-                    
-                    $('#block_'+item.id).css( { 
-                        position: 'absolute',
-                        zIndex: 5000,
-                        left: '10', 
-                        top: '10'
-                    } );
-                            
-                    
-                    //console.log('append div id = block_'+item.id);                    
-                    //console.log('preparing = '+item.id);          
-                              
-                    var es = prepare("block_" + item.id,  my_edit_point);
-                    
-                    //console.log('preparing = '+my_id);
-                    
-                    var e2 = prepare("block_" + my_id,  my_edit_point);
-                     
-                    jsPlumb.connect({source: es, target:e2});
-                    //console.log('connect sources');
-                                        
-                    jsPlumb.animate("block_" + item.id, { 
-                        left: left_value, top : top_value
-                        }, { duration : duration_value });
-                    ix++;   
+    $.getJSON(url+'&a=load_children&load_user_data='+load_user_data+'&id='+my_id, {},         
+        function(json) {                
+            console.log('getJSON reponse: ' + json)
+            $.each(json,function(i, item) {
+                if (debug) console.log('Loading children: #' + item.id + " " +item.name);
+                left_value  = ix*space_between_blocks_x +  center_x/2 - block_size / 2;
+                //top_value   = 300;
+                //Display::url($skill['name'], '#', array('id'=>'edit_block_'.$block_id, 'class'=>'edit_block'))
+                item.name = '<a href="#" class="edit_block" id="edit_block_'+item.id+'">'+item.name+'</a>';                    
+
+                var status_class = ' ';
+                my_edit_point = editEndpoint;
+
+                if (item.passed == 1) {
+                    my_edit_point = doneEndpoint;
+                    status_class = 'done_window';
+                }
+
+                $('body').append('<div id="block_'+item.id+ '" class="third_window open_block window '+status_class+'" >'+item.name+'</div>');
+                if (debug) console.log('Append block: '+item.id);
+
+                $('#block_'+item.id).css({ 
+                    position: 'absolute',
+                    zIndex: 5000,
+                    left: '10', 
+                    top: '10'
                 });
-            }
-        );
-    }
-    
-    function checkLength( o, n, min, max ) {
-        if ( o.val().length > max || o.val().length < min ) {
-            o.addClass( "ui-state-error" );
-            updateTips( "Length of " + n + " must be between " +min + " and " + max + "." );
-            return false;
-        } else {
-            return true;
+
+
+                //console.log('append div id = block_'+item.id);                    
+                //console.log('preparing = '+item.id);          
+
+                var es = prepare("block_" + item.id,  my_edit_point);
+
+                //console.log('preparing = '+my_id);
+
+                var e2 = prepare("block_" + my_id,  my_edit_point);
+
+                jsPlumb.connect({source: es, target:e2});
+                //console.log('connect sources');
+
+                jsPlumb.animate("block_" + item.id, { 
+                    left: left_value, top : top_value
+                }, { duration : duration_value });
+                ix++;   
+            });
         }
+    );
+}
+
+/* Loads parent blocks */
+function load_parent(parent_id, id) {
+    if (debug) console.log("load_parent call : id " + id + " parent_id:" + parent_id);
+    var ix= 0;         
+    $.ajax({
+        url: url+'&a=load_direct_parents&id='+id,
+        async: false, 
+        success: function(json) {                
+            var json = jQuery.parseJSON(json);
+
+            $.each(json,function(i,item) {
+                left_value  = center_x + space_between_blocks_x * ix;
+                top_value   = offset_y;
+
+                $('body').append('<div id="block_'+item.id+ '" class="open_block window " >'+item.name+'</div>');                
+                var es  = prepare("block_" + item.id,  editEndpoint);
+                var es2 = prepare("block_" + id,  editEndpoint);
+
+                jsPlumb.connect({
+                    source: es, target:es2 
+                });                    
+                jsPlumb.animate("block_" + item.id, { left: left_value, top : top_value }, { duration : duration_value});
+
+                if (item.parent_id) {
+                    if (debug) console.log('setting hidden_parent '+item.parent_id);
+                    hidden_parent = "block_" + item.parent_id;                        
+                } else {
+                    if (debug) console.log('setting NO--- hidden_parent ');
+                }
+                ix++;   
+            });                
+        }
+        });
+}
+
+
+
+function checkLength( o, n, min, max ) {
+    if ( o.val().length > max || o.val().length < min ) {
+        o.addClass( "ui-state-error" );
+        updateTips( "Length of " + n + " must be between " +min + " and " + max + "." );
+        return false;
+    } else {
+        return true;
     }
-    
-    function updateTips( t ) {
-        tips = $( ".validateTips" )
-        tips
-            .text( t )
-            .addClass( "ui-state-highlight" );
-        setTimeout(function() {
-            tips.removeClass( "ui-state-highlight", 1500 );
-        }, 500 );
-    }
+}
+
+function updateTips( t ) {
+    tips = $( ".validateTips" )
+    tips
+        .text( t )
+        .addClass( "ui-state-highlight" );
+    setTimeout(function() {
+        tips.removeClass( "ui-state-highlight", 1500 );
+    }, 500 );
+}

+ 8 - 4
main/inc/lib/skill.visualizer.lib.php

@@ -7,7 +7,7 @@
 
  class SkillVisualizer {
     
-    public $block_size = 80; //see CSS window class
+    public $block_size = 120; //see CSS window class
     public $canvas_x   = 1024;
     public $canvas_y   = 800;
     
@@ -37,7 +37,7 @@
             $extra_class = 'second_window';
         }
         
-        $this->html .= '<div id="block_'.$block_id.'" class = " open_block window '.$extra_class.'  '.$class.'" style = "top:' . $position['y'] . 'px; left:' . $position['x'] . 'px;">';
+        $this->html .= '<div id="block_'.$block_id.'" class = "open_block window '.$extra_class.'  '.$class.'" style = "top:' . $position['y'] . 'px; left:' . $position['x'] . 'px;">';
         /*$gradebook_string = '';
         if (!empty($skill['gradebooks'])) {
             foreach ($skill['gradebooks'] as $gradebook) {
@@ -45,9 +45,13 @@
                 $gradebook_string .= Display::span($gradebook['name'], array('class'=>'label_tag gradebook','style'=>'width:50px')).'<br />';    
             }
         } */       
-        $skill['name'] = Display::url($skill['name'], '#', array('id'=>'edit_block_'.$block_id, 'class'=>'edit_block'));
+        $content =  $skill['name'];
+        $content .= '<div class="btn-group">';
+        $content .= Display::url(get_lang('Edit'), '#', array('id'=>'edit_block_'.$block_id, 'class'=>'edit_block btn'));
+        $content .= Display::url('+', '#', array('id'=>'edit_block_'.$block_id, 'class'=>'edit_block btn'));        
+        $content .= '</div>';
         
-        $this->html .= $skill['name'].' '.$gradebook_string;
+        $this->html .= $content.' '.$gradebook_string;
         
         if ($this->type == 'edit' && $skill['parent_id'] != 0) {
             //$this->html .= Display::url(Display::return_icon('edit.png', get_lang('Edit'), array(), ICON_SIZE_SMALL), '#', array('id'=>'edit_block_'.$block_id,'class'=>'edit_block'));

+ 6 - 4
main/template/default/skill/profile.tpl

@@ -126,7 +126,6 @@ function checkLength( o, n, min, max ) {
     </div>
 {/if}
 
-
 {if !empty($order_user_list) }
     <div class="skills-users">
     {foreach $order_user_list as $count => $user_list}
@@ -151,7 +150,7 @@ function checkLength( o, n, min, max ) {
                                 {if $skill_data.found}                                     
                                      *{"IHaveThisSkill"|get_lang}*
                                 {/if}
-                            </li>                    
+                            </li>
                         {/foreach}
                     </ul>
                 </div>    
@@ -159,8 +158,11 @@ function checkLength( o, n, min, max ) {
         {/foreach}
     {/foreach}        
     </div>
-{else}
-    <div class="warning-message">{"NoResults"|get_lang}</div>
+{else}     
+     {if !empty($search_skill_list) }
+        <div class="warning-message">{"NoResults"|get_lang}</div>
+     {/if}
+     
 {/if}
 
 <div id="dialog-form" style="display:none;">    

+ 160 - 54
main/template/default/skill/skill_tree.tpl

@@ -103,6 +103,8 @@ jsPlumb.bind("ready", function() {
     
     //Add button process
     
+    $("#dialog-form").css('z-index', '9001');
+    
     $("#dialog-form").dialog({              
         buttons: {
             "{"Add"|get_lang}" : function() {                
@@ -131,10 +133,10 @@ jsPlumb.bind("ready", function() {
             $("#name").attr('value', '');
             $("#description").attr('value', '');                
         }
-    });   
+    });
     
-    //Clicking a box skill (we use live instead of bind because we're creating divs on the fly )
-    $(".open_block").live('click', function() {        
+    //Clicking in a box skill (we use live instead of bind because we're creating divs on the fly )
+    $(".open_block").live('click', function() {      
         var id = $(this).attr('id');
         
         //if is root
@@ -190,7 +192,7 @@ jsPlumb.bind("ready", function() {
     });
     
     //Skill title click  
-    $(".edit_block").live('click',function() {        
+    $(".edit_block").live('click',function() {      
         var my_id = $(this).attr('id');
         my_id = my_id.split('_')[2];
         
@@ -222,7 +224,7 @@ jsPlumb.bind("ready", function() {
     });
         
     
-    //
+    //Clicking in a box
     $(".window").bind('click', function() {
         var id = $(this).attr('id');
         id = id.split('_')[1];        
@@ -236,69 +238,158 @@ jsPlumb.bind("ready", function() {
     var resetRenderMode = function(desiredMode) {
         var newMode = jsPlumb.setRenderMode(desiredMode);        
         jsPlumbDemo.init();
-    };    
+    };
     resetRenderMode(jsPlumb.CANVAS);       
 });
-
     
 ;(function() {
          
     prepare = function(elId, endpoint) {
+        console.log('preparing = '+elId);
+        console.log('endpoint = '+endpoint);
         jsPlumbDemo.initHover(elId);
         //jsPlumbDemo.initAnimation(elId);        
         var e = jsPlumb.addEndpoint(elId, endpoint);
-        jsPlumbDemo.initjulio(e);        
+        //jsPlumbDemo.initjulio(e);        
         skills.push({
             element: elId, endp:e
         });        
         return e;
-    },
-    
-    window.jsPlumbDemo = {    
-        initjulio :function(e) {
-        },      
-        initHover :function(elId) {
-            $("#" + elId).click(function() {
-                var  all = jsPlumb.getConnections({
-                    source:elId
-                });
-            });            
-            /*$("#" + elId).hover(
-                function() { $(this).addClass("bigdot-hover"); },
-                function() { $(this).removeClass("bigdot-hover"); }
-            );*/
-        },        
+    },    
+    window.jsPlumbDemo = {  	   
         init : function() {
-        
-            jsPlumb.Defaults.DragOptions    = { cursor: 'pointer', zIndex:2000 };
-            jsPlumb.Defaults.PaintStyle     = { strokeStyle:'#666' };
+            console.log('Import defaults');
+            jsPlumb.importDefaults({
+                // default drag options
+                DragOptions : { cursor: 'pointer', zIndex:2000 },
+                // default to blue at one end and green at the other
+                EndpointStyles : [{ fillStyle:'#225588' }, { fillStyle:'#558822' }],
+                // blue endpoints 7 px; green endpoints 11.
+                Endpoints : [ [ "Dot", {
+                        radius:7
+                    } ], [ "Dot", { radius:11 } ]],
+                // the overlays to decorate each connection with.  note that the label overlay uses a function to generate the label text; in this
+                // case it returns the 'labelText' member that we set on each connection in the 'init' method below.
+                ConnectionOverlays : [
+                    [ "Arrow", { location:0.9 } ],
+                    [ "Label", { 
+                        location:0.1,
+                        id:"label",
+                        cssClass:"aLabel"
+                    }]
+                ]
+            });    
+            
+            /*jsPlumb.Defaults.PaintStyle     = { strokeStyle:'#666' };
             jsPlumb.Defaults.EndpointStyle  = { width:20, height:16, strokeStyle:'#666' };
             jsPlumb.Defaults.Endpoint       = "Rectangle";
-            jsPlumb.Defaults.Anchors        = ["TopCenter", "TopCenter"];
+            jsPlumb.Defaults.Anchors        = ["TopCenter", "TopCenter"];*/
 
-            jsPlumb.bind("jsPlumbConnection", function(e) {
-                //updateConnections(e.connection);
-            });
-            jsPlumb.bind("jsPlumbConnectionDetached", function(e) {
-                //updateConnections(e.connection, true);
-            });                        
+            // this is the paint style for the connecting lines..
+			var connectorPaintStyle = {
+				lineWidth:5,
+				strokeStyle:"#deea18",
+				joinstyle:"round"
+			},
+			// .. and this is the hover style. 
+			connectorHoverStyle = {
+				lineWidth:7,
+				strokeStyle:"#2e2aF8"
+			},
+            // the definition of source endpoints (the small blue ones)
+			sourceEndpoint = {
+				endpoint:"Dot",
+				paintStyle:{ fillStyle:"#225588",radius:7 },
+				isSource:true,
+				connector:[ "Flowchart", { stub:40 } ],
+				connectorStyle:connectorPaintStyle,
+				hoverPaintStyle:connectorHoverStyle,
+				connectorHoverStyle:connectorHoverStyle,
+                dragOptions:{
+                },
+                overlays:[
+                	[ "Label", { 
+	                	location:[0.5, 1.5], 
+	                	label:"Drag",
+	                	cssClass:"endpointSourceLabel" 
+	                } ]
+                ]
+			},
+			// a source endpoint that sits at BottomCenter
+			bottomSource = jsPlumb.extend( { anchor:"BottomCenter" }, sourceEndpoint),
+			// the definition of target endpoints (will appear when the user drags a connection) 
+			targetEndpoint = {
+				endpoint:"Dot",					
+				paintStyle:{ fillStyle:"#558822",radius:11 },
+				hoverPaintStyle:connectorHoverStyle,
+				maxConnections:-1,
+				dropOptions:{ hoverClass:"hover", activeClass:"active" },
+				isTarget:true,			
+                overlays:[
+                	[ "Label", { location:[0.5, -0.5], label:"Drop", cssClass:"endpointTargetLabel" } ]
+                ]
+			},	
+            init = function(connection) {
+				connection.getOverlay("label").setLabel(connection.sourceId.substring(6) + "-" + connection.targetId.substring(6));
+			};	
             
-            jsPlumb.Defaults.Overlays = [
-                //[ "Arrow", { location:0.5 } ],  if you want to add an arrow in the connection          
-            ];
-                           
-            jsPlumb.setMouseEventsEnabled(true);
+            var allSourceEndpoints = [], allTargetEndpoints = [];
+            _addEndpoints = function(toId, sourceAnchors, targetAnchors) {
+                for (var i = 0; i < sourceAnchors.length; i++) {
+                    var sourceUUID = toId + sourceAnchors[i];
+                    allSourceEndpoints.push(jsPlumb.addEndpoint(toId, sourceEndpoint, { anchor:sourceAnchors[i], uuid:sourceUUID }));
+                }
+                for (var j = 0; j < targetAnchors.length; j++) {
+                    var targetUUID = toId + targetAnchors[j];
+                    allTargetEndpoints.push(jsPlumb.addEndpoint(toId, targetEndpoint, { anchor:targetAnchors[j], uuid:targetUUID }));
+                }
+            };
             
-            {$js}
+            console.log('addEndpoints');
+
+            _addEndpoints("window4", ["TopCenter", "BottomCenter"], ["LeftMiddle", "RightMiddle"]);
+			_addEndpoints("window2", ["LeftMiddle", "BottomCenter"], ["TopCenter", "RightMiddle"]);
+			_addEndpoints("window3", ["RightMiddle", "BottomCenter"], ["LeftMiddle", "TopCenter"]);
+			_addEndpoints("window1", ["LeftMiddle", "RightMiddle"], ["TopCenter", "BottomCenter"]);
+
+         	// listen for new connections; initialise them the same way we initialise the connections at startup.
+			jsPlumb.bind("jsPlumbConnection", function(connInfo, originalEvent) { 
+				init(connInfo.connection);
+			});
+						
+			// make all the window divs draggable						
+			jsPlumb.draggable(jsPlumb.getSelector(".window"));
 
-            var divsWithWindowClass = jsPlumbDemo.getSelector(".window");
-            jsPlumb.draggable(divsWithWindowClass);
-            jsPlumbDemo.attachBehaviour();          
+			// connect a few up
+			jsPlumb.connect({
+                                uuids:["window2BottomCenter", "window3TopCenter"]});
+			jsPlumb.connect({
+                                uuids:["window2LeftMiddle", "window4LeftMiddle"]});
+			jsPlumb.connect({
+                                uuids:["window4TopCenter", "window4RightMiddle"]});
+			jsPlumb.connect({
+                                uuids:["window3RightMiddle", "window2RightMiddle"]});
+			jsPlumb.connect({
+                                uuids:["window4BottomCenter", "window1TopCenter"]});
+			jsPlumb.connect({
+                                uuids:["window3BottomCenter", "window1BottomCenter"]});
+
+                           
+            //jsPlumb.setMouseEventsEnabled(true);
+            
+            {* $js *}
+                
+            // listen for clicks on connections, and offer to delete connections on click.			
+			jsPlumb.bind("click", function(conn, originalEvent) {
+				if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
+					jsPlumb.detach(conn); 
+			});    
         }
     };
 })();
 
-$(document).ready( function() {     
+$(document).ready( function() {
+/*
     //When creating a connection see
     //http://jsplumb.org/apidocs/files/jsPlumb-1-3-2-all-js.html#bind 
     jsPlumb.bind("jsPlumbConnection", function(conn) {
@@ -315,12 +406,18 @@ $(document).ready( function() {
     jsPlumb.bind("click", function(endpoint) {
         if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
             jsPlumb.detach(conn); 
-    });
+    });*/
+    
     $(".chzn-select").chosen();
+    $("#menu").draggable();
+    
+    //open_block('block_0');
+    
+    
 });
 
 ;(function() {
-    
+   
     jsPlumbDemo.getSelector = function(spec) {
         return $(spec);
     };
@@ -348,16 +445,25 @@ $(document).ready( function() {
 })();
 
 </script>
-<div style="z-index: 1000; position: absolute;">
-<h3>{'Skills'|get_lang}</h3>
-<ul style="list-style-type:none; margin:0;">
-<li><a style="z-index: 1000" class="a_button gray medium" id="add_item_link" href="#">{'AddSkill'|get_lang}</a></li>
-<li><a style="z-index: 1000" class="a_button gray medium" id="return_to_admin" href="{$_p.web_main}admin">{'BackToAdmin'|get_lang}</a></li>
-</ul>
+<div id="menu" class="well" style="top:20px; left:20px; width:300px; z-index: 9000; opacity: 0.9;">
+    <h3>{'Skills'|get_lang}</h3>
+    <div class="btn-group">
+        <a style="z-index: 1000" class="btn" id="add_item_link" href="#">{'AddSkill'|get_lang}</a>
+        <a style="z-index: 1000" class="btn" id="return_to_admin" href="{$_p.web_main}admin">{'BackToAdmin'|get_lang}</a>
+    </div>
 </div>
-{$html}
+    
+    
+    <div id="demo">
+			<div class="window" id="window1"><strong>1</strong><br/><br/></div>
+			<div class="window" id="window2"><strong>2</strong><br/><br/></div>
+		    <div class="window" id="window3"><strong>3</strong><br/><br/></div>
+		    <div class="window" id="window4"><strong>4</strong><br/><br/></div>
+		</div>
+        
+{* $html *}
 
-<div id="dialog-form" style="display:none; z-index:6000;">    
+<div id="dialog-form" style="display:none; z-index:9001;">    
     <p class="validateTips"></p>
     <form class="form-horizontal" id="add_item" name="form">
         <fieldset>