add dialog

build/js/ox.ui.js

@@ -1063,6 +1063,7 @@ requires
                     .addClass("OxImage")
                     .appendTo($track.$element), // fixme: make that work
                 c = $image[0].getContext('2d');
+                c.mozImageSmoothingEnabled = false;
             $.each(self.options.trackImages, function(i, v) {
                 console.log(v)
                 $("<img/>")
@@ -1192,6 +1193,93 @@ requires
 
     };
 
+    /*
+    ----------------------------------------------------------------------------
+    Ox.Dialog
+    ----------------------------------------------------------------------------
+    */
+    Ox.Dialog = function(options) {
+		var options = $.extend({
+				title: "",
+				buttons: [],
+				width: 256,
+				height: 128
+			}, options),
+			that = new Ox.Element()
+				.addClass("OxDialog")
+				.css({
+					left: (($(document).width() - options.width) / 2) + "px",
+					top: (($(document).height() - options.height - 48) / 2) + "px",
+					width: options.width + "px",
+					height: (options.height + 48) + "px"
+				});
+		that.$titlebar = new Ox.Element()
+			.addClass("OxTitleBar")
+			.html(options.title)
+			.mousedown(function(e) {
+				var offset = that.offset(),
+					//maxLeft = $(document).width() - that.width(),
+					//maxTop = $(document).height() - that.height(),
+					x = e.clientX,
+					y = e.clientY,
+					documentWidth = $(document).width();
+					documentHeight = $(document).height();
+				$(window).mousemove(function(e) {
+					var left = Ox.constrain(offset.left - x + e.clientX, 24 - options.width, documentWidth - 24),
+						top = Ox.constrain(offset.top - y + e.clientY, -24 - options.height, documentHeight - 24);
+					that.css({
+						left: left + "px",
+						top: top + "px"
+					});
+				});
+				$(window).one("mouseup", function() {
+					$(window).unbind("mousemove");
+				});
+			})
+			.appendTo(that);
+		that.$content = new Ox.Container()
+			.addClass("OxContent")
+			.css({
+				height: options.height + "px"
+			})
+			.appendTo(that);
+		that.$buttonsbar = new Ox.Element()
+			.addClass("OxButtonsBar")
+			.appendTo(that);
+		//that.$buttons = [];
+		$.each(options.buttons, function(i, v) {
+			v.appendTo(that.$buttonsbar);
+		});
+		options.buttons[0].focus();
+		that.$layer = $(".OxLayer"); // fixme: lazy loading of layer is fine, but save in var, dont look up
+		that.append = function($element) {
+			that.$content.append($element);
+			return that;
+		}
+		that.close = function() {
+			that.animate({
+				opacity: 0
+			}, 200, function() {
+				that.remove();
+				that.$layer.remove();
+			})
+		}
+		that.open = function() {
+			if (!that.$layer.length) {
+				that.$layer = new Ox.Element()
+					.addClass("OxLayer")
+					.appendTo($("body"));
+			}
+			that.css({
+				opacity: 0
+			}).appendTo(that.$layer).animate({
+				opacity: 1
+			}, 200);
+			return that;
+		}
+		return that;
+	}
+
     /*
     ============================================================================
     Panels