diff --git a/main/admin/skills.php b/main/admin/skills.php
index f0146f51b8..0a83142fcd 100644
--- a/main/admin/skills.php
+++ b/main/admin/skills.php
@@ -20,13 +20,18 @@ $this_section = SECTION_PLATFORM_ADMIN;
 $htmlHeadXtra[] = api_get_jquery_ui_js(true);
 $htmlHeadXtra[] = api_get_js('jquery.jsPlumb.all.js');
 
-Display::display_header();
-//Display::display_reduced_header();
+//Display::display_header();
+Display::display_reduced_header();
 
 $skill = new Skill();
 $skills = $skill->get_all(true);
 $type = 'edit'; //edit
-$skill_visualizer = new SkillVisualizer($skills, $type);
+
+$tree = $skill->get_skills_tree(null, true);
+
+$skill_visualizer = new SkillVisualizer($tree, $type);
+
+echo '<a class="a_button gray" id="add_item_link" href="#">Add item</a>';
 
 $skill_visualizer->display_html();
 
@@ -35,6 +40,13 @@ $url = api_get_path(WEB_AJAX_PATH).'skill.ajax.php?1=1';
 ?>
 
 <script>
+
+var url     = '<?php echo $url; ?>';
+var skills  = [];
+var parents = [];
+
+var parents = ['block_1'];
+
 jsPlumb.bind("ready", function() {
     $("#dialog-form").dialog({
         autoOpen: false,
@@ -43,6 +55,7 @@ jsPlumb.bind("ready", function() {
         height  : 380
     });
     
+    //Filling skills select
     $.getJSON( "<?php echo $url.'&a=get_skills' ?>", {},     
         function(data) {
             $.each(data, function(n, parent) {
@@ -52,6 +65,7 @@ jsPlumb.bind("ready", function() {
         }
     );
     
+    //Filling gradebook select
     $.getJSON( "<?php echo $url.'&a=get_gradebooks' ?>", {},     
         function(data) {
             $.each(data, function(n, gradebook) {
@@ -61,23 +75,80 @@ jsPlumb.bind("ready", function() {
         }
     );
     
+    //On click box
+    $(".open_block").live('click', function() {
+       var original_id = $(this).attr('id');
+       var id = $(this).attr('id');
+       
+       if (jQuery.inArray(id, parents) == -1) {
+        parents.push(id);
+       }
+       console.log(parents);
+       open_block(original_id, id);       
+    });
+    
+    //open block function
+    function open_block(original_id, id) {         
+        my_id = original_id.split('_')[1];  
+        for (var i = 0; i < skills.length; i++) {            
+            window_id = id.split('_')[1];
+            if (jQuery.inArray(skills[i].element, parents) == -1) {
+                 jsPlumb.deleteEndpoint(skills[i].endp);
+                 $("#"+skills[i].element).remove();
+            }
+        }
+        jsPlumb.animate(original_id, {left: 900}, { duration:1000 });
+        
+        pos = $('#'+original_id).position();
+        top_value = pos.top + 200 ;     
+        load_children(my_id, top_value);   
+    }
+    
+    
+    function load_children(my_id, top_value) {
+        
+        // var a = '<div style="top:300px; left:100px;" class="window edit_window ui-draggable" id="block_15">aaaa</div>';
+        //Loading children
+        var ix = 1;
+        $.getJSON(url+'&a=load_children&id='+my_id, {},         
+            function(json) {
+                $.each(json,function(i,item) {
+                    left_value  = 130*ix+500;
+                    //top_value   = 300;
+                    $('body').append('<div id="block_'+item.id+ '" class="open_block window " >'+item.name+i+'</div>')
+                    
+                    
+                    var es = prepare("block_" + item.id,  jsPlumbDemo.editEndpoint);    
+                    jsPlumb.connect({source: es, target:"block_"+my_id});
+                    
+                    jsPlumb.animate("block_" + item.id, {left: left_value, top : top_value}, { duration:1000 });                     
+                    
+                    ix++;   
+                });
+            }
+        ); 
+        
+        
+    }
     
     
+    $(".edit_block").click(function() {
+        var my_id = $(this).attr('id');
+        my_id = my_id.split('_')[2];
+        return false;
+    });
+        
     //Filling select
     $("#add_item_link").click(function() {
         $("#dialog-form").dialog("open");
-        $("#gradebook_id").addClass('chzn-select');
-        
+        $("#gradebook_id").addClass('chzn-select');               
         $("#gradebook_id").chosen();
-        $("#parent_id").chosen();
-    });
-
-    var url = '<?php echo $url; ?>';
+        $("#parent_id").chosen();                
+    });    
     
     var name = $( "#name" ),
     description = $( "#description" ),  
-    allFields = $( [] ).add( name ).add( description ), tips = $(".validateTips");
-    
+    allFields = $( [] ).add( name ).add( description ), tips = $(".validateTips");    
     
     $("#dialog-form").dialog({              
         buttons: {
@@ -116,8 +187,7 @@ jsPlumb.bind("ready", function() {
             $("#name").attr('value', '');
             $("#description").attr('value', '');                
         }
-    });
-    
+    });    
  
     $(".window").bind('click', function() {
         var id = $(this).attr('id');
@@ -133,36 +203,31 @@ jsPlumb.bind("ready", function() {
         var newMode = jsPlumb.setRenderMode(desiredMode);        
         jsPlumbDemo.init();
     };    
-    resetRenderMode(jsPlumb.CANVAS);
-       
+    resetRenderMode(jsPlumb.CANVAS);       
 });
 
 ;(function() {
-     
+         
     prepare = function(elId, endpoint) {
         jsPlumbDemo.initHover(elId);
         //jsPlumbDemo.initAnimation(elId);        
         var e = jsPlumb.addEndpoint(elId, endpoint);
         jsPlumbDemo.initjulio(e);
-        
+        skills.push({element:elId, endp:e});        
         return e;
     },    
     
     window.jsPlumbDemo = {    
-         initjulio :function(e) {             
-              
+        initjulio :function(e) {
         },      
         initHover :function(elId) {            
             
             $("#" + elId).click(function() {
                 var  all = jsPlumb.getConnections({source:elId});
-                for (var i = 0; i < discs.length; i++) {
-                    var d = document.getElementById(discs[i]);
-                    if (d) d.parentNode.removeChild(d);
-                }
+               
                 //var all  = jsPlumb.getConnections({scope:"DEFAULT", source:elId});     
                    
-                console.log(all);
+                //console.log(all);
             
                 //alert(elId);
                // jsPlumb.hide(elId);
@@ -239,8 +304,7 @@ jsPlumb.bind("ready", function() {
            var connectorHoverStyle = {
                 lineWidth:7,
                 strokeStyle:"#2e2aF8"
-            };
-            
+            };            
             
             jsPlumb.Defaults.Overlays = [
                 [ "Arrow", { location:0.9 } ], 
@@ -258,26 +322,25 @@ jsPlumb.bind("ready", function() {
             var edit_arrow_color = '#ccc';            
             var editEndpoint = {  
                 //connectorStyle:connectorPaintStyle,
-                connector:[ "Flowchart", { stub:40 } ],
+                connector:[ "Flowchart", { stub:35 } ],
                 hoverPaintStyle:connectorHoverStyle,
                 connectorHoverStyle:connectorHoverStyle,
                 anchors: ['BottomCenter','TopCenter'],                
                 endpoint:"Rectangle",
-                paintStyle:{ width:25, height:21, fillStyle:edit_arrow_color },
+                paintStyle:{ width:20, height:20, 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:5,
+                    lineWidth:2,
                     strokeStyle: edit_arrow_color
                 },
                 isTarget:true,
                 dropOptions : exampleDropOptions
             };
                            
-            jsPlumb.setMouseEventsEnabled(true);
-            
+            jsPlumb.setMouseEventsEnabled(true);            
             
             //Default
             var default_arrow_color = '#ccc';            
@@ -295,8 +358,7 @@ jsPlumb.bind("ready", function() {
                 },
                 isTarget:false,          
                 setDraggableByDefault : false,      
-            };
-            
+            };            
             
             // Done end point 
             var done_arrow_color = '#73982C';   
@@ -312,12 +374,8 @@ jsPlumb.bind("ready", function() {
                     strokeStyle:done_arrow_color
                 },
                 isTarget:false,
-                setDraggableByDefault : false,
-                         
+                setDraggableByDefault : false,                         
             };
-            
-            
-
 
             <?php $skill_visualizer->display_js();?>
             // three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)
@@ -335,17 +393,13 @@ jsPlumb.bind("ready", function() {
             jsPlumbDemo.attachBehaviour();          
         }
     };
-    
 })();
 
-
-
-
 $(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) {
-        alert("Connection created " + conn.sourceId + " to " + conn.targetId + " ");
+        //alert("Connection created " + conn.sourceId + " to " + conn.targetId + " ");
             //jsPlumb.detach(conn); 
     });
     //When double clicking a connection
@@ -359,9 +413,6 @@ $(document).ready( function() {
         if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
             jsPlumb.detach(conn); 
     })
-    
-    
-    
 });
 
 ;(function() {
@@ -414,8 +465,6 @@ function checkLength( o, n, min, max ) {
 }
 </script>
 
-<a class="a_button gray" id="add_item_link" href="#">Add item</a>
-
 <div id="dialog-form" style="display:none;">
     <div style="width:500px">
     <form id="add_item" name="form">
@@ -433,7 +482,7 @@ function checkLength( o, n, min, max ) {
             </div>      
             <div class="formw">
                 <select id="parent_id" name="parent_id" />
-                </select>             
+                </select>                  
             </div>
         </div>
         
@@ -444,6 +493,9 @@ function checkLength( o, n, min, max ) {
             <div class="formw">
                 <select id="gradebook_id" name="gradebook_id[]" multiple="multiple" />
                 </select>             
+                <span class="help-block">
+                Gradebook Description
+                </span>           
             </div>
         </div>
         <div class="row">
@@ -459,7 +511,7 @@ function checkLength( o, n, min, max ) {
 </div>
 <?php    
 
-Display::display_footer();
+//Display::display_footer();
 
 // The header.
 /*
diff --git a/main/css/base.css b/main/css/base.css
index e42b699d85..fe603248bc 100644
--- a/main/css/base.css
+++ b/main/css/base.css
@@ -3240,7 +3240,7 @@ div.admin_section h4 {
 
 /* chosen javascript checkbox select width fix */
 .chzn-select {
-    min-width: 250px;	
+    min-width: 200px;	
 }
 #lp_item_list {
 	width:90%;
@@ -3931,3 +3931,12 @@ form div.error input, form div.error textarea {
 .dragActive {
     border: 2px dotted orange;
 }
+
+
+.edit_block {
+    z-index: 100;    
+}
+
+#language_list {
+    width:100px !important;
+}
diff --git a/main/img/icons/22/add.png b/main/img/icons/22/add.png
new file mode 100644
index 0000000000..2e02484acc
Binary files /dev/null and b/main/img/icons/22/add.png differ
diff --git a/main/inc/ajax/skill.ajax.php b/main/inc/ajax/skill.ajax.php
index 52bf8d3672..34b7480615 100644
--- a/main/inc/ajax/skill.ajax.php
+++ b/main/inc/ajax/skill.ajax.php
@@ -52,6 +52,16 @@ switch ($action) {
         $skills = $skill->get_all($load_user_data);                    
         echo json_encode($skills);
         break;   
+        
+    case 'load_children':
+        $id = isset($_REQUEST['id']) ? $_REQUEST['id'] : null;
+        $skills = $skill->get_children($id);
+        $return = array();
+        foreach($skills as $skill) {
+            $return [$skill['data']['id']] = array('name' => $skill['data']['name'], 'id'=>$skill['data']['id']);
+        }
+        echo json_encode($return);
+        break;        
     case 'skill_exists':
         $skill_data = $skill->get($_REQUEST['skill_id']);        
         if (!empty($skill_data)) {
diff --git a/main/inc/lib/main_api.lib.php b/main/inc/lib/main_api.lib.php
index 083db89448..52f4af866a 100644
--- a/main/inc/lib/main_api.lib.php
+++ b/main/inc/lib/main_api.lib.php
@@ -3001,7 +3001,7 @@ function api_display_language_form($hide_if_no_choice = false) {
     </script>';
 
     $html .= '<form id="lang_form" name="lang_form" method="post" action="'.api_get_self().'">';
-    $html .=  "<select class=\"chzn-select\" name=\"language_list\" onchange=\"javascript: jumpMenu('parent',this,0);\">";
+    $html .=  '<select id="language_list" class="chzn-select" name="language_list" onchange="javascript: jumpMenu(\'parent\',this,0);">';
     foreach ($original_languages as $key => $value) {
         if ($folder[$key] == $user_selected_language) {
             $option_end = ' selected="selected" >';
diff --git a/main/inc/lib/skill.lib.php b/main/inc/lib/skill.lib.php
index 99576961bc..dc51298922 100644
--- a/main/inc/lib/skill.lib.php
+++ b/main/inc/lib/skill.lib.php
@@ -51,6 +51,17 @@ class SkillRelSkill extends Model {
         }
         return $parents;
     }
+    
+    public function get_children($skill_id, $add_child_info = true) {
+        $skills = $this->find('all', array('where'=> array('parent_id = ? '=> $skill_id)));
+        $skill_obj = new Skill();
+        if (!empty($skills)) {
+            foreach ($skills as &$skill) {
+              $skill['data'] = $skill_obj->get($skill['skill_id']);
+            }
+        }
+        return $skills;
+    }
 }
 
  /**
@@ -116,11 +127,12 @@ class Skill extends Model {
                     ON skill.id = skill_rel_skill.skill_id ";
         $result = Database::query($sql);
         $skills = array();        
+        
         if (Database::num_rows($result)) {        
             while ($row = Database::fetch_array($result, 'ASSOC')) {
                 $skill_rel_skill = new SkillRelSkill();
                 $a = $skill_rel_skill->get_skill_parents($row['id']);                              
-                $row['level'] = count($a)-1;
+                $row['level'] = count($a)-1;                
                 $row['gradebooks'] = self::get_gradebooks_by_skill($row['id']);                    
                 $skills[$row['id']] = $row;            
             }        
@@ -150,6 +162,11 @@ class Skill extends Model {
         return $result;
     }
     
+    function get_children($skill_id) {
+        $skill_rel_skill = new SkillRelSkill();
+        $skills = $skill_rel_skill->get_children($skill_id, true);
+        return $skills;
+    }    
     public function add($params) {
         if (!isset($params['parent_id'])) {
             $params['parent_id'] = 1;
@@ -180,8 +197,6 @@ class Skill extends Model {
         }
     }
     
-    
-    
     /**
     * Return true if the user has the skill
     * 
@@ -255,38 +270,45 @@ class Skill extends Model {
     }
 
         
-    public static function get_skills_tree($user_id = null) {
-        $skills = self::get_all();    
+    public function get_skills_tree($user_id = null, $return_flat_array = false) {
+        $skills = $this->get_all();    
         $refs = array();        
         $skills_tree = null;
         
         // Create references for all nodes
+        $flat_array = array();
         if (!empty($skills)) {
             foreach($skills as &$skill) {
-                if ($skill['parent'] == null) {
-                    $skill['parent'] = 'root';
+                if ($skill['parent_id'] == 0) {
+                    $skill['parent_id'] = 'root';
                 }
                 
-                $skill['data'] = array('parent' => $skill['parent']); // because except main keys (id, name, children) others keys are not saved while in the space tree
+                $skill['data'] = array('parent_id' => $skill['parent_id']); // because except main keys (id, name, children) others keys are not saved while in the space tree
                 
                 if ($user_id) {
-                    $skill['data']['achieved'] = self::user_has_skill($user_id, $skill['id']);
+                    $skill['data']['achieved'] = $this->user_has_skill($user_id, $skill['id']);
                 }                
                 $refs[$skill['id']] = &$skill;
+                $flat_array[$skill['id']] =  &$skill;
             }
         
             // Moving node to the children index of their parents
             foreach($skills as $skillInd => &$skill) {
-                $refs[$skill['parent']]['children'][] = &$skill;                
+                $refs[$skill['parent_id']]['children'][] = &$skill;
+                $flat_array[$skillInd] =  $skill;                                
             }
             
             $skills_tree = array(
-                'name' => get_lang('SkillRootName'),
-                'id' => 'root',
-                'children' => $refs['root']['children'],
-                'data' => array()
-                );
-        }        
+                'name'      => get_lang('SkillRootName'),
+                'id'        => 'root',
+                'children'  => $refs['root']['children'],
+                'data'      => array()
+            );
+        }    
+//var_dump($flat_array);exit;    
+        if ($return_flat_array) {
+            return $flat_array;
+        }
         unset($skills);        
         return $skills_tree;
     }    
diff --git a/main/inc/lib/skill.visualizer.lib.php b/main/inc/lib/skill.visualizer.lib.php
index 6ea82403b5..c0d5f9597a 100644
--- a/main/inc/lib/skill.visualizer.lib.php
+++ b/main/inc/lib/skill.visualizer.lib.php
@@ -7,8 +7,8 @@
 
  class SkillVisualizer {
 
-    private $offsetX = 100;
-    private $offsetY = 50;
+    private $offsetX = 400;
+    private $offsetY = 0;
    
     private $html    = '';
     private $type    = 'read';
@@ -21,20 +21,24 @@
     
     function prepare_skill_box($skill, $position, $class) {
         $block_id = $skill['id'];
-        $this->html .= '<div id="block_'.$block_id.'" class="window '.$class.'" style="top:' . $position['y'] . 'px; left:' . $position['x'] . 'px;">';
+        $this->html .= '<div id="block_'.$block_id.'" class="open_block window '.$class.'" style="top:' . $position['y'] . 'px; left:' . $position['x'] . 'px;">';
         $gradebook_string = '';
         if (!empty($skill['gradebooks'])) {
             foreach($skill['gradebooks'] as $gradebook) {
-                $gradebook_string .= Display::span($gradebook['name'], array('class'=>'label_tag notice','style'=>'width:50px'));    
+                $gradebook_string .= Display::span($gradebook['name'], array('class'=>'label_tag notice','style'=>'width:50px')).'<br />';    
             }
         }        
+        $skill['name'] = Display::url($skill['name'], '#', array('id'=>'edit_block_'.$block_id, 'class'=>'edit_block'));
+        
         $this->html .= $skill['name'].' '.$gradebook_string;
         
         if ($this->type == 'edit' && $skill['parent_id'] != 0) {
-            $this->html .= Display::url(get_lang('Edit'), '#', array('id=>"edit_block_'.$block_id,'class'=>'edit_block'));
-            $this->html .= Display::url(get_lang('Add'), '#', array('id=>"edit_block_'.$block_id,'class'=>'edit_block'));
-            $this->html .= Display::url(get_lang('Delete'), '#', array('id=>"edit_block_'.$block_id,'class'=>'edit_block'));
+            //$this->html .= Display::url(Display::return_icon('edit.png', get_lang('Edit'), array(), 22), '#', array('id'=>'edit_block_'.$block_id,'class'=>'edit_block'));
+            //$this->html .= Display::url(Display::return_icon('add.png', get_lang('Add'), array(), 22), '#', array('id'=>'edit_block_'.$block_id,'class'=>'edit_block'));
+            //$this->html .= Display::url(Display::return_icon('delete.png', get_lang('Delete'), array(), 22), '#', array('id=>"edit_block_'.$block_id,'class'=>'edit_block'));            
+            //$this->html .= Display::url(Display::return_icon('up.png', get_lang('Close'), array(), 22), '#', array('id'=>'close_block_'.$block_id,'class'=>'close_block'));
             
+            //$this->html .= Display::url(Display::return_icon('down.png', get_lang('Open'), array(), 22), '#', array('id'=>'open_block_'.$block_id,'class'=>'open_block'));
         }
         $this->html .= '</div>';   
     }
@@ -43,8 +47,7 @@
      * Adds a node using jplumb
      */
     private function add_item($skill, $position) {
-        $block_id = $skill['id'];
-                        
+        $block_id = $skill['id'];                        
        
         $end_point = 'readEndpoint';
         //var_dump($skill);
@@ -88,23 +91,63 @@
         
         $brothers = array();
         
+        $constant = 100;
+        
+        $canvas = 1000;
         
         //$this->add_item($skill, array('x' => $x + $this->offsetX, 'y' => $y + $this->offsetY));        
-        foreach ($this->skills as $skill) {            
-            if (isset($brothers[$skill['parent_id']])) {
+        foreach ($this->skills as &$skill) {
+            if (!in_array($skill['parent_id'], array(0,1))) {
+                continue;
+            }
+            $childs = isset($skill['children']) ? count($skill['children']) : 0 ;   
+            
+              
+            //$x = round($this->offsetX * sin(deg2rad($corner * $count)));
+            //$y = round($this->offsetY * cos(deg2rad($corner * $count)));
+            
+            /*if (isset($brothers[$skill['parent_id']])) {
                 $brothers[$skill['parent_id']] +=2;
             } else {
                 $brothers[$skill['parent_id']] = 1;
-            }            
-            //$x = round($this->offsetX * sin(deg2rad($corner * $count)));
-            //$y = round($this->offsetY * cos(deg2rad($corner * $count)));
+            }*/
+           $my_count = 0;
+           $brother_count = $brothers[$skill['id']];
            
-            $x = $brothers[$skill['parent_id']]*100;            
-            $y = $skill['level']*120;                        
+            $parent_x = 0; 
+            if ($skill['parent_id'] == 0) {
+                
+                $x = $constant*$childs/2;
+                //$this->offsetX = $constant*$childs;     
+            } else {
+                
+                $max = isset($this->skills[$skill['parent_id']]['children']) ? count($this->skills[$skill['parent_id']]['children']) : 0;
+                foreach($this->skills[$skill['parent_id']]['children'] as  $id => $sk) {                    
+                    if ($skill['id'] == $sk['id']) {                                                
+                        break;
+                    }
+                    $my_count++;                        
+                }
+                $parent_x = isset($this->skills[$skill['parent_id']]['x']) ? $this->skills[$skill['parent_id']]['x'] : 0;
+                $x = $my_count*150 + $parent_x - (150*$max/2) ;
+                //$x = $my_count*150 + $parent_x - (150*$max/2) -  20*$childs;
+                //$x = $my_count*150 + $parent_x - 100*$childs;
+            }
+                    
+            $y = $skill['level']*150;   
+              
+            $skill['x'] = $x;
+            $skill['y'] = $y;
+            
+                 
+        //    var_dump($skill);                   
             //$skill['description']  = "{$brothers[$skill['parent_id']]} $x - $y";
+            //$skill['name']  =  $skill['name']."  |  $x = $my_count * 150  +  $parent_x - (150* $max/2) - 10*$childs ";
             $this->add_item($skill, array('x' => $this->offsetX + $x, 'y' => $this->offsetY +$y));            
-        }        
+        }
+                
         echo $this->get_html();
+        
     }
     
     /**