1 files changed, 184 insertions, 0 deletions

diff --git a/snakeplan/templates/media/js/application.js b/snakeplan/templates/media/js/application.js
new file mode 100644
index 0000000..95b5c92
--- /dev/null
+++ b/snakeplan/templates/media/js/application.js
@@ -0,0 +1,184 @@
+/*********************************************************************
+ * Main SnakePlan Application                                        *
+ *********************************************************************/
+(function() {
+
+var URLS = {
+    project: "/api/project",
+    projectStories: "/api/project/{0}/stories"
+};
+
+window.simpleTemplate = simpleTemplate;
+
+$(document).ready(function()
+{
+    $.getJSON(URLS.project, loadProjectSelector);
+
+    $("#project-select").change(function()
+    {
+        $.getJSON(URLS.projectStories.replace("{0}", getCurrentProjectId()), loadTaskList);
+    });
+});
+
+
+function getCurrentProjectId()
+{
+    return $("#project-select").val();
+}
+
+
+function loadProjectSelector(json)
+{
+    $.each(json, function(i, item)
+    {
+        $("#project-select").append(new Option(item.name, item.id));
+    });
+}
+
+
+function loadTaskList(json)
+{
+    var taskList = $("#task-table");
+    taskList.empty();
+
+    $.each(json, function(i, item)
+    {
+        $("<li/>").text(item.name).attr("class", "ui-state-default").appendTo(taskList);
+    });
+
+    $("#task-table").sortable({
+        placeholder: 'ui-state-highlight'
+    });
+    $("#task-table").disableSelection();
+}
+
+})();
+
+
+/*********************************************************************
+ * Centering Plugin                                                  *
+ *********************************************************************/
+(function($){
+ $.fn.extend({
+    center: function (options) {
+        var options =  $.extend({
+            inside: window,
+            transition:  0,
+            minX: 0,
+            minY: 0,
+            withScrolling: true,
+            vertical: true,
+            horizontal: true
+        }, options);
+
+        return this.each(function() {
+            var props = {position:'absolute'};
+            if (options.vertical) {
+                var top = ($(options.inside).height() - $(this).outerHeight()) / 3;
+                if (options.withScrolling) {
+                    top += $(options.inside).scrollTop() || 0;
+                }
+                top = (top > options.minY ? top : options.minY);
+                $.extend(props, {top: top+'px'});
+            }
+
+            if (options.horizontal) {
+                var left = ($(options.inside).width() - $(this).outerWidth()) / 3;
+                if (options.withScrolling) {
+                    left += $(options.inside).scrollLeft() || 0;
+                }
+                left = (left > options.minX ? left : options.minX);
+                $.extend(props, {left: left+'px'});
+            }
+
+            if (options.transition > 0) {
+                $(this).animate(props, options.transition);
+            } else { 
+                $(this).css(props);
+            }
+
+            return $(this);
+        });
+    }
+});
+})(jQuery);
+
+
+/*********************************************************************
+ * Hitch Plugin                                                      *
+ *********************************************************************/
+(function($) {
+$.fn.hitch = function(ev, fn, scope) {
+    return this.bind(ev, function() {
+        return fn.apply(scope || this, Array.prototype.slice.call(arguments));
+    });
+};
+})(jQuery);
+
+
+/*********************************************************************
+ * Overlay Plugin                                                    *
+ *                                                                   *
+ * WARNING: Here be dragons!                                         *
+ *                                                                   *
+ * This needs some love still. I really want to make this into a     *
+ * decent overlay so that it can be used for async form loading but  *
+ * don't yet know how to properly extend jQuery.                     *
+ *                                                                   *
+ *********************************************************************/
+(function($) {
+window.overlay = $("#overlay");
+window.overlay.close = function() {
+    $(this).fadeOut("slow");
+};
+window.overlay.show = function() {
+    $(this).fadeIn("slow");
+};
+
+Overlay = function(height, width)
+{
+    this.height = height;
+    this.width = width;
+
+    this.overlayBox = $("#overlay-display-box").clone().attr("id", "");
+    this.overlayBox.appendTo(overlay);
+};
+Overlay.prototype = {
+
+    open: function() 
+    {
+        this.overlayBox.css({
+            width: this.width + "px",
+            height: this.height + "px",
+        }).center().draggable();
+
+        this.overlayBox.find(".overlay-background").css({
+            width: this.width + "px",
+            height: this.height + "px"
+        });
+
+        this.overlayBox.find(".overlay-foreground").css({
+            width: (this.width - 22) + "px",
+            height: (this.height - 22) + "px"
+        });
+
+        this.overlayBox.find(".overlay-close").hitch("click", function() {
+            this.destroy();
+        }, this);
+
+        this.overlayBox.fadeIn("slow");
+        overlay.show();
+    },
+
+    close: function() {
+        this.overlayBox.fadeOut("slow");
+        overlay.close();
+    },
+
+    destroy: function() {
+        this.close();
+        this.overlayBox.remove();
+    }
+
+};
+})(jQuery);