new package ui for webif

12 files changed, 400 insertions, 451 deletions

diff --git a/module/web/ajax/urls.py b/module/web/ajax/urls.py
index a32a00d89..07b5683b6 100644
--- a/module/web/ajax/urls.py
+++ b/module/web/ajax/urls.py
@@ -28,4 +28,5 @@ urlpatterns = patterns('ajax',
                         (r'^restart_link/(\d+)$', 'views.restart_link'),
                         (r'^push_to_queue/(\d+)$', 'views.push_to_queue'),
                         (r'^set_captcha$', 'views.set_captcha'),
+                        (r'^package_order/([0-9|]+)$', 'views.package_order'),
                        )
\ No newline at end of file
diff --git a/module/web/ajax/views.py b/module/web/ajax/views.py
index 7d5c1884c..f020a8303 100644
--- a/module/web/ajax/views.py
+++ b/module/web/ajax/views.py
@@ -20,6 +20,8 @@ def format_time(seconds):
     minutes, seconds = divmod(seconds, 60)
     return "%.2i:%.2i:%.2i" % (hours, minutes, seconds)
 
+def get_sort_key(item):
+    return item["order"]
 
 def permission(perm):
     def _dec(view_func):
@@ -178,15 +180,42 @@ def packages(request):
 def package(request, id):
     try:
         data = settings.PYLOAD.get_package_data(int(id))
-        data['links'] = []
-        for file in settings.PYLOAD.get_package_files(data['id']):
-            data['links'].append(settings.PYLOAD.get_file_info(file))
+
+        for pyfile in data["links"].itervalues():
+            if pyfile["status"] == 0:
+                pyfile["icon"] = "status_finished.png"
+            elif pyfile["status"] in (2,3):
+                pyfile["icon"] = "status_queue.png"
+            elif pyfile["status"] in (9,1):
+                pyfile["icon"] = "status_offline.png"
+            elif pyfile["status"] == 5:
+                pyfile["icon"] = "status_waiting.png"
+            elif pyfile["status"] == 8:
+                pyfile["icon"] = "status_failed.png"
+            elif pyfile["status"] in (11,13):
+                pyfile["icon"] = "status_proc.png"
+            else:
+                pyfile["icon"] = "status_downloading.png"
+
+        tmp = data["links"].values()
+        tmp.sort(key=get_sort_key)
+        data["links"] = tmp
 
         return JsonResponse(data)
         
     except:
+        print_exc()
+        return HttpResponseServerError()
+
+@permission('pyload.can_add_dl')
+def package_order(request, ids):
+    try:
+        pid, pos = ids.split("|")
+        settings.PYLOAD.order_package(int(pid), int(pos))
+        return JsonResponse("sucess")
+    except:
+        print_exc()
         return HttpResponseServerError()
-        
 @permission('pyload.can_see_dl')
 def link(request, id):
     try:
diff --git a/module/web/media/default/img/ajax-loader.gif b/module/web/media/default/img/ajax-loader.gif
new file mode 100644
index 000000000..2fd8e0737
--- /dev/null
+++ b/module/web/media/default/img/ajax-loader.gif
diff --git a/module/web/media/default/js/funktions.js b/module/web/media/default/js/funktions.js
index 4c42ee336..882d569d9 100644
--- a/module/web/media/default/js/funktions.js
+++ b/module/web/media/default/js/funktions.js
@@ -1,11 +1,4 @@
 // JavaScript Document

-function SecToRightTime(sek)

-{

-	vreturn = sek > 86400 ? sprintf('%d Tag%s ', sek / 86400, Math.floor(sek / 86400) != 1 ? 'e':'') : '';

-	vreturn += sprintf('%02d:%02d:%02d', sek / 3600 % 24, sek / 60 % 60, sek % 60 );

-	return vreturn;

-}

