From a67101834bccc0cc78b08e298dac2f214bb5900c Mon Sep 17 00:00:00 2001
From: marcins78 <marcins78@eb7970ca-0f6f-de4b-2938-835b230b9d1f>
Date: Thu, 22 Nov 2012 17:22:15 +0000
Subject: [PATCH] Work on new deck builder.

---
 .../src/main/webapp/deckBuild2.html           | 112 +++++-------------
 .../src/main/webapp/js/gemp-011/cardFilter.js |   5 +
 .../webapp/js/gemp-011/deckBuildingUi2.js     |  18 ++-
 3 files changed, 50 insertions(+), 85 deletions(-)

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 afe9e9070..2ec6e947b 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
@@ -13,77 +13,9 @@
             font-size: 12px;
         }
 
-        .borderOverlay {
-            border: 0px solid #000000;
-        }
-
-        .foilOverlay {
-            opacity: 0.2;
-        }
-
-        .selectableCard > .borderOverlay {
-            border: 2px solid #00ff00;
-            cursor: pointer;
-        }
-
-        .selectedCard > .borderOverlay {
-            border: 2px solid #00cccc;
-        }
-
-        .cardCount {
-            width: 20px;
-            height: 18px;
-            background-color: #000000;
-            color: #ffffff;
-            font-size: 120%;
-            font-weight: bolder;
-            display: table-cell;
-            text-align: center;
-            vertical-align: middle;
-            opacity: 0.7;
-        }
-
-        .ui-layout-east {
-            width: 350px;
-        }
-
-        #manageDecks {
-            color: #ffffff;
-            font-size: 180%;
-        }
-
-        #editingDeck {
-            vertical-align: top;
-            padding-left: 3px;
-        }
-
-        #deckStats {
-            color: #ffffff;
-        }
-
-        .ui-button-text-only .ui-button-text {
-            font-size: 70%;
-        }
-
-        #set {
-            width: 120px;
-        }
-
-        #cardType {
-            width: 100px;
-        }
-
-        #fullFiltering select {
-            font-size: 80%;
-        }
-
-        #fullFiltering input {
-            font-size: 80%;
-        }
-
-        #filtering select {
-            font-size: 80%;
-        }
+        .panel {
+            overflow: hidden !important;
+        } 
 
     </style>
     <link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
@@ -130,12 +62,25 @@
 
         $(document).ready(
                 function () {
-                    var ui = new GempLotrDeckBuildingUI2($("#collectionFilterDiv"), $("#paging"));
+                    var ui = new GempLotrDeckBuildingUI2(
+                            $("#collectionFilterDiv"),
+                            $("#paging"),
+                            $("#collectionContents"),
+                            $("#deckDiv")
+                    );
+
+                    var doLayout = function() {
+                        var collectionWidth = $("#collectionDiv").width();
+                        var collectionHeight = $("#collectionDiv").height();
+                        var deckWidth = $("#deckPanel").width();
+                        var deckHeight = $("#deckPanel").height();
+                        ui.layoutUI(collectionWidth, collectionHeight, deckWidth, deckHeight);
+                    };
 
                     $('body').layout({
                         applyDefaultStyles:true,
                         onresize:function () {
-                            ui.layoutUI(true);
+                            doLayout();
                         },
                         north__minSize: 200
                     });
@@ -143,30 +88,35 @@
                     $("#northPanel").layout({
                         applyDefaultStyles:true,
                         onresize:function() {
-                            ui.layoutUI(true);
+                            doLayout();
                         },
-                        west__minSize: 340
+                        west__minSize: 370
 
                     });
 
                     $(".ui-layout-pane").css({"background-color":"#000000"});
 
                     $(window).resize(function () {
-                        ui.layoutUI(true);
+                        doLayout();
                     });
 
-                    ui.layoutUI(true);
+                    doLayout();
                 });
+
     </script>
 
 </head>
 <body>
-<div id='northPanel' class="ui-layout-north">
-    <div id="collectionFilterDiv" class="ui-layout-west"></div>
-    <div id="collectionDiv" class="ui-layout-center">
+<div id='northPanel' class="ui-layout-north panel">
+    <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>
+</div>
+<div id="deckPanel" class="ui-layout-center panel">
+    <div id="deckDiv" class="ui-widget-content">
     </div>
 </div>
-<div id="deckDiv" class="ui-layout-center"></div>
 </body>
 </html>
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/cardFilter.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/cardFilter.js
index f53b1ceaa..c4b470286 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/cardFilter.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/cardFilter.js
@@ -291,6 +291,11 @@ var CardFilter = Class.extend({
         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);
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 d569757fd..0b25b6071 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,13 +1,20 @@
 var GempLotrDeckBuildingUI2 = Class.extend({
     comm:null,
+    collectionType:null,
     cardFilter:null,
+    collectionContentsDiv:null,
+    deckDiv:null,
+    padding: 3,
+
+    init:function (filterDiv, pageDiv, collectionContentsDiv, deckDiv) {
+        this.collectionContentsDiv = collectionContentsDiv;
+        this.deckDiv = deckDiv;
 
-    init:function (filterDiv, pageDiv) {
         var that = this;
 
         this.comm = new GempLotrCommunication("/gemp-lotr-server", that.processError);
 
-        this.cardFilter = new CardFilter(filterDiv, pageDiv, 
+        this.cardFilter = new CardFilter(filterDiv, pageDiv,
             function (filter, start, count, callback) {
                 that.comm.getCollection(that.collectionType, filter, start, count, function (xml) {
                     callback(xml);
@@ -27,9 +34,12 @@ var GempLotrDeckBuildingUI2 = Class.extend({
                 that.finishCollection();
             });
         this.collectionType = "default";
+        this.cardFilter.getCollection();
     },
 
-    layoutUI: function() {
-        
+    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"})
     }
 });