From 47cb8052c6c9a322d123364ab6122a07cd1b8d2c Mon Sep 17 00:00:00 2001
From: "marcins78@gmail.com"
 <marcins78@gmail.com@eb7970ca-0f6f-de4b-2938-835b230b9d1f>
Date: Thu, 22 Nov 2012 21:04:35 +0000
Subject: [PATCH] Working on new deck builder.

---
 .../src/main/webapp/deckBuild2.html           |  19 +-
 .../gemp-011/AttachedCardsLayoutCardGroup.js  | 168 ++++++++
 .../main/webapp/js/gemp-011/CardContainer.js  |  38 ++
 .../src/main/webapp/js/gemp-011/CardGroup.js  |  52 +++
 .../src/main/webapp/js/gemp-011/DeckPanel.js  |  17 +
 .../js/gemp-011/RowCardLayoutCardGroup.js     | 185 ++++++++
 .../main/webapp/js/gemp-011/cardFilter2.js    | 400 ++++++++++++++++++
 .../src/main/webapp/js/gemp-011/common.js     |   8 +
 .../webapp/js/gemp-011/deckBuildingUi2.js     | 118 +++++-
 9 files changed, 979 insertions(+), 26 deletions(-)
 create mode 100644 gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/AttachedCardsLayoutCardGroup.js
 create mode 100644 gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/CardContainer.js
 create mode 100644 gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/CardGroup.js
 create mode 100644 gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/DeckPanel.js
 create mode 100644 gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/RowCardLayoutCardGroup.js
 create mode 100644 gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/cardFilter2.js
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html b/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
index 2ec6e947b..b59e28dcd 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
@@ -15,7 +15,11 @@
 
         .panel {
             overflow: hidden !important;
-        } 
+        }
+
+        .card {
+            position: absolute;
+        }
 
     </style>
     <link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
@@ -32,7 +36,12 @@
     <script type="text/javascript" src="js/gemp-011/communication.js"></script>
     <script type="text/javascript" src="js/gemp-011/logging.js"></script>
     <script type="text/javascript" src="js/gemp-011/commonUi.js"></script>
-    <script type="text/javascript" src="js/gemp-011/cardFilter.js"></script>
+    <script type="text/javascript" src="js/gemp-011/jCards.js"></script>
+    <script type="text/javascript" src="js/gemp-011/CardContainer.js"></script>
+    <script type="text/javascript" src="js/gemp-011/CardGroup.js"></script>
+    <script type="text/javascript" src="js/gemp-011/RowCardLayoutCardGroup.js"></script>
+    <script type="text/javascript" src="js/gemp-011/cardFilter2.js"></script>
+    <script type="text/javascript" src="js/gemp-011/DeckPanel.js"></script>
     <script type="text/javascript" src="js/gemp-011/deckBuildingUi2.js"></script>
 
     <script type="text/javascript">
@@ -67,7 +76,7 @@
                             $("#paging"),
                             $("#collectionContents"),
                             $("#deckDiv")
