Provide initial support for docked/containment dialog.

src/ui/BaseDialog.js

@@ -17,6 +17,7 @@ var BaseDialog = function() {
   this.content = undefined;
   this.datGui = undefined;
   this.UIIsReady = false;
+  this.titlebarHidden = false;
   this.beforeCloseCallbacks = [];
   this.onCloseCallbacks = [];
   this.resizeStopCallbacks = [];
@@ -64,10 +65,40 @@ BaseDialog.prototype.resizeStopCallback = function(myInstance) {
   }
 }
 
+BaseDialog.prototype.dock = function() {
+	this.container.parent().draggable({
+		containment: this.containment,
+		disabled: true
+	});
+	this.container.parent().resizable({
+		containment: this.containment,
+		disabled: true
+	});
+	this.setWidth("100%");
+	this.setHeight("100%");
+	this.setPosition(0 , 0);
+}
+
+BaseDialog.prototype.dockToContainment = function(containment) {
+	this.containment = containment;
+	this.dock();
+}
+
+BaseDialog.prototype.undock = function() {
+	this.containment = this.parent;
+	this.container.parent().draggable({
+		containment: this.containment,
+		disabled: false
+	});
+	this.container.parent().resizable({
+		containment: this.containment,
+		disabled: false
+	});
+}
+
 BaseDialog.prototype.create = function(htmlData) {
   this.container = $('<div></div>');
   this.container.attr('title', this.title);
-  console.log(this.parent);
   if (this.parent === undefined)
 	  this.parent = $('body');
   this.container.dialog({
@@ -77,12 +108,13 @@ BaseDialog.prototype.create = function(htmlData) {
     width: 600,
     height: 500,
     closeOnEscape: false,
-    position: { my: "left top", at: "left top", of: this.parent},
+    position: { my: "left top", at: "left top", of: this.containment},
     resize: function() {
-      console.log($(this).parent());
       var heightPadding = parseInt($(this).css('padding-top'), 10) + parseInt($(this).css('padding-bottom'), 10),
-        widthPadding = parseInt($(this).css('padding-left'), 10) + parseInt($(this).css('padding-right'), 10),
-        titlebarMargin = parseInt($(this).prev('.ui-dialog-titlebar').css('margin-bottom'), 10);
+        widthPadding = parseInt($(this).css('padding-left'), 10) + parseInt($(this).css('padding-right'), 10);
+      var titlebarMargin = 0;
+      if (this.titlebarHidden === false)
+    	  titlebarMargin = parseInt($(this).prev('.ui-dialog-titlebar').css('margin-bottom'), 10);
       $(this).height($(this).parent().height() - $(this).prev('.ui-dialog-titlebar').outerHeight(true) - heightPadding - titlebarMargin);
       $(this).width($(this).parent().width() - widthPadding);
     },
@@ -91,11 +123,17 @@ BaseDialog.prototype.create = function(htmlData) {
     close: this.close(this)
   });
   this.container.parent().draggable({
-	  containment: this.parent
+	  containment: this.containment
   });
   this.container.parent().resizable({
-	  containment: this.parent
+	  containment: this.containment
   });
+
+  //this is a docked widget if the containment and parent are not the same
+  if (this.containment != this.parent) {
+	  this.dock();
+  }
+
   var childNodes = $.parseHTML(htmlData);
   for (i = 0; i < childNodes.length; i++) {
     this.container[0].appendChild(childNodes[i]);
@@ -138,16 +176,16 @@ BaseDialog.prototype.setHeight = function(heightIn) {
   if (typeof(heightIn) == "string") {
     if (/^\d+(\.\d+)?%$/.test(heightIn)) {
       var value = parseFloat(heightIn) / 100.0;
-      var wHeight = $(this.parent).height();
+      var wHeight = $(this.containment).height();
       var dHeight = wHeight * value;
       var actualHeight = Math.floor(dHeight + 0.5);
       if (actualHeight > 0)
         this.container.dialog( "option", "height", actualHeight );
     }
   } else if (typeof(heightIn) == "number") {
     var actualHeight = Math.floor(heightIn + 0.5);
-    if (actualHeight > $(this.parent).height())
-    	actualHeight = $(this.parent).height();
+    if (actualHeight > $(this.containment).height())
+    	actualHeight = $(this.containment).height();
     if (actualHeight > 0)
       this.container.dialog( "option", "height", actualHeight );
   }
@@ -161,16 +199,16 @@ BaseDialog.prototype.setWidth = function(widthIn) {
   if (typeof(widthIn) == "string") {
     if (/^\d+(\.\d+)?%$/.test(widthIn)) {
       var value = parseFloat(widthIn) / 100.0;
-      var wWidth = $(this.parent).width();
+      var wWidth = $(this.containment).width();
       var dWidth = wWidth * value;
       var actualWidth = Math.floor(dWidth + 0.5);
       if (actualWidth > 0)
         this.container.dialog( "option", "width", actualWidth );
     }
   } else if (typeof(widthIn) == "number") {
     var actualWidth = Math.floor(widthIn + 0.5);
-    if (actualWidth > $(this.parent).width())
-    	actualWidth = $(this.parent).width();
+    if (actualWidth > $(this.containment).width())
+    	actualWidth = $(this.containment).width();
     if (actualWidth > 0)
       this.container.dialog( "option", "width", actualWidth );
   }
@@ -211,19 +249,31 @@ BaseDialog.prototype.setPosition = function(leftIn, topIn) {
 	this.container.dialog('option', 'position',
 		{	my: "left top",
 			at: atString,
-			of: this.parent,
+			of: this.containment,
 			collision:  "none"});
 };
 
+BaseDialog.prototype.showCloseButton = function() {
+	  this.container.dialog("option",
+	       "classes.ui-dialog-titlebar-close", "displayBlock");
+	}
+
+
 BaseDialog.prototype.hideCloseButton = function() {
   this.container.dialog("option",
-	"classes.ui-dialog-titlebar-close", "displayNone");
+       "classes.ui-dialog-titlebar-close", "displayNone");
+}
 
+BaseDialog.prototype.showTitlebar = function() {
+	  this.container.dialog("option",
+		"classes.ui-dialog-titlebar", "displayBlock");
+	  this.titlebarHidden = false;
 };
 
 BaseDialog.prototype.hideTitlebar = function() {
 	  this.container.dialog("option",
 		"classes.ui-dialog-titlebar", "displayNone");
+	  this.titlebarHidden = true;
 };
 
 BaseDialog.prototype.setLeft = function(leftIn) {

src/ui/BodyViewerDialog.js

@@ -1,10 +1,15 @@
 /**
  * A customised dialog for body viewer.
  */
-var BodyViewerDialog = function(bodyViewerIn, parentIn) {
+var BodyViewerDialog = function(bodyViewerIn, parentIn, options) {
   (require('./BaseDialog').BaseDialog).call(this);
   this.parent = parentIn;
   this.module = bodyViewerIn;
+  this.containment = parentIn;
+  if (options !== undefined) {
+	  if (options.containment !== undefined)
+		  this.containment = options.containment;
+  }
   var systemGuiFolder = new Array();
   var systemPartsGuiControls = new Array();
   var _myInstance = this;

src/ui/ManagerSidebar.js

@@ -304,6 +304,7 @@ var ManagerSidebar = function(parentIn) {
 
   var create = function(htmlData) {
     jelem = $(parent);
+    console.log(jelem[0])
     var childNodes = $.parseHTML(htmlData);
     for (i = 0; i < childNodes.length; i++) {
       (jelem[0]).appendChild(childNodes[i]);

src/ui/OrgansViewerDialog.js

@@ -1,8 +1,13 @@
 require("../styles/my_styles.css");
 
-var OrgansViewerDialog = function(organsViewerIn, parentIn) {
+var OrgansViewerDialog = function(organsViewerIn, parentIn, options) {
   (require('./BaseDialog').BaseDialog).call(this);
   this.parent = parentIn;
+  this.containment = parentIn;
+  if (options !== undefined) {
+	  if (options.containment !== undefined)
+		  this.containment = options.containment;
+  }
   var sceneData = undefined;
   this.module = organsViewerIn;
   var organPartsGui = undefined;

src/ui/ScaffoldDialog.js

@@ -1,10 +1,15 @@
 /**
  * A customised dialog for body viewer.
  */
-var ScaffoldDialog = function(scaffoldViewerIn, parentIn) {
+var ScaffoldDialog = function(scaffoldViewerIn, parentIn, options) {
   (require('./BaseDialog').BaseDialog).call(this);
   this.parent = parentIn;
   this.module = scaffoldViewerIn;
+  this.containment = parentIn;
+  if (options !== undefined) {
+	  if (options.containment !== undefined)
+		  this.containment = options.containment;
+  }
   var modal = undefined;
   var optionsChanged = false;
   var _myInstance = this;

src/utilities/manager.js

@@ -12,26 +12,26 @@ exports.ModuleManager = function() {
       module.readSystemMeta();
       return module; 
     }
-    this["Body Viewer"].dialog = function(module, parent) {
-      var dialog = new (require("../ui/BodyViewerDialog").BodyViewerDialog)(module, parent);
+    this["Body Viewer"].dialog = function(module, parent, options) {
+      var dialog = new (require("../ui/BodyViewerDialog").BodyViewerDialog)(module, parent, options);
       return dialog; 
     }
     this["Organs Viewer"] = [];
     this["Organs Viewer"].module = function() {
       var module = new (require("../modules/organsRenderer").OrgansViewer)(modelsLoader);
       return module; 
     }
-    this["Organs Viewer"].dialog = function(module, parent) {
-      var dialog = new (require("../ui/OrgansViewerDialog").OrgansViewerDialog)(module, parent);
+    this["Organs Viewer"].dialog = function(module, parent, options) {
+      var dialog = new (require("../ui/OrgansViewerDialog").OrgansViewerDialog)(module, parent, options);
       return dialog; 
     }
     this["Scaffold Viewer"] = [];
     this["Scaffold Viewer"].module = function() {
       var module = new (require("../modules/ScaffoldViewer").ScaffoldViewer)();
       return module; 
     }
-    this["Scaffold Viewer"].dialog = function(module, parent) {
-      var dialog = new (require("../ui/ScaffoldDialog").ScaffoldDialog)(module, parent);
+    this["Scaffold Viewer"].dialog = function(module, parent, options) {
+      var dialog = new (require("../ui/ScaffoldDialog").ScaffoldDialog)(module, parent, options);
       return dialog; 
     }
   };