Index: js/viewer-f0/css/styles.css
===================================================================
--- js/viewer-f0/css/styles.css	(revision 214)
+++ js/viewer-f0/css/styles.css	(revision 216)
@@ -5,6 +5,6 @@
 
 .cont{
-    height: 500px;
-    width: 500px;
+    height: 400px;
+    width: 400px;
     display: inline-block;
     border-style: solid;
@@ -24,2 +24,6 @@
     overflow: hidden;
 }
+
+.header{
+    text-align: center;
+}
Index: js/viewer-f0/index.html
===================================================================
--- js/viewer-f0/index.html	(revision 214)
+++ js/viewer-f0/index.html	(revision 216)
@@ -21,5 +21,7 @@
 <script src="js/Structures/NeuroClass.js"></script>
 <script src="js/Viewer.js"></script>
-<!--
+
+<h2 class="header">From TextArea</h2>
+
 <div class="window">
     <div class="cont" id="container"></div>
@@ -36,4 +38,6 @@
 </div>
 
+<h2 class="header">From Framestick Site</h2>
+
 <div class="window">
     <div class="cont" id="container1"></div>
@@ -49,5 +53,5 @@
 </div>
 
-
+<h2 class="header">From Code</h2>
 
 <div class="window">
@@ -64,5 +68,6 @@
 </div>
 
--->
+<h2 class="header">From file</h2>
+
 <div class="window">
     <div class="cont" id="container3"></div>
Index: js/viewer-f0/js/NeuronDrawer.js
===================================================================
--- js/viewer-f0/js/NeuronDrawer.js	(revision 214)
+++ js/viewer-f0/js/NeuronDrawer.js	(revision 216)
@@ -86,5 +86,5 @@
 
     for (var i = 0; i < connections.length; i++)
-        this.drawConnection(i, neurons, connections, einfos);
+        this.drawConnection(i, neurons, connections, layouts);
 }
 