-                    );
+                            );
 
                     var doLayout = function() {
                         var collectionWidth = $("#collectionDiv").width();
@@ -107,11 +116,11 @@
 
 </head>
 <body>
-<div id='northPanel' class="ui-layout-north panel">
+<div id='northPanel' class="ui-layout-north panel" style="padding: 0;">
     <div id="collectionFilterDiv" class="ui-layout-west panel"></div>
     <div id="collectionDiv" class="ui-layout-center panel">
         <div id="paging"></div>
-        <div id="collectionContents" class="ui-widget-content"></div>
+        <div id="collectionContents" class="ui-widget-content" style="position: relative"></div>
     </div>
 </div>
 <div id="deckPanel" class="ui-layout-center panel">
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/AttachedCardsLayoutCardGroup.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/AttachedCardsLayoutCardGroup.js
new file mode 100644
index 000000000..3a9e2de78
--- /dev/null
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/AttachedCardsLayoutCardGroup.js
@@ -0,0 +1,168 @@
+var AttachedCardsLayoutCardGroup = RowCardLayoutCardGroup.extend({
+    attachedGroupsLeft: null,
+    attachedGroupsTop: null,
+    attachedGroupsFinderFunc: null,
+    attachedGroupsRootRecognizeFunc: null,
+
+    init: function (cardContainerDiv, cardContainFunc) {
+        this._super(cardContainerDiv, cardContainFunc);
+        this.attachedGroupsLeft = new Array();
+        this.attachedGroupsTop = new Array();
+        this.attachedGroupsFinderFunc = new Array();
+        this.attachedGroupsRootRecognizeFunc = new Array();
+    },
+
+    addAttachedGroup: function(left, top, rootRecognizeFunc, finderFunc) {
+        this.attachedGroupsLeft.push(left);
+        this.attachedGroupsTop.push(top);
+        this.attachedGroupsRootRecognizeFunc.push(rootRecognizeFunc);
+        this.attachedGroupsFinderFunc.push(finderFunc);
+    },
+
+    iterAttached: function(cardDiv, cardId, props, rootRecognizeFunc, finderFunc, func) {
+        if (!rootRecognizeFunc(cardDiv, cardId, props))
+            return;
+
+        $(".card", this.cardContainerDiv).each(
+            function() {
+                var cardDivAtt = $(this);
+                var cardIdAtt = cardDivAtt.data("id");
+                var propsAtt = cardDivAtt.data("props");
+                var layout = cardDivAtt.data("layout");
+                var widthToHeightScaleFunc = cardDivAtt.data("widthToHeight");
+                if (finderFunc(cardDiv, cardId, props, cardDivAtt, cardIdAtt, propsAtt))
+                    func(cardDivAtt, cardIdAtt, propsAtt, layout, widthToHeightScaleFunc);
+            });
+    },
+
+    getCardHeightScale: function(cardDiv, cardId, props) {
+        var cardBox = this.getCardGroupBox(cardDiv, cardId, props);
+        return Math.min(1, 1 / (cardBox.bottom - cardBox.top));
+    },
+
+    getCardBox: function(cardDiv, cardId, props) {
+        var cardRatio = cardDiv.data("widthToHeight")(cardId, props);
+        var result = {};
+        result.left = 0;
+        result.top = 0;
+        result.right = Math.min(1, cardRatio);
+        result.bottom = Math.min(1, 1 / cardRatio);
+        return result;
+    },
+
+    getCardGroupBox: function(cardDiv, cardId, props) {
+        var that = this;
+
+        var minLeft = 0;
+        var minTop = 0;
+        var maxRight = Math.min(1, cardDiv.data("widthToHeight")(cardId, props));
+        var maxBottom = Math.min(1, 1 / cardDiv.data("widthToHeight")(cardId, props));
+        var cardWidth = maxRight;
+        var cardHeight = maxBottom;
+
+        for (var i = 0; i < this.attachedGroupsFinderFunc.length; i++) {
+            var attachFunc = this.attachedGroupsFinderFunc[i];
+            var rootRecognizeFunc = this.attachedGroupsRootRecognizeFunc[i];
+            var attachLeft = this.attachedGroupsLeft[i];
+            var attachTop = this.attachedGroupsTop[i];
+
+            var attIndex = 0;
+            this.iterAttached(cardDiv, cardId, props, rootRecognizeFunc, attachFunc,
+                function(attCardDiv, attCardId, attProps, layout, attWidthToHeightRatioFunc) {
+                    attIndex++;
+                    var attBox = that.getCardBox(attCardDiv, attCardId, attProps);
+                    var attWidth = attBox.right - attBox.left;
+                    var attHeight = attBox.bottom - attBox.top;
+                    if (attachLeft < 0) {
+                        maxRight = Math.max(maxRight, attachLeft * attIndex + attWidth);
+                    } else if (attachLeft > 0) {
+                        minLeft = Math.min(minLeft, cardWidth + attachLeft*attIndex - attWidth);
+                    }
+
+                    if (attachTop < 0) {
+                        maxBottom = Math.max(maxBottom, attachTop * attIndex + attHeight);
+                    } else if (attachTop > 0) {
+                        minTop = Math.min(minTop, cardHeight + attachTop*attIndex - attHeight);
+                    }
+                });
+
+            if (attachLeft < 0)
+                minLeft = Math.min(minLeft, attachLeft * attIndex);
+            else
+                maxRight = Math.max(maxRight, cardWidth + attachLeft * attIndex);
+
+            if (attachTop < 0)
+                minTop = Math.min(minTop, attachTop * attIndex);
+            else
+                maxBottom = Math.max(maxBottom, cardHeight + attachTop * attIndex);
+        }
+        var result = {};
+        result.left = minLeft;
+        result.top = minTop;
+        result.right = maxRight;
+        result.bottom = maxBottom;
+        return result;
+    },
+
+    getCardBoxRatio: function(cardDiv, cardId, props) {
+        var cardBox = this.getCardGroupBox(cardDiv, cardId, props);
+        var result = {};
+        result.x = cardBox.right - cardBox.left;
+        result.y = cardBox.bottom - cardBox.top;
+        return result;
+    },
+
+    layoutCardGroup: function(cardDiv, cardId, props, layout, zIndex, cardBox, boxLeft, boxTop, boxWidth, boxHeight) {
+        var that = this;
+        var pixelSize = boxWidth / (cardBox.right - cardBox.left);
+        var cardGroupHeight = pixelSize * (cardBox.bottom - cardBox.top);
+        var cardGroupWidth = pixelSize * (cardBox.right - cardBox.left);
+
+        var cardRatio = cardDiv.data("widthToHeight")(cardId, props);
+        var cardWidth = pixelSize * Math.min(1, cardRatio);
+        var cardHeight = cardWidth / cardRatio;
+        var cardLeft = boxLeft - cardBox.left * pixelSize;
+        var cardTop = boxTop - cardBox.top * pixelSize + (boxHeight - cardGroupHeight) / 2;
+        this.layoutOneCard(cardDiv, cardId, props, layout, zIndex, cardLeft, cardTop, cardWidth, cardHeight);
+
+        zIndex--;
+
+        for (var i = 0; i < this.attachedGroupsFinderFunc.length; i++) {
+            var attachFunc = this.attachedGroupsFinderFunc[i];
+            var rootRecognizeFunc = this.attachedGroupsRootRecognizeFunc[i];
+            var attachLeft = this.attachedGroupsLeft[i];
+            var attachTop = this.attachedGroupsTop[i];
+
+            var index = 0;
+            this.iterAttached(cardDiv, cardId, props, rootRecognizeFunc, attachFunc,
+                function(attCardDiv, attCardId, attProps, layout, attWidthToHeightRatioFunc) {
+                    index++;
+                    var attCardBox = that.getCardBox(attCardDiv, attCardId, attProps);
+                    var attWidth = pixelSize * (attCardBox.right - attCardBox.left);
+                    var attHeight = pixelSize * (attCardBox.bottom - attCardBox.top);
+
+                    var attLeft;
+                    if (attachLeft <= 0)
+                        attLeft = cardLeft + index * pixelSize * attachLeft;
+                    else
+                        attLeft = cardLeft + cardWidth - attWidth + index * pixelSize * attachLeft;
+                    var attTop;
+                    if (attachTop <= 0)
+                        attTop = cardTop + index * pixelSize * attachTop;
+                    else
+                        attTop = cardTop + cardHeight - attHeight + index * pixelSize * attachTop;
+                    that.layoutOneCard(attCardDiv, attCardId, attProps, layout, zIndex,
+                        attLeft, attTop,
+                        attWidth, attHeight);
+                    zIndex--;
+                });
+        }
+    },
+
+    layoutCardBox: function(cardDiv, cardId, props, layout, boxLeft, boxTop, boxWidth, boxHeight, ratio) {
+        var that = this;
+        var zIndex = this.zIndexBase;
+        var cardBox = this.getCardGroupBox(cardDiv, cardId, props);
+        this.layoutCardGroup(cardDiv, cardId, props, layout, zIndex, cardBox, boxLeft, boxTop, boxWidth, boxHeight);
+    }
+});
\ No newline at end of file
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/CardContainer.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/CardContainer.js
new file mode 100644
index 000000000..672f8474c
--- /dev/null
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/CardContainer.js
@@ -0,0 +1,38 @@
+// This is a logical, and not a physical object.
+// Its purpose is to maintain order and control over multiple card groups
+var CardContainer = Class.extend({
+    cardContainerDiv: null,
+    cardGroups: null,
+    layoutFunc: null,
+
+    init: function(cardContainerDiv, layoutFunc) {
+        this.cardContainerDiv = cardContainerDiv;
+        this.cardGroups = {};
+        this.layoutFunc = layoutFunc;
+    },
+
+    addCard: function(elem, cardId, props, layoutFunc, widthToHeightScaleFunc) {
+        var cardDiv = $("<div class='card'></div>");
+        cardDiv.append(elem);
+        this.cardContainerDiv.append(cardDiv);
+        cardDiv.data("id", cardId);
+        cardDiv.data("props", props);
+        cardDiv.data("layout", layoutFunc);
+        cardDiv.data("widthToHeight", widthToHeightScaleFunc);
+    },
+
+    addCardGroup: function(name, cardGroup) {
+        this.cardGroups[name] = cardGroup;
+    },
+
+    setLayout: function(left, top, width, height) {
+        this.layoutFunc(this.cardGroups, left, top, width, height);
+    },
+
+    layoutCards: function() {
+        iterObj(this.cardGroups,
+                function (groupName, cardGroup) {
+                    cardGroup.layoutCards();
+                });
+    }
+});
\ No newline at end of file
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/CardGroup.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/CardGroup.js
new file mode 100644
index 000000000..8f3ca6f44
--- /dev/null
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/CardGroup.js
@@ -0,0 +1,52 @@
+var CardGroup = Class.extend({
+    cardContainerDiv: null,
+    cardContainFunc: null,
+    left: null,
+    top: null,
+    width: null,
+    height: null,
+
+    init: function(cardContainerDiv, cardContainFunc) {
+        this.cardContainerDiv = cardContainerDiv;
+        this.cardContainFunc = cardContainFunc;
+    },
+
+    iterCards: function(func) {
+        var that = this;
+        $(".card", this.cardContainerDiv).each(
+                function() {
+                    var cardDiv = $(this);
+                    var cardId = cardDiv.data("id");
+                    var props = cardDiv.data("props");
+                    var layout = cardDiv.data("layout");
+                    if (that.cardContainFunc(cardDiv, cardId, props))
+                        func(cardDiv, cardId, props, layout);
+                });
+    },
+
+    findCardPropsById: function(cardId) {
+        var result = null;
+        $(".card", this.cardContainerDiv).each(
+          function() {
+              var cardDiv = $(this);
+              var foundCardId = cardDiv.data("id");
+              if (foundCardId == cardId)
+                result = cardDiv.data("props");
+          });
+        
+        return result;
+    },
+
+    setLayout: function(left, top, width, height) {
+        this.left = left;
+        this.top = top;
+        this.width = width;
+        this.height = height;
+
+        this.layoutCards();
+    },
+
+    layoutCards: function() {
+        log("CardGroup::layoutCards - This method should be overriden");
+    }
+});
\ No newline at end of file
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/DeckPanel.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/DeckPanel.js
new file mode 100644
index 000000000..679614126
--- /dev/null
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/DeckPanel.js
@@ -0,0 +1,17 @@
+var DeckPanel = Class.extend({
+    deckDiv:null,
+
+    init:function (deckDiv) {
+        this.deckDiv = deckDiv;
+        $(this.deckDiv).tabs();
+        
+    },
+
+    clearDeck: function() {
+
+    },
+
+    layoutUi: function(x, y, width, height) {
+
+    }
+});
\ No newline at end of file
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/RowCardLayoutCardGroup.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/RowCardLayoutCardGroup.js
new file mode 100644
index 000000000..d5a24c151
--- /dev/null
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/RowCardLayoutCardGroup.js
@@ -0,0 +1,185 @@
+var RowCardLayoutCardGroup = CardGroup.extend({
+    padding: 3,
+    zIndexBase: 0,
+    maxCardHeight: null,
+
+    init: function (cardContainerDiv, cardContainFunc) {
+        this._super(cardContainerDiv, cardContainFunc);
+    },
+
+    setMaxCardHeight: function(maxCardHeight) {
+        this.maxCardHeight = maxCardHeight;
+    },
+
+    setZIndexBase: function(zIndexBase) {
+        this.zIndexBase = zIndexBase;
+    },
+
+    getCardHeightScale: function(cardDiv, cardId, props) {
+        return 1;
+    },
+
+    getCardBoxRatio: function(cardDiv, cardId, props) {
+        var result = {};
+        result.x = Math.min(1, cardDiv.data("widthToHeight")(cardId, props));
+        result.y = Math.min(1, 1 / cardDiv.data("widthToHeight")(cardId, props));
+        return result;
+    },
+
+    layoutCards: function() {
+        var that = this;
+        var ratios = {};
+        var scale = 1;
+        this.iterCards(
+            function(cardDiv, cardId, props, layout) {
+                ratios[cardId] = that.getCardBoxRatio(cardDiv, cardId, props);
+                scale = Math.min(scale, that.getCardHeightScale(cardDiv, cardId, props));
+            });
+
+        if (!this.tryLayoutInOneRow(ratios, scale)) {
+            var rows = 2;
+            if (this.maxCardHeight != null)
+                rows = Math.max(rows, Math.ceil((this.height + this.padding) / (this.maxCardHeight + this.padding)));
+            while (true) {
+                if (this.canLayoutInRows(ratios, rows, scale)) {
+                    this.layoutInRows(ratios, rows, scale);
+                    return;
+                }
+                rows++;
+            }
+        }
+    },
+
+    canLayoutInRows: function(ratios, rows, scale) {
+        //log("Can layout in rows: "+rows);
+        var that = this;
+        var rowHeight = this.height / rows - this.padding * (rows - 1);
+        var ascentLeft = 0;
+        var cardRowCount = 0;
+        var row = 0;
+        this.iterCards(
+            function(cardDiv, cardId, props, layout) {
+                var cardWidth = ratios[cardId].x * rowHeight * scale;
+                cardRowCount++;
+                if (cardRowCount == 1) {
+                    ascentLeft += that.padding + cardWidth;
+                } else {
+                    if (ascentLeft + that.padding + cardWidth > that.width) {
+                        ascentLeft = 0;
+                        row++;
+                        ascentLeft += that.padding + cardWidth;
+                        cardRowCount = 1;
+                    } else {
+                        ascentLeft += that.padding + cardWidth;
+                    }
+                }
+            });
+        return row < rows;
+    },
+
+    layoutInRows: function(ratios, rows, scale) {
+        var that = this;
+        var rowHeight = this.height / rows - this.padding * (rows - 1);
+        var ascentLeft = 0;
+        var ascentTop = 0;
+        var cardRowCount = 0;
+        this.iterCards(
+            function(cardDiv, cardId, props, layout) {
+                var ratio = ratios[cardId];
+                var boxWidth = ratio.x * rowHeight * scale;
+                cardRowCount++;
+                if (cardRowCount == 1) {
+                    that.layoutCardBox(cardDiv, cardId, props, layout, that.left + ascentLeft, that.top + ascentTop, boxWidth, rowHeight, ratio);
+                    ascentLeft += that.padding + boxWidth;
+                } else {
+                    if (ascentLeft + that.padding + boxWidth > that.width) {
+                        ascentLeft = 0;
+                        ascentTop += that.padding + rowHeight;
+                        that.layoutCardBox(cardDiv, cardId, props, layout, that.left + ascentLeft, that.top + ascentTop, boxWidth, rowHeight, ratio);
+                        ascentLeft += that.padding + boxWidth;
+                        cardRowCount = 1;
+                    } else {
+                        that.layoutCardBox(cardDiv, cardId, props, layout, that.left + ascentLeft, that.top + ascentTop, boxWidth, rowHeight, ratio);
+                        ascentLeft += that.padding + boxWidth;
+                    }
+                }
+            });
+    },
+
+    tryLayoutInOneRow: function(ratios, scale) {
+        var totalRatio = 0;
+        var cardCount = 0;
+        this.iterCards(
+            function(cardDiv, cardId, props, layout) {
+                cardCount++;
+                totalRatio += ratios[cardId].x;
+            });
+
+        var availableCardsWidth = this.width - this.padding * (cardCount - 1);
+        var maxCardHeight = this.height;
+        if (this.maxCardHeight != null)
+            maxCardHeight = Math.min(this.maxCardHeight, maxCardHeight);
+        var oneRowCardWidths = maxCardHeight * totalRatio * scale;
+        if (oneRowCardWidths <= availableCardsWidth) {
+            this.layoutInOneFullRow(ratios, scale);
+            return true;
+        } else {
+            var cardHeightInTwoRows = this.height / 2 - this.padding;
+            var cardHeightToFitAll = availableCardsWidth / (totalRatio * scale)
+            if (cardHeightToFitAll >= cardHeightInTwoRows) {
+                this.layoutInOnePartialRow(ratios, cardHeightToFitAll, scale);
+                return true;
+            }
+        }
+        return false;
+    },
+
+    layoutInOnePartialRow: function(ratios, rowHeight, scale) {
+        var that = this;
+        var left = 0;
+        var index = 0;
+        this.iterCards(
+            function(cardDiv, cardId, props, layout) {
+                var ratio = ratios[cardId];
+                var boxWidth = ratio.x * rowHeight * scale;
+
+                that.layoutCardBox(cardDiv, cardId, props, layout, that.left + left, that.top, boxWidth, rowHeight, ratio);
+
+                left += boxWidth + that.padding;
+                index++;
+            });
+    },
+
+    layoutInOneFullRow: function(ratios, scale) {
+        var that = this;
+        var left = 0;
+        var index = 0;
+        this.iterCards(
+            function(cardDiv, cardId, props, layout) {
+                var ratio = ratios[cardId];
+                var cardHeight = that.height;
+                if (that.maxCardHeight != null)
+                    cardHeight = Math.min(cardHeight, that.maxCardHeight);
+                var boxWidth = ratio.x * cardHeight * scale;
+
+                that.layoutCardBox(cardDiv, cardId, props, layout, that.left + left, that.top, boxWidth, cardHeight, ratio);
+
+                left += boxWidth + that.padding;
+                index++;
+            });
+    },
+
+    layoutOneCard: function(cardDiv, cardId, props, layout, zIndex, cardLeft, cardTop, cardWidth, cardHeight) {
+        //log("layout card "+cardId+": "+cardLeft+","+cardTop+"    "+cardWidth+"x"+cardHeight);
+        cardDiv.css({"zIndex": zIndex,"left": cardLeft + "px", "top": cardTop + "px", "width": cardWidth, "height": cardHeight});
+        layout(cardDiv, cardId, props, cardLeft, cardTop, cardWidth, cardHeight);
+    },
+
+    layoutCardBox: function(cardDiv, cardId, props, layout, boxLeft, boxTop, boxWidth, boxHeight, ratio) {
+        var cardLeft = boxLeft;
+        var cardWidth = boxWidth;
+        var cardHeight = cardWidth / cardDiv.data("widthToHeight")(cardId, props);
+        var cardTop = boxTop + (boxHeight - cardHeight) / 2;
+        this.layoutOneCard(cardDiv, cardId, props, layout, this.zIndexBase, cardLeft, cardTop, cardWidth, cardHeight);
+    }
+});
\ No newline at end of file
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/cardFilter2.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/cardFilter2.js
new file mode 100644
index 000000000..c4b470286
--- /dev/null
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/cardFilter2.js
@@ -0,0 +1,400 @@
+var CardFilter = Class.extend({
+    clearCollectionFunc:null,
+    addCardFunc:null,
+    finishCollectionFunc:null,
+    getCollectionFunc:null,
+
+    collectionType:null,
+
+    filter:null,
+    start:0,
+    count:18,
+
+    pageDiv:null,
+    fullFilterDiv:null,
+    filterDiv:null,
+
+    previousPageBut:null,
+    nextPageBut:null,
+    countSlider:null,
+
+    setSelect:null,
+    nameInput:null,
+    sortSelect:null,
+    raritySelect:null,
+
+    init:function (elem, pageElem, getCollectionFunc, clearCollectionFunc, addCardFunc, finishCollectionFunc) {
+        this.getCollectionFunc = getCollectionFunc;
+        this.clearCollectionFunc = clearCollectionFunc;
+        this.addCardFunc = addCardFunc;
+        this.finishCollectionFunc = finishCollectionFunc;
+
+        this.filter = "";
+
+        this.buildUi(elem, pageElem);
+    },
+
+    enableDetailFilters:function (enable) {
+        $("#culture1").buttonset("option", "disabled", !enable);
+        $("#culture2").buttonset("option", "disabled", !enable);
+        $("#cardType").prop("disabled", !enable);
+        $("#keyword").prop("disabled", !enable);
+    },
+
+    setFilter:function (filter) {
+        this.filter = filter;
+
+        this.start = 0;
+        this.getCollection();
+    },
+
+    setType:function (typeValue) {
+        $("#type").val(typeValue);
+    },
+
+    buildUi:function (elem, pageElem) {
+        var that = this;
+
+        this.pageDiv = $("<div></div>");
+
+        this.previousPageBut = $("<button id='previousPage' style='float: left;'>Previous page</button>").button({
+            text:false,
+            icons:{
+                primary:"ui-icon-circle-triangle-w"
+            },
+            disabled:true
+        }).click(
+            function () {
+                that.disableNavigation();
+                that.start -= that.count;
+                that.getCollection();
+            });
+
+        this.nextPageBut = $("<button id='nextPage' style='float: right;'>Next page</button>").button({
+            text:false,
+            icons:{
+                primary:"ui-icon-circle-triangle-e"
+            },
+            disabled:true
+        }).click(
+            function () {
+                that.disableNavigation();
+                that.start += that.count;
+                that.getCollection();
+            });
+
+        this.countSlider = $("<div id='countSlider' style='left: 50px; top: 10px; width: 200px;'></div>").slider({
+            value:18,
+            min:4,
+            max:40,
+            step:1,
+            disabled:true,
+            slide:function (event, ui) {
+                that.start = 0;
+                that.count = ui.value;
+                that.getCollection();
+            }
+        });
+
+        this.pageDiv.append(this.previousPageBut);
+        this.pageDiv.append(this.nextPageBut);
+        this.pageDiv.append(this.countSlider);
+
+        pageElem.append(this.pageDiv);
+
+        this.fullFilterDiv = $("<div></div>");
+        this.setSelect = $("<select style='width: 130px; font-size: 80%;'>"
+            + "<option value=''>All Sets</option>"
+            + "<option value='fotr_block'>Fellowship Block</option>"
+            + "<option value='ttt_block'>Towers Block</option>"
+            + "<option value='king_block'>King Block</option>"
+            + "<option value='war_block'>War of the Ring Block</option>"
+            + "<option value='hunter_block'>Hunters Block</option>"
+            + "<option value='towers_standard'>Towers Standard</option>"
+            + "<option value='movie'>Movie Block</option>"
+            + "<option value='war_standard'>War of the Ring standard</option>"
+            + "<option value='standard'>Standard</option>"
+            + "<option value='0'>00 - Promo</option>"
+            + "<option value='1'>01 - The Fellowship of the Ring</option>"
+            + "<option value='2'>02 - Mines of Moria</option>"
+            + "<option value='3'>03 - Realms of the Elf-lords</option>"
+            + "<option value='4'>04 - The Two Towers</option>"
+            + "<option value='5'>05 - Battle of Helm's Deep</option>"
+            + "<option value='6'>06 - Ents of Fangorn</option>"
+            + "<option value='7'>07 - The Return of the King</option>"
+            + "<option value='8'>08 - Siege of Gondor</option>"
+            + "<option value='9'>09 - Reflections</option>"
+            + "<option value='10'>10 - Mount Doom</option>"
+            + "<option value='11'>11 - Shadows</option>"
+            + "<option value='12'>12 - Black Rider</option>"
+            + "<option value='13'>13 - Bloodlines</option>"
+            + "<option value='14'>14 - Expanded Middle-earth</option>"
+            + "<option value='15'>15 - The Hunters</option>"
+            + "<option value='16'>16 - The Wraith Collection</option>"
+            + "<option value='17'>17 - Rise of Saruman</option>"
+            + "<option value='18'>18 - Treachery & Deceit</option>"
+            + "<option value='19'>19 - Ages End</option>"
+            + "</select>");
+        this.nameInput = $("<input type='text' value='Card name' style='width: 130px; font-size: 70%;'>");
+        this.sortSelect = $("<select style='width: 80px; font-size: 80%;'>"
+            + "<option value=''>Sort by:</option>"
+            + "<option value='name,collectorInfo'>Name</option>"
+            + "<option value='twilight,name,collectorInfo'>Twilight</option>"
+            + "<option value='siteNumber,name'>Site number</option>"
+            + "<option value='strength,name,collectorInfo'>Strength</option>"
+            + "<option value='vitality,name,collectorInfo'>Vitality</option>"
+            + "<option value='cardType,name,collectorInfo'>Card type</option>"
+            + "<option value='culture,name,collectorInfo'>Culture</option>"
+            + "<option value='collectorInfo'>Collector's Info</option>"
+            + "</select>");
+        this.raritySelect = $("<select style='width: 40px; font-size: 80%;'>"
+            + "<option value=''>Rarity:</option>"
+            + "<option value='R'>Rare</option>"
+            + "<option value='U'>Uncommon</option>"
+            + "<option value='C'>Common</option>"
+            + "<option value='A'>Alternate Image</option>"
+            + "<option value='P'>Promo</option>"
+            + "<option value='X'>Rare+</option>"
+            + "<option value='S'>Fixed</option>"
+            + "</select>");
+
+        this.fullFilterDiv.append(this.setSelect);
+        this.fullFilterDiv.append(this.nameInput);
+        this.fullFilterDiv.append(this.sortSelect);
+        this.fullFilterDiv.append(this.raritySelect);
+
+        elem.append(this.fullFilterDiv);
+
+        this.filterDiv = $("<div></div>");
+
+        this.filterDiv.append("<div id='culture1'>"
+            + "<input type='checkbox' id='DWARVEN'/><label for='DWARVEN' id='labelDWARVEN'><img src='images/cultures/dwarven.png'/></label>"
+            + "<input type='checkbox' id='ELVEN'/><label for='ELVEN' id='labelELVEN'><img src='images/cultures/elven.png'/></label>"
+            + "<input type='checkbox' id='GANDALF'/><label for='GANDALF' id='labelGANDALF'><img src='images/cultures/gandalf.png'/></label>"
+            + "<input type='checkbox' id='GONDOR'/><label for='GONDOR' id='labelGONDOR'><img src='images/cultures/gondor.png'/></label>"
+            + "<input type='checkbox' id='ROHAN'/><label for='ROHAN' id='labelROHAN'><img src='images/cultures/rohan.png'/></label>"
+            + "<input type='checkbox' id='SHIRE'/><label for='SHIRE' id='labelSHIRE'><img src='images/cultures/shire.png'/></label>"
+            + "<input type='checkbox' id='GOLLUM'/><label for='GOLLUM' id='labelGOLLUM'><img src='images/cultures/gollum.png'/></label>"
+            + "</div>");
+        this.filterDiv.append("<div id='culture2'>"
+            + "<input type='checkbox' id='DUNLAND'/><label for='DUNLAND' id='labelDUNLAND'><img src='images/cultures/dunland.png'/></label>"
+            + "<input type='checkbox' id='ISENGARD'/><label for='ISENGARD' id='labelISENGARD'><img src='images/cultures/isengard.png'/></label>"
+            + "<input type='checkbox' id='MEN'/><label for='MEN' id='labelMEN'><img src='images/cultures/men.png'/></label>"
+            + "<input type='checkbox' id='MORIA'/><label for='MORIA' id='labelMORIA'><img src='images/cultures/moria.png'/></label>"
+            + "<input type='checkbox' id='ORC'/><label for='ORC' id='labelORC'><img src='images/cultures/orc.png'/></label>"
+            + "<input type='checkbox' id='RAIDER'/><label for='RAIDER' id='labelRAIDER'><img src='images/cultures/raider.png'/></label>"
+            + "<input type='checkbox' id='SAURON'/><label for='SAURON' id='labelSAURON'><img src='images/cultures/sauron.png'/></label>"
+            + "<input type='checkbox' id='URUK_HAI'/><label for='URUK_HAI' id='labelURUK_HAI'><img src='images/cultures/uruk_hai.png'/></label>"
+            + "<input type='checkbox' id='WRAITH'/><label for='WRAITH' id='labelWRAITH'><img src='images/cultures/wraith.png'/></label>"
+            + "</div>");
+
+        var combos = $("<div></div>");
+
+        combos.append(" <select id='cardType' style='font-size: 80%;'>"
+            + "<option value=''>All Card Types</option>"
+            + "<option value='COMPANION,ALLY,MINION'>Characters</option>"
+            + "<option value='POSSESSION,ARTIFACT'>Items</option>"
+            + "<option value='SITE'>Sites</option>"
+            + "<option value='ALLY'>Allies</option>"
+            + "<option value='ARTIFACT'>Artifacts</option>"
+            + "<option value='COMPANION'>Companions</option>"
+            + "<option value='CONDITION'>Conditions</option>"
+            + "<option value='EVENT'>Events</option>"
+            + "<option value='FOLLOWER'>Followers</option>"
+            + "<option value='MINION'>Minions</option>"
+            + "<option value='POSSESSION'>Possessions</option>"
+            + "</select>");
+        combos.append(" <select id='keyword' style='font-size: 80%;'>"
+            + "<option value=''>No keyword filtering</option>"
+            + "<option value='ARCHER'>Archer</option>"
+            + "<option value='BATTLEGROUND'>Battleground</option>"
+            + "<option value='BESIEGER'>Besieger</option>"
+            + "<option value='CORSAIR'>Corsair</option>"
+            + "<option value='DWELLING'>Dwelling</option>"
+            + "<option value='EASTERLING'>Easterling</option>"
+            + "<option value='ENDURING'>Enduring</option>"
+            + "<option value='ENGINE'>Engine</option>"
+            + "<option value='FIERCE'>Fierce</option>"
+            + "<option value='FOREST'>Forest</option>"
+            + "<option value='FORTIFICATION'>Fortification</option>"
+            + "<option value='HUNTER'>Hunter</option>"
+            + "<option value='KNIGHT'>Knight</option>"
+            + "<option value='LURKER'>Lurker</option>"
+            + "<option value='MACHINE'>Machine</option>"
+            + "<option value='MARSH'>Marsh</option>"
+            + "<option value='MOUNTAIN'>Mountain</option>"
+            + "<option value='MUSTER'>Muster</option>"
+            + "<option value='PIPEWEED'>Pipeweed</option>"
+            + "<option value='PLAINS'>Plains</option>"
+            + "<option value='RANGER'>Ranger</option>"
+            + "<option value='RING_BOUND'>Ring-bound</option>"
+            + "<option value='RIVER'>River</option>"
+            + "<option value='SEARCH'>Search</option>"
+            + "<option value='SOUTHRON'>Southron</option>"
+            + "<option value='SPELL'>Spell</option>"
+            + "<option value='STEALTH'>Stealth</option>"
+            + "<option value='TALE'>Tale</option>"
+            + "<option value='TENTACLE'>Tentacle</option>"
+            + "<option value='TRACKER'>Tracker</option>"
+            + "<option value='TWILIGHT'>Twilight</option>"
+            + "<option value='UNDERGROUND'>Underground</option>"
+            + "<option value='UNHASTY'>Unhasty</option>"
+            + "<option value='VALIANT'>Valiant</option>"
+            + "<option value='VILLAGER'>Villager</option>"
+            + "<option value='WARG_RIDER'>Warg-rider</option>"
+            + "<option value='WEATHER'>Weather</option>"
+            + "</select>");
+        combos.append(" <select id='type' style='font-size: 80%'>"
+            + "<option value=''>All types</option>"
+            + "<option value='pack'>Packs</option>"
+            + "<option value='card'>Cards</option>"
+            + "<option value='foil'>Foils</option>"
+            + "<option value='nonFoil'>Non-foils</option>"
+            + "<option value='tengwar'>Tengwar</option>"
+            + "</select>");
+        this.filterDiv.append(combos);
+
+        elem.append(this.filterDiv);
+
+        $("#culture1").buttonset();
+        $("#culture2").buttonset();
+
+        var fullFilterChanged = function () {
+            that.start = 0;
+            that.getCollection();
+            return true;
+        };
+
+        this.setSelect.change(fullFilterChanged);
+        this.nameInput.change(fullFilterChanged);
+        this.sortSelect.change(fullFilterChanged);
+        this.raritySelect.change(fullFilterChanged);
+
+        var filterOut = function () {
+            that.filter = that.calculateNormalFilter();
+            that.start = 0;
+            that.getCollection();
+            return true;
+        };
+
+        $("#cardType").change(filterOut);
+        $("#keyword").change(filterOut);
+        $("#type").change(filterOut);
+
+        $("#labelDWARVEN,#labelELVEN,#labelGANDALF,#labelGONDOR,#labelROHAN,#labelSHIRE,#labelGOLLUM,#labelDUNLAND,#labelISENGARD,#labelMEN,#labelMORIA,#labelORC,#labelRAIDER,#labelSAURON,#labelURUK_HAI,#labelWRAITH").click(filterOut);
+    },
+
+    layoutUi:function (x, y, width, height) {
+        this.pageDiv.css({ position:"absolute", left:x, top:y, width:width, height:50 });
+        this.countSlider.css({width:width - 100});
+        this.fullFilterDiv.css({position:"absolute", left:x, top:y + 50, width:width, height:30});
+        this.filterDiv.css({ position:"absolute", left:x, top:y + 80, width:width, height:80 });
+    },
+
+    layoutPageUi: function(x, y, width) {
+        this.pageDiv.css({ left:x, top:y, width:width, height:36 });
+        this.countSlider.css({width:width - 100});
+    },
+
+    disableNavigation:function () {
+        this.previousPageBut.button("option", "disabled", true);
+        this.nextPageBut.button("option", "disabled", true);
+        this.countSlider.button("option", "disabled", true);
+    },
+
+    calculateNormalFilter:function () {
+        var cultures = new Array();
+        $("label", $("#culture1")).each(
+            function () {
+                if ($(this).hasClass("ui-state-active"))
+                    cultures.push($(this).prop("id").substring(5));
+            });
+        $("label", $("#culture2")).each(
+            function () {
+                if ($(this).hasClass("ui-state-active"))
+                    cultures.push($(this).prop("id").substring(5));
+            });
+
+        var cardType = $("#cardType option:selected").prop("value");
+        if (cardType == "")
+            cardType = "";
+        else
+            cardType = "cardType:" + cardType + " ";
+
+        var keyword = $("#keyword option:selected").prop("value");
+        if (keyword != "")
+            keyword = " keyword:" + keyword;
+
+        var type = $("#type option:selected").prop("value");
+        if (type != "")
+            type = " type:" + type;
+
+        if (cultures.length > 0)
+            return cardType + " culture:" + cultures + keyword + type;
+        else
+            return cardType + keyword + type;
+    },
+
+    calculateFullFilterPostfix:function () {
+        var setNo = $("option:selected", this.setSelect).prop("value");
+        if (setNo != "")
+            setNo = " set:" + setNo;
+
+        var sort = $("option:selected", this.sortSelect).prop("value");
+        if (sort != "")
+            sort = " sort:" + sort;
+
+        var cardName = this.nameInput.val();
+        if (cardName == "Card name")
+            cardName = "";
+        else {
+            var cardNameElems = cardName.split(" ");
+            cardName = "";
+            for (var i = 0; i < cardNameElems.length; i++)
+                cardName += " name:" + cardNameElems[i];
+        }
+
+        var rarity = $("option:selected", this.raritySelect).prop("value");
+        if (rarity != "")
+            rarity = " rarity:" + rarity;
+
+        return setNo + sort + cardName + rarity;
+    },
+
+    getCollection:function () {
+        var that = this;
+        this.getCollectionFunc((this.filter + this.calculateFullFilterPostfix()).trim(), this.start, this.count, function (xml) {
+            that.displayCollection(xml);
+        });
+    },
+
+    displayCollection:function (xml) {
+        log(xml);
+        var root = xml.documentElement;
+
+        this.clearCollectionFunc(root);
+
+        var packs = root.getElementsByTagName("pack");
+        for (var i = 0; i < packs.length; i++) {
+            var packElem = packs[i];
+            var blueprintId = packElem.getAttribute("blueprintId");
+            var count = packElem.getAttribute("count");
+            this.addCardFunc(packElem, "pack", blueprintId, count);
+        }
+
+        var cards = root.getElementsByTagName("card");
+        for (var i = 0; i < cards.length; i++) {
+            var cardElem = cards[i];
+            var blueprintId = cardElem.getAttribute("blueprintId");
+            var count = cardElem.getAttribute("count");
+            this.addCardFunc(cardElem, "card", blueprintId, count);
+        }
+
+        this.finishCollectionFunc();
+
+        $("#previousPage").button("option", "disabled", this.start == 0);
+        var cnt = parseInt(root.getAttribute("count"));
+        $("#nextPage").button("option", "disabled", (this.start + this.count) >= cnt);
+        $("#countSlider").slider("option", "disabled", false);
+    }
+});
\ No newline at end of file
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/common.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/common.js
index 03eda151f..ab5e4b3e9 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/common.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/common.js
@@ -19,3 +19,11 @@ function formatPrice(price) {
 function getDateString(date) {
     return date.substring(0, 4) + "-" + date.substring(4, 6) + "-" + date.substring(6, 8);
 }
+
+function iterObj(obj, func) {
+    for (var key in obj) {
+        if (obj.hasOwnProperty(key)) {
+            func(key, obj[key]);
+        }
+    }
+}
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/deckBuildingUi2.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/deckBuildingUi2.js
index 0b25b6071..52eb7f6c1 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/deckBuildingUi2.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/deckBuildingUi2.js
@@ -1,45 +1,121 @@
 var GempLotrDeckBuildingUI2 = Class.extend({
     comm:null,
     collectionType:null,
-    cardFilter:null,
+
     collectionContentsDiv:null,
-    deckDiv:null,
+    collectionContainer:null,
+    collectionGroup:null,
+
+    deckDiv: null,
+
+    cardFilter:null,
+    deckPanel:null,
     padding: 3,
 
+    cardInCollectionId:0,
+
     init:function (filterDiv, pageDiv, collectionContentsDiv, deckDiv) {
         this.collectionContentsDiv = collectionContentsDiv;
         this.deckDiv = deckDiv;
 
         var that = this;
 
+        this.collectionContainer = new CardContainer(collectionContentsDiv, this.layoutCollectionContainer);
+        this.collectionGroup = new RowCardLayoutCardGroup(collectionContentsDiv,
+                function() {
+                    return true;
+                });
+        this.collectionGroup.setZIndexBase(10);
+        this.collectionContainer.addCardGroup("main", this.collectionGroup);
+
         this.comm = new GempLotrCommunication("/gemp-lotr-server", that.processError);
 
         this.cardFilter = new CardFilter(filterDiv, pageDiv,
-            function (filter, start, count, callback) {
-                that.comm.getCollection(that.collectionType, filter, start, count, function (xml) {
-                    callback(xml);
-                }, {
-                    "404":function () {
-                        alert("You don't have collection of that type.");
-                    }
+                function (filter, start, count, callback) {
+                    that.comm.getCollection(that.collectionType, filter, start, count, function (xml) {
+                        callback(xml);
+                    }, {
+                        "404":function () {
+                            alert("You don't have collection of that type.");
+                        }
+                    });
+                },
+                function () {
+                    that.clearCollection();
+                },
+                function (elem, type, blueprintId, count) {
+                    that.addCardToCollection(type, blueprintId, count, elem.getAttribute("side"), elem.getAttribute("contents"));
+                },
+                function () {
+                    that.finishCollection();
                 });
-            },
-            function () {
-                that.clearCollection();
-            },
-            function (elem, type, blueprintId, count) {
-                that.addCardToCollection(type, blueprintId, count, elem.getAttribute("side"), elem.getAttribute("contents"));
-            },
-            function () {
-                that.finishCollection();
-            });
+
+        this.deckPanel = new DeckPanel(deckDiv);
+
         this.collectionType = "default";
         this.cardFilter.getCollection();
     },
 
+    layoutCollectionContainer : function(cardGroups, left, top, width, height) {
+        var padding = 3;
+        cardGroups["main"].setLayout(left + padding, top + padding, width - 2 * padding, height - 2 * padding);
+    },
+
+    clearCollection: function() {
+        $(".card", this.collectionContentsDiv).remove();
+        this.cardInCollectionId = 0;
+    },
+
+    addCardToCollection: function(type, blueprintId, count, side, contents) {
+        var props = {};
+        props["blueprintId"] = blueprintId;
+        props["count"] = count;
+
+        var card = new Card(blueprintId, "collection", "1", "player", null);
+        cardDiv = this.createCollectionCardElem(card.imageUrl);
+
+        var cardDiv;
+        if (type == "pack") {
+            if (blueprintId.substr(0, 3) == "(S)") {
+                props["contents"] = contents;
+            }
+        } else if (type == "card") {
+            var countInDeck = 0;
+            $(".card", this.deckDiv).each(
+                    function () {
+                        var tempCardData = $(this).data("props");
+                        if (blueprintId == tempCardData["blueprintId"])
+                            countInDeck++;
+                    });
+            props["count"] = count-countInDeck;
+            props["hor"] = card.horizontal;
+        }
+        this.collectionContainer.addCard(cardDiv, ""+(this.cardInCollectionId++) , props, this.layoutCardInCollection, this.widthToHeightScaleInCollection);
+    },
+
+    createCollectionCardElem: function(image) {
+        return "<img src='" + image + "' width='100%' height='100%'>";
+    },
+
+    widthToHeightScaleInCollection: function(cardId, props) {
+        if (props["hor"])
+            return 500/360;
+        else        
+            return 360/500;
+    },
+
+    layoutCardInCollection: function() {
+        
+    },
+
+    finishCollection: function() {
+        this.collectionContainer.layoutCards();
+    },
+
     layoutUI: function(collectionWidth, collectionHeight, deckWidth, deckHeight) {
         this.cardFilter.layoutPageUi(0, 0, collectionWidth);
-        this.collectionContentsDiv.css({left: "0px", top: "0px", width: collectionWidth-3+"px", height: collectionHeight-38+"px"});
-        this.deckDiv.css({left: "0px", top: "0px", width: deckWidth+"px", height: deckHeight+"px"})
+        this.collectionContentsDiv.css({left: "0px", top: "0px", width: collectionWidth - 3 + "px", height: collectionHeight - 38 + "px"});
+        this.collectionContainer.setLayout(0, 0, collectionWidth-3, collectionHeight-38);
+        this.deckPanel.layoutUi(0, 0, deckWidth, deckHeight);
     }
 });
