9 files changed, 100 insertions, 800 deletions
diff --git a/module/web/templates/default/admin.html b/module/web/templates/default/admin.html
index 96c5e7ef3..df1843997 100644
--- a/module/web/templates/default/admin.html
+++ b/module/web/templates/default/admin.html
@@ -3,66 +3,54 @@
 {% block head %}
     <script type="text/javascript">
 
-        var password_dialog;
-
-        function show_password_dialog() {
-            bg_show();
-            $("password_box").setStyle('display', 'block');
-            password_dialog.start('opacity', 1)
-        }
-
-        function hide_password_dialog() {
-            bg_hide();
-            password_dialog.start('opacity', 0).chain(function() {
-                $('password_box').setStyle('display', 'none');
-            });
-        }
-
-        window.addEvent("domready", function() {
-
-            password_dialog = new Fx.Tween($("password_box"));
-
-            $("login_password_reset").addEvent("click", hide_password_dialog);
-            $("login_password_button").addEvent("click", function(e) {
-
-                var current = $("login_current_password").get("value");
-                var newpw = $("login_new_password").get("value");
-                var newpw2 = $("login_new_password2").get("value");
-
-                if (newpw == newpw2) {
-                    var form = $("password_form");
-
-                    form.set("send", {
-                                onSuccess: function(data) {
-                                    notify.alert("Success", {
-                                            'className': 'success'
-                                        });
-                                },
-                                onFailure: function(data) {
-                                    notify.alert("Error", {
-                                            'className': 'error'
-                                        });
-                    }});
-
-                    form.send();
-
-                    hide_password_dialog();
-                } else {
-                    alert("{{_("Passwords did not match.")}}");
-                }
-                e.stop();
-            });
+    root = this;
+
+    window.addEvent("domready", function() {
+
+        root.passwordDialog = new MooDialog({destroyOnHide: false});
+        root.passwordDialog.setContent($('password_box'));
+
+        $("login_password_reset").addEvent("click", function(e) {root.passwordDialog.close();});
+        $("login_password_button").addEvent("click", function(e) {
+
+            var current = $("login_current_password").get("value");
+            var newpw = $("login_new_password").get("value");
+            var newpw2 = $("login_new_password2").get("value");
+
+            if (newpw == newpw2) {
+                var form = $("password_form");
+
+                form.set("send", {
+                    onSuccess: function(data) {
+                        root.notify.alert("Success", {
+                                'className': 'success'
+                            });
+                    },
+                    onFailure: function(data) {
+                        root.notify.alert("Error", {
+                                'className': 'error'
+                            });
+                }});
+
+                form.send();
+
+                root.passwordDialog.close();
+            } else {
+                alert("{{_("Passwords did not match.")}}");
+            }
+            e.stop();
+        });
 
-            $$(".change_password").each(function(item) {
-                var id = item.get("id");
-                var user = id.split("|")[1];
-                $("user_login").set("value", user);
+        $$(".change_password").each(function(item) {
+            var id = item.get("id");
+            var user = id.split("|")[1];
+            $("user_login").set("value", user);
 
-                item.addEvent("click", function(e) {
-                    show_password_dialog();
-                });
+            item.addEvent("click", function(e) {
+                root.passwordDialog.open();
             });
         });
+    });
     </script>
 {% endblock %}
 
@@ -117,9 +105,9 @@
 
         <button class="styled_button" type="submit">{{ _("Submit") }}</button>
     </form>
-
-
-    <div id="password_box" class="myform window_box" style="z-index: 2">
+{% endblock %}
+{% block hidden %}
+    <div id="password_box" class="window_box" style="z-index: 2">
         <form id="password_form" action="/json/change_password" method="POST" enctype="multipart/form-data">
             <h1>{{ _("Change Password") }}</h1>
 
@@ -152,5 +140,4 @@
         </form>
 
     </div>
-
-{% endblock %}
-\ No newline at end of file
+{% endblock %}
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index b471f6993..0b20ecdb0 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -6,168 +6,18 @@
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <link rel="stylesheet" type="text/css" href="/media/default/css/default.css"/>
-
 <link rel="stylesheet" type="text/css" href="/media/default/css/window.css"/>
+<link rel="stylesheet" type="text/css" href="/media/default/css/MooDialog.css"/>
 
-<script type="text/javascript" src="/media/default/js/funktions.js"></script>
-<script type="text/javascript" src="/media/default/js/mootools-core-1.3.1.js"></script>
-<script type="text/javascript" src="/media/default/js/mootools-more-1.3.1.1.js"></script>
+<script type="text/javascript" src="/media/js/mootools-core-1.4.1.js"></script>
+<script type="text/javascript" src="/media/js/mootools-more-1.4.0.1.js"></script>
+<script type="text/javascript" src="/media/js/MooDialog_static.js"></script>
+<script type="text/javascript" src="/media/js/purr_static.js"></script>
 
-<script type="text/javascript" src="/media/default/js/purr.js"></script>
 
-<title>{% block title %}pyLoad {{_("Webinterface")}}{% endblock %}</title>
+<script type="text/javascript" src="/media/js/base.js"></script>
 
-<script type="text/javascript">
-
-var add_bg, add_box, cap_box, cap_info, notify;
-document.addEvent("domready", function(){
-
-    notify = new Purr({
-        'mode': 	'top',
-        'position': 'center'
-    });
-
-	add_bg = new Fx.Tween($('add_bg'));
-	add_box = new Fx.Tween($('add_box'));
-    cap_box = new Fx.Tween($('cap_box'));
-
-    add_bg.set("opacity", 0);
-    add_box.set("opacity", 0);
-    cap_box.set("opacity", 0);
-
-	
-	$('add_form').onsubmit=function() {
-            $('add_form').target = 'upload_target';
-            if ($('add_name').value == "" && $('add_file').value == ""){
-                alert("{{_("Please Enter a packagename.")}}");
-                return false;
-            } else {
-		        out();
-            }
-	};
-
-	$('add_reset').addEvent('click', function(){
-		out();
-	});
-	
-	var jsonStatus = new Request.JSON({
-		url: "/json/status",
-		onSuccess: LoadJsonToContent,
-		secure: false,
-                async: true,
-		initialDelay: 0,
-		delay: 4000,
-		limit: 30000
-	});
-	
-	$('action_play').addEvent('click', function(){
-		new Request({method: 'get', url: '/json/unpause'}).send();	
-	});
-	
-	
-	$('action_cancel').addEvent('click', function(){
-		new Request({method: 'get', url: '/json/cancel'}).send();	
-	});
-	
-	
-    $('action_stop').addEvent('click', function(){
-        new Request({method: 'get', url: '/json/pause'}).send();
-    });
-
-    $('cap_info').addEvent('click', function(){
-        load_cap("get", "");
-        show_cap();
-    });
-
-    jsonStatus.startTimer();
-
-});
-
-function 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');
-            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");
-    }
-}
-
-function bg_show(){
-    $("add_bg").setStyle('display', 'block');
-    add_bg.start('opacity',0.8);
-}
-
-function bg_hide(){
-    add_bg.start('opacity',0).chain(function(){
-        $('add_bg').setStyle('display', 'none');
-    });
-}
-
-function show(){
-    bg_show();
-    $("add_form").reset();
-    $("add_box").setStyle('display', 'block');
-    add_box.start('opacity',1)
-}
-
-function out(){
-    bg_hide();
-    add_box.start('opacity',0).chain(function(){
-        $('add_box').setStyle('display', 'none');
-    });
-}
-
-function show_cap(){
-    bg_show();
-    $("cap_box").setStyle('display', 'block');
-    cap_box.start('opacity',1).chain(function(){
-       $('cap_result').focus();
-    });
-}
-
-function hide_cap(){
-    bg_hide();
-    cap_box.start('opacity',0).chain(function(){
-        $('cap_box').setStyle('display', 'none');
-    });
-}
-
-function AddBox(){
-    if ($("add_box").getStyle("display") == "hidden" || $("add_box").getStyle("display") == "none" || $("add_box").getStyle("opacity" == 0))
-        show();
-    else
-        out();
-}
-
-</script>
+<title>{% block title %}pyLoad {{_("Webinterface")}}{% endblock %}</title>
 
 {% block head %}
 {% endblock %}
@@ -264,7 +114,7 @@ function AddBox(){
 	<li id="action_play"><a href="#"  class="action play" accesskey="o" rel="nofollow">{{_("Start")}}</a></li>
     <li id="action_stop"><a href="#"  class="action stop" accesskey="o" rel="nofollow">{{_("Stop")}}</a></li>
     <li id="action_cancel"><a href="#"  class="action cancel" accesskey="o" rel="nofollow">{{_("Cancel")}}</a></li>
-    <li id="action_add"><a href="javascript:AddBox();"  class="action add" accesskey="o" rel="nofollow" >{{_("Add")}}</a></li>
+    <li id="action_add"><a href="#"  class="action add" accesskey="o" rel="nofollow" >{{_("Add")}}</a></li>
 </ul>
 {% endif %}
 
@@ -320,7 +170,11 @@ function AddBox(){
 </div>
 </div>
 
-{% include "default/window.html" %}
-{% include "default/captcha.html" %}
+<div style="display: none;">
+    {% include "default/window.html" %}
+    {% include "default/captcha.html" %}
+    {% block hidden %}
+    {% endblock %}
+</div>
 </body>
 </html>
diff --git a/module/web/templates/default/captcha.html b/module/web/templates/default/captcha.html
index 6c0099773..332a9c102 100644
--- a/module/web/templates/default/captcha.html
+++ b/module/web/templates/default/captcha.html
@@ -1,76 +1,5 @@
-<iframe id="upload_target" name="upload_target" src="" style="display: none; width:0;height:0"></iframe>
-
-<!-- Captcha form related functions -->
-<script type="text/javascript">
-	document.addEvent("domready", function() {
-	    $('cap_reset').addEvent('click', function(){
-	        hide_cap()
-	    });
-	    $('cap_form').addEvent('submit', function(e){
-	        submit_cap();
-	        e.stop()
-	    });
-	    $('cap_positional').addEvent('click', on_cap_click);
-	});
-	
-	function load_cap(method, post) {
-	    new Request.JSON({
-	        url: "/json/set_captcha",
-	        onSuccess: function(data) {
-	            if (data.captcha)
-					set_captcha(data);
-	            else
-					clear_captcha();
-	        },
-	        secure: false,
-	        async: true,
-	        method: method
-	    }).send(post);
-	}
-	
-	function set_captcha(data) {
-        $('cap_id').set('value', data.id);
-        if (data.result_type == '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');
-        }
-        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');
-            $('cap_positional').setStyle('display', 'block');
-        }
-	}
-	
-	function 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.")}}');		
-	}
-	
-	function submit_cap() {
-	    load_cap("post", "cap_id=" + $('cap_id').get('value') + "&cap_result=" + $('cap_result').get('value') );
-	    $('cap_result').set('value', '');
-	    return false;
-	}
-	
-	function on_cap_click(e) {
-    	var position = e.target.getPosition();
-    	var x = e.page.x - position.x;
-    	var y = e.page.y - position.y;
-		$('cap_result').value = x + "," + y;
-		submit_cap();
-    }
-</script>
-
 <!-- Captcha box -->
-<div id="cap_box" class="myform">
+<div id="cap_box" class="window_box">
 
 	<form id="cap_form" action="/json/set_captcha" method="POST" enctype="multipart/form-data" onsubmit="return false;">
 	
diff --git a/module/web/templates/default/edit_package.html b/module/web/templates/default/edit_package.html
deleted file mode 100644
index 2b82c4027..000000000
--- a/module/web/templates/default/edit_package.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<div id="pack_box" class="myform" style="z-index: 2">
-<form id="pack_form" action="/json/edit_package" method="POST" enctype="multipart/form-data">
-<h1>{{_("Edit Package")}}</h1>
-<p>{{_("Edit the package detais below.")}}</p>
-<input name="pack_id" id="pack_id" type="hidden" value=""/> 
-<label for="pack_name">{{_("Name")}}
-<span class="small">{{_("The name of the package.")}}</span>
-</label>
-<input id="pack_name" name="pack_name" type="text" size="20" />
-
-<label for="pack_folder">{{_("Folder")}}
-<span class="small">{{_("Name of subfolder for these downloads.")}}</span>
-</label>
-<input id="pack_folder" name="pack_folder" type="text" size="20" />
-
-<label for="pack_pws">{{_("Password")}}
-<span class="small">{{_("List of passwords used for unrar.")}}</span>
-</label>
-<textarea rows="3" name="pack_pws" id="pack_pws"></textarea>
-
-<button type="submit">{{_("Submit")}}</button>
-<button id="pack_reset" style="margin-left: 0" type="reset" >{{_("Reset")}}</button>
-<div class="spacer"></div>
-
-</form>
-
-</div>
-\ No newline at end of file
diff --git a/module/web/templates/default/package_ui.js b/module/web/templates/default/package_ui.js
deleted file mode 100644
index bb282a546..000000000
--- a/module/web/templates/default/package_ui.js
+++ /dev/null
@@ -1,400 +0,0 @@
-var load, pack_box;
-
-document.addEvent("domready", function() {
-    load = new Fx.Tween($("load-indicator"), {link: "cancel"});
-    confirmDeleteDialog = new Fx.Tween($("confirmDelete_box"));        
-    load.set("opacity", 0);
-
-    pack_box = new Fx.Tween($('pack_box'));
-    $('pack_reset').addEvent('click', function() {
-        hide_pack()
-    });
-
-    $('confirm_reset').addEvent('click', function() {
-        hide_pack()
-    });
-});
-
-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_pack() {
-    bg_show();
-    $("pack_box").setStyle('display', 'block');
-    pack_box.start('opacity', 1)
-}
-
-function hide_pack() {
-    bg_hide();
-    pack_box.start('opacity', 0).chain(function() {
-        $$('.window_box').setStyle('display', 'none');
-    });
-}
-
-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: '/json/delete_finished',
-            onSuccess: function(data) {
-                if (data.del.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: '/json/restart_failed',
-            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[1].addEvent('click', this.confirmDeletePackage.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.erase("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='/media/default/img/{icon}' style='width: 12px; height:12px;'/></span>\n".substitute({"icon": link.icon});
-            html += "<span style='font-size: 15px'>{name}</span><br /><div class='child_secrow'>".substitute({"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='/media/default/img/delete.png' />&nbsp;&nbsp;";
-            html += "<img title='{{_("Restart Link")}}' style='cursor: pointer;margin-left: -4px' width='10px' height='10px' src='/media/default/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: '/json/remove_link/' + this,
-                    onSuccess: function() {
-                        $('file_' + this).nix()
-                    }.bind(this),
-                    onFailure: indicateFail
-                }).send();
-            }.bind(lid));
-
-            imgs[1].addEvent('click', function(e) {
-                new Request({
-                    method: 'get',
-                    url: '/json/restart_link/' + this,
-                    onSuccess: function() {
-                        var ele = $('file_' + this);
-                        var imgs = ele.getElements("img");
-                        imgs[0].set("src", "/media/default/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();
-            }
-        }
-    },
-
-    confirmDeletePackage: function(event) {
-        bg_show();
-        $('confirmDelete_box').setStyle('display', 'block');
-        confirmDeleteDialog.start('opacity', 1)
-
-        $('confirmDelete_button').addEvent('click', this.deletePackage.bind(this));
-        event.stop();
-    },    
-
-    deletePackage: function(event) {
-        indicateLoad();
-        new Request({
-            method: 'get',
-            url: '/json/remove_package/' + 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: '/json/restart_package/' + 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"));
-
-        show_pack();
-        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"));
-        hide_pack();
-        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/templates/default/queue.html b/module/web/templates/default/queue.html
index dddfb055c..b11910bac 100644
--- a/module/web/templates/default/queue.html
+++ b/module/web/templates/default/queue.html
@@ -1,7 +1,7 @@
 {% extends 'default/base.html' %}
 {% block head %}
 
-<script type="text/javascript" src="/package_ui.js"></script>
+<script type="text/javascript" src="/media/js/package_ui.js"></script>
 
 <script type="text/javascript">
 
@@ -69,15 +69,34 @@ document.addEvent("domready", function(){
     </li>
 {% endfor %}
 </ul>
+{% endblock %}
 
+{% block hidden %}
+<div id="pack_box" class="window_box" style="z-index: 2">
+    <form id="pack_form" action="/json/edit_package" method="POST" enctype="multipart/form-data">
+    <h1>{{_("Edit Package")}}</h1>
+    <p>{{_("Edit the package detais below.")}}</p>
+    <input name="pack_id" id="pack_id" type="hidden" value=""/>
+    <label for="pack_name">{{_("Name")}}
+    <span class="small">{{_("The name of the package.")}}</span>
+    </label>
+    <input id="pack_name" name="pack_name" type="text" size="20" />
 
-<div id="confirmDelete_box" class="window_box myform" style="z-index: 2; opacity: 0;">
-	<h1>{{_("Delete Package")}}</h1>	
-	<p>{{_("Are you sure, that you want to delete this package?")}}</p>	
-	<button id="confirmDelete_button">{{_("Delete Package")}}</button>
-	<button id="confirm_reset" style="margin-left: 0" type="reset">{{_("Reset")}}</button>
-</div>
+    <label for="pack_folder">{{_("Folder")}}
+    <span class="small">{{_("Name of subfolder for these downloads.")}}</span>
+    </label>
+    <input id="pack_folder" name="pack_folder" type="text" size="20" />
+
+    <label for="pack_pws">{{_("Password")}}
+    <span class="small">{{_("List of passwords used for unrar.")}}</span>
+    </label>
+    <textarea rows="3" name="pack_pws" id="pack_pws"></textarea>
 
-{% include "default/edit_package.html" %}
+    <button type="submit">{{_("Submit")}}</button>
+    <button id="pack_reset" style="margin-left: 0" type="reset" >{{_("Reset")}}</button>
+    <div class="spacer"></div>
 
-{% endblock %} 
+    </form>
+
+</div>
+{% endblock %}
+\ No newline at end of file
diff --git a/module/web/templates/default/rename_directory.html b/module/web/templates/default/rename_directory.html
deleted file mode 100644
index 606573554..000000000
--- a/module/web/templates/default/rename_directory.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<div id="rename_box" class="myform window_box" style="z-index: 2">
-  <form id="rename_form" action="/json/filemanager/rename" method="POST" enctype="multipart/form-data">
-    <h1>{{_("Rename directory")}}</h1>
-    <input name="path" id="path" type="hidden" value=""/>
-    <input name="old_name" id="old_name" type="hidden" value=""/>
-
-    <label for="new_name">{{_("New Name")}}
-      <span class="small">{{_("Name the selected item must be renamed to.")}}</span>
-    </label>
-    <input id="new_name" name="new_name" type="text" size="20" />
-
-    <button type="submit">{{_("Submit")}}</button>
-    <button id="rename_reset" style="margin-left: 0" type="reset">{{_("Reset")}}</button>
-    <div class="spacer"></div>
-  </form>
-</div>
-
-<div id="confirm_box" class="myform window_box" style="z-index: 2">
-  <form id="confirm_form" action="/json/filemanager/delete" method="POST" enctype="multipart/form-data">
-    <h1>{{_("Delete directory")}}</h1>
-    
-    <p>{{_(("Are you sure?"))}}</p>
-
-    <button type="submit">{{_("Yes")}}</button>
-    <button id="delete_reset" style="margin-left: 0" type="reset">{{_("No")}}</button>
-    <div class="spacer"></div>
-  </form>
-</div>
-\ No newline at end of file
diff --git a/module/web/templates/default/settings.html b/module/web/templates/default/settings.html
index d5484f06e..a4443025a 100644
--- a/module/web/templates/default/settings.html
+++ b/module/web/templates/default/settings.html
@@ -4,40 +4,9 @@
 {% block subtitle %}{{ _("Config") }}{% endblock %}
 
 {% block head %}
-    <script type="text/javascript" src="/media/default/js/tinytab.js"></script>
-    <script type="text/javascript" src="/media/default/js/MooDropMenu.js"></script>
-    <script type="text/javascript" src="/media/default/js/settings_ui.js"></script>
-
-    <script type="text/javascript">
-
-        success_msg = "{{ _("Settings saved.") }}";
-        failed_msg = "{{ _("Error occured.") }}";
-
-        window.addEvent('domready', function() {
-
-            account_dialog = new Fx.Tween($("account_box"));
-
-            new TinyTab($$('#toptabs li a'), $$('#tabs-body > span'));
-
-            $$('ul.nav').each(function(nav) {
-                var dropMenu = new MooDropMenu(nav, {
-                            onOpen: function(el) {
-                                el.fade('in')
-                            },
-                            onClose: function(el) {
-                                el.fade('out');
-                            },
-                            onInitialize: function(el) {
-                                el.fade('hide').set('tween', {duration:500});
-                            }
-                        });
-            });
-
-            new SettingsUI();
-        });
-
-
-    </script>
+    <script type="text/javascript" src="/media/js/tinytab_static.js"></script>
+    <script type="text/javascript" src="/media/js/MooDropMenu_static.js"></script>
+    <script type="text/javascript" src="/media/js/settings.js"></script>
 
 {% endblock %}
 
@@ -200,9 +169,9 @@
             </form>
             </span>
         </span>
-
-
-<div id="account_box" class="myform window_box" style="z-index: 2">
+{% endblock %}
+{% block hidden %}
+<div id="account_box" class="window_box" style="z-index: 2">
 <form id="add_account_form" action="/json/add_account" method="POST" enctype="multipart/form-data">
 <h1>{{_("Add Account")}}</h1>
 <p>{{_("Enter your account data to use premium features.")}}</p>
@@ -232,4 +201,4 @@
 </form>
 
 </div>
-{% endblock %}
+{% endblock %}
+\ No newline at end of file
diff --git a/module/web/templates/default/window.html b/module/web/templates/default/window.html
index 49de965a1..b61fa7149 100644
--- a/module/web/templates/default/window.html
+++ b/module/web/templates/default/window.html
@@ -1,9 +1,6 @@
 <iframe id="upload_target" name="upload_target" src="" style="display: none; width:0;height:0"></iframe>
-<div id="add_bg" class=".window_box" style="filter:alpha(opacity:80);KHTMLOpacity:0.80;MozOpacity:0.80;opacity:0.80; background:#000; width:100%; height: 100%; position:fixed; top:0; left:0; display:none;">&nbsp;</div>
-<!--<div id="add_box" style="left:50%; top:200px; margin-left: -450px; width: 900px; position: absolute; background: #FFF; padding: 10px 10px 10px 10px; display:none;">-->
-  
-  <!--<div style="width: 900px; text-align: right;"><b onclick="AddBox();">[Close]</b></div>-->
-<div id="add_box" class="myform">
+
+<div id="add_box" class="window_box">
 <form id="add_form" action="/json/add_package" method="POST" enctype="multipart/form-data">
 <h1>{{_("Add Package")}}</h1>
 <p>{{_("Paste your links or upload a container.")}}</p>