Phi: make widgets closable and detachable

Clicking the close-button removes the widget from the sidebar
Clicking the newwin-button detaches the widget into a dialog

TODO:
- add a way to re-attach or re-create a widget
- make sure widgets correctly scale with resizing of the dialog
- make widget area layout persistent

Phi/widgets/sidebarwidget.html

@@ -2,15 +2,16 @@
 .widget-header-button {
 	font-size: unset;
 }
+
 .widget-handle {
-    cursor: pointer;
+	cursor: pointer;
-    font-weight: bold;
+	font-weight: bold;
 }
 </style>
 <div data-bind="event: { mouseover: onMouseover, mouseout: onMouseout }">
     <div class="ui-state-default widget-handle">
         <button
-          data-bind="
+            data-bind="
              button: { 
                  icons: { 
                      primary: pinned() ? 'ui-icon-pin-s' : 'ui-icon-pin-w' 
@@ -18,9 +19,19 @@
                  text: false
              }, 
              click: pin"
-          class="widget-header-button" title="Pin"></button>
+            class="widget-header-button" title="Pin"></button>
         <button
-          data-bind="
+            data-bind="
+            button: {
+                icons: {
+                    primary: 'ui-icon-newwin'
+                },
+                text: false
+            },
+            click: detach"
+            class="widget-header-button" title="Detach"></button>
+        <button style="float: right"
+            data-bind="
             button: { 
                 icons: { 
                     primary: 'ui-icon-circlesmall-close'
@@ -28,7 +39,8 @@
                 text: false
             }, 
             click: close"
-          class="widget-header-button" title="Close"></button>
+            class="widget-header-button" title="Close"></button>
+
         <span data-bind="text: widget"></span>
     </div>
 

Phi/widgets/sidebarwidget.js

@@ -1,10 +1,12 @@
 define([
-        'jquery', 'knockout', 'text!./sidebarwidget.html', 'jquery-ui/draggable',
+        'jquery', 'knockout', 'text!./sidebarwidget.html', 'jquery-ui/draggable', 'jquery-ui/dialog'
 ], function(jquery, ko, htmlString) {
 
-    function ViewModel(params) {
+    function ViewModel(params, componentInfo) {
         var self = this;
 
+        self.element = componentInfo.element;
+
         self.widget = ko.observable(params.widget);
 
         self.pinned = ko.observable(true);
@@ -13,6 +15,12 @@ define([
         }
 
         self.close = function() {
+            jquery(self.element).remove();
+        }
+
+        self.detach = function() {
+            jquery(self.element).find('.phi-widget').dialog();
+            jquery(self.element).remove();
         }
 
         self.expanded = ko.observable(true);
@@ -29,7 +37,11 @@ define([
 
     // Return component definition
     return {
-        viewModel : ViewModel,
+        viewModel : {
+            createViewModel : function(params, componentInfo) {
+                return new ViewModel(params, componentInfo);
+            },
+        },
         template : htmlString
     };
 });