New web structure + related code improvements and fixes + added flat and dark themes + updated js

9 files changed, 1583 insertions, 0 deletions

diff --git a/module/web/themes/default/js/sources/MooDialog.js b/module/web/themes/default/js/sources/MooDialog.js
new file mode 100644
index 000000000..45a52496f
--- /dev/null
+++ b/module/web/themes/default/js/sources/MooDialog.js
@@ -0,0 +1,140 @@
+/*
+---
+name: MooDialog
+description: The base class of MooDialog
+authors: Arian Stolwijk
+license:  MIT-style license
+requires: [Core/Class, Core/Element, Core/Element.Style, Core/Element.Event]
+provides: [MooDialog, Element.MooDialog]
+...
+*/
+
+
+var MooDialog = new Class({
+
+	Implements: [Options, Events],
+
+	options: {
+		'class': 'MooDialog',
+		title: null,
+		scroll: true, // IE
+		forceScroll: false,
+		useEscKey: true,
+		destroyOnHide: true,
+		autoOpen: true,
+		closeButton: true,
+		onInitialize: function(){
+			this.wrapper.setStyle('display', 'none');
+		},
+		onBeforeOpen: function(){
+			this.wrapper.setStyle('display', 'block');
+			this.fireEvent('show');
+		},
+		onBeforeClose: function(){
+			this.wrapper.setStyle('display', 'none');
+			this.fireEvent('hide');
+		}/*,
+		onOpen: function(){},
+		onClose: function(){},
+		onShow: function(){},
+		onHide: function(){},
+		onInitialize: function(wrapper){},
+		onContentChange: function(content){}*/
+	},
+
+	initialize: function(options){
+		this.setOptions(options);
+		this.options.inject = this.options.inject || document.body;
+		options = this.options;
+
+		var wrapper = this.wrapper = new Element('div.' + options['class'].replace(' ', '.')).inject(options.inject);
+		this.content = new Element('div.content').inject(wrapper);
+
+		if (options.title){
+			this.title = new Element('div.title').set('text', options.title).inject(wrapper);
+			wrapper.addClass('MooDialogTitle');
+		}
+
+		if (options.closeButton){
+			this.closeButton = new Element('a.close', {
+				events: {click: this.close.bind(this)}
+			}).inject(wrapper);
+		}
+
+
+		/*<ie6>*/// IE 6 scroll
+		if ((options.scroll && Browser.ie6) || options.forceScroll){
+			wrapper.setStyle('position', 'absolute');
+			var position = wrapper.getPosition(options.inject);
+			window.addEvent('scroll', function(){
+				var scroll = document.getScroll();
+				wrapper.setPosition({
+					x: position.x + scroll.x,
+					y: position.y + scroll.y
+				});
+			});
+		}
+		/*</ie6>*/
+
+		if (options.useEscKey){
+			// Add event for the esc key
+			document.addEvent('keydown', function(e){
+				if (e.key == 'esc') this.close();
+			}.bind(this));
+		}
+
+		this.addEvent('hide', function(){
+			if (options.destroyOnHide) this.destroy();
+		}.bind(this));
+
+		this.fireEvent('initialize', wrapper);
+	},
+
+	setContent: function(){
+		var content = Array.from(arguments);
+		if (content.length == 1) content = content[0];
+
+		this.content.empty();
+
+		var type = typeOf(content);
+		if (['string', 'number'].contains(type)) this.content.set('text', content);
+		else this.content.adopt(content);
+
+		this.fireEvent('contentChange', this.content);
+
+		return this;
+	},
+
+	open: function(){
+		this.fireEvent('beforeOpen', this.wrapper).fireEvent('open');
+		this.opened = true;
+		return this;
+	},
+
+	close: function(){
+		this.fireEvent('beforeClose', this.wrapper).fireEvent('close');
+		this.opened = false;
+		return this;
+	},
+
+	destroy: function(){
+		this.wrapper.destroy();
+	},
+
+	toElement: function(){
+		return this.wrapper;
+	}
+
+});
+
+
+Element.implement({
+
+	MooDialog: function(options){
+		this.store('MooDialog',
+			new MooDialog(options).setContent(this).open()
+		);
+		return this;
+	}
+
+});
diff --git a/module/web/themes/default/js/sources/MooDropMenu.js b/module/web/themes/default/js/sources/MooDropMenu.js
new file mode 100644
index 000000000..ac0fa1874
--- /dev/null
+++ b/module/web/themes/default/js/sources/MooDropMenu.js
@@ -0,0 +1,86 @@
+/*
+---
+description: This provides a simple Drop Down menu with infinit levels
+
+license: MIT-style
+
+authors:
+- Arian Stolwijk
+
+requires:
+  - Core/Class.Extras
+  - Core/Element.Event
+  - Core/Selectors
+
+provides: [MooDropMenu, Element.MooDropMenu]
+
+...
+*/
+
+var MooDropMenu = new Class({
+
+	Implements: [Options, Events],
+
+	options: {
+		onOpen: function(el){
+			el.removeClass('close').addClass('open');
+		},
+		onClose: function(el){
+			el.removeClass('open').addClass('close');
+		},
+		onInitialize: function(el){
+			el.removeClass('open').addClass('close');
+		},
+		mouseoutDelay: 200,
+		mouseoverDelay: 0,
+		listSelector: 'ul',
+		itemSelector: 'li',
+		openEvent: 'mouseenter',
+		closeEvent: 'mouseleave'
+	},
+
+	initialize: function(menu, options, level){
+		this.setOptions(options);
+		options = this.options;
+
+		var menu = this.menu = document.id(menu);
+
+		menu.getElements(options.itemSelector + ' > ' + options.listSelector).each(function(el){
+
+			this.fireEvent('initialize', el);
+
+			var parent = el.getParent(options.itemSelector),
+				timer;
+
+			parent.addEvent(options.openEvent, function(){
+				parent.store('DropDownOpen', true);
+
+				clearTimeout(timer);
+				if (options.mouseoverDelay) timer = this.fireEvent.delay(options.mouseoverDelay, this, ['open', el]);
+				else this.fireEvent('open', el);
+
+			}.bind(this)).addEvent(options.closeEvent, function(){
+				parent.store('DropDownOpen', false);
+
+				clearTimeout(timer);
+				timer = (function(){
+					if (!parent.retrieve('DropDownOpen')) this.fireEvent('close', el);
+				}).delay(options.mouseoutDelay, this);
+
+			}.bind(this));
+
+		}, this);
+	},
+
+	toElement: function(){
+		return this.menu
+	}
+
+});
+
+/* So you can do like this $('nav').MooDropMenu(); or even $('nav').MooDropMenu().setStyle('border',1); */
+Element.implement({
+	MooDropMenu: function(options){
+		return this.store('MooDropMenu', new MooDropMenu(this, options));
+	}
+});
diff --git a/module/web/themes/default/js/sources/admin.coffee b/module/web/themes/default/js/sources/admin.coffee
new file mode 100644
index 000000000..c4ab86911
--- /dev/null
+++ b/module/web/themes/default/js/sources/admin.coffee
@@ -0,0 +1,58 @@
+root = this
+
+window.addEvent "domready", ->
+
+    root.passwordDialog = new MooDialog {destroyOnHide: false}
+    root.passwordDialog.setContent $ 'password_box'
+
+    $("login_password_reset").addEvent "click", (e) -> root.passwordDialog.close()
+    $("login_password_button").addEvent "click", (e) ->
+
+        newpw = $("login_new_password").get("value")
+        newpw2 = $("login_new_password2").get("value")
+
+        if newpw is newpw2
+            form = $("password_form")
+            form.set "send", {
+                onSuccess: (data) ->
+                    root.notify.alert "Success", {
+                            'className': 'success'
+                        }
+                onFailure: (data) ->
+                    root.notify.alert "Error", {
+                            'className': 'error'
+                        }
+                }
+
+            form.send()
+
+            root.passwordDialog.close()
+        else
+            alert '{{_("Passwords did not match.")}}'
+
+        e.stop()
+
+    for item in $$(".change_password")
+        id = item.get("id")
+        user = id.split("|")[1]
+        $("user_login").set("value", user)
+        item.addEvent "click", (e) -> root.passwordDialog.open()
+
+    $('quit-pyload').addEvent "click", (e) ->
+        new MooDialog.Confirm "{{_('You are really sure you want to quit pyLoad?')}}", ->
+            new Request.JSON({
+                url: '/api/kill'
+                method: 'get'
+            }).send()
+        , ->
+        e.stop()
+
+    $('restart-pyload').addEvent "click", (e) ->
+        new MooDialog.Confirm "{{_('Are you sure you want to restart pyLoad?')}}", ->
+            new Request.JSON({
+                url: '/api/restart'
+                method: 'get'
+                onSuccess: (data) -> alert "{{_('pyLoad restarted')}}"
+            }).send()
+        , ->
+        e.stop()
diff --git a/module/web/themes/default/js/sources/base.coffee b/module/web/themes/default/js/sources/base.coffee
new file mode 100644
index 000000000..55151acc9
--- /dev/null
+++ b/module/web/themes/default/js/sources/base.coffee
@@ -0,0 +1,173 @@
+# External scope
+root = this
+
+# helper functions
+humanFileSize = (size) ->
+    filesizename = new Array("B", "KiB", "MiB", "GiB", "TiB", "PiB")
+    loga = Math.log(size) / Math.log(1024)
+    i = Math.floor(loga)
+    a = Math.pow(1024, i)
+    if size is 0 then "0 B" else (Math.round(size * 100 / a) / 100 + " " + filesizename[i])
+
+parseUri = () ->
+    oldString = $("add_links").value
+    regxp = new RegExp('(ht|f)tp(s?):\/\/[a-zA-Z0-9\-\.\/\?=_&%#]+[<| |\"|\'|\r|\n|\t]{1}', 'g')
+    resu = oldString.match regxp
+    return if resu == null
+    res = "";
+
+    for part in resu
+        if part.indexOf(" ") != -1
+            res = res + part.replace(" ", " \n")
+        else if part.indexOf("\t") != -1
+            res = res + part.replace("\t", " \n")
+        else if part.indexOf("\r") != -1
+            res = res + part.replace("\r", " \n")
+        else if part.indexOf("\"") != -1
+            res = res + part.replace("\"", " \n")
+        else if part.indexOf("<") != -1
+            res = res + part.replace("<", " \n")
+        else if part.indexOf("'") != -1
+            res = res + part.replace("'", " \n")
+        else
+            res = res + part.replace("\n", " \n")
+
+    $("add_links").value = res;
+
+
+Array::remove = (from, to) ->
+    rest = this.slice((to || from) + 1 || this.length)
+    this.length = from < 0 ? this.length + from : from
+    return [] if this.length == 0
+    return this.push.apply(this, rest)
+
+
+document.addEvent "domready", ->
+
+    # global notification
+    root.notify = new Purr {
+        'mode': 'top'
+        'position': 'center'
+    }
+
+    root.captchaBox = new MooDialog {destroyOnHide: false}
+    root.captchaBox.setContent $ 'cap_box'
+
+    root.addBox = new MooDialog {destroyOnHide: false}
+    root.addBox.setContent $ 'add_box'
+
+    $('add_form').onsubmit = ->
+        $('add_form').target = 'upload_target'
+        if $('add_name').value is "" and $('add_file').value is ""
+            alert '{{_("Please Enter a packagename.")}}'
+            return false
+        else
+            root.addBox.close()
+            return true
+
+    $('add_reset').addEvent 'click', -> root.addBox.close()
+
+    $('action_add').addEvent 'click', -> $("add_form").reset(); root.addBox.open()
+    $('action_play').addEvent 'click', -> new Request({method: 'get', url: '/api/unpauseServer'}).send()
+    $('action_cancel').addEvent 'click', -> new Request({method: 'get', url: '/api/stopAllDownloads'}).send()
+    $('action_stop').addEvent 'click', -> new Request({method: 'get', url: '/api/pauseServer'}).send()
+
+
+    # captcha events
+
+    $('cap_info').addEvent 'click', ->
+        load_captcha "get", ""
+        root.captchaBox.open()
+    $('cap_reset').addEvent 'click', -> root.captchaBox.close()
+    $('cap_form').addEvent 'submit', (e) ->
+        submit_captcha()
+        e.stop()
+
+    $('cap_positional').addEvent 'click', on_captcha_click
+
+    new Request.JSON({
+        url: "/json/status"
+        onSuccess: LoadJsonToContent
+        secure: false
+        async: true
+        initialDelay: 0
+        delay: 4000
+        limit: 3000
+    }).startTimer()
+
+LoadJsonToContent = (data) ->
+    $("speed").set 'text', humanFileSize(data.speed)+"/s"
+    $("aktiv").set 'text', data.active
+    $("aktiv_from").set 'text', data.queue
+    $("aktiv_total").set 'text', data.total
+
+    if data.captcha
+        if $("cap_info").getStyle("display") != "inline"
+            $("cap_info").setStyle 'display', 'inline'
+            root.notify.alert '{{_("New Captcha Request")}}', {
+                            'className': 'notify'
+                        }
+    else
+        $("cap_info").setStyle 'display', 'none'
+
+
+    if data.download
+        $("time").set 'text', ' {{_("on")}}'
+        $("time").setStyle 'background-color', "#8ffc25"
+    else
+        $("time").set 'text', ' {{_("off")}}'
+        $("time").setStyle 'background-color', "#fc6e26"
+
+    if data.reconnect
+        $("reconnect").set 'text', ' {{_("on")}}'
+        $("reconnect").setStyle 'background-color', "#8ffc25"
+    else
+        $("reconnect").set 'text', ' {{_("off")}}'
+        $("reconnect").setStyle 'background-color', "#fc6e26"
+
+    return null
+
+
+set_captcha = (data) ->
+    $('cap_id').set 'value', data.id
+    if (data.result_type is 'textual')
+        $('cap_textual_img').set 'src', data.src
+        $('cap_title').set 'text', '{{_("Please read the text on the captcha.")}}'
+        $('cap_submit').setStyle 'display', 'inline'
+        $('cap_textual').setStyle 'display', 'block'
+        $('cap_positional').setStyle 'display', 'none'
+
+    else if (data.result_type == 'positional')
+        $('cap_positional_img').set('src', data.src)
+        $('cap_title').set('text', '{{_("Please click on the right captcha position.")}}')
+        $('cap_submit').setStyle('display', 'none')
+        $('cap_textual').setStyle('display', 'none')
+
+
+load_captcha = (method, post) ->
+    new Request.JSON({
+        url: "/json/set_captcha"
+        onSuccess: (data) -> set_captcha(data) if data.captcha else clear_captcha()
+        secure: false
+        async: true
+        method: method
+    }).send(post)
+
+clear_captcha = ->
+    $('cap_textual').setStyle 'display', 'none'
+    $('cap_textual_img').set 'src', ''
+    $('cap_positional').setStyle 'display', 'none'
+    $('cap_positional_img').set 'src', ''
+    $('cap_title').set 'text', '{{_("No Captchas to read.")}}'
+
+submit_captcha = ->
+    load_captcha("post", "cap_id=" + $('cap_id').get('value') + "&cap_result=" + $('cap_result').get('value') );
+    $('cap_result').set('value', '')
+    false
+
+on_captcha_click = (e) -> 
+    position = e.target.getPosition()
+    x = e.page.x - position.x
+    y = e.page.y - position.y
+    $('cap_result').value = x + "," + y
+    submit_captcha()
diff --git a/module/web/themes/default/js/sources/filemanager.js b/module/web/themes/default/js/sources/filemanager.js
new file mode 100644
index 000000000..be2f51e13
--- /dev/null
+++ b/module/web/themes/default/js/sources/filemanager.js
@@ -0,0 +1,291 @@
+var load, rename_box, confirm_box;
+
+document.addEvent("domready", function() {
+    load = new Fx.Tween($("load-indicator"), {link: "cancel"});
+    load.set("opacity", 0);
+
+    rename_box = new Fx.Tween($('rename_box'));
+    confirm_box = new Fx.Tween($('confirm_box'));
+    $('rename_reset').addEvent('click', function() {
+        hide_rename_box()
+    });
+    $('delete_reset').addEvent('click', function() {
+        hide_confirm_box()
+    });
+
+    /*$('filemanager_actions_list').getChildren("li").each(function(action) {
+      var action_name = action.className;
+      if(functions[action.className] != undefined)
+      {
+	action.addEvent('click', functions[action.className]);
+      }
+    });*/
+});
+
+function indicateLoad() {
+    //$("load-indicator").reveal();
+    load.start("opacity", 1)
+}
+
+function indicateFinish() {
+    load.start("opacity", 0)
+}
+
+function indicateSuccess() {
+    indicateFinish();
+    notify.alert('{{_("Success")}}.', {
+             'className': 'success'
+    });
+}
+
+function indicateFail() {
+    indicateFinish();
+    notify.alert('{{_("Failed")}}.', {
+             'className': 'error'
+    });
+}
+
+function show_rename_box() {
+    bg_show();
+    $("rename_box").setStyle('display', 'block');
+    rename_box.start('opacity', 1)
+}
+
+function hide_rename_box() {
+    bg_hide();
+    rename_box.start('opacity', 0).chain(function() {
+        $('rename_box').setStyle('display', 'none');
+    });
+}
+
+function show_confirm_box() {
+    bg_show();
+    $("confirm_box").setStyle('display', 'block');
+    confirm_box.start('opacity', 1)
+}
+
+function hide_confirm_box() {
+    bg_hide();
+    confirm_box.start('opacity', 0).chain(function() {
+        $('confirm_box').setStyle('display', 'none');
+    });
+}
+
+var FilemanagerUI = new Class({
+    initialize: function(url, type) {
+        this.url = url;
+        this.type = type;
+        this.directories = [];
+	this.files = [];
+        this.parseChildren();
+    },
+
+    parseChildren: function() {
+        $("directories-list").getChildren("li.folder").each(function(ele) {
+            var path = ele.getElements("input.path")[0].get("value");
+            var name = ele.getElements("input.name")[0].get("value");
+            this.directories.push(new Item(this, path, name, ele))
+        }.bind(this));
+	
+	$("directories-list").getChildren("li.file").each(function(ele) {
+            var path = ele.getElements("input.path")[0].get("value");
+            var name = ele.getElements("input.name")[0].get("value");
+            this.files.push(new Item(this, path, name, ele))
+        }.bind(this));
+    }
+});
+
+var Item = new Class({
+    initialize: function(ui, path, name, ele) {
+        this.ui = ui;
+	this.path = path;
+	this.name = name;
+        this.ele = ele;
+	this.directories = [];
+	this.files = [];
+	this.actions = new Array();
+	this.actions["delete"] = this.del;
+	this.actions["rename"] = this.rename;
+	this.actions["mkdir"] = this.mkdir;
+        this.parseElement();
+
+        var pname = this.ele.getElements("span")[0];
+        this.buttons = new Fx.Tween(this.ele.getElements(".buttons")[0], {link: "cancel"});
+        this.buttons.set("opacity", 0);
+
+        pname.addEvent("mouseenter", function(e) {
+            this.buttons.start("opacity", 1)
+        }.bind(this));
+
+        pname.addEvent("mouseleave", function(e) {
+            this.buttons.start("opacity", 0)
+        }.bind(this));
+
+    },
+
+    parseElement: function() {
+        this.ele.getChildren('span span.buttons img').each(function(img) {
+	  img.addEvent('click', this.actions[img.className].bind(this));
+	}, this);
+
+	//click on the directory name must open the directory itself
+	this.ele.getElements('b')[0].addEvent('click', this.toggle.bind(this));
+	
+	//iterate over child directories
+	var uls = this.ele.getElements('ul');
+	if(uls.length > 0)
+	{
+	  uls[0].getChildren("li.folder").each(function(fld) {
+	    var path = fld.getElements("input.path")[0].get("value");
+	    var name = fld.getElements("input.name")[0].get("value");
+	    this.directories.push(new Item(this, path, name, fld));
+	  }.bind(this));
+	  uls[0].getChildren("li.file").each(function(fld) {
+	    var path = fld.getElements("input.path")[0].get("value");
+	    var name = fld.getElements("input.name")[0].get("value");
+	    this.files.push(new Item(this, path, name, fld));
+	  }.bind(this));
+	}
+    },
+
+    reorderElements: function() {
+      //TODO sort the main ul again (to keep data ordered after renaming something)
+    },
+
+    del: function(event) {
+        $("confirm_form").removeEvents("submit");
+        $("confirm_form").addEvent("submit", this.deleteDirectory.bind(this));
+
+	$$("#confirm_form p").set('html', '{{_(("Are you sure you want to delete the selected item?"))}}');
+	
+        show_confirm_box();
+        event.stop();
+    },
+
+    deleteDirectory: function(event) {
+        hide_confirm_box();
+	new Request.JSON({
+            method: 'POST',
+            url: "/json/filemanager/delete",
+	    data: {"path": this.path, "name": this.name},
+            onSuccess: function(data) {
+		if(data.response == "success")
+		{
+		  new Fx.Tween(this.ele).start('opacity', 0);
+		  var ul = this.ele.parentNode;
+		  this.ele.dispose();
+		  //if this was the only child, add a "empty folder" div
+		  if(!ul.getChildren('li')[0])
+		  {
+		    var div = new Element("div", { 'html': '{{ _("Folder is empty") }}' });
+		    div.replaces(ul);
+		  }
+
+		  indicateSuccess();
+		} else
+		{
+		  //error from json code...
+		  indicateFail();
+		}
+            }.bind(this),
+            onFailure: indicateFail
+        }).send();
+	
+        event.stop();
+    },
+
+    rename: function(event) {
+        $("rename_form").removeEvents("submit");
+        $("rename_form").addEvent("submit", this.renameDirectory.bind(this));
+
+	$("path").set("value", this.path);
+        $("old_name").set("value", this.name);
+        $("new_name").set("value", this.name);
+
+        show_rename_box();
+        event.stop();
+    },
+
+    renameDirectory: function(event) {
+        hide_rename_box();
+	new Request.JSON({
+            method: 'POST',
+            url: "/json/filemanager/rename",
+            onSuccess: function(data) {
+		if(data.response == "success")
+		{
+		  this.name = $("new_name").get("value");
+		  this.ele.getElements("b")[0].set('html', $("new_name").get("value"));
+		  this.reorderElements();
+		  indicateSuccess();
+		} else
+		{
+		  //error from json code...
+		  indicateFail();
+		}
+            }.bind(this),
+            onFailure: indicateFail
+        }).send($("rename_form").toQueryString());
+	
+        event.stop();
+    },
+
+    mkdir: function(event) {
+      new Request.JSON({
+	  method: 'POST',
+	  url: "/json/filemanager/mkdir",
+	  data: {"path": this.path + "/" + this.name, "name": '{{_("New folder")}}'},
+	  onSuccess: function(data) {
+	      if(data.response == "success")
+	      {
+		new Request.HTML({
+		    method: 'POST',
+		    url: "/filemanager/get_dir",
+		    data: {"path": data.path, "name": data.name},
+		    onSuccess: function(li) {
+			//add node as first child of ul
+			var ul = this.ele.getChildren('ul')[0];
+			if(!ul)
+			{
+			  //remove the "Folder Empty" div
+			  this.ele.getChildren('div').dispose();
+
+			  //create new ul to contain subfolder
+			  ul = new Element("ul");
+			  ul.inject(this.ele, 'bottom');
+			}
+			li[0].inject(ul, 'top');
+			
+			//add directory as a subdirectory of the current item
+			this.directories.push(new Item(this.ui, data.path, data.name, ul.firstChild));
+		    }.bind(this),
+		    onFailure: indicateFail
+		}).send();
+		indicateSuccess();
+	      } else
+	      {
+		//error from json code...
+		indicateFail();
+	      }
+	  }.bind(this),
+	  onFailure: indicateFail
+      }).send();
+
+      event.stop();
+    },
+
+    toggle: function() {
+        var child = this.ele.getElement('ul');
+	if(child == null)
+	  child = this.ele.getElement('div');
+	
+	if(child != null)
+	{
+	  if (child.getStyle('display') == "block") {
+	      child.dissolve();
+	  } else {
+	      child.reveal();
+	  }
+	}
+    }
+});
diff --git a/module/web/themes/default/js/sources/package.js b/module/web/themes/default/js/sources/package.js
new file mode 100644
index 000000000..5d0ecbd3e
--- /dev/null
+++ b/module/web/themes/default/js/sources/package.js
@@ -0,0 +1,376 @@
+var root = this;
+
+document.addEvent("domready", function() {
+    root.load = new Fx.Tween($("load-indicator"), {link: "cancel"});
+    root.load.set("opacity", 0);
+
+
+    root.packageBox = new MooDialog({destroyOnHide: false});
+    root.packageBox.setContent($('pack_box'));
+
+    $('pack_reset').addEvent('click', function() {
+        $('pack_form').reset();
+        root.packageBox.close();
+    });
+});
+
+function indicateLoad() {
+    //$("load-indicator").reveal();
+    root.load.start("opacity", 1)
+}
+
+function indicateFinish() {
+    root.load.start("opacity", 0)
+}
+
+function indicateSuccess() {
+    indicateFinish();
+    root.notify.alert('{{_("Success")}}.', {
+             'className': 'success'
+    });
+}
+
+function indicateFail() {
+    indicateFinish();
+    root.notify.alert('{{_("Failed")}}.', {
+             'className': 'error'
+    });
+}
+
+var PackageUI = new Class({
+    initialize: function(url, type) {
+        this.url = url;
+        this.type = type;
+        this.packages = [];
+        this.parsePackages();
+
+        this.sorts = new Sortables($("package-list"), {
+            constrain: false,
+            clone: true,
+            revert: true,
+            opacity: 0.4,
+            handle: ".package_drag",
+            onComplete: this.saveSort.bind(this)
+        });
+
+        $("del_finished").addEvent("click", this.deleteFinished.bind(this));
+        $("restart_failed").addEvent("click", this.restartFailed.bind(this));
+
+    },
+
+    parsePackages: function() {
+        $("package-list").getChildren("li").each(function(ele) {
+            var id = ele.getFirst().get("id").match(/[0-9]+/);
+            this.packages.push(new Package(this, id, ele))
+        }.bind(this))
+    },
+
+    loadPackages: function() {
+    },
+
+    deleteFinished: function() {
+        indicateLoad();
+        new Request.JSON({
+            method: 'get',
+            url: '/api/deleteFinished',
+            onSuccess: function(data) {
+                if (data.length > 0) {
+                    window.location.reload()
+                } else {
+                    this.packages.each(function(pack) {
+                        pack.close();
+                    });
+                    indicateSuccess();
+                }
+            }.bind(this),
+            onFailure: indicateFail
+        }).send();
+    },
+
+    restartFailed: function() {
+        indicateLoad();
+        new Request.JSON({
+            method: 'get',
+            url: '/api/restartFailed',
+            onSuccess: function(data) {
+                this.packages.each(function(pack) {
+                    pack.close();
+                });
+                indicateSuccess();
+            }.bind(this),
+            onFailure: indicateFail
+        }).send();
+    },
+
+    startSort: function(ele, copy) {
+    },
+
+    saveSort: function(ele, copy) {
+        var order = [];
+        this.sorts.serialize(function(li, pos) {
+            if (li == ele && ele.retrieve("order") != pos) {
+                order.push(ele.retrieve("pid") + "|" + pos)
+            }
+            li.store("order", pos)
+        });
+        if (order.length > 0) {
+            indicateLoad();
+            new Request.JSON({
+                method: 'get',
+                url: '/json/package_order/' + order[0],
+                onSuccess: indicateFinish,
+                onFailure: indicateFail
+            }).send();
+        }
+    }
+
+});
+
+var Package = new Class({
+    initialize: function(ui, id, ele, data) {
+        this.ui = ui;
+        this.id = id;
+        this.linksLoaded = false;
+
+        if (!ele) {
+            this.createElement(data);
+        } else {
+            this.ele = ele;
+            this.order = ele.getElements("div.order")[0].get("html");
+            this.ele.store("order", this.order);
+            this.ele.store("pid", this.id);
+            this.parseElement();
+        }
+
+        var pname = this.ele.getElements(".packagename")[0];
+        this.buttons = new Fx.Tween(this.ele.getElements(".buttons")[0], {link: "cancel"});
+        this.buttons.set("opacity", 0);
+
+        pname.addEvent("mouseenter", function(e) {
+            this.buttons.start("opacity", 1)
+        }.bind(this));
+
+        pname.addEvent("mouseleave", function(e) {
+            this.buttons.start("opacity", 0)
+        }.bind(this));
+
+
+    },
+
+    createElement: function() {
+        alert("create")
+    },
+
+    parseElement: function() {
+        var imgs = this.ele.getElements('img');
+
+        this.name = this.ele.getElements('.name')[0];
+        this.folder = this.ele.getElements('.folder')[0];
+        this.password = this.ele.getElements('.password')[0];
+
+        imgs[1].addEvent('click', this.deletePackage.bind(this));
+        imgs[2].addEvent('click', this.restartPackage.bind(this));
+        imgs[3].addEvent('click', this.editPackage.bind(this));
+        imgs[4].addEvent('click', this.movePackage.bind(this));
+
+        this.ele.getElement('.packagename').addEvent('click', this.toggle.bind(this));
+
+    },
+
+    loadLinks: function() {
+        indicateLoad();
+        new Request.JSON({
+            method: 'get',
+            url: '/json/package/' + this.id,
+            onSuccess: this.createLinks.bind(this),
+            onFailure: indicateFail
+        }).send();
+    },
+
+    createLinks: function(data) {
+        var ul = $("sort_children_{id}".substitute({"id": this.id}));
+        ul.set("html", "");
+        data.links.each(function(link) {
+            link.id = link.fid;
+            var li = new Element("li", {
+                "style": {
+                    "margin-left": 0
+                }
+            });
+
+            var html = "<span style='cursor: move' class='child_status sorthandle'><img src='../img/{icon}' style='width: 12px; height:12px;'/></span>\n".substitute({"icon": link.icon});
+            html += "<span style='font-size: 15px'><a href=\"{url}\" target=\"_blank\">{name}</a></span><br /><div class='child_secrow'>".substitute({"url": link.url, "name": link.name});
+            html += "<span class='child_status'>{statusmsg}</span>{error}&nbsp;".substitute({"statusmsg": link.statusmsg, "error":link.error});
+            html += "<span class='child_status'>{format_size}</span>".substitute({"format_size": link.format_size});
+            html += "<span class='child_status'>{plugin}</span>&nbsp;&nbsp;".substitute({"plugin": link.plugin});
+            html += "<img title='{{_(\"Delete Link\")}}' style='cursor: pointer;' width='10px' height='10px' src='../img/delete.png' />&nbsp;&nbsp;";
+            html += "<img title='{{_(\"Restart Link\")}}' style='cursor: pointer;margin-left: -4px' width='10px' height='10px' src='../img/arrow_refresh.png' /></div>";
+
+            var div = new Element("div", {
+                "id": "file_" + link.id,
+                "class": "child",
+                "html": html
+            });
+
+            li.store("order", link.order);
+            li.store("lid", link.id);
+
+            li.adopt(div);
+            ul.adopt(li);
+        });
+        this.sorts = new Sortables(ul, {
+            constrain: false,
+            clone: true,
+            revert: true,
+            opacity: 0.4,
+            handle: ".sorthandle",
+            onComplete: this.saveSort.bind(this)
+        });
+        this.registerLinkEvents();
+        this.linksLoaded = true;
+        indicateFinish();
+        this.toggle();
+    },
+
+    registerLinkEvents: function() {
+        this.ele.getElements('.child').each(function(child) {
+            var lid = child.get('id').match(/[0-9]+/);
+            var imgs = child.getElements('.child_secrow img');
+            imgs[0].addEvent('click', function(e) {
+                new Request({
+                    method: 'get',
+                    url: '/api/deleteFiles/[' + this + "]",
+                    onSuccess: function() {
+                        $('file_' + this).nix()
+                    }.bind(this),
+                    onFailure: indicateFail
+                }).send();
+            }.bind(lid));
+
+            imgs[1].addEvent('click', function(e) {
+                new Request({
+                    method: 'get',
+                    url: '/api/restartFile/' + this,
+                    onSuccess: function() {
+                        var ele = $('file_' + this);
+                        var imgs = ele.getElements("img");
+                        imgs[0].set("src", "../img/status_queue.png");
+                        var spans = ele.getElements(".child_status");
+                        spans[1].set("html", "queued");
+                        indicateSuccess();
+                    }.bind(this),
+                    onFailure: indicateFail
+                }).send();
+            }.bind(lid));
+        });
+    },
+
+    toggle: function() {
+        var child = this.ele.getElement('.children');
+        if (child.getStyle('display') == "block") {
+            child.dissolve();
+        } else {
+            if (!this.linksLoaded) {
+                this.loadLinks();
+            } else {
+                child.reveal();
+            }
+        }
+    },
+
+
+    deletePackage: function(event) {
+        indicateLoad();
+        new Request({
+            method: 'get',
+            url: '/api/deletePackages/[' + this.id + "]",
+            onSuccess: function() {
+                this.ele.nix();
+                indicateFinish();
+            }.bind(this),
+            onFailure: indicateFail
+        }).send();
+        //hide_pack();
+        event.stop();
+    },
+
+    restartPackage: function(event) {
+        indicateLoad();
+        new Request({
+            method: 'get',
+            url: '/api/restartPackage/' + this.id,
+            onSuccess: function() {
+                this.close();
+                indicateSuccess();
+            }.bind(this),
+            onFailure: indicateFail
+        }).send();
+        event.stop();
+    },
+
+    close: function() {
+        var child = this.ele.getElement('.children');
+        if (child.getStyle('display') == "block") {
+            child.dissolve();
+        }
+        var ul = $("sort_children_{id}".substitute({"id": this.id}));
+        ul.erase("html");
+        this.linksLoaded = false;
+    },
+
+    movePackage: function(event) {
+        indicateLoad();
+        new Request({
+            method: 'get',
+            url: '/json/move_package/' + ((this.ui.type + 1) % 2) + "/" + this.id,
+            onSuccess: function() {
+                this.ele.nix();
+                indicateFinish();
+            }.bind(this),
+            onFailure: indicateFail
+        }).send();
+        event.stop();
+    },
+
+    editPackage: function(event) {
+        $("pack_form").removeEvents("submit");
+        $("pack_form").addEvent("submit", this.savePackage.bind(this));
+
+        $("pack_id").set("value", this.id);
+        $("pack_name").set("value", this.name.get("text"));
+        $("pack_folder").set("value", this.folder.get("text"));
+        $("pack_pws").set("value", this.password.get("text"));
+
+        root.packageBox.open();
+        event.stop();
+    },
+
+    savePackage: function(event) {
+        $("pack_form").send();
+        this.name.set("text", $("pack_name").get("value"));
+        this.folder.set("text", $("pack_folder").get("value"));
+        this.password.set("text", $("pack_pws").get("value"));
+        root.packageBox.close();
+        event.stop();
+    },
+
+    saveSort: function(ele, copy) {
+        var order = [];
+        this.sorts.serialize(function(li, pos) {
+            if (li == ele && ele.retrieve("order") != pos) {
+                order.push(ele.retrieve("lid") + "|" + pos)
+            }
+            li.store("order", pos)
+        });
+        if (order.length > 0) {
+            indicateLoad();
+            new Request.JSON({
+                method: 'get',
+                url: '/json/link_order/' + order[0],
+                onSuccess: indicateFinish,
+                onFailure: indicateFail
+            }).send();
+        }
+    }
+
+});
diff --git a/module/web/themes/default/js/sources/purr.js b/module/web/themes/default/js/sources/purr.js
new file mode 100644
index 000000000..9cbc503d9
--- /dev/null
+++ b/module/web/themes/default/js/sources/purr.js
@@ -0,0 +1,309 @@
+/*
+---
+script: purr.js
+
+description: Class to create growl-style popup notifications.
+
+license: MIT-style
+
+authors: [atom smith]
+
+requires:
+- core/1.3: [Core, Browser, Array, Function, Number, String, Hash, Event, Class.Extras, Element.Event, Element.Style, Element.Dimensions, Fx.CSS, FX.Tween, Fx.Morph]
+
+provides: [Purr, Element.alert]
+...
+*/
+
+
+var Purr = new Class({
+
+	'options': {
+		'mode': 'top',
+		'position': 'left',
+		'elementAlertClass': 'purr-element-alert',
+		'elements': {
+			'wrapper': 'div',
+			'alert': 'div',
+			'buttonWrapper': 'div',
+			'button': 'button'
+		},
+		'elementOptions': {
+			'wrapper': {
+				'styles': {
+					'position': 'fixed',
+					'z-index': '9999'
+				},
+				'class': 'purr-wrapper'
+			},
+			'alert': {
+				'class': 'purr-alert',
+				'styles': {
+					'opacity': '.85'
+				}
+			},
+			'buttonWrapper': {
+				'class': 'purr-button-wrapper'
+			},
+			'button': {
+				'class': 'purr-button'
+			}
+		},
+		'alert': {
+			'buttons': [],
+			'clickDismiss': true,
+			'hoverWait': true,
+			'hideAfter': 5000,
+			'fx': {
+				'duration': 500
+			},
+			'highlight': false,
+			'highlightRepeat': false,
+			'highlight': {
+				'start': '#FF0',
+				'end': false
+			}
+		}
+	},
+
+	'Implements': [Options, Events, Chain],
+
+	'initialize': function(options){
+		this.setOptions(options);
+		this.createWrapper();
+		return this;
+	},
+
+	'bindAlert': function(){
+		return this.alert.bind(this);
+	},
+
+	'createWrapper': function(){
+		this.wrapper = new Element(this.options.elements.wrapper, this.options.elementOptions.wrapper);
+		if(this.options.mode == 'top')
+		{
+			this.wrapper.setStyle('top', 0);
+		}
+		else
+		{
+			this.wrapper.setStyle('bottom', 0);
+		}
+		document.id(document.body).grab(this.wrapper);
+		this.positionWrapper(this.options.position);
+	},
+
+	'positionWrapper': function(position){
+		if(typeOf(position) == 'object')
+		{
+
+			var wrapperCoords = this.getWrapperCoords();
+
+			this.wrapper.setStyles({
+				'bottom': '',
+				'left': position.x,
+				'top': position.y - wrapperCoords.height,
+				'position': 'absolute'
+			});
+		}
+		else if(position == 'left')
+		{
+			this.wrapper.setStyle('left', 0);
+		}
+		else if(position == 'right')
+		{
+			this.wrapper.setStyle('right', 0);
+		}
+		else
+		{
+			this.wrapper.setStyle('left', (window.innerWidth / 2) - (this.getWrapperCoords().width / 2));
+		}
+		return this;
+	},
+
+	'getWrapperCoords': function(){
+		this.wrapper.setStyle('visibility', 'hidden');
+		var measurer = this.alert('need something in here to measure');
+		var coords = this.wrapper.getCoordinates();
+		measurer.destroy();
+		this.wrapper.setStyle('visibility','');
+		return coords;
+	},
+
+	'alert': function(msg, options){
+
+		options = Object.merge({}, this.options.alert, options || {});
+
+		var alert = new Element(this.options.elements.alert, this.options.elementOptions.alert);
+
+		if(typeOf(msg) == 'string')
+		{
+			alert.set('html', msg);
+		}
+		else if(typeOf(msg) == 'element')
+		{
+			alert.grab(msg);
+		}
+		else if(typeOf(msg) == 'array')
+		{
+			var alerts = [];
+			msg.each(function(m){
+				alerts.push(this.alert(m, options));
+			}, this);
+			return alerts;
+		}
+
+		alert.store('options', options);
+
+		if(options.buttons.length > 0)
+		{
+			options.clickDismiss = false;
+			options.hideAfter = false;
+			options.hoverWait = false;
+			var buttonWrapper = new Element(this.options.elements.buttonWrapper, this.options.elementOptions.buttonWrapper);
+			alert.grab(buttonWrapper);
+			options.buttons.each(function(button){
+				if(button.text != undefined)
+				{
+					var callbackButton = new Element(this.options.elements.button, this.options.elementOptions.button);
+					callbackButton.set('html', button.text);
+					if(button.callback != undefined)
+					{
+						callbackButton.addEvent('click', button.callback.pass(alert));
+					}
+					if(button.dismiss != undefined && button.dismiss)
+					{
+						callbackButton.addEvent('click', this.dismiss.pass(alert, this));
+					}
+					buttonWrapper.grab(callbackButton);
+				}
+			}, this);
+		}
+		if(options.className != undefined)
+		{
+			alert.addClass(options.className);
+		}
+
+		this.wrapper.grab(alert, (this.options.mode == 'top') ? 'bottom' : 'top');
+
+		var fx = Object.merge(this.options.alert.fx, options.fx);
+		var alertFx = new Fx.Morph(alert, fx);
+		alert.store('fx', alertFx);
+		this.fadeIn(alert);
+
+		if(options.highlight)
+		{
+			alertFx.addEvent('complete', function(){
+				alert.highlight(options.highlight.start, options.highlight.end);
+				if(options.highlightRepeat)
+				{
+					alert.highlight.periodical(options.highlightRepeat, alert, [options.highlight.start, options.highlight.end]);
+				}
+			});
+		}
+		if(options.hideAfter)
+		{
+			this.dismiss(alert);
+		}
+
+		if(options.clickDismiss)
+		{
+			alert.addEvent('click', function(){
+				this.holdUp = false;
+				this.dismiss(alert, true);
+			}.bind(this));
+		}
+
+		if(options.hoverWait)
+		{
+			alert.addEvents({
+				'mouseenter': function(){
+					this.holdUp = true;
+				}.bind(this),
+				'mouseleave': function(){
+					this.holdUp = false;
+				}.bind(this)
+			});
+		}
+
+		return alert;
+	},
+
+	'fadeIn': function(alert){
+		var alertFx = alert.retrieve('fx');
+		alertFx.set({
+			'opacity': 0
+		});
+		alertFx.start({
+			'opacity': [this.options.elementOptions.alert.styles.opacity, .9].pick(),
+		});
+	},
+
+	'dismiss': function(alert, now){
+		now = now || false;
+		var options = alert.retrieve('options');
+		if(now)
+		{
+			this.fadeOut(alert);
+		}
+		else
+		{
+			this.fadeOut.delay(options.hideAfter, this, alert);
+		}
+	},
+
+	'fadeOut': function(alert){
+		if(this.holdUp)
+		{
+			this.dismiss.delay(100, this, [alert, true])
+			return null;
+		}
+		var alertFx = alert.retrieve('fx');
+		if(!alertFx)
+		{
+			return null;
+		}
+		var to = {
+			'opacity': 0
+		}
+		if(this.options.mode == 'top')
+		{
+			to['margin-top'] = '-'+alert.offsetHeight+'px';
+		}
+		else
+		{
+			to['margin-bottom'] = '-'+alert.offsetHeight+'px';
+		}
+		alertFx.start(to);
+		alertFx.addEvent('complete', function(){
+			alert.destroy();
+		});
+	}
+});
+
+Element.implement({
+
+	'alert': function(msg, options){
+		var alert = this.retrieve('alert');
+		if(!alert)
+		{
+			options = options || {
+				'mode':'top'
+			};
+			alert = new Purr(options)
+			this.store('alert', alert);
+		}
+
+		var coords = this.getCoordinates();
+
+		alert.alert(msg, options);
+
+		alert.wrapper.setStyles({
+			'bottom': '',
+			'left': (coords.left - (alert.wrapper.getWidth() / 2)) + (this.getWidth() / 2),
+			'top': coords.top - (alert.wrapper.getHeight()),
+			'position': 'absolute'
+		});
+
+	}
+
+});
\ No newline at end of file
diff --git a/module/web/themes/default/js/sources/settings.coffee b/module/web/themes/default/js/sources/settings.coffee
new file mode 100644
index 000000000..68ca6c6a0
--- /dev/null
+++ b/module/web/themes/default/js/sources/settings.coffee
@@ -0,0 +1,107 @@
+root = this
+
+window.addEvent 'domready', ->
+    root.accountDialog = new MooDialog {destroyOnHide: false}
+    root.accountDialog.setContent $ 'account_box'
+
+    new TinyTab $$('#toptabs li a'), $$('#tabs-body > span')
+
+    $$('ul.nav').each (nav) ->
+        new MooDropMenu nav, {
+            onOpen: (el) -> el.fade 'in'
+            onClose: (el) -> el.fade 'out'
+            onInitialize: (el) -> el.fade('hide').set 'tween', {duration:500}
+        }
+
+    new SettingsUI()
+
+
+class SettingsUI
+    constructor: ->
+        @menu = $$ "#general-menu li"
+        @menu.append $$ "#plugin-menu li"
+
+        @name = $ "tabsback"
+        @general = $ "general_form_content"
+        @plugin = $ "plugin_form_content"
+
+        el.addEvent 'click', @menuClick.bind(this) for el in @menu
+
+        $("general|submit").addEvent "click", @configSubmit.bind(this)
+        $("plugin|submit").addEvent "click", @configSubmit.bind(this)
+
+        $("account_add").addEvent "click", (e) ->
+            root.accountDialog.open()
+            e.stop()
+
+        $("account_reset").addEvent "click", (e) ->
+            root.accountDialog.close()
+
+        $("account_add_button").addEvent "click", @addAccount.bind(this)
+        $("account_submit").addEvent "click", @submitAccounts.bind(this)
+
+
+    menuClick: (e) ->
+        [category, section] = e.target.get("id").split("|")
+        name = e.target.get "text"
+
+
+        target = if category is "general" then @general else @plugin
+        target.dissolve()
+
+        new Request({
+            "method" : "get"
+            "url" : "/json/load_config/#{category}/#{section}"
+            "onSuccess": (data) =>
+                target.set "html", data
+                target.reveal()
+                this.name.set "text", name
+        }).send()
+
+
+    configSubmit: (e) ->
+        category = e.target.get("id").split("|")[0];
+        form = $("#{category}_form");
+
+        form.set "send", {
+            "method": "post"
+            "url": "/json/save_config/#{category}"
+            "onSuccess" : ->
+                root.notify.alert '{{ _("Settings saved.")}}', {
+                            'className': 'success'
+                        }
+            "onFailure": ->
+                root.notify.alert '{{ _("Error occured.")}}', {
+                            'className': 'error'
+                        }
+        }
+        form.send()
+        e.stop()
+
+    addAccount: (e) ->
+        form = $ "add_account_form"
+        form.set "send", {
+            "method": "post"
+            "onSuccess" : -> window.location.reload()
+            "onFailure": ->
+                root.notify.alert '{{_("Error occured.")}}', {
+                    'className': 'error'
+                    }
+            }
+
+        form.send()
+        e.stop()
+
+    submitAccounts: (e) ->
+        form = $ "account_form"
+        form.set "send", {
+             "method": "post",
+             "onSuccess" : -> window.location.reload()
+             "onFailure": ->
+                 root.notify.alert('{{ _("Error occured.") }}', {
+                             'className': 'error'
+                         });
+             }
+
+        form.send()
+        e.stop()
diff --git a/module/web/themes/default/js/sources/tinytab.js b/module/web/themes/default/js/sources/tinytab.js
new file mode 100644
index 000000000..de50279fc
--- /dev/null
+++ b/module/web/themes/default/js/sources/tinytab.js
@@ -0,0 +1,43 @@
+/*
+---
+description: TinyTab - Tiny and simple tab handler for Mootools.
+
+license: MIT-style
+
+authors:
+- Danillo César de O. Melo
+
+requires:
+- core/1.2.4: '*'
+
+provides: TinyTab
+
+...
+*/
+(function($) {
+	this.TinyTab = new Class({
+		Implements: Events,
+		initialize: function(tabs, contents, opt) {
+			this.tabs = tabs;
+			this.contents = contents;
+			if(!opt) opt = {};
+			this.css = opt.selectedClass || 'selected'; 
+			this.select(this.tabs[0]);
+			tabs.each(function(el){
+				el.addEvent('click',function(e){
+					this.select(el);
+					e.stop();
+				}.bind(this));
+			}.bind(this));
+		},
+
+		select: function(el) {
+			this.tabs.removeClass(this.css);
+			el.addClass(this.css);
+			this.contents.setStyle('display','none');
+			var content = this.contents[this.tabs.indexOf(el)];
+			content.setStyle('display','block');
+			this.fireEvent('change',[content,el]);
+		}
+	});
+})(document.id);
\ No newline at end of file