-

 function HumanFileSize(size)

 {

 	var filesizename = new Array("KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");

diff --git a/module/web/media/default/js/mootools-1.2.4.2-more.js b/module/web/media/default/js/mootools-1.2.4.2-more.js
index eb04477df..5e17a23cf 100644
--- a/module/web/media/default/js/mootools-1.2.4.2-more.js
+++ b/module/web/media/default/js/mootools-1.2.4.2-more.js
@@ -1,6 +1,6 @@
 //MooTools More, <http://mootools.net/more>. Copyright (c) 2006-2009 Aaron Newton <http://clientcide.com/>, Valerio Proietti <http://mad4milk.net> & the MooTools team <http://mootools.net/developers>, MIT Style License.
 
-MooTools.More={version:"1.2.4.2",build:"bd5a93c0913cce25917c48cbdacde568e15e02ef"};Class.refactor=function(b,a){$each(a,function(e,d){var c=b.prototype[d];
+MooTools.More={version:"1.2.4.4",build:"6f6057dc645fdb7547689183b2311063bd653ddf"};Class.refactor=function(b,a){$each(a,function(e,d){var c=b.prototype[d];
 if(c&&(c=c._origin)&&typeof e=="function"){b.implement(d,function(){var f=this.previous;this.previous=c;var g=e.apply(this,arguments);this.previous=f;return g;
 });}else{b.implement(d,e);}});return b;};Class.Mutators.Binds=function(a){return a;};Class.Mutators.initialize=function(a){return function(){$splat(this.Binds).each(function(b){var c=this[b];
 if(c){this[b]=c.bind(this);}},this);return a.apply(this,arguments);};};Class.Occlude=new Class({occlude:function(c,b){b=document.id(b||this.element);var a=b.retrieve(c||this.property);
@@ -18,48 +18,48 @@ break;}var b=[];$each(a.plains,function(g,f){g.each(function(h){a.styles.each(fu
 b.each(function(f){e[f]=this.getComputedStyle(f);},this);var d=[];$each(a.plains,function(g,f){var h=f.capitalize();c["total"+h]=c["computed"+h]=0;g.each(function(i){c["computed"+i.capitalize()]=0;
 b.each(function(k,j){if(k.test(i)){e[k]=e[k].toInt()||0;c["total"+h]=c["total"+h]+e[k];c["computed"+i.capitalize()]=c["computed"+i.capitalize()]+e[k];}if(k.test(i)&&f!=k&&(k.test("border")||k.test("padding"))&&!d.contains(k)){d.push(k);
 c["computed"+h]=c["computed"+h]-e[k];}});});});["Width","Height"].each(function(g){var f=g.toLowerCase();if(!$chk(c[f])){return;}c[f]=c[f]+this["offset"+g]+c["computed"+g];
-c["total"+g]=c[f]+c["total"+g];delete c["computed"+g];},this);return $extend(e,c);}});(function(){var a=Element.prototype.position;Element.implement({position:function(h){if(h&&($defined(h.x)||$defined(h.y))){return a?a.apply(this,arguments):this;
-}$each(h||{},function(w,u){if(!$defined(w)){delete h[u];}});h=$merge({relativeTo:document.body,position:{x:"center",y:"center"},edge:false,offset:{x:0,y:0},returnPos:false,relFixedPosition:false,ignoreMargins:false,ignoreScroll:false,allowNegative:false},h);
-var s={x:0,y:0},f=false;var c=this.measure(function(){return document.id(this.getOffsetParent());});if(c&&c!=this.getDocument().body){s=c.measure(function(){return this.getPosition();
-});f=c!=document.id(h.relativeTo);h.offset.x=h.offset.x-s.x;h.offset.y=h.offset.y-s.y;}var t=function(u){if($type(u)!="string"){return u;}u=u.toLowerCase();
-var v={};if(u.test("left")){v.x="left";}else{if(u.test("right")){v.x="right";}else{v.x="center";}}if(u.test("upper")||u.test("top")){v.y="top";}else{if(u.test("bottom")){v.y="bottom";
-}else{v.y="center";}}return v;};h.edge=t(h.edge);h.position=t(h.position);if(!h.edge){if(h.position.x=="center"&&h.position.y=="center"){h.edge={x:"center",y:"center"};
-}else{h.edge={x:"left",y:"top"};}}this.setStyle("position","absolute");var g=document.id(h.relativeTo)||document.body,d=g==document.body?window.getScroll():g.getPosition(),n=d.y,i=d.x;
-var e=g.getScrolls();n+=e.y;i+=e.x;var o=this.getDimensions({computeSize:true,styles:["padding","border","margin"]});var k={},p=h.offset.y,r=h.offset.x,l=window.getSize();
-switch(h.position.x){case"left":k.x=i+r;break;case"right":k.x=i+r+g.offsetWidth;break;default:k.x=i+((g==document.body?l.x:g.offsetWidth)/2)+r;break;}switch(h.position.y){case"top":k.y=n+p;
-break;case"bottom":k.y=n+p+g.offsetHeight;break;default:k.y=n+((g==document.body?l.y:g.offsetHeight)/2)+p;break;}if(h.edge){var b={};switch(h.edge.x){case"left":b.x=0;
-break;case"right":b.x=-o.x-o.computedRight-o.computedLeft;break;default:b.x=-(o.totalWidth/2);break;}switch(h.edge.y){case"top":b.y=0;break;case"bottom":b.y=-o.y-o.computedTop-o.computedBottom;
-break;default:b.y=-(o.totalHeight/2);break;}k.x+=b.x;k.y+=b.y;}k={left:((k.x>=0||f||h.allowNegative)?k.x:0).toInt(),top:((k.y>=0||f||h.allowNegative)?k.y:0).toInt()};
-var j={left:"x",top:"y"};["minimum","maximum"].each(function(u){["left","top"].each(function(v){var w=h[u]?h[u][j[v]]:null;if(w!=null&&k[v]<w){k[v]=w;}});
-});if(g.getStyle("position")=="fixed"||h.relFixedPosition){var m=window.getScroll();k.top+=m.y;k.left+=m.x;}if(h.ignoreScroll){var q=g.getScroll();k.top-=q.y;
-k.left-=q.x;}if(h.ignoreMargins){k.left+=(h.edge.x=="right"?o["margin-right"]:h.edge.x=="center"?-o["margin-left"]+((o["margin-right"]+o["margin-left"])/2):-o["margin-left"]);
-k.top+=(h.edge.y=="bottom"?o["margin-bottom"]:h.edge.y=="center"?-o["margin-top"]+((o["margin-bottom"]+o["margin-top"])/2):-o["margin-top"]);}k.left=Math.ceil(k.left);
-k.top=Math.ceil(k.top);if(h.returnPos){return k;}else{this.setStyles(k);}return this;}});})();Element.implement({isDisplayed:function(){return this.getStyle("display")!="none";
+c["total"+g]=c[f]+c["total"+g];delete c["computed"+g];},this);return $extend(e,c);}});(function(){var a=Element.prototype.position;Element.implement({position:function(g){if(g&&($defined(g.x)||$defined(g.y))){return a?a.apply(this,arguments):this;
+}$each(g||{},function(u,t){if(!$defined(u)){delete g[t];}});g=$merge({relativeTo:document.body,position:{x:"center",y:"center"},edge:false,offset:{x:0,y:0},returnPos:false,relFixedPosition:false,ignoreMargins:false,ignoreScroll:false,allowNegative:false},g);
+var r={x:0,y:0},e=false;var c=this.measure(function(){return document.id(this.getOffsetParent());});if(c&&c!=this.getDocument().body){r=c.measure(function(){return this.getPosition();
+});e=c!=document.id(g.relativeTo);g.offset.x=g.offset.x-r.x;g.offset.y=g.offset.y-r.y;}var s=function(t){if($type(t)!="string"){return t;}t=t.toLowerCase();
+var u={};if(t.test("left")){u.x="left";}else{if(t.test("right")){u.x="right";}else{u.x="center";}}if(t.test("upper")||t.test("top")){u.y="top";}else{if(t.test("bottom")){u.y="bottom";
+}else{u.y="center";}}return u;};g.edge=s(g.edge);g.position=s(g.position);if(!g.edge){if(g.position.x=="center"&&g.position.y=="center"){g.edge={x:"center",y:"center"};
+}else{g.edge={x:"left",y:"top"};}}this.setStyle("position","absolute");var f=document.id(g.relativeTo)||document.body,d=f==document.body?window.getScroll():f.getPosition(),l=d.y,h=d.x;
+var n=this.getDimensions({computeSize:true,styles:["padding","border","margin"]});var j={},o=g.offset.y,q=g.offset.x,k=window.getSize();switch(g.position.x){case"left":j.x=h+q;
+break;case"right":j.x=h+q+f.offsetWidth;break;default:j.x=h+((f==document.body?k.x:f.offsetWidth)/2)+q;break;}switch(g.position.y){case"top":j.y=l+o;break;
+case"bottom":j.y=l+o+f.offsetHeight;break;default:j.y=l+((f==document.body?k.y:f.offsetHeight)/2)+o;break;}if(g.edge){var b={};switch(g.edge.x){case"left":b.x=0;
+break;case"right":b.x=-n.x-n.computedRight-n.computedLeft;break;default:b.x=-(n.totalWidth/2);break;}switch(g.edge.y){case"top":b.y=0;break;case"bottom":b.y=-n.y-n.computedTop-n.computedBottom;
+break;default:b.y=-(n.totalHeight/2);break;}j.x+=b.x;j.y+=b.y;}j={left:((j.x>=0||e||g.allowNegative)?j.x:0).toInt(),top:((j.y>=0||e||g.allowNegative)?j.y:0).toInt()};
+var i={left:"x",top:"y"};["minimum","maximum"].each(function(t){["left","top"].each(function(u){var v=g[t]?g[t][i[u]]:null;if(v!=null&&j[u]<v){j[u]=v;}});
+});if(f.getStyle("position")=="fixed"||g.relFixedPosition){var m=window.getScroll();j.top+=m.y;j.left+=m.x;}if(g.ignoreScroll){var p=f.getScroll();j.top-=p.y;
+j.left-=p.x;}if(g.ignoreMargins){j.left+=(g.edge.x=="right"?n["margin-right"]:g.edge.x=="center"?-n["margin-left"]+((n["margin-right"]+n["margin-left"])/2):-n["margin-left"]);
+j.top+=(g.edge.y=="bottom"?n["margin-bottom"]:g.edge.y=="center"?-n["margin-top"]+((n["margin-bottom"]+n["margin-top"])/2):-n["margin-top"]);}j.left=Math.ceil(j.left);
+j.top=Math.ceil(j.top);if(g.returnPos){return j;}else{this.setStyles(j);}return this;}});})();Element.implement({isDisplayed:function(){return this.getStyle("display")!="none";
 },isVisible:function(){var a=this.offsetWidth,b=this.offsetHeight;return(a==0&&b==0)?false:(a>0&&b>0)?true:this.isDisplayed();},toggle:function(){return this[this.isDisplayed()?"hide":"show"]();
-},hide:function(){var b;try{if((b=this.getStyle("display"))=="none"){b=null;}}catch(a){}return this.store("originalDisplay",b||"block").setStyle("display","none");
-},show:function(a){return this.setStyle("display",a||this.retrieve("originalDisplay")||"block");},swapClass:function(a,b){return this.removeClass(a).addClass(b);
-}});if(!window.Form){window.Form={};}(function(){Form.Request=new Class({Binds:["onSubmit","onFormValidate"],Implements:[Options,Events,Class.Occlude],options:{requestOptions:{evalScripts:true,useSpinner:true,emulation:false,link:"ignore"},extraData:{},resetForm:true},property:"form.request",initialize:function(b,c,a){this.element=document.id(b);
+},hide:function(){var b;try{b=this.getStyle("display");}catch(a){}return this.store("originalDisplay",b||"").setStyle("display","none");},show:function(a){a=a||this.retrieve("originalDisplay")||"block";
+return this.setStyle("display",(a=="none")?"block":a);},swapClass:function(a,b){return this.removeClass(a).addClass(b);}});if(!window.Form){window.Form={};
+}(function(){Form.Request=new Class({Binds:["onSubmit","onFormValidate"],Implements:[Options,Events,Class.Occlude],options:{requestOptions:{evalScripts:true,useSpinner:true,emulation:false,link:"ignore"},extraData:{},resetForm:true},property:"form.request",initialize:function(b,c,a){this.element=document.id(b);
 if(this.occlude()){return this.occluded;}this.update=document.id(c);this.setOptions(a);this.makeRequest();if(this.options.resetForm){this.request.addEvent("success",function(){$try(function(){this.element.reset();
-}.bind(this));if(window.OverText){OverText.update();}}.bind(this));}this.attach();},toElement:function(){return this.element;},makeRequest:function(){this.request=new Request.HTML($merge({url:this.element.get("action"),update:this.update,emulation:false,spinnerTarget:this.element,method:this.element.get("method")||"post"},this.options.requestOptions)).addEvents({success:function(b,a){["success","complete"].each(function(c){this.fireEvent(c,[this.update,b,a]);
-},this);}.bind(this),failure:function(a){this.fireEvent("failure",a);}.bind(this),exception:function(){this.fireEvent("failure",xhr);}.bind(this)});},attach:function(a){a=$pick(a,true);
-method=a?"addEvent":"removeEvent";var b=this.element.retrieve("validator");if(b){b[method]("onFormValidate",this.onFormValidate);}if(!b||!a){this.element[method]("submit",this.onSubmit);
-}},detach:function(){this.attach(false);},enable:function(){this.attach();},disable:function(){this.detach();},onFormValidate:function(b,a,c){if(b||!fv.options.stopOnFailure){if(c&&c.stop){c.stop();
-}this.send();}},onSubmit:function(a){if(this.element.retrieve("validator")){this.detach();this.addFormEvent();return;}a.stop();this.send();},send:function(){var b=this.element.toQueryString().trim();
-var a=$H(this.options.extraData).toQueryString();if(b){b+="&"+a;}else{b=a;}this.fireEvent("send",[this.element,b]);this.request.send({data:b});return this;
-}});Element.Properties.formRequest={set:function(){var a=Array.link(arguments,{options:Object.type,update:Element.type,updateId:String.type});var c=a.update||a.updateId;
-var b=this.retrieve("form.request");if(c){if(b){b.update=document.id(c);}this.store("form.request:update",c);}if(a.options){if(b){b.setOptions(a.options);
+}.bind(this));if(window.OverText){OverText.update();}}.bind(this));}this.attach();},toElement:function(){return this.element;},makeRequest:function(){this.request=new Request.HTML($merge({update:this.update,emulation:false,spinnerTarget:this.element,method:this.element.get("method")||"post"},this.options.requestOptions)).addEvents({success:function(b,a){["complete","success"].each(function(c){this.fireEvent(c,[this.update,b,a]);
+},this);}.bind(this),failure:function(a){this.fireEvent("complete").fireEvent("failure",a);}.bind(this),exception:function(){this.fireEvent("failure",xhr);
+}.bind(this)});},attach:function(a){a=$pick(a,true);method=a?"addEvent":"removeEvent";var b=this.element.retrieve("validator");if(b){b[method]("onFormValidate",this.onFormValidate);
+}if(!b||!a){this.element[method]("submit",this.onSubmit);}},detach:function(){this.attach(false);},enable:function(){this.attach();},disable:function(){this.detach();
+},onFormValidate:function(b,a,d){var c=this.element.retrieve("validator");if(b||(c&&!c.options.stopOnFailure)){if(d&&d.stop){d.stop();}this.send();}},onSubmit:function(a){if(this.element.retrieve("validator")){this.detach();
+return;}a.stop();this.send();},send:function(){var b=this.element.toQueryString().trim();var a=$H(this.options.extraData).toQueryString();if(b){b+="&"+a;
+}else{b=a;}this.fireEvent("send",[this.element,b.parseQueryString()]);this.request.send({data:b,url:this.element.get("action")});return this;}});Element.Properties.formRequest={set:function(){var a=Array.link(arguments,{options:Object.type,update:Element.type,updateId:String.type});
+var c=a.update||a.updateId;var b=this.retrieve("form.request");if(c){if(b){b.update=document.id(c);}this.store("form.request:update",c);}if(a.options){if(b){b.setOptions(a.options);
 }this.store("form.request:options",a.options);}return this;},get:function(){var a=Array.link(arguments,{options:Object.type,update:Element.type,updateId:String.type});
 var b=a.update||a.updateId;if(a.options||b||!this.retrieve("form.request")){if(a.options||!this.retrieve("form.request:options")){this.set("form.request",a.options);
 }if(b){this.set("form.request",b);}this.store("form.request",new Form.Request(this,this.retrieve("form.request:update"),this.retrieve("form.request:options")));
 }return this.retrieve("form.request");}};Element.implement({formUpdate:function(b,a){this.get("form.request",b,a).send();return this;}});})();Fx.Reveal=new Class({Extends:Fx.Morph,options:{link:"cancel",styles:["padding","border","margin"],transitionOpacity:!Browser.Engine.trident4,mode:"vertical",display:"block",hideInputs:Browser.Engine.trident?"select, input, textarea, object, embed":false},dissolve:function(){try{if(!this.hiding&&!this.showing){if(this.element.getStyle("display")!="none"){this.hiding=true;
 this.showing=false;this.hidden=true;this.cssText=this.element.style.cssText;var d=this.element.getComputedSize({styles:this.options.styles,mode:this.options.mode});
-this.element.setStyle("display","block");if(this.options.transitionOpacity){d.opacity=1;}var b={};$each(d,function(f,e){b[e]=[f,0];},this);this.element.setStyle("overflow","hidden");
-var a=this.options.hideInputs?this.element.getElements(this.options.hideInputs):null;this.$chain.unshift(function(){if(this.hidden){this.hiding=false;$each(d,function(f,e){d[e]=f;
-},this);this.element.style.cssText=this.cssText;this.element.setStyle("display","none");if(a){a.setStyle("visibility","visible");}}this.fireEvent("hide",this.element);
-this.callChain();}.bind(this));if(a){a.setStyle("visibility","hidden");}this.start(b);}else{this.callChain.delay(10,this);this.fireEvent("complete",this.element);
-this.fireEvent("hide",this.element);}}else{if(this.options.link=="chain"){this.chain(this.dissolve.bind(this));}else{if(this.options.link=="cancel"&&!this.hiding){this.cancel();
-this.dissolve();}}}}catch(c){this.hiding=false;this.element.setStyle("display","none");this.callChain.delay(10,this);this.fireEvent("complete",this.element);
-this.fireEvent("hide",this.element);}return this;},reveal:function(){try{if(!this.showing&&!this.hiding){if(this.element.getStyle("display")=="none"||this.element.getStyle("visiblity")=="hidden"||this.element.getStyle("opacity")==0){this.showing=true;
+this.element.setStyle("display",this.options.display);if(this.options.transitionOpacity){d.opacity=1;}var b={};$each(d,function(f,e){b[e]=[f,0];},this);
+this.element.setStyle("overflow","hidden");var a=this.options.hideInputs?this.element.getElements(this.options.hideInputs):null;this.$chain.unshift(function(){if(this.hidden){this.hiding=false;
+$each(d,function(f,e){d[e]=f;},this);this.element.style.cssText=this.cssText;this.element.setStyle("display","none");if(a){a.setStyle("visibility","visible");
+}}this.fireEvent("hide",this.element);this.callChain();}.bind(this));if(a){a.setStyle("visibility","hidden");}this.start(b);}else{this.callChain.delay(10,this);
+this.fireEvent("complete",this.element);this.fireEvent("hide",this.element);}}else{if(this.options.link=="chain"){this.chain(this.dissolve.bind(this));
+}else{if(this.options.link=="cancel"&&!this.hiding){this.cancel();this.dissolve();}}}}catch(c){this.hiding=false;this.element.setStyle("display","none");
+this.callChain.delay(10,this);this.fireEvent("complete",this.element);this.fireEvent("hide",this.element);}return this;},reveal:function(){try{if(!this.showing&&!this.hiding){if(this.element.getStyle("display")=="none"||this.element.getStyle("visiblity")=="hidden"||this.element.getStyle("opacity")==0){this.showing=true;
 this.hiding=this.hidden=false;var d;this.cssText=this.element.style.cssText;this.element.measure(function(){d=this.element.getComputedSize({styles:this.options.styles,mode:this.options.mode});
 }.bind(this));$each(d,function(f,e){d[e]=f;});if($chk(this.options.heightOverride)){d.height=this.options.heightOverride.toInt();}if($chk(this.options.widthOverride)){d.width=this.options.widthOverride.toInt();
 }if(this.options.transitionOpacity){this.element.setStyle("opacity",0);d.opacity=1;}var b={height:0,display:this.options.display};$each(d,function(f,e){b[e]=0;
@@ -75,46 +75,85 @@ this.fireEvent("complete",this.element);this.fireEvent("show",this.element);}ret
 }return this.retrieve("reveal");}};Element.Properties.dissolve=Element.Properties.reveal;Element.implement({reveal:function(a){this.get("reveal",a).reveal();
 return this;},dissolve:function(a){this.get("reveal",a).dissolve();return this;},nix:function(){var a=Array.link(arguments,{destroy:Boolean.type,options:Object.type});
 this.get("reveal",a.options).dissolve().chain(function(){this[a.destroy?"destroy":"dispose"]();}.bind(this));return this;},wink:function(){var b=Array.link(arguments,{duration:Number.type,options:Object.type});
-var a=this.get("reveal",b.options);a.reveal().chain(function(){(function(){a.dissolve();}).delay(b.duration||2000);});}});Request.implement({options:{initialDelay:5000,delay:5000,limit:60000},startTimer:function(b){var a=function(){if(!this.running){this.send({data:b});
+var a=this.get("reveal",b.options);a.reveal().chain(function(){(function(){a.dissolve();}).delay(b.duration||2000);});}});var Drag=new Class({Implements:[Events,Options],options:{snap:6,unit:"px",grid:false,style:true,limit:false,handle:false,invert:false,preventDefault:false,stopPropagation:false,modifiers:{x:"left",y:"top"}},initialize:function(){var b=Array.link(arguments,{options:Object.type,element:$defined});
+this.element=document.id(b.element);this.document=this.element.getDocument();this.setOptions(b.options||{});var a=$type(this.options.handle);this.handles=((a=="array"||a=="collection")?$$(this.options.handle):document.id(this.options.handle))||this.element;
+this.mouse={now:{},pos:{}};this.value={start:{},now:{}};this.selection=(Browser.Engine.trident)?"selectstart":"mousedown";this.bound={start:this.start.bind(this),check:this.check.bind(this),drag:this.drag.bind(this),stop:this.stop.bind(this),cancel:this.cancel.bind(this),eventStop:$lambda(false)};
+this.attach();},attach:function(){this.handles.addEvent("mousedown",this.bound.start);return this;},detach:function(){this.handles.removeEvent("mousedown",this.bound.start);
+return this;},start:function(c){if(c.rightClick){return;}if(this.options.preventDefault){c.preventDefault();}if(this.options.stopPropagation){c.stopPropagation();
+}this.mouse.start=c.page;this.fireEvent("beforeStart",this.element);var a=this.options.limit;this.limit={x:[],y:[]};for(var d in this.options.modifiers){if(!this.options.modifiers[d]){continue;
+}if(this.options.style){this.value.now[d]=this.element.getStyle(this.options.modifiers[d]).toInt();}else{this.value.now[d]=this.element[this.options.modifiers[d]];
+}if(this.options.invert){this.value.now[d]*=-1;}this.mouse.pos[d]=c.page[d]-this.value.now[d];if(a&&a[d]){for(var b=2;b--;b){if($chk(a[d][b])){this.limit[d][b]=$lambda(a[d][b])();
+}}}}if($type(this.options.grid)=="number"){this.options.grid={x:this.options.grid,y:this.options.grid};}this.document.addEvents({mousemove:this.bound.check,mouseup:this.bound.cancel});
+this.document.addEvent(this.selection,this.bound.eventStop);},check:function(a){if(this.options.preventDefault){a.preventDefault();}var b=Math.round(Math.sqrt(Math.pow(a.page.x-this.mouse.start.x,2)+Math.pow(a.page.y-this.mouse.start.y,2)));
+if(b>this.options.snap){this.cancel();this.document.addEvents({mousemove:this.bound.drag,mouseup:this.bound.stop});this.fireEvent("start",[this.element,a]).fireEvent("snap",this.element);
+}},drag:function(a){if(this.options.preventDefault){a.preventDefault();}this.mouse.now=a.page;for(var b in this.options.modifiers){if(!this.options.modifiers[b]){continue;
+}this.value.now[b]=this.mouse.now[b]-this.mouse.pos[b];if(this.options.invert){this.value.now[b]*=-1;}if(this.options.limit&&this.limit[b]){if($chk(this.limit[b][1])&&(this.value.now[b]>this.limit[b][1])){this.value.now[b]=this.limit[b][1];
+}else{if($chk(this.limit[b][0])&&(this.value.now[b]<this.limit[b][0])){this.value.now[b]=this.limit[b][0];}}}if(this.options.grid[b]){this.value.now[b]-=((this.value.now[b]-(this.limit[b][0]||0))%this.options.grid[b]);
+}if(this.options.style){this.element.setStyle(this.options.modifiers[b],this.value.now[b]+this.options.unit);}else{this.element[this.options.modifiers[b]]=this.value.now[b];
+}}this.fireEvent("drag",[this.element,a]);},cancel:function(a){this.document.removeEvent("mousemove",this.bound.check);this.document.removeEvent("mouseup",this.bound.cancel);
+if(a){this.document.removeEvent(this.selection,this.bound.eventStop);this.fireEvent("cancel",this.element);}},stop:function(a){this.document.removeEvent(this.selection,this.bound.eventStop);
+this.document.removeEvent("mousemove",this.bound.drag);this.document.removeEvent("mouseup",this.bound.stop);if(a){this.fireEvent("complete",[this.element,a]);
+}}});Element.implement({makeResizable:function(a){var b=new Drag(this,$merge({modifiers:{x:"width",y:"height"}},a));this.store("resizer",b);return b.addEvent("drag",function(){this.fireEvent("resize",b);
+}.bind(this));}});Drag.Move=new Class({Extends:Drag,options:{droppables:[],container:false,precalculate:false,includeMargins:true,checkDroppables:true},initialize:function(b,a){this.parent(b,a);
+b=this.element;this.droppables=$$(this.options.droppables);this.container=document.id(this.options.container);if(this.container&&$type(this.container)!="element"){this.container=document.id(this.container.getDocument().body);
+}var c=b.getStyles("left","top","position");if(c.left=="auto"||c.top=="auto"){b.setPosition(b.getPosition(b.getOffsetParent()));}if(c.position=="static"){b.setStyle("position","absolute");
+}this.addEvent("start",this.checkDroppables,true);this.overed=null;},start:function(a){if(this.container){this.options.limit=this.calculateLimit();}if(this.options.precalculate){this.positions=this.droppables.map(function(b){return b.getCoordinates();
+});}this.parent(a);},calculateLimit:function(){var d=this.element.getOffsetParent(),g=this.container.getCoordinates(d),f={},c={},b={},i={},k={};["top","right","bottom","left"].each(function(o){f[o]=this.container.getStyle("border-"+o).toInt();
+b[o]=this.element.getStyle("border-"+o).toInt();c[o]=this.element.getStyle("margin-"+o).toInt();i[o]=this.container.getStyle("margin-"+o).toInt();k[o]=d.getStyle("padding-"+o).toInt();
+},this);var e=this.element.offsetWidth+c.left+c.right,n=this.element.offsetHeight+c.top+c.bottom,h=0,j=0,m=g.right-f.right-e,a=g.bottom-f.bottom-n;if(this.options.includeMargins){h+=c.left;
+j+=c.top;}else{m+=c.right;a+=c.bottom;}if(this.element.getStyle("position")=="relative"){var l=this.element.getCoordinates(d);l.left-=this.element.getStyle("left").toInt();
+l.top-=this.element.getStyle("top").toInt();h+=f.left-l.left;j+=f.top-l.top;m+=c.left-l.left;a+=c.top-l.top;if(this.container!=d){h+=i.left+k.left;j+=(Browser.Engine.trident4?0:i.top)+k.top;
+}}else{h-=c.left;j-=c.top;if(this.container==d){m-=f.left;a-=f.top;}else{h+=g.left+f.left;j+=g.top+f.top;}}return{x:[h,m],y:[j,a]};},checkAgainst:function(c,b){c=(this.positions)?this.positions[b]:c.getCoordinates();
+var a=this.mouse.now;return(a.x>c.left&&a.x<c.right&&a.y<c.bottom&&a.y>c.top);},checkDroppables:function(){var a=this.droppables.filter(this.checkAgainst,this).getLast();
+if(this.overed!=a){if(this.overed){this.fireEvent("leave",[this.element,this.overed]);}if(a){this.fireEvent("enter",[this.element,a]);}this.overed=a;}},drag:function(a){this.parent(a);
+if(this.options.checkDroppables&&this.droppables.length){this.checkDroppables();}},stop:function(a){this.checkDroppables();this.fireEvent("drop",[this.element,this.overed,a]);
+this.overed=null;return this.parent(a);}});Element.implement({makeDraggable:function(a){var b=new Drag.Move(this,a);this.store("dragger",b);return b;}});
+var Sortables=new Class({Implements:[Events,Options],options:{snap:4,opacity:1,clone:false,revert:false,handle:false,constrain:false},initialize:function(a,b){this.setOptions(b);
+this.elements=[];this.lists=[];this.idle=true;this.addLists($$(document.id(a)||a));if(!this.options.clone){this.options.revert=false;}if(this.options.revert){this.effect=new Fx.Morph(null,$merge({duration:250,link:"cancel"},this.options.revert));
+}},attach:function(){this.addLists(this.lists);return this;},detach:function(){this.lists=this.removeLists(this.lists);return this;},addItems:function(){Array.flatten(arguments).each(function(a){this.elements.push(a);
+var b=a.retrieve("sortables:start",this.start.bindWithEvent(this,a));(this.options.handle?a.getElement(this.options.handle)||a:a).addEvent("mousedown",b);
+},this);return this;},addLists:function(){Array.flatten(arguments).each(function(a){this.lists.push(a);this.addItems(a.getChildren());},this);return this;
+},removeItems:function(){return $$(Array.flatten(arguments).map(function(a){this.elements.erase(a);var b=a.retrieve("sortables:start");(this.options.handle?a.getElement(this.options.handle)||a:a).removeEvent("mousedown",b);
+return a;},this));},removeLists:function(){return $$(Array.flatten(arguments).map(function(a){this.lists.erase(a);this.removeItems(a.getChildren());return a;
+},this));},getClone:function(b,a){if(!this.options.clone){return new Element("div").inject(document.body);}if($type(this.options.clone)=="function"){return this.options.clone.call(this,b,a,this.list);
+}var c=a.clone(true).setStyles({margin:"0px",position:"absolute",visibility:"hidden",width:a.getStyle("width")});if(c.get("html").test("radio")){c.getElements("input[type=radio]").each(function(d,e){d.set("name","clone_"+e);
+});}return c.inject(this.list).setPosition(a.getPosition(a.getOffsetParent()));},getDroppables:function(){var a=this.list.getChildren();if(!this.options.constrain){a=this.lists.concat(a).erase(this.list);
+}return a.erase(this.clone).erase(this.element);},insert:function(c,b){var a="inside";if(this.lists.contains(b)){this.list=b;this.drag.droppables=this.getDroppables();
+}else{a=this.element.getAllPrevious().contains(b)?"before":"after";}this.element.inject(b,a);this.fireEvent("sort",[this.element,this.clone]);},start:function(b,a){if(!this.idle){return;
+}this.idle=false;this.element=a;this.opacity=a.get("opacity");this.list=a.getParent();this.clone=this.getClone(b,a);this.drag=new Drag.Move(this.clone,{snap:this.options.snap,container:this.options.constrain&&this.element.getParent(),droppables:this.getDroppables(),onSnap:function(){b.stop();
+this.clone.setStyle("visibility","visible");this.element.set("opacity",this.options.opacity||0);this.fireEvent("start",[this.element,this.clone]);}.bind(this),onEnter:this.insert.bind(this),onCancel:this.reset.bind(this),onComplete:this.end.bind(this)});
+this.clone.inject(this.element,"before");this.drag.start(b);},end:function(){this.drag.detach();this.element.set("opacity",this.opacity);if(this.effect){var a=this.element.getStyles("width","height");
+var b=this.clone.computePosition(this.element.getPosition(this.clone.offsetParent));this.effect.element=this.clone;this.effect.start({top:b.top,left:b.left,width:a.width,height:a.height,opacity:0.25}).chain(this.reset.bind(this));
+}else{this.reset();}},reset:function(){this.idle=true;this.clone.destroy();this.fireEvent("complete",this.element);},serialize:function(){var c=Array.link(arguments,{modifier:Function.type,index:$defined});
+var b=this.lists.map(function(d){return d.getChildren().map(c.modifier||function(e){return e.get("id");},this);},this);var a=c.index;if(this.lists.length==1){a=0;
+}return $chk(a)&&a>=0&&a<this.lists.length?b[a]:b;}});Request.implement({options:{initialDelay:5000,delay:5000,limit:60000},startTimer:function(b){var a=function(){if(!this.running){this.send({data:b});
 }};this.timer=a.delay(this.options.initialDelay,this);this.lastDelay=this.options.initialDelay;this.completeCheck=function(c){$clear(this.timer);this.lastDelay=(c)?this.options.delay:(this.lastDelay+this.options.delay).min(this.options.limit);
 this.timer=a.delay(this.lastDelay,this);};return this.addEvent("complete",this.completeCheck);},stopTimer:function(){$clear(this.timer);return this.removeEvent("complete",this.completeCheck);
-}});var Color=new Native({initialize:function(b,c){if(arguments.length>=3){c="rgb";b=Array.slice(arguments,0,3);}else{if(typeof b=="string"){if(b.match(/rgb/)){b=b.rgbToHex().hexToRgb(true);
-}else{if(b.match(/hsb/)){b=b.hsbToRgb();}else{b=b.hexToRgb(true);}}}}c=c||"rgb";switch(c){case"hsb":var a=b;b=b.hsbToRgb();b.hsb=a;break;case"hex":b=b.hexToRgb(true);
-break;}b.rgb=b.slice(0,3);b.hsb=b.hsb||b.rgbToHsb();b.hex=b.rgbToHex();return $extend(b,this);}});Color.implement({mix:function(){var a=Array.slice(arguments);
-var c=($type(a.getLast())=="number")?a.pop():50;var b=this.slice();a.each(function(d){d=new Color(d);for(var e=0;e<3;e++){b[e]=Math.round((b[e]/100*(100-c))+(d[e]/100*c));
-}});return new Color(b,"rgb");},invert:function(){return new Color(this.map(function(a){return 255-a;}));},setHue:function(a){return new Color([a,this.hsb[1],this.hsb[2]],"hsb");
-},setSaturation:function(a){return new Color([this.hsb[0],a,this.hsb[2]],"hsb");},setBrightness:function(a){return new Color([this.hsb[0],this.hsb[1],a],"hsb");
-}});var $RGB=function(d,c,a){return new Color([d,c,a],"rgb");};var $HSB=function(d,c,a){return new Color([d,c,a],"hsb");};var $HEX=function(a){return new Color(a,"hex");
-};Array.implement({rgbToHsb:function(){var b=this[0],c=this[1],j=this[2],g=0;var i=Math.max(b,c,j),e=Math.min(b,c,j);var k=i-e;var h=i/255,f=(i!=0)?k/i:0;
-if(f!=0){var d=(i-b)/k;var a=(i-c)/k;var l=(i-j)/k;if(b==i){g=l-a;}else{if(c==i){g=2+d-l;}else{g=4+a-d;}}g/=6;if(g<0){g++;}}return[Math.round(g*360),Math.round(f*100),Math.round(h*100)];
-},hsbToRgb:function(){var c=Math.round(this[2]/100*255);if(this[1]==0){return[c,c,c];}else{var a=this[0]%360;var e=a%60;var g=Math.round((this[2]*(100-this[1]))/10000*255);
-var d=Math.round((this[2]*(6000-this[1]*e))/600000*255);var b=Math.round((this[2]*(6000-this[1]*(60-e)))/600000*255);switch(Math.floor(a/60)){case 0:return[c,b,g];
-case 1:return[d,c,g];case 2:return[g,c,b];case 3:return[g,d,c];case 4:return[b,g,c];case 5:return[c,g,d];}}return false;}});String.implement({rgbToHsb:function(){var a=this.match(/\d{1,3}/g);
-return(a)?a.rgbToHsb():null;},hsbToRgb:function(){var a=this.match(/\d{1,3}/g);return(a)?a.hsbToRgb():null;}});var IframeShim=new Class({Implements:[Options,Events,Class.Occlude],options:{className:"iframeShim",src:'javascript:false;document.write("");',display:false,zIndex:null,margin:0,offset:{x:0,y:0},browsers:(Browser.Engine.trident4||(Browser.Engine.gecko&&!Browser.Engine.gecko19&&Browser.Platform.mac))},property:"IframeShim",initialize:function(b,a){this.element=document.id(b);
+}});var IframeShim=new Class({Implements:[Options,Events,Class.Occlude],options:{className:"iframeShim",src:'javascript:false;document.write("");',display:false,zIndex:null,margin:0,offset:{x:0,y:0},browsers:(Browser.Engine.trident4||(Browser.Engine.gecko&&!Browser.Engine.gecko19&&Browser.Platform.mac))},property:"IframeShim",initialize:function(b,a){this.element=document.id(b);
 if(this.occlude()){return this.occluded;}this.setOptions(a);this.makeShim();return this;},makeShim:function(){if(this.options.browsers){var c=this.element.getStyle("zIndex").toInt();
 if(!c){c=1;var b=this.element.getStyle("position");if(b=="static"||!b){this.element.setStyle("position","relative");}this.element.setStyle("zIndex",c);
 }c=($chk(this.options.zIndex)&&c>this.options.zIndex)?this.options.zIndex:c-1;if(c<0){c=1;}this.shim=new Element("iframe",{src:this.options.src,scrolling:"no",frameborder:0,styles:{zIndex:c,position:"absolute",border:"none",filter:"progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)"},"class":this.options.className}).store("IframeShim",this);
-var a=(function(){this.shim.inject(this.element,"after");this[this.options.display?"show":"hide"]();this.fireEvent("inject");}).bind(this);if(IframeShim.ready){window.addEvent("load",a);
+var a=(function(){this.shim.inject(this.element,"after");this[this.options.display?"show":"hide"]();this.fireEvent("inject");}).bind(this);if(!IframeShim.ready){window.addEvent("load",a);
 }else{a();}}else{this.position=this.hide=this.show=this.dispose=$lambda(this);}},position:function(){if(!IframeShim.ready||!this.shim){return this;}var a=this.element.measure(function(){return this.getSize();
 });if(this.options.margin!=undefined){a.x=a.x-(this.options.margin*2);a.y=a.y-(this.options.margin*2);this.options.offset.x+=this.options.margin;this.options.offset.y+=this.options.margin;
 }this.shim.set({width:a.x,height:a.y}).position({relativeTo:this.element,offset:this.options.offset});return this;},hide:function(){if(this.shim){this.shim.setStyle("display","none");
 }return this;},show:function(){if(this.shim){this.shim.setStyle("display","block");}return this.position();},dispose:function(){if(this.shim){this.shim.dispose();
-}return this;},destroy:function(){if(this.shim){this.shim.destroy();}return this;}});window.addEvent("load",function(){IframeShim.ready=true;});var Mask=new Class({Implements:[Options,Events],Binds:["resize"],options:{style:{},"class":"mask",maskMargins:false,useIframeShim:true},initialize:function(b,a){this.target=document.id(b)||document.body;
-this.target.store("mask",this);this.setOptions(a);this.render();this.inject();},render:function(){this.element=new Element("div",{"class":this.options["class"],id:this.options.id||"mask-"+$time(),styles:$merge(this.options.style,{display:"none"}),events:{click:function(){this.fireEvent("click");
+}return this;},destroy:function(){if(this.shim){this.shim.destroy();}return this;}});window.addEvent("load",function(){IframeShim.ready=true;});var Mask=new Class({Implements:[Options,Events],Binds:["position"],options:{style:{},"class":"mask",maskMargins:false,useIframeShim:true,iframeShimOptions:{}},initialize:function(b,a){this.target=document.id(b)||document.id(document.body);
+this.target.store("Mask",this);this.setOptions(a);this.render();this.inject();},render:function(){this.element=new Element("div",{"class":this.options["class"],id:this.options.id||"mask-"+$time(),styles:$merge(this.options.style,{display:"none"}),events:{click:function(){this.fireEvent("click");
 if(this.options.hideOnClick){this.hide();}}.bind(this)}});this.hidden=true;},toElement:function(){return this.element;},inject:function(b,a){a=a||this.options.inject?this.options.inject.where:""||this.target==document.body?"inside":"after";
-b=b||this.options.inject?this.options.inject.target:""||this.target;this.element.inject(b,a);if(this.options.useIframeShim){this.shim=new IframeShim(this.element);
+b=b||this.options.inject?this.options.inject.target:""||this.target;this.element.inject(b,a);if(this.options.useIframeShim){this.shim=new IframeShim(this.element,this.options.iframeShimOptions);
 this.addEvents({show:this.shim.show.bind(this.shim),hide:this.shim.hide.bind(this.shim),destroy:this.shim.destroy.bind(this.shim)});}},position:function(){this.resize(this.options.width,this.options.height);
 this.element.position({relativeTo:this.target,position:"topLeft",ignoreMargins:!this.options.maskMargins,ignoreScroll:this.target==document.body});return this;
 },resize:function(a,e){var b={styles:["padding","border"]};if(this.options.maskMargins){b.styles.push("margin");}var d=this.target.getComputedSize(b);if(this.target==document.body){var c=window.getSize();
 if(d.totalHeight<c.y){d.totalHeight=c.y;}if(d.totalWidth<c.x){d.totalWidth=c.x;}}this.element.setStyles({width:$pick(a,d.totalWidth,d.x),height:$pick(e,d.totalHeight,d.y)});
-return this;},show:function(){if(!this.hidden){return this;}this.target.addEvent("resize",this.resize);if(this.target!=document.body){document.id(document.body).addEvent("resize",this.resize);
-}this.position();this.showMask.apply(this,arguments);return this;},showMask:function(){this.element.setStyle("display","block");this.hidden=false;this.fireEvent("show");
-},hide:function(){if(this.hidden){return this;}this.target.removeEvent("resize",this.resize);this.hideMask.apply(this,arguments);if(this.options.destroyOnHide){return this.destroy();
-}return this;},hideMask:function(){this.element.setStyle("display","none");this.hidden=true;this.fireEvent("hide");},toggle:function(){this[this.hidden?"show":"hide"]();
-},destroy:function(){this.hide();this.element.destroy();this.fireEvent("destroy");this.target.eliminate("mask");}});Element.Properties.mask={set:function(b){var a=this.retrieve("mask");
-return this.eliminate("mask").store("mask:options",b);},get:function(a){if(a||!this.retrieve("mask")){if(this.retrieve("mask")){this.retrieve("mask").destroy();
-}if(a||!this.retrieve("mask:options")){this.set("mask",a);}this.store("mask",new Mask(this,this.retrieve("mask:options")));}return this.retrieve("mask");
-}};Element.implement({mask:function(a){this.get("mask",a).show();return this;},unmask:function(){this.get("mask").hide();return this;}});var Spinner=new Class({Extends:Mask,options:{"class":"spinner",containerPosition:{},content:{"class":"spinner-content"},messageContainer:{"class":"spinner-msg"},img:{"class":"spinner-img"},fxOptions:{link:"chain"}},initialize:function(){this.parent.apply(this,arguments);
+return this;},show:function(){if(!this.hidden){return this;}window.addEvent("resize",this.position);this.position();this.showMask.apply(this,arguments);
+return this;},showMask:function(){this.element.setStyle("display","block");this.hidden=false;this.fireEvent("show");},hide:function(){if(this.hidden){return this;
+}window.removeEvent("resize",this.position);this.hideMask.apply(this,arguments);if(this.options.destroyOnHide){return this.destroy();}return this;},hideMask:function(){this.element.setStyle("display","none");
+this.hidden=true;this.fireEvent("hide");},toggle:function(){this[this.hidden?"show":"hide"]();},destroy:function(){this.hide();this.element.destroy();this.fireEvent("destroy");
+this.target.eliminate("mask");}});Element.Properties.mask={set:function(b){var a=this.retrieve("mask");return this.eliminate("mask").store("mask:options",b);
+},get:function(a){if(a||!this.retrieve("mask")){if(this.retrieve("mask")){this.retrieve("mask").destroy();}if(a||!this.retrieve("mask:options")){this.set("mask",a);
+}this.store("mask",new Mask(this,this.retrieve("mask:options")));}return this.retrieve("mask");}};Element.implement({mask:function(a){this.get("mask",a).show();
+return this;},unmask:function(){this.get("mask").hide();return this;}});var Spinner=new Class({Extends:Mask,options:{"class":"spinner",containerPosition:{},content:{"class":"spinner-content"},messageContainer:{"class":"spinner-msg"},img:{"class":"spinner-img"},fxOptions:{link:"chain"}},initialize:function(){this.parent.apply(this,arguments);
 this.target.store("spinner",this);var a=function(){this.active=false;}.bind(this);this.addEvents({hide:a,show:a});},render:function(){this.parent();this.element.set("id",this.options.id||"spinner-"+$time());
 this.content=document.id(this.options.content)||new Element("div",this.options.content);this.content.inject(this.element);if(this.options.message){this.msg=document.id(this.options.message)||new Element("p",this.options.messageContainer).appendText(this.options.message);
 this.msg.inject(this.content);}if(this.options.img){this.img=document.id(this.options.img)||new Element("div",this.options.img);this.img.inject(this.content);
diff --git a/module/web/media/default/js/sprintf.js b/module/web/media/default/js/sprintf.js
deleted file mode 100644
index 385285340..000000000
--- a/module/web/media/default/js/sprintf.js
+++ /dev/null
@@ -1,123 +0,0 @@
-// JavaScript Document

-sprintfWrapper = {

- 

-	init : function () {

- 

-		if (typeof arguments == "undefined") { return null; }

-		if (arguments.length < 1) { return null; }

-		if (typeof arguments[0] != "string") { return null; }

-		if (typeof RegExp == "undefined") { return null; }

- 

-		var string = arguments[0];

-		var exp = new RegExp(/(%([%]|(\-)?(\+|\x20)?(0)?(\d+)?(\.(\d)?)?([bcdfosxX])))/g);

-		var matches = new Array();

-		var strings = new Array();

-		var convCount = 0;

-		var stringPosStart = 0;

-		var stringPosEnd = 0;

-		var matchPosEnd = 0;

-		var newString = '';

-		var match = null;

- 

-		while (match = exp.exec(string)) {

-			if (match[9]) { convCount += 1; }

- 

-			stringPosStart = matchPosEnd;

-			stringPosEnd = exp.lastIndex - match[0].length;

-			strings[strings.length] = string.substring(stringPosStart, stringPosEnd);

- 

-			matchPosEnd = exp.lastIndex;

-			matches[matches.length] = {

-				match: match[0],

-				left: match[3] ? true : false,

-				sign: match[4] || '',

-				pad: match[5] || ' ',

-				min: match[6] || 0,

-				precision: match[8],

-				code: match[9] || '%',

-				negative: parseInt(arguments[convCount]) < 0,

-				argument: String(arguments[convCount])

-			};

-		}

-		strings[strings.length] = string.substring(matchPosEnd);

- 

-		if (matches.length == 0) { return string; }

-		if ((arguments.length - 1) < convCount) { return null; }

- 

-		var code = null;

-		var match = null;

-		var i = null;

- 

-		for (i=0; i<matches.length; i++) {

- 

-			if (matches[i].code == '%') { substitution = '%' }

-			else if (matches[i].code == 'b') {

-				matches[i].argument = String(Math.abs(parseInt(matches[i].argument)).toString(2));

-				substitution = sprintfWrapper.convert(matches[i], true);

-			}

-			else if (matches[i].code == 'c') {

-				matches[i].argument = String(String.fromCharCode(parseInt(Math.abs(parseInt(matches[i].argument)))));

-				substitution = sprintfWrapper.convert(matches[i], true);

-			}

-			else if (matches[i].code == 'd') {

-				matches[i].argument = String(Math.abs(parseInt(matches[i].argument)));

-				substitution = sprintfWrapper.convert(matches[i]);

-			}

-			else if (matches[i].code == 'f') {

-				matches[i].argument = String(Math.abs(parseFloat(matches[i].argument)).toFixed(matches[i].precision ? matches[i].precision : 6));

-				substitution = sprintfWrapper.convert(matches[i]);

-			}

-			else if (matches[i].code == 'o') {

-				matches[i].argument = String(Math.abs(parseInt(matches[i].argument)).toString(8));

-				substitution = sprintfWrapper.convert(matches[i]);

-			}

-			else if (matches[i].code == 's') {

-				matches[i].argument = matches[i].argument.substring(0, matches[i].precision ? matches[i].precision : matches[i].argument.length)

-				substitution = sprintfWrapper.convert(matches[i], true);

-			}

-			else if (matches[i].code == 'x') {

-				matches[i].argument = String(Math.abs(parseInt(matches[i].argument)).toString(16));

-				substitution = sprintfWrapper.convert(matches[i]);

-			}

-			else if (matches[i].code == 'X') {

-				matches[i].argument = String(Math.abs(parseInt(matches[i].argument)).toString(16));

-				substitution = sprintfWrapper.convert(matches[i]).toUpperCase();

-			}

-			else {

-				substitution = matches[i].match;

-			}

- 

-			newString += strings[i];

-			newString += substitution;

- 

-		}

-		newString += strings[i];

- 

-		return newString;

- 

-	},

- 

-	convert : function(match, nosign){

-		if (nosign) {

-			match.sign = '';

-		} else {

-			match.sign = match.negative ? '-' : match.sign;

-		}

-		var l = match.min - match.argument.length + 1 - match.sign.length;

-		var pad = new Array(l < 0 ? 0 : l).join(match.pad);

-		if (!match.left) {

-			if (match.pad == "0" || nosign) {

-				return match.sign + pad + match.argument;

-			} else {

-				return pad + match.sign + match.argument;

-			}

-		} else {

-			if (match.pad == "0" || nosign) {

-				return match.sign + match.argument + pad.replace(/0/g, ' ');

-			} else {

-				return match.sign + match.argument + pad;

-			}

-		}

-	}

-}

-sprintf = sprintfWrapper.init;
\ No newline at end of file
diff --git a/module/web/pyload/urls.py b/module/web/pyload/urls.py
index 66ea68e39..c4c2f6ef2 100644
--- a/module/web/pyload/urls.py
+++ b/module/web/pyload/urls.py
@@ -15,6 +15,7 @@ urlpatterns = patterns('pyload',
                        (r'^settings/$', 'views.config',{}, 'config'),
                        (r'^logs/$', 'views.logs',{}, 'logs'),
                        (r'^logs/(?P<item>\d+)$', 'views.logs',{}, 'logs'),
+                       (r'^package_ui.js$', 'views.package_ui', {}, 'package_ui'),
                        (r'^$', 'views.home',{}, 'home'),
                        )
 
diff --git a/module/web/pyload/views.py b/module/web/pyload/views.py
index dd367f7f3..e1f4e2fdd 100644
--- a/module/web/pyload/views.py
+++ b/module/web/pyload/views.py
@@ -86,31 +86,10 @@ def home(request):
 @permission('pyload.can_see_dl')
 @check_server
 def queue(request):
-    queue = settings.PYLOAD.get_queue()
-    for package in queue.itervalues():
-        for pyfile in package["links"].itervalues():
-            if pyfile["status"] == 0:
-                pyfile["icon"] = "status_finished.png"
-            elif pyfile["status"] in (2,3):
-                pyfile["icon"] = "status_queue.png"
-            elif pyfile["status"] in (9,1):
-                pyfile["icon"] = "status_offline.png"
-            elif pyfile["status"] == 5:
-                pyfile["icon"] = "status_waiting.png"
-            elif pyfile["status"] == 8:
-                pyfile["icon"] = "status_failed.png"
-            elif pyfile["status"] in (11,13):
-                pyfile["icon"] = "status_proc.png"
-            else:
-                pyfile["icon"] = "status_downloading.png"
-    
+    queue = settings.PYLOAD.get_queue_info()
+
     data = zip(queue.keys(), queue.values())
     data.sort(key=get_sort_key)
-    
-    for id, value in data:
-        tmp = zip(value["links"].keys(), value["links"].values())
-        tmp.sort(key=get_sort_key)
-        value["links"] = tmp
             
     return render_to_response(join(settings.TEMPLATE, 'queue.html'), RequestContext(request, {'content': data}, [status_proc]))
 
@@ -262,31 +241,10 @@ def logs(request, item=-1):
 @permission('pyload.can_add_dl')
 @check_server
 def collector(request):
-    queue = settings.PYLOAD.get_collector()
-    for package in queue.itervalues():
-        for pyfile in package["links"].itervalues():
-            if pyfile["status"] == 0:
-                pyfile["icon"] = "status_finished.png"
-            elif pyfile["status"] in (2,3):
-                pyfile["icon"] = "status_queue.png"
-            elif pyfile["status"] in (9,1):
-                pyfile["icon"] = "status_offline.png"
-            elif pyfile["status"] == 5:
-                pyfile["icon"] = "status_waiting.png"
-            elif pyfile["status"] == 8:
-                pyfile["icon"] = "status_failed.png"
-            elif pyfile["status"] in (11,13):
-                pyfile["icon"] = "status_proc.png"
-            else:
-                pyfile["icon"] = "status_downloading.png"
+    queue = settings.PYLOAD.get_collector_info()
 
     data = zip(queue.keys(), queue.values())
     data.sort(key=get_sort_key)
-    
-    for id, value in data:
-        tmp = zip(value["links"].keys(), value["links"].values())
-        tmp.sort(key=get_sort_key)
-        value["links"] = tmp
 
     return render_to_response(join(settings.TEMPLATE, 'collector.html'), RequestContext(request, {'content': data}, [status_proc]))
 
@@ -371,3 +329,9 @@ def config(request):
     accs = settings.PYLOAD.get_accounts()
             
     return render_to_response(join(settings.TEMPLATE, 'settings.html'), RequestContext(request, {'conf': {'Plugin':plugin, 'General':conf, 'Accounts': accs}, 'errors': messages}, [status_proc]))
+
+@login_required
+@permission('pyload.can_change_status')
+@check_server
+def package_ui(request):
+    return render_to_response(join(settings.TEMPLATE, 'package_ui.js'), RequestContext(request, {}, ))
\ No newline at end of file
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index fd18aee84..2ed21d1fc 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -7,21 +7,17 @@
 

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/default.css"/>

-<!--<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/jquery-ui-1.7.2.custom.css">-->

+

 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/window.css"/>

-<!--<script src="{{ MEDIA_URL }}js/jquery-1.3.2.min.js"></script>-->

-<script type="text/javascript" src="{{ MEDIA_URL }}js/sprintf.js"></script>

+

 <script type="text/javascript" src="{{ MEDIA_URL }}js/funktions.js"></script>

 <script type="text/javascript" src="{{ MEDIA_URL }}js/mootools-1.2.4-core.js"></script>

 <script type="text/javascript" src="{{ MEDIA_URL }}js/mootools-1.2.4.2-more.js"></script>

 

-<!--<script src="{{ MEDIA_URL }}js/jquery.progressbar.js"></script>-->

-<!--<script src="{{ MEDIA_URL }}js/jquery.form.js"></script>-->

-

 <title>{% block title %}pyLoad {% trans "Webinterface" %}{% endblock %}</title>

 

 <script type="text/javascript">

-var add_bg, add_box, cap_box, cap_info

+var add_bg, add_box, cap_box, cap_info;

 document.addEvent("domready", function(){

 

 	add_bg = new Fx.Tween($('add_bg'));

diff --git a/module/web/templates/default/collector.html b/module/web/templates/default/collector.html
index 613fb824b..0143e13ec 100644
--- a/module/web/templates/default/collector.html
+++ b/module/web/templates/default/collector.html
@@ -2,82 +2,14 @@
 {% load i18n %}

 

 {% block head %}

+

+<script type="text/javascript" src="/package_ui.js"></script>

+

 <script type="text/javascript">

 

 document.addEvent("domready", function(){

-    $$('.package').each(function(item){

-        id = item.get('id').match(/[0-9]+/)

-        

-        imgs = item.getElements('img');

-        imgs[0].addEvent('click', function(e){

-            new Request({

-                method: 'get',

-                url: '/json/remove_package/'+this,

-                onSuccess: function(){

-                    $('package_'+this).nix()

-                    }.bind(this)

-                }).send();

-            e.stop();

-        }.bind(id));

-        

-        imgs[1].addEvent('click', function(e){

-            new Request({

-                method: 'get',

-                url: '/json/restart_package/'+this,

-                onSuccess: function(){

-                    $('package_'+this).nix()

-                    }.bind(this)

-                }).send();

-            e.stop();

-        }.bind(id));

-        

-         imgs[2].addEvent('click', function(e){

-            new Request({

-                method: 'get',

-                url: '/json/push_to_queue/'+this,

-                onSuccess: function(){

-                    $('package_'+this).nix()

-                    }.bind(this)

-                }).send();

-            e.stop();

-        }.bind(id));

-        

-        item.getElement('.packagename').addEvent('click', function(){

-            

-            child = item.getElement('.children')

-            if (child.getStyle('display') == "block"){

-                child.dissolve();

-            }else{

-                child.reveal();

-            }

-        }.bind(item));

-        

-        

-        item.getElements('.child').each(function(child){

-            id = child.get('id').match(/[0-9]+/)

-            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)

-                }).send();

-        }.bind(id));

-        

-        imgs[1].addEvent('click', function(e){

-                        new Request({

-                method: 'get',

-                url: '/json/restart_link/'+this,

-                onSuccess: function(){

-                    $('file_'+this).nix()

-                    }.bind(this)

-                }).send();

-        }.bind(id));

-        });

-        

-    })

+    load = new Fx.Tween($("load-indicator"), {link: "cancel"});

+    var pUI = new PackageUI("url");

 });

 </script>

 {% endblock %}

@@ -106,47 +38,30 @@ document.addEvent("domready", function(){
 </li>{% endblock %}

 

 {% block content %}

-{% for id,package in content %}

+<div id="load-indicator" style="opacity: 0; float: right">

+    <img src="{{ MEDIA_URL }}img/ajax-loader.gif" alt="" style="padding-right: 5px"/>

+    {% trans "loading" %}

+</div>

+

+<ul id="package-list" style="list-style: none; padding-left: 0; margin-top: -10px;">

+{% for id, package in content %}

+    <li>

 <div id="package_{{id}}" class="package">

-    <div class="packagename" style="cursor: pointer;">

+    <div class="order" style="display: none;">{{ package.order }}</div>

+    <div class="packagename" style="cursor: move;">

         {{ package.name }}

         &nbsp;&nbsp;

-        <img title="{% trans "Delete Package" %}" width="12px" height="12px" src="{{ MEDIA_URL }}img/delete.png" />

-        &nbsp;&nbsp;

-        <img title="{% trans "Reset Package" %}" style="margin-left: -10px" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />

+        <img title="{% trans "Delete Package" %}" style="cursor: pointer" width="12px" height="12px" src="{{ MEDIA_URL }}img/delete.png" />

         &nbsp;&nbsp;

-        <img title="{% trans "Push Package to Queue" %}" style="margin-left: -10px" height="12px" src="{{ MEDIA_URL }}img/package_go.png" />

+        <img title="{% trans "Restart Package" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />

     </div>

     <div id="children_{{id}}" style="display: none;" class="children">

-    {% for lid, child in package.links %}

-    <div class="child" id="file_{{lid}}">

-        <span class="child_status">

-            <img src="/media/default/img/{{child.icon}}" style="width: 12px; height:12px;"/>

-        </span>

-        <span style="font-size: 15px">{{ child.name }}</span><br />

-    <div class="child_secrow">

-        <span class="child_status">{{ child.statusmsg }}</span>{{child.error}}&nbsp;

-        <span class="child_status">{{ child.format_size }}</span>

-        <span class="child_status">{{ child.plugin }}</span>

-        <span class="child_status">{% trans "Folder:" %} {{child.folder}}</span>

-        &nbsp;&nbsp;

-        <img title="{% trans "Delete Link" %}" style="cursor: pointer;" width="10px" height="10px" src="{{ MEDIA_URL }}img/delete.png" />

-        &nbsp;&nbsp;

-        <img title="{% trans "Restart Link" %}" style="cursor: pointer;margin-left: -4px" width="10px" height="10px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />

-    </div>

-    </div>

-    {% endfor %}

+    <span class="child_secrow">{% trans "Folder:" %} {{package.folder}} | {% trans "Password:"%} {{ package.password }} | {% trans "Priority:"%} {{ package.priority }}</span>

+    <ul id="sort_children_{{id}}" style="list-style: none; padding-left: 0">

+    </ul>

     </div>

 </div>

+    </li>

 {% endfor %}

-<!--table >

-  <tr>

-    <td colspan="3"><h1>!Paketname!</h1></td>

-  </tr>

-  <tr>

-    <td><h2>test.png</h2></td>

-    <td>loading</td>

-    <td><a href="/"><img id="button" src="/img/button-delete.gif" alt="delete" /></a><a href="/"><img id="button" src="/img/button-unpause.gif" alt="unpause" /></a></td>

-  </tr>

-</table-->

-{% endblock %} 
\ No newline at end of file
+</ul>

+{% endblock %}
\ No newline at end of file
diff --git a/module/web/templates/default/package_ui.js b/module/web/templates/default/package_ui.js
new file mode 100644
index 000000000..a63a22aef
--- /dev/null
+++ b/module/web/templates/default/package_ui.js
@@ -0,0 +1,205 @@
+//{% load i18n %}
+var load; // populate later
+
+function indicateLoad() {
+    //$("load-indicator").reveal();
+    load.start("opacity", 1)
+}
+
+function indicateFinish() {
+    load.start("opacity", 0)
+}
+
+var PackageUI = new Class({
+    initialize: function(url) {
+        this.url = url;
+        this.packages = [];
+        this.parsePackages();
+
+        this.sorts = new Sortables($("package-list"), {
+            constrain: false,
+            clone: true,
+            revert: true,
+            opacity: 0.4,
+            onStart: this.startSort,
+            onComplete: this.saveSort.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() {
+
+    },
+
+    startSort: function(ele, copy) {
+    },
+
+    saveSort: function(ele, copy) {
+        var order = [];
+        this.sorts.serialize(function(ele,pos){
+            if (ele.retrieve("order") != pos){
+                order.push(ele.retrieve("pid")+"|"+pos);
+                ele.store("order", pos);
+            }
+
+        });
+        if (order.length > 0){
+            indicateLoad();
+            new Request.JSON({
+                method: 'get',
+                url: '/json/package_order/' + order[0],
+                onSuccess: indicateFinish,
+                onFailure: indicateFinish
+            }).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();
+        }
+    },
+
+    createElement: function() {
+        alert("create")
+    },
+
+    parseElement: function() {
+        var imgs = this.ele.getElements('img');
+
+        imgs[0].addEvent('click', this.deletePackage.bind(this));
+
+        imgs[1].addEvent('click', this.restartPackage.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: indicateFinish
+        }).send();
+    },
+
+    createLinks: function(data) {
+        var ul = $("sort_children_{id}".substitute({"id": this.id}));
+        ul.erase("html");
+        data.links.each(function(link){
+            var li = new Element("li",{
+                "style": {
+                    "margin-left": 0
+                }
+            });
+
+            var html = "<span class='child_status'><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='{% trans "Delete Link" %}' style='cursor: pointer;' width='10px' height='10px' src='{{ MEDIA_URL }}img/delete.png' />&nbsp;&nbsp;"
+            html += "<img title='{% trans "Restart Link" %}' style='cursor: pointer;margin-left: -4px' width='10px' height='10px' src='{{ MEDIA_URL }}img/arrow_refresh.png' /></div>"
+
+            var div = new Element("div",{
+                "id": "file_"+link.id,
+                "class": "child",
+                "html": html
+            });
+
+            li.adopt(div);
+            ul.adopt(li);
+        });
+        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)
+                }).send();
+            }.bind(lid));
+
+            imgs[1].addEvent('click', function(e){
+                new Request({
+                    method: 'get',
+                    url: '/json/restart_link/'+this,
+                    onSuccess: function(){
+                        $('file_'+this).nix()
+                    }.bind(this)
+                }).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: '/json/remove_package/'+this.id,
+            onSuccess: function(){
+                this.ele.nix();
+                indicateFinish();
+            }.bind(this)
+        }).send();
+        event.stop();
+    },
+
+    restartPackage: function(event) {
+        indicateLoad();
+        new Request({
+            method: 'get',
+            url: '/json/restart_package/'+this.id,
+            onSuccess: function(){
+                this.ele.nix();
+                indicateFinish();
+            }.bind(this)
+        }).send();
+        event.stop();
+    }
+
+});
\ No newline at end of file
diff --git a/module/web/templates/default/queue.html b/module/web/templates/default/queue.html
index 0c6c021f5..09b2a4aec 100644
--- a/module/web/templates/default/queue.html
+++ b/module/web/templates/default/queue.html
@@ -2,72 +2,14 @@
 {% load i18n %}

 

 {% block head %}

+

+<script type="text/javascript" src="/package_ui.js"></script>

+

 <script type="text/javascript">

 

 document.addEvent("domready", function(){

-    $$('.package').each(function(item){

-        id = item.get('id').match(/[0-9]+/)

-        

-        imgs = item.getElements('img');

-        imgs[0].addEvent('click', function(e){

-            new Request({

-                method: 'get',

-                url: '/json/remove_package/'+this,

-                onSuccess: function(){

-                    $('package_'+this).nix()

-                    }.bind(this)

-                }).send();

-            e.stop();

-        }.bind(id));

-        

-        imgs[1].addEvent('click', function(e){

-            new Request({

-                method: 'get',

-                url: '/json/restart_package/'+this,

-                onSuccess: function(){

-                    $('package_'+this).nix()

-                    }.bind(this)

-                }).send();

-            e.stop();

-        }.bind(id));

-        

-        

-        item.getElement('.packagename').addEvent('click', function(){

-            

-            child = item.getElement('.children')

-            if (child.getStyle('display') == "block"){

-                child.dissolve();

-            }else{

-                child.reveal();

-            }

-        }.bind(item));

-        

-        

-        item.getElements('.child').each(function(child){

-            id = child.get('id').match(/[0-9]+/)

-            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)

-                }).send();

-        }.bind(id));

-        

-        imgs[1].addEvent('click', function(e){

-                        new Request({

-                method: 'get',

-                url: '/json/restart_link/'+this,

-                onSuccess: function(){

-                    $('file_'+this).nix()

-                    }.bind(this)

-                }).send();

-        }.bind(id));

-        });

-        

-    })

+    load = new Fx.Tween($("load-indicator"), {link: "cancel"});

+    var pUI = new PackageUI("url");

 });

 </script>

 {% endblock %}

@@ -93,48 +35,35 @@ document.addEvent("domready", function(){
 </li>

 <li class="right">

     <a href="/settings/"  class="action index" accesskey="x" rel="nofollow"><img src="{{ MEDIA_URL }}img/head-menu-config.png" alt="" />{% trans "Config" %}</a>

-</li>{% endblock %}

+</li>

+{% endblock %}

+

 

 {% block content %}

+<div id="load-indicator" style="opacity: 0; float: right">

+    <img src="{{ MEDIA_URL }}img/ajax-loader.gif" alt="" style="padding-right: 5px"/>

+    {% trans "loading" %}

+</div>

+

+<ul id="package-list" style="list-style: none; padding-left: 0; margin-top: -10px;">

 {% for id, package in content %}

+    <li>

 <div id="package_{{id}}" class="package">

-    <div class="packagename" style="cursor: pointer;">

+    <div class="order" style="display: none;">{{ package.order }}</div>

+    <div class="packagename" style="cursor: move;">

         {{ package.name }}

         &nbsp;&nbsp;

-        <img title="{% trans "Delete Package" %}" width="12px" height="12px" src="{{ MEDIA_URL }}img/delete.png" />

+        <img title="{% trans "Delete Package" %}" style="cursor: pointer" width="12px" height="12px" src="{{ MEDIA_URL }}img/delete.png" />

         &nbsp;&nbsp;

-        <img title="{% trans "Restart Package" %}" style="margin-left: -10px" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />

+        <img title="{% trans "Restart Package" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />

     </div>

     <div id="children_{{id}}" style="display: none;" class="children">

-    {% for lid, child in package.links %}

-    <div class="child" id="file_{{lid}}">

-        <span class="child_status">

-            <img src="/media/default/img/{{child.icon}}" style="width: 12px; height:12px;"/>

-        </span>

-        <span style="font-size: 15px">{{ child.name }}</span><br />

-    <div class="child_secrow">

-        <span class="child_status">{{ child.statusmsg }}</span>{{child.error}}&nbsp;

-        <span class="child_status">{{ child.format_size }}</span>

-        <span class="child_status">{{ child.plugin }}</span>

-        <span class="child_status">{% trans "Folder:" %} {{package.folder}}</span>

-        &nbsp;&nbsp;

-        <img title="{% trans "Delete Link" %}" style="cursor: pointer;" width="10px" height="10px" src="{{ MEDIA_URL }}img/delete.png" />

-        &nbsp;&nbsp;

-        <img title="{% trans "Restart Link" %}" style="cursor: pointer;margin-left: -4px" width="10px" height="10px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />

-    </div>

-    </div>

-    {% endfor %}

+    <span class="child_secrow">{% trans "Folder:" %} {{package.folder}} | {% trans "Password:"%} {{ package.password }} | {% trans "Priority:"%} {{ package.priority }}</span>

+    <ul id="sort_children_{{id}}" style="list-style: none; padding-left: 0">

+    </ul>

     </div>

 </div>

+    </li>

 {% endfor %}

-<!--table >

-  <tr>

-    <td colspan="3"><h1>!Paketname!</h1></td>

-  </tr>

-  <tr>

-    <td><h2>test.png</h2></td>

-    <td>loading</td>

-    <td><a href="/"><img id="button" src="/img/button-delete.gif" alt="delete" /></a><a href="/"><img id="button" src="/img/button-unpause.gif" alt="unpause" /></a></td>

-  </tr>

-</table-->

+</ul>

 {% endblock %} 
\ No newline at end of file