diff --git a/main/admin/skills.php b/main/admin/skills.php
index 2f1a052ebc..cfe56cc4f4 100644
--- a/main/admin/skills.php
+++ b/main/admin/skills.php
@@ -23,11 +23,11 @@ $htmlHeadXtra[] = api_get_js('jquery.jsPlumb.all.js');
 //Display::display_header();
 Display::display_reduced_header();
 
-$skill = new Skill();
+$skill  = new Skill();
 $skills = $skill->get_all(true);
-$type = 'edit'; //edit
+$type   = 'edit'; //edit
 
-$tree = $skill->get_skills_tree(null, true);
+$tree   = $skill->get_skills_tree(null, true);
 
 $skill_visualizer = new SkillVisualizer($tree, $type);
 
@@ -36,17 +36,21 @@ echo '<a class="a_button gray" id="add_item_link" href="#">Add item</a>';
 $skill_visualizer->display_html();
 
 $url = api_get_path(WEB_AJAX_PATH).'skill.ajax.php?1=1';
-//$url = api_get_path(WEB_AJAX_PATH).'skill.ajax.php?load_user_data=1';
 ?>
-
 <script>
 
 var url     = '<?php echo $url; ?>';
 var skills  = []; //current window divs
 var parents = []; //list of parents normally there should be only 2
-
 var hidden_parent = '';
 
