[Layout] Add LayoutController

Add a controller for Layouts to choose frame
positions. WTD-535.

platform/features/layout/bundle.json

@@ -8,7 +8,8 @@
                 "name": "Layout",
                 "glyph": "L",
                 "type": "layout",
-                "templateUrl": "templates/layout.html"
+                "templateUrl": "templates/layout.html",
+                "uses": [ "composition" ]
             }
         ],
         "representations": [
@@ -17,6 +18,13 @@
                 "templateUrl": "templates/frame.html"
             }
         ],
+        "controllers": [
+            {
+                "key": "LayoutController",
+                "implementation": "LayoutController.js",
+                "depends": [ "$scope" ]
+            }
+        ],
         "types": [
             {
                 "key": "layout",

platform/features/layout/res/templates/frame.html

@@ -1,4 +1,4 @@
-<div class="frame frame-template abs" ng-controller="ViewSwitcherController">
+<div class="frame frame-template abs">
     <div class="bar abs object-header object-top-bar">
         <div class="title left abs">
             <mct-representation key="'node'"
@@ -6,10 +6,10 @@
             </mct-representation>
         </div>
         <div class="btn-bar right abs">
-            <mct-include key="'switcher'"
-                         ng-model="switcher"
-                         ng-if="switcher.options.length > 0">
-            </mct-include>
+            <mct-representation key="'switcher'"
+                                ng-model="representation"
+                                mct-object="domainObject">
+            </mct-representation>
         </div>
     </div>
     <div class="abs object-holder">

platform/features/layout/res/templates/layout.html

@@ -1,9 +1,16 @@
-<div style="width: 100%; height: 100%;">
+<div style="width: 100%; height: 100%;"
+     ng-controller="LayoutController as controller">
 
-    <span style="left: 45px; width: 360px; top: 60px; height: 240px">
-        <mct-representation key="'frame'"
-                            mct-object="domainObject">
-        </mct-representation>
-    </span>
+    <div class='frame child-frame panel abs'
+         ng-repeat="childObject in composition"
+         ng-style="controller.getFrameStyle(childObject.getId())">
+
+        <div class="frame child-frame holder contents abs">
+            <mct-representation key="'frame'"
+                                mct-object="childObject">
+            </mct-representation>
+        </div>
+
+    </div>
 
 </div>

platform/features/layout/src/LayoutController.js

@@ -0,0 +1,59 @@
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        var DEFAULT_DIMENSIONS = [ 4, 2 ];
+
+        function LayoutController($scope) {
+            var width = 16,
+                height = 16,
+                positions = {};
+
+            function convertPosition(position, dimensions) {
+                return {
+                    left: (width * position[0]) + 'px',
+                    top: (width * position[1]) + 'px',
+                    width: (width * dimensions[0]) + 'px',
+                    height: (height * dimensions[1]) + 'px'
+                };
+            }
+
+            function defaultPosition(index) {
+                return convertPosition([index, index], DEFAULT_DIMENSIONS);
+            }
+
+            function lookupPanels(model) {
+                var configuration =
+                    ((model || {}).configuration || {}).layout || {};
+
+                // Clear prior positions
+                positions = {};
+
+                // Update width/height that we are tracking
+
+                // Pull values from panels field
+
+                // Add defaults where needed
+                ((model || {}).composition || []).forEach(function (id, i) {
+                    positions[id] = positions[id] || defaultPosition(i);
+                });
+            }
+
+
+
+            $scope.$watch("model", lookupPanels);
+
+            return {
+                getFrameStyle: function (id) {
+                    return positions[id];
+                }
+            };
+
+        }
+
+        return LayoutController;
+    }
+);