Working on deck panel.

gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/DeckPanel.js

@@ -1,10 +1,33 @@
 var DeckPanel = Class.extend({
-    deckDiv:null,
+    tabs:null,
+
+    ringBearerDiv:null,
+    ringDiv: null,
+    sitesDiv:null,
+    fpDiv:null,
+    shadowDiv:null,
 
     init:function (deckDiv) {
-        this.deckDiv = deckDiv;
+        var tabGroup = $("<ul></ul>");
-        $(this.deckDiv).tabs();
+        tabGroup.append("<li><a href='#ringBearer'>Ring-bearer (0)</a></li>");
-        
+        tabGroup.append("<li><a href='#ring'>Ring (0)</a></li>");
+        tabGroup.append("<li><a href='#sites'>Sites (0)</a></li>");
+        tabGroup.append("<li><a href='#fp'>Free People (0)</a></li>");
+        tabGroup.append("<li><a href='#shadow'>Shadow (0)</a></li>");
+        deckDiv.append(tabGroup);
+
+        this.ringBearerDiv = $("<div id='ringBearer'></div>");
+        deckDiv.append(this.ringBearerDiv);
+        this.ringDiv = $("<div id='ring'></div>");
+        deckDiv.append(this.ringDiv);
+        this.sitesDiv = $("<div id='sites'></div>");
+        deckDiv.append(this.sitesDiv);
+        this.fpDiv = $("<div id='fp'></div>");
+        deckDiv.append(this.fpDiv);
+        this.shadowDiv = $("<div id='shadow'></div>");
+        deckDiv.append(this.shadowDiv);
+
+        this.tabs = $(deckDiv).tabs();
     },
 
     clearDeck: function() {
@@ -12,6 +35,6 @@ var DeckPanel = Class.extend({
     },
 
     layoutUi: function(x, y, width, height) {
-
+        this.tabs.css({"left": x, "top": y, "width": width, "height": height});
     }
 });