Add Popup class

diff --git a/src/infodrom.css b/src/infodrom.css
index 3d0eae6..0404a1e 100644 (file)
--- a/src/infodrom.css
+++ b/src/infodrom.css
@@ -160,16 +160,28 @@ div.popup {
 }
 div.popup_title {
   width: 100%;
-  cursor: move;
-  background: #EEE;
-  margin-bottom: 5px;
+  background: #b0e2ff;
+  margin-top: -1em;
+  margin-bottom: 0px;
   font-weight: bold;
-  padding-bottom: 1px;
+  padding-bottom: 1em;
+  border-bottom: 1px solid #777;
+}
+div.popup_title p {
+  padding-bottom: 0px;
+  margin-bottom: -0.65em;
+  cursor: move;
+}
+div.popup_title img {
+    position: absolute;
+    right: 5px;
+    top: 3px;
+    cursor; pointer;
 }
 div.popup_body {
   padding-left: 2px;
   padding-right: 2px;
-  padding-bottom: 4px;
+  padding-bottom: 2px;
 }
 div.popup label {
   margin-top: 2px;

diff --git a/src/infodrom.js b/src/infodrom.js
index c9b4d2a..e76b2ae 100644 (file)
--- a/src/infodrom.js
+++ b/src/infodrom.js
@@ -129,3 +129,63 @@ $.invoke = function(name, parms, callback) {
                });
 };
 })(jQuery);
+
+function Popup(title, width, height, body) {
+    return this.initialize(title, width, height, body);
+}
+
+Popup.prototype = {
+    initialize: function(title, width, height, body)
+    {
+       this.createPopup(width, height);
+       if (title) this.setTitle(title);
+       if (body) this.setBody(body);
+       return this;
+    },
+
+    createPopup: function(width, height)
+    {
+       this.popup = $('<div class="popup">');
+       this.popup.css('width', width ? width : 'auto');
+       this.popup.css('height', height ? height : 'auto');
+       this.popup.hide().css('z-index', '1000');
+       var titlediv = $('<div class="popup_title" style="position:relative;">');
+       titlediv.append($('<p class="popup_title"></p>'));
+
+       var closeimg = $('<img src="/pix/close.gif" title="Close">');
+       titlediv.append(closeimg);
+
+       this.popup.append(titlediv);
+
+       this.popup.append($('<div class="popup_body" style="clear:both;">'));
+       $('body').append(this.popup);
+
+        this.popup.udraggable({'handle': 'div.popup_title'});
+       this.popup.find('div.popup_title img').bind('click', this.closePopup.bind(this));
+    },
+
+    openPopup: function()
+    {
+       this.popup.show();
+    },
+
+    centerPopup: function()
+    {
+       this.popup.center().show();
+    },
+
+    closePopup: function()
+    {
+       this.popup.hide();
+    },
+
+    setTitle: function(title)
+    {
+       this.popup.find('div.popup_title p.popup_title').html(title);
+    },
+
+    setBody: function(body)
+    {
+       this.popup.find('div.popup_body').html(body);
+    }
+}