(function (arguman) {

    arguman.utils = {
        adder: function (a, b) {return a + b}
    };

    arguman.CollapsibleTree = Class.extend({

        premiseWidth: 260,

        init: function (options) {
            $.extend(this, options);
            this.$el = $(this.el);
        },

        setTreeWidth: function () {
            /*
            * Set full width to container, and reduce the width with
            * positions of last premise.
            * */

            if (this.$el.hasClass("empty")) {
                return;
            }

             var root = this.$el.find(".root"),
                mainContention = $(this.mainContention);
            var treeWidth = parseInt(this.$el.data("width")) * this.premiseWidth;
            this.width = treeWidth;
            this.$el.width(treeWidth);

            mainContention.css({
                "margin-left": (root.position().left) - (mainContention.width() / 2)
            });

            var mainPremises = root.next().children(),
                lastPremise = mainPremises.last();

            this.width = (lastPremise.position().left + this.premiseWidth + 60);
            this.$el.width(this.width);

            if (this.width < window.innerWidth) {
                this.$el.css({
                    "margin-left": (window.innerWidth/2) - (this.width/2)
                });
                mainContention.css({
                    "margin-left": (window.innerWidth/2) - (mainContention.width() / 2)
                });
            }

        },

        render: function () {
            this.setTreeWidth();
        }
    });

    arguman.Zoom = Class.extend({
        canvas: '#app',
        currentSize: function(){
            return parseFloat($(this.canvas).css('zoom')) || 1
        },
        zoomOut: function(){
            var current = this.currentSize();
            $(this.canvas).css('zoom', current - 0.1);
            $('#zoomIn').show();
            $(this.canvas).css('padding-top', function(index, curValue){
                return parseInt(curValue, 10) + 40 + 'px';
            });
        },
        zoomIn: function(){
            var current = this.currentSize();
            $('#app').css('zoom', current + 0.1);
            if(parseFloat($(this.canvas).css('zoom')) >= 1){
                $('#zoomIn').hide();
            }
            $(this.canvas).css('padding-top', function(index, curValue){
                return parseInt(curValue, 10) - 40 + 'px';
            });
        },
        init: function(){
            $('#zoomIn').on('click', $.proxy(this, 'zoomIn'));
            $('#zoomOut').on('click', $.proxy(this, 'zoomOut'));
        }
    });

})(window.arguman || (window.arguman = {}));
@@ -828,113 +828,207 @@
     
-mainContention.css(%7B%0A                %22margin-left%22: (root.position().left) - (mainContention.width() / 2)
+var mainPremises = root.next().children();%0A%0A            if (mainPremises.length %3E 1) %7B%0A                var premises = root.parent().find(%22li%22);%0A%0A                var maxPosition = Math.max.apply(this,
 %0A   
@@ -1032,29 +1032,26 @@
             
-%7D);%0A%0A
+  
             
@@ -1054,99 +1054,137 @@
     
-var mainPremises = root.next().children(),%0A                lastPremise = mainPremises.last(
+          premises.toArray().map(function (premise) %7B%0A                                        return $(premise).position().left%7D)
 );%0A%0A
@@ -1187,32 +1187,36 @@
 );%0A%0A            
+  
+  
 this.width = (la
@@ -1217,35 +1217,19 @@
  = (
-lastPremise.position().left
+maxPosition
  + t
@@ -1251,13 +1251,18 @@
 h + 
-6
+35
 0);%0A
+    
     
@@ -1292,24 +1292,184 @@
 this.width);
+%0A                mainContention.css(%7B%0A                    %22margin-left%22: (root.position().left) - (mainContention.width() / 2)%0A                %7D);%0A            %7D
 %0A%0A          

Fix the layout of singular contentions