+
+var offset_x                = <?php echo $skill_visualizer->offset_x; ?>;
+var offset_y                = <?php echo $skill_visualizer->offset_y; ?>;
+var space_between_blocks_x  = <?php echo $skill_visualizer->space_between_blocks_x; ?>;
+var space_between_blocks_y  = <?php echo $skill_visualizer->space_between_blocks_y; ?>;
+var center_x                = <?php echo $skill_visualizer->center_x; ?>;
+
 var parents = ['block_1'];
 
 jsPlumb.bind("ready", function() {
@@ -79,9 +83,9 @@ jsPlumb.bind("ready", function() {
     );
     
     //On click box
-    $(".open_block").live('click', function() {
-        
+    $(".open_block").live('click', function() {        
         var id = $(this).attr('id');
+        
         //console.log(skills);
         //console.log('parents : '+parents[1] + ' id: '+id);
         
@@ -90,20 +94,27 @@ jsPlumb.bind("ready", function() {
             parents = [id];
         }
         
+        
         if (parents[1] != id) {
             //means that we have 2 parents   
-            if (parents.length == 2) {            
+         
+            if (parents.length == 2 ) {
+                hidden_parent = parents[0];   
+                //console.log('deleting: '+parents[0]);        
                 //removing father
-                for (var i = 0; i < skills.length; i++) {           
-                    if ( skills[i].element == parents[0] ) {                         
+                for (var i = 0; i < skills.length; i++) {
+                               
+                    if ( skills[i].element == parents[0] ) {
+                         //console.log('deleting :'+ skills[i].element + ' here ');                             
                          jsPlumb.deleteEndpoint(skills[i].endp);
                          $("#"+skills[i].element).remove();
+                         //skills.splice(i,1)
                     }
                 }
-                hidden_parent = parents[0];
                                 
                 parents.splice(0,1);                
-                parents.push(id);                
+                parents.push(id); 
+                console.log('addded : ' + id);               
             }
               
             if (parents.length == 1 && hidden_parent != ''){
@@ -118,14 +129,11 @@ jsPlumb.bind("ready", function() {
             if (jQuery.inArray(id, parents) == -1) {                              
                 parents.push(id);
             }
-            
-           console.log(parents);
-           open_block(id);  
-                
-            
+            open_block(id);
         }
-        console.log('hidden_parent : ' + hidden_parent);
-         
+        console.log(parents);
+       // console.log(skills);        
+        console.log('hidden_parent : ' + hidden_parent);         
     });
     
     function open_parent(parent_id, id) {                 
@@ -135,66 +143,86 @@ jsPlumb.bind("ready", function() {
     }
     
     //open block function
-    function open_block(id) {         
+    function open_block(id) {
+        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();
+                 //skills.splice(i,1);
                  //console.log('Removing '+skills[i].element);
             }
         }
         /*if ($('#'+id).length == 0) {
             $('body').append('<div id="'+id+'" class="open_block window " >'+id+'</div>'); 
         }*/
-        jsPlumb.animate(id, {left: 900}, { duration:1000 });        
+       
+        //Modifying current block position
         pos = $('#'+id).position();        
-        top_value = pos.top + 200 ;     
+        left_value  = center_x; 
+                
+        if (parents.length == 2) { 
+            top_value  = space_between_blocks_y + offset_y;
+        } else {
+            top_value = pos.left;
+        }
+        jsPlumb.animate(id, {left: left_value, top:top_value}, { duration:1000 });       
+        
+        //Modifying root block position
+        pos_parent = $('#'+parents[0]).position();
+        jsPlumb.animate(parents[0], {left: center_x, top:offset_y}, { duration:1000 });
+        
+        
+        top_value = parents.length * space_between_blocks_y; 
         load_children(numeric_id, top_value);   
     }
     
     function load_parent(parent_id, id) {
-         var ix = 1;
+         var ix= 0;
          $.getJSON(url+'&a=load_direct_parents&id='+id, {},         
              function(json) {
                 $.each(json,function(i,item) {
-                    //top_value   = 300;
+                    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,  jsPlumbDemo.editEndpoint);    
-                    jsPlumb.connect({source: es, target:"block_"+id});                    
-                    jsPlumb.animate("block_" + item.id, {left: 900, top : 0}, { duration:1000 });
-                    hidden_parent = "block_" + item.parent_id;
+                    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:1000 });              
+                    if (item.parent_id) {
+                        hidden_parent = "block_" + item.parent_id;
+                    }
                     ix++;   
                 });
             }
-        ); 
-        
+        );
     }
     
     function load_children(my_id, top_value) {        
         //Loading children
-        var ix = 1;
+        var ix = 0;
         $.getJSON(url+'&a=load_children&id='+my_id, {},         
-            function(json) {
-                $.each(json,function(i,item) {
-                    left_value  = 130*ix+500;
+            function(json) {                
+                $.each(json,function(i,item) {                    
+                    left_value  = offset_x+space_between_blocks_x * ix;
                     //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});                    
+                    var es = prepare("block_" + item.id,  editEndpoint);
+                    var e2 = prepare("block_" + my_id,  editEndpoint);
+                     
+                    jsPlumb.connect({source: es, target:e2});                    
                     jsPlumb.animate("block_" + item.id, {left: left_value, top : top_value}, { duration:1000 });
-                                         
-                    
                     ix++;   
                 });
             }
-        ); 
-        
-        
-    }
-    
+        );
+    }    
     
     $(".edit_block").click(function() {
         var my_id = $(this).attr('id');
@@ -269,17 +297,58 @@ jsPlumb.bind("ready", function() {
     };    
     resetRenderMode(jsPlumb.CANVAS);       
 });
+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"
+            };
+            
+            
+            //Settings when editing stuff
+            var edit_arrow_color = '#ccc';        
+                
+            var editEndpoint = {  
+                //connectorStyle:connectorPaintStyle,
+                connector:[ "Flowchart", { stub:35 } ],
+                hoverPaintStyle:connectorHoverStyle,
+                connectorHoverStyle:connectorHoverStyle,
+                anchors: ['BottomCenter','TopCenter'],                
+                endpoint:"Rectangle",
+                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:2,
+                    strokeStyle: edit_arrow_color
+                },
+                isTarget:true,
+                dropOptions : exampleDropOptions
+            };
+            
 ;(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});
+        jsPlumbDemo.initjulio(e);        
+        skills.push({element:elId, endp:e});        
         return e;
     },
+    
     window.jsPlumbDemo = {    
         initjulio :function(e) {
         },      
@@ -331,11 +400,7 @@ jsPlumb.bind("ready", function() {
                 updateConnections(e.connection, true);
             });
 
-            var exampleDropOptions = {
-                tolerance:'touch',
-                hoverClass:'dropHover',
-                activeClass:'dragActive'
-            };
+            
 
             /**
                 first example endpoint.  it's a 25x21 rectangle (the size is provided in the 'style' arg to the Endpoint), and it's both a source
@@ -351,16 +416,7 @@ jsPlumb.bind("ready", function() {
 
             */
                 // this is the paint style for the connecting lines..
-            var connectorPaintStyle = {
-                lineWidth:5,
-                strokeStyle:"#deea18",
-                joinstyle:"round"
-            };
-            // .. and this is the hover style. 
-           var connectorHoverStyle = {
-                lineWidth:7,
-                strokeStyle:"#2e2aF8"
-            };            
+                        
             
             jsPlumb.Defaults.Overlays = [
                 [ "Arrow", { location:0.9 } ], 
@@ -374,32 +430,12 @@ jsPlumb.bind("ready", function() {
                 }] 
             ];
             
-            //Settings when editing stuff
-            var edit_arrow_color = '#ccc';            
-            var editEndpoint = {  
-                //connectorStyle:connectorPaintStyle,
-                connector:[ "Flowchart", { stub:35 } ],
-                hoverPaintStyle:connectorHoverStyle,
-                connectorHoverStyle:connectorHoverStyle,
-                anchors: ['BottomCenter','TopCenter'],                
-                endpoint:"Rectangle",
-                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:2,
-                    strokeStyle: edit_arrow_color
-                },
-                isTarget:true,
-                dropOptions : exampleDropOptions
-            };
+            
                            
             jsPlumb.setMouseEventsEnabled(true);            
             
             //Default
-            var default_arrow_color = '#ccc';            
+            var default_arrow_color = '#ccc';       
             var defaultEndpoint = {
                 anchors: ['BottomCenter','TopCenter'],            
                 endpoint:"Rectangle",
diff --git a/main/css/base.css b/main/css/base.css
index fe603248bc..9eed12fd31 100644
--- a/main/css/base.css
+++ b/main/css/base.css
@@ -3903,7 +3903,7 @@ form div.error input, form div.error textarea {
     padding-top: 0.9em;
     position: absolute;
     text-align: center;
-    width: 100px;
+    width: 80px;
     z-index: 40;
 }
 
diff --git a/main/inc/lib/skill.visualizer.lib.php b/main/inc/lib/skill.visualizer.lib.php
index c0d5f9597a..06179f0f3a 100644
--- a/main/inc/lib/skill.visualizer.lib.php
+++ b/main/inc/lib/skill.visualizer.lib.php
@@ -6,26 +6,37 @@
  */
 
  class SkillVisualizer {
-
-    private $offsetX = 400;
-    private $offsetY = 0;
+    
+    public $block_size = 80; //see CSS window class
+    public $canvas_x   = 1024;
+    public $canvas_y   = 800;
+    
+    public $offset_x   = 0;
+    public $offset_y   = 50;
+    
+    public $space_between_blocks_x = 100;
+    public $space_between_blocks_y = 150;
+    
+    public $center_x = null;
    
     private $html    = '';
     private $type    = 'read';
     private $js      = '';
        
     function __construct($skills, $type = 'read') {
-        $this->skills = $skills;       
-        $this->type = $type; 
+        $this->skills   = $skills;       
+        $this->type     = $type; 
+        $this->center_x = intval($offset_x + $this->canvas_x/2 - $this->block_size/2); 
     }
     
     function prepare_skill_box($skill, $position, $class) {
         $block_id = $skill['id'];
-        $this->html .= '<div id="block_'.$block_id.'" class="open_block 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')).'<br />';    
+                //uncomment this to show the gradebook tags
+                //$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'));
@@ -47,19 +58,16 @@
      * Adds a node using jplumb
      */
     private function add_item($skill, $position) {
-        $block_id = $skill['id'];                        
-       
-        $end_point = 'readEndpoint';
-        //var_dump($skill);
-        $class = 'default_window';
-        
+        $block_id = $skill['id'];
+        $end_point = 'readEndpoint';        
+        $class = 'default_window';        
         if ($this->type == 'edit') {
-            $end_point = 'editEndpoint';
             $class = 'edit_window';
+            $end_point = 'editEndpoint';            
         } else {
             if ($skill['done_by_user'] == 1) {
-                $end_point = 'doneEndpoint';
                 $class = 'done_window';
+                $end_point = 'doneEndpoint';                
             } else {
                 $end_point = 'defaultEndpoint';
             }
@@ -69,13 +77,11 @@
         if ($skill['parent_id'] == 0) {
             return;
         }
-
-       //default_arrow_color
-        
-       $this->js .= 'var e'.$block_id.' = prepare("block_' . $block_id.'",  '.$end_point.');'."\n";
-       $this->js .= 'var e'.$skill['parent_id'].' = prepare("block_' . $skill['parent_id'].'",  '.$end_point.');'."\n";;
-                        
-       $this->js .= 'jsPlumb.connect({source: e'.$block_id.', target:e'.$skill['parent_id'].'});'."\n";;
+        //default_arrow_color
+            
+        $this->js .= 'var e'.$block_id.' = prepare("block_' . $block_id.'",  '.$end_point.');'."\n";
+        $this->js .= 'var e'.$skill['parent_id'].' = prepare("block_' . $skill['parent_id'].'",  '.$end_point.');'."\n";                        
+        $this->js .= 'jsPlumb.connect({source: e'.$block_id.', target:e'.$skill['parent_id'].'});'."\n";;
     }
     
     /**
@@ -91,17 +97,11 @@
         
         $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 (!in_array($skill['parent_id'], array(0,1))) {
                 continue;
             }
-            $childs = isset($skill['children']) ? count($skill['children']) : 0 ;   
-            
+            $childs = isset($skill['children']) ? count($skill['children']) : 0 ;               
               
             //$x = round($this->offsetX * sin(deg2rad($corner * $count)));
             //$y = round($this->offsetY * cos(deg2rad($corner * $count)));
@@ -110,17 +110,15 @@
                 $brothers[$skill['parent_id']] +=2;
             } else {
                 $brothers[$skill['parent_id']] = 1;
-            }*/
-           $my_count = 0;
-           $brother_count = $brothers[$skill['id']];
-           
+            }*/            
+            $brother_count = $brothers[$skill['id']];            
+            $my_count = 0;
             $parent_x = 0; 
-            if ($skill['parent_id'] == 0) {
-                
-                $x = $constant*$childs/2;
-                //$this->offsetX = $constant*$childs;     
-            } else {
-                
+            if ($skill['parent_id'] == 0) {                
+                //$x = 130*$childs/2;     
+                //$x = $this->space_between_blocks_x*$childs/2;
+                $x = $this->canvas_x/2  - $this->block_size/2;
+            } 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']) {                                                
@@ -129,12 +127,11 @@
                     $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;
+                //$x = $my_count*$this->space_between_blocks_x + $parent_x  + $this->block_size - ($this->space_between_blocks_x*$max/2) ;
+                $x = $my_count*$this->space_between_blocks_x + $parent_x  + $this->block_size - ($this->canvas_x/2 ) ;
             }
                     
-            $y = $skill['level']*150;   
+            $y = $skill['level']*$this->space_between_blocks_y;   
               
             $skill['x'] = $x;
             $skill['y'] = $y;
@@ -143,7 +140,7 @@
         //    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));            
+            $this->add_item($skill, array('x' => $this->offset_x + $x, 'y' => $this->offset_y +$y));            
         }
                 
         echo $this->get_html();