Index: js/viewer-f0/js/SmartLayout.js
===================================================================
--- js/viewer-f0/js/SmartLayout.js	(revision 214)
+++ js/viewer-f0/js/SmartLayout.js	(revision 216)
@@ -1,35 +1,87 @@
-var neuroSL = null;
-var neuroConnSL = null;
-
-var einfos = [];
-var blocks = [];
-
-var N = null;
-
-function SmartLayout(neu, con)
-{
-    neuroSL = neu;
-    neuroConnSL = con;
-    N = neuroSL.length;
-
-    /////////////////////////
-    //////Faza pierwsza//////
-    /////////////////////////
-    blocks = new Array(N);
-    for(var i = 0; i < N; i++){
-        einfos.push(new einfo())
-    }
-
-    for(var i = 0; i < N; i++)
-        setElement(i);
-
-    /////////////////////////
-    //////Faza druga/////////
+function SmartLayout(neu, con) {
+    this.neuroSL = neu;
+    this.neuroConnSL = con;
+    this.N = this.neuroSL.length;
+    this.blocks = [];
+    this.einfos = [];
+    var parent = this;
+
+    einfo = function () {
+        this.block = null;
+        this.x = null;
+        this.y = null;
+    }
+
+    this.Block = function (number) {
+        this.id = number;
+        this.elements = [];
+        this.w = 1;
+        this.h = 1;
+        this.minx = 0;
+        this.miny = 0;
+        this.maxx = 0;
+        this.maxy = 0;
+        this.addElement(number, 0, 0);
+        blocks[this.id] = this;
+        this.map = [];
+    }
+
+    this.Block.prototype.destroy = function () {
+        blocks[this.id] = 0;
+        this.freeMap();
+    }
+
+    this.Block.prototype.freeMap = function () {
+        if (this.map)
+            this.map = [];
+    }
+
+    this.Block.prototype.needMap = function () {
+        if (this.map)
+            return;
+        this.createMap();
+    }
+
+    this.Block.prototype.createMap = function () {
+        this.freeMap();
+        this.w = this.maxx - this.minx + 1;
+        this.h = this.maxy - this.miny + 1;
+        for (var i = 0; i < this.w * this.h; i++)
+            this.map.push(0);
+
+        for (var i = 0; i < this.elements.length; i++) {
+            var e = this.elements[i];
+            this.map[this.w * (parent.einfos[e].y - this.miny) + (parent.einfos[e].x - this.minx)] = 1;
+        }
+    }
+
+    this.Block.prototype.addElement = function (number, x, y) {
+        this.elements.push(number);
+        parent.einfos[number].x = x;
+        parent.einfos[number].y = y;
+        parent.einfos[number].block = this;
+    }
+}
+
+SmartLayout.prototype.create = function () {
+    /////////////////////////
+    //////Phase one//////////
+    /////////////////////////
+    blocks = new Array(this.N);
+    for (var i = 0; i < this.N; i++) {
+        this.einfos.push(new einfo())
+    }
+
+    for (var i = 0; i < this.N; i++)
+        this.setElement(i);
+
+    /////////////////////////
+    //////Phase two//////////
     /////////////////////////
 
     var first = null;
     var el;
-    for(el = 0; el < N; el++){
-        if(blocks[el]){
+    for (el = 0; el < this.N; el++) {
+        if (blocks[el]) {
             first = blocks[el];
             el++;
@@ -38,15 +90,13 @@
     }
 
-    while(el < N){
-        if((first.maxx - first.minx) > (first.maxy - first.miny)){
+    while (el < this.N) {
+        if ((first.maxx - first.minx) > (first.maxy - first.miny)) {
             var y = first.maxy + 2;
             var x = first.minx;
             var ex = first.maxx;
-            while (el<N)
-            {
-                if (blocks[el])
-                {
+            while (el < this.N) {
+                if (blocks[el]) {
                     var dx = blocks[el].maxx - blocks[el].minx + 2;
-                    merge(first, blocks[el], x - blocks[el].minx, y - blocks[el].miny);
+                    this.merge(first, blocks[el], x - blocks[el].minx, y - blocks[el].miny);
                     x += dx;
                     if (x > ex)
@@ -56,15 +106,12 @@
             }
         }
-        else
-        {
+        else {
             var x = first.maxx + 2;
             var y = first.miny;
             var ey = first.maxy;
-            while (el<N)
-            {
-                if (blocks[el])
-                {
+            while (el < this.N) {
+                if (blocks[el]) {
                     var dy = blocks[el].maxy - blocks[el].miny + 2;
-                    merge(first, blocks[el], x - blocks[el].minx, y - blocks[el].miny);
+                    this.merge(first, blocks[el], x - blocks[el].minx, y - blocks[el].miny);
                     y += dy;
                     if (y > ey)
@@ -74,82 +121,20 @@
             }
         }
-        }
+    }
 
     //Pokazanie wartości
     if (first) // at this stage we have a single block containing all neurons
     {
-        //console.log(" - - setting coordinates - -\n");
         var i;
         first.createMap();
-        for (i = 0; i < first.elements.length; i++)
-        {
+        for (i = 0; i < first.elements.length; i++) {
             el = first.elements[i];
-            //console.log(el, einfos[el].x * 70, -1 * einfos[el].y * 70);
         }
         delete first;
     }
-
-}
-
-function einfo(){
-    this.block = null;
-    this.x = null;
-    this.y = null;
-}
-
-function Block(number){
-    this.id = number;
-    this.elements = [];
-    this.w = 1;
-    this.h = 1;
-    this.minx = 0;
-    this.miny = 0;
-    this.maxx = 0;
-    this.maxy = 0;
-    this.addElement(number,0, 0);
-    blocks[this.id] = this;
-    this.map = [];
-}
-
-Block.prototype.destroy = function()
-{
-    blocks[this.id] = 0;
-    this.freeMap();
-}
-
-Block.prototype.freeMap = function(){
-    if(this.map)
-        this.map = [];
-}
-
-Block.prototype.needMap = function(){
-    if(this.map)
-        return;
-    this.createMap();
-
-}
-
-Block.prototype.createMap = function(){
-    this.freeMap();
-    this.w = this.maxx - this.minx + 1;
-    this.h = this.maxy - this.miny + 1;
-    for(var i = 0; i < this.w * this.h; i++)
-        this.map.push(0);
-
-    for (var i = 0; i < this.elements.length; i++)
-    {
-        var e = this.elements[i];
-        this.map[this.w*(einfos[e].y - this.miny) + (einfos[e].x - this.minx)] = 1;
-    }
-}
-
-Block.prototype.addElement = function(number, x, y){
-    this.elements.push(number);
-    einfos[number].x = x;
-    einfos[number].y = y;
-    einfos[number].block = this;
-}
-
-function canMerge(block, block2, dx, dy){
+}
+
+
+SmartLayout.prototype.canMerge = function (block, block2, dx, dy) {
     var x1, y1, x2, y2;
 
@@ -173,6 +158,5 @@
     block2.createMap();
 
-    for (y = y1; y <= y2; y++)
-    {
+    for (y = y1; y <= y2; y++) {
         for (x = x1; x <= x2; x++)
             if (block.map[block.w * y + x] && block2.map[block2.w * (y - dy) + (x - dx)])
@@ -183,7 +167,7 @@
 }
 
-function merge(block, block2, dx, dy){
-
-    if(!canMerge(block, block2, dx, dy))
+SmartLayout.prototype.merge = function (block, block2, dx, dy) {
+
+    if (!this.canMerge(block, block2, dx, dy))
         return 0;
 
@@ -191,8 +175,7 @@
 
 
-    for (var i = 0; i < block2.elements.length; i++)
-    {
+    for (var i = 0; i < block2.elements.length; i++) {
         var e = block2.elements[i];
-        block.addElement(e, einfos[e].x + dx, einfos[e].y + dy);
+        block.addElement(e, this.einfos[e].x + dx, this.einfos[e].y + dy);
     }
 
@@ -206,63 +189,58 @@
     delete block2;
     return 1;
-
-}
-
-function connectAsInput(e, e2){
+}
+
+SmartLayout.prototype.connectAsInput = function (e, e2) {
     var b, b2;
 
-    b = einfos[e].block;
-
-
-    if (!einfos[e2].block)
+    b = this.einfos[e].block;
+
+
+    if (!this.einfos[e2].block)
         new Block(e2);
 
-    b2 = einfos[e2].block;
-
-    if (b == b2)
-    {
+    b2 = this.einfos[e2].block;
+
+    if (b == b2) {
         return;
     }
     var dx, dy;
-    dx = einfos[e].x - einfos[e2].x;
-    dy = einfos[e].y - einfos[e2].y;
-
-    if (merge(b, b2, dx - 1, dy))
+    dx = this.einfos[e].x - this.einfos[e2].x;
+    dy = this.einfos[e].y - this.einfos[e2].y;
+
+    if (this.merge(b, b2, dx - 1, dy))
         return;
 
-    for (var proba = 1;; proba++)
-    {
-        if (merge(b, b2, dx - 1, dy - proba))
+    for (var proba = 1; ; proba++) {
+        if (this.merge(b, b2, dx - 1, dy - proba))
             return;
-        if (merge(b, b2, dx - 1, dy + proba))
+        if (this.merge(b, b2, dx - 1, dy + proba))
             return;
     }
 }
 
-function setElement(e){
-    if (einfos[e].block != null)
-    {
+SmartLayout.prototype.setElement = function (e) {
+    if (this.einfos[e].block != null) {
         return;
     }
 
-    new Block(e);
-    //trzeba pobrać elementy
-    var n = getNumOfInCon(e);
-    for (var we = 0; we < n; we++)
-    {
-        var e2 = getLink(e, we);
+    new this.Block(e);
+
+    var n = this.getNumOfInCon(e);
+    for (var we = 0; we < n; we++) {
+        var e2 = this.getLink(e, we);
         if (e2 < 0)
             continue;
         if (e == e2)
             continue;
-        setElement(e2);
-        connectAsInput(e, e2);
-    }
-}
-
-function getNumOfInCon(nr){
+        this.setElement(e2);
+        this.connectAsInput(e, e2);
+    }
+}
+
+SmartLayout.prototype.getNumOfInCon = function (nr) {
     var number = 0;
-    for(var i = 0;  i < neuroConnSL.length; i++){
-        if(neuroConnSL[i].getDestination() == nr)
+    for (var i = 0; i < this.neuroConnSL.length; i++) {
+        if (this.neuroConnSL[i].getDestination() == nr)
             number++;
     }
@@ -270,11 +248,11 @@
 }
 
-function getLink(destination, number){
+SmartLayout.prototype.getLink = function (destination, number) {
     var temp = 0;
-    for(var i = 0; i < neuroConnSL.length; i++){
-        if(neuroConnSL[i].getDestination() == destination){
-
-            if(temp == number)
-                return neuroConnSL[i].getSource();
+    for (var i = 0; i < this.neuroConnSL.length; i++) {
+        if (this.neuroConnSL[i].getDestination() == destination) {
+
+            if (temp == number)
+                return this.neuroConnSL[i].getSource();
             else
                 temp++;
Index: js/viewer-f0/js/Viewer.js
===================================================================
--- js/viewer-f0/js/Viewer.js	(revision 214)
+++ js/viewer-f0/js/Viewer.js	(revision 216)
@@ -245,13 +245,8 @@
         this._neuronDrawer = new NeuronDrawer(this.NetworkSettings.context, this.NetworkSettings.width, this.NetworkSettings.height );
         this._neuronDrawer.initializeNewCanvas();
-        new SmartLayout(this._neurons, this._neuroConns);
-        this._neuronDrawer.drawNeuralNetwork(this._neurons, this._neuroConns, einfos, this._neuroClasses);
+        var layout = new SmartLayout(this._neurons, this._neuroConns);
+        layout.create();
+        this._neuronDrawer.drawNeuralNetwork(this._neurons, this._neuroConns, layout.einfos, this._neuroClasses);
         this._neuronDrawer.finalize();
-
-        /*this._neuronDrawer = new NeuronDrawer(this._neuronsContext);
-        this._neuronDrawer.initializeScene();
-        new SmartLayout(this._neurons, this._neuroConns);
-        this._neuronDrawer.drawNeuralNetwork(this._neurons, this._neuroConns, einfos, this._neuroClasses);
-        this._neuronDrawer.renderScene();*/
     }
 }
@@ -265,6 +260,4 @@
 
     viewer.NetworkSettings.context =  "containerNeuron";
-    viewer.NetworkSettings.width = 400;
-    viewer.NetworkSettings.height = 400;
     viewer.run(viewer.Mode.TEXTAREA, $("#geno"));
 }
@@ -275,5 +268,4 @@
     viewer.VisualizationSettings.width = 400;
     viewer.VisualizationSettings.height = 400;
-
     viewer.NetworkSettings.context =  "containerNeuron1";
     viewer.NetworkSettings.width = 400;
@@ -299,10 +291,10 @@
     //var debugCreatureName = "Quadro";
     var debugCreatureName = "spider";
-    //viewer.VisualizationSettings.context = $("#container3");
-    //viewer.VisualizationSettings.width = 400;
-    //viewer.VisualizationSettings.height = 400;
+    viewer.VisualizationSettings.context = $("#container3");
+    viewer.VisualizationSettings.width = 400;
+    viewer.VisualizationSettings.height = 400;
     viewer.NetworkSettings.context =  "containerNeuron3";
-    //viewer.NetworkSettings.width = 400;
-    //viewer.NetworkSettings.height = 400;
+    viewer.NetworkSettings.width = 400;
+    viewer.NetworkSettings.height = 400;
     viewer.run(viewer.Mode.LINK, "http://localhost:63343/FramestickFavi/creatures/" + debugCreatureName + ".txt");
 }
Index: js/viewer-f0/js/graphicsEngine.js
===================================================================
--- js/viewer-f0/js/graphicsEngine.js	(revision 214)
+++ js/viewer-f0/js/graphicsEngine.js	(revision 216)
@@ -263,8 +263,8 @@
         });
 
-    if(!this._render)
+    /*if(!this._render)
     {
         return;
-    }
+    }*/
 
     this._renderer.render(this._scene, this._camera);
