moved everything from module to pyload

22 files changed, 1940 insertions, 0 deletions

diff --git a/pyload/web/app/scripts/views/abstract/itemView.js b/pyload/web/app/scripts/views/abstract/itemView.js
new file mode 100644
index 000000000..c37118a4c
--- /dev/null
+++ b/pyload/web/app/scripts/views/abstract/itemView.js
@@ -0,0 +1,47 @@
+define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
+    'use strict';
+
+    // A view that is meant for temporary displaying
+    // All events must be unbound in onDestroy
+    return Backbone.View.extend({
+
+        tagName: 'li',
+        destroy: function() {
+            this.undelegateEvents();
+            this.unbind();
+            if (this.onDestroy) {
+                this.onDestroy();
+            }
+            this.$el.removeData().unbind();
+            this.remove();
+        },
+
+        hide: function() {
+            this.$el.slideUp();
+        },
+
+        show: function() {
+            this.$el.slideDown();
+        },
+
+        unrender: function() {
+            var self = this;
+            this.$el.slideUp(function() {
+                self.destroy();
+            });
+        },
+
+        deleteItem: function(e) {
+            if (e)
+                e.stopPropagation();
+            this.model.destroy();
+        },
+
+        restart: function(e) {
+            if(e)
+                e.stopPropagation();
+            this.model.restart();
+        }
+
+    });
+});
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/abstract/modalView.js b/pyload/web/app/scripts/views/abstract/modalView.js
new file mode 100644
index 000000000..9d1d72869
--- /dev/null
+++ b/pyload/web/app/scripts/views/abstract/modalView.js
@@ -0,0 +1,125 @@
+define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone, _) {
+    'use strict';
+
+    return Backbone.View.extend({
+
+        events: {
+            'click .btn-confirm': 'confirm',
+            'click .btn-close': 'hide',
+            'click .close': 'hide'
+        },
+
+        template: null,
+        dialog: null,
+
+        onHideDestroy: false,
+        confirmCallback: null,
+
+        initialize: function(template, confirm) {
+            this.confirmCallback = confirm;
+            var self = this;
+            if (this.template === null) {
+                if (template) {
+                    this.template = template;
+                    // When template was provided this is a temporary dialog
+                    this.onHideDestroy = true;
+                }
+                else
+                    require(['text!tpl/default/modal.html'], function(template) {
+                        self.template = template;
+                    });
+            }
+
+        },
+
+        // TODO: whole modal stuff is not very elegant
+        render: function() {
+            this.$el.html(this.template(this.renderContent()));
+            this.onRender();
+
+            if (this.dialog === null) {
+                this.$el.addClass('modal hide');
+                this.$el.css({opacity: 0, scale: 0.7});
+
+                var self = this;
+                $('body').append(this.el);
+                this.dialog = this.$el.omniWindow({
+                    overlay: {
+                        selector: '#modal-overlay',
+                        hideClass: 'hide',
+                        animations: {
+                            hide: function(subjects, internalCallback) {
+                                subjects.overlay.transition({opacity: 'hide', delay: 100}, 300, function() {
+                                    internalCallback(subjects);
+                                    self.onHide();
+                                    if (self.onHideDestroy)
+                                        self.destroy();
+                                });
+                            },
+                            show: function(subjects, internalCallback) {
+                                subjects.overlay.fadeIn(300);
+                                internalCallback(subjects);
+                            }}},
+                    modal: {
+                        hideClass: 'hide',
+                        animations: {
+                            hide: function(subjects, internalCallback) {
+                                subjects.modal.transition({opacity: 'hide', scale: 0.7}, 300);
+                                internalCallback(subjects);
+                            },
+
+                            show: function(subjects, internalCallback) {
+                                subjects.modal.transition({opacity: 'show', scale: 1, delay: 100}, 300, function() {
+                                    internalCallback(subjects);
+                                });
+                            }}
+                    }});
+            }
+
+            return this;
+        },
+
+        onRender: function() {
+
+        },
+
+        renderContent: function() {
+            return {};
+        },
+
+        show: function() {
+            if (this.dialog === null)
+                this.render();
+
+            this.dialog.trigger('show');
+
+            this.onShow();
+        },
+
+        onShow: function() {
+
+        },
+
+        hide: function() {
+            this.dialog.trigger('hide');
+        },
+
+        onHide: function() {
+
+        },
+
+        confirm: function() {
+            if (this.confirmCallback)
+                this.confirmCallback.apply();
+
+            this.hide();
+        },
+
+        destroy: function() {
+            this.$el.remove();
+            this.dialog = null;
+            this.remove();
+        }
+
+    });
+});
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/accounts/accountListView.js b/pyload/web/app/scripts/views/accounts/accountListView.js
new file mode 100644
index 000000000..4eb5bfe7d
--- /dev/null
+++ b/pyload/web/app/scripts/views/accounts/accountListView.js
@@ -0,0 +1,52 @@
+define(['jquery', 'underscore', 'backbone', 'app', 'collections/AccountList', './accountView',
+    'hbs!tpl/accounts/layout', 'hbs!tpl/accounts/actionbar'],
+    function($, _, Backbone, App, AccountList, accountView, template, templateBar) {
+        'use strict';
+
+        // Renders settings over view page
+        return Backbone.Marionette.CollectionView.extend({
+
+            itemView: accountView,
+            template: template,
+
+            collection: null,
+            modal: null,
+
+            initialize: function() {
+                this.actionbar = Backbone.Marionette.ItemView.extend({
+                    template: templateBar,
+                    events: {
+                        'click .btn': 'addAccount'
+                    },
+                    addAccount: _.bind(this.addAccount, this)
+                });
+
+                this.collection = new AccountList();
+                this.update();
+
+                this.listenTo(App.vent, 'accounts:updated', this.update);
+            },
+
+            update: function() {
+                this.collection.fetch();
+            },
+
+            onBeforeRender: function() {
+                this.$el.html(template());
+            },
+
+            appendHtml: function(collectionView, itemView, index) {
+                this.$('.account-list').append(itemView.el);
+            },
+
+            addAccount: function() {
+                var self = this;
+                _.requireOnce(['views/accounts/accountModal'], function(Modal) {
+                    if (self.modal === null)
+                        self.modal = new Modal();
+
+                    self.modal.show();
+                });
+            }
+        });
+    });
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/accounts/accountModal.js b/pyload/web/app/scripts/views/accounts/accountModal.js
new file mode 100644
index 000000000..6c2b226df
--- /dev/null
+++ b/pyload/web/app/scripts/views/accounts/accountModal.js
@@ -0,0 +1,72 @@
+define(['jquery', 'underscore', 'app', 'views/abstract/modalView', 'hbs!tpl/dialogs/addAccount', 'helpers/pluginIcon', 'select2'],
+    function($, _, App, modalView, template, pluginIcon) {
+        'use strict';
+        return modalView.extend({
+
+            events: {
+                'submit form': 'add',
+                'click .btn-add': 'add'
+            },
+            template: template,
+            plugins: null,
+            select: null,
+
+            initialize: function() {
+                // Inherit parent events
+                this.events = _.extend({}, modalView.prototype.events, this.events);
+                var self = this;
+                $.ajax(App.apiRequest('getAccountTypes', null, {success: function(data) {
+                    self.plugins = _.sortBy(data, function(item) {
+                        return item;
+                    });
+                    self.render();
+                }}));
+            },
+
+            onRender: function() {
+                // TODO: could be a separate input type if needed on multiple pages
+                if (this.plugins)
+                    this.select = this.$('#pluginSelect').select2({
+                        escapeMarkup: function(m) {
+                            return m;
+                        },
+                        formatResult: this.format,
+                        formatSelection: this.format,
+                        data: {results: this.plugins, text: function(item) {
+                            return item;
+                        }},
+                        id: function(item) {
+                            return item;
+                        }
+                    });
+            },
+
+            onShow: function() {
+            },
+
+            onHide: function() {
+            },
+
+            format: function(data) {
+                return '<img class="logo-select" src="' + pluginIcon(data) + '"> ' + data;
+            },
+
+            add: function(e) {
+                e.stopPropagation();
+                if (this.select) {
+                    var plugin = this.select.val(),
+                        login = this.$('#login').val(),
+                        password = this.$('#password').val(),
+                        self = this;
+
+                    $.ajax(App.apiRequest('updateAccount', {
+                        plugin: plugin, login: login, password: password
+                    }, { success: function() {
+                        App.vent.trigger('accounts:updated');
+                        self.hide();
+                    }}));
+                }
+                return false;
+            }
+        });
+    });
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/accounts/accountView.js b/pyload/web/app/scripts/views/accounts/accountView.js
new file mode 100644
index 000000000..89f69d7e7
--- /dev/null
+++ b/pyload/web/app/scripts/views/accounts/accountView.js
@@ -0,0 +1,18 @@
+define(['jquery', 'underscore', 'backbone', 'app', 'hbs!tpl/accounts/account'],
+    function($, _, Backbone, App, template) {
+        'use strict';
+
+        return Backbone.Marionette.ItemView.extend({
+
+            tagName: 'tr',
+            template: template,
+
+            events: {
+                'click .btn-danger': 'deleteAccount'
+            },
+
+            deleteAccount: function() {
+                this.model.destroy();
+            }
+        });
+    });
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/dashboard/dashboardView.js b/pyload/web/app/scripts/views/dashboard/dashboardView.js
new file mode 100644
index 000000000..e7adba475
--- /dev/null
+++ b/pyload/web/app/scripts/views/dashboard/dashboardView.js
@@ -0,0 +1,168 @@
+define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
+    './packageView', './fileView', 'hbs!tpl/dashboard/layout', 'select2'],
+    function($, Backbone, _, App, TreeCollection, PackageView, FileView, template) {
+        'use strict';
+        // Renders whole dashboard
+        return Backbone.Marionette.ItemView.extend({
+
+            // TODO:  refactor
+            active: $('.breadcrumb .active'),
+
+            template: template,
+
+            events: {
+            },
+
+            ui: {
+                'packages': '.package-list',
+                'files': '.file-list'
+            },
+
+            // Package tree
+            tree: null,
+            // Current open files
+            files: null,
+            // True when loading animation is running
+            isLoading: false,
+
+            initialize: function() {
+                App.dashboard = this;
+                this.tree = new TreeCollection();
+
+                var self = this;
+                // When package is added we reload the data
+                App.vent.on('package:added', function() {
+                    console.log('Package tree caught, package:added event');
+                    self.tree.fetch();
+                });
+
+                App.vent.on('file:updated', _.bind(this.fileUpdated, this));
+
+                // TODO: merge?
+                this.init();
+                // TODO: file:added
+                // TODO: package:deleted
+                // TODO: package:updated
+            },
+
+            init: function() {
+                var self = this;
+                // TODO: put in separated function
+                // TODO: order of elements?
+                // Init the tree and callback for package added
+                this.tree.fetch({success: function() {
+                    self.update();
+                    self.tree.get('packages').on('add', function(pack) {
+                        console.log('Package ' + pack.get('pid') + ' added to tree');
+                        self.appendPackage(pack, 0, true);
+                        self.openPackage(pack);
+                    });
+                }});
+
+                this.$('.input').select2({tags: ['a', 'b', 'sdf']});
+            },
+
+            update: function() {
+                console.log('Update package list');
+
+                // TODO: Both null
+                var packs = this.tree.get('packages');
+                this.files = this.tree.get('files');
+
+                if (packs)
+                    packs.each(_.bind(this.appendPackage, this));
+
+                if (!this.files || this.files.length === 0) {
+                    // no files are displayed
+                    this.files = null;
+                    // Open the first package
+                    if (packs && packs.length >= 1)
+                        this.openPackage(packs.at(0));
+                }
+                else
+                    this.files.each(_.bind(this.appendFile, this));
+
+                return this;
+            },
+
+            // TODO sorting ?!
+            // Append a package to the list, index, animate it
+            appendPackage: function(pack, i, animation) {
+                var el = new PackageView({model: pack}).render().el;
+                $(this.ui.packages).appendWithAnimation(el, animation);
+            },
+
+            appendFile: function(file, i, animation) {
+                var el = new FileView({model: file}).render().el;
+                $(this.ui.files).appendWithAnimation(el, animation);
+            },
+
+            // Show content of the packages on main view
+            openPackage: function(pack) {
+                var self = this;
+
+                // load animation only when something is shown and its different from current package
+                if (this.files && this.files !== pack.get('files'))
+                    self.loading();
+
+                pack.fetch({silent: true, success: function() {
+                    console.log('Package ' + pack.get('pid') + ' loaded');
+                    self.active.text(pack.get('name'));
+                    self.contentReady(pack.get('files'));
+                }, failure: function() {
+                    self.failure();
+                }});
+
+            },
+
+            contentReady: function(files) {
+                var old_files = this.files;
+                this.files = files;
+                App.vent.trigger('dashboard:contentReady');
+
+                // show the files when no loading animation is running and not already open
+                if (!this.isLoading && old_files !== files)
+                    this.show();
+            },
+
+            // Do load animation, remove the old stuff
+            loading: function() {
+                this.isLoading = true;
+                this.files = null;
+                var self = this;
+                $(this.ui.files).fadeOut({complete: function() {
+                    // All file views should vanish
+                    App.vent.trigger('dashboard:destroyContent');
+
+                    // Loading was faster than animation
+                    if (self.files)
+                        self.show();
+
+                    self.isLoading = false;
+                }});
+            },
+
+            failure: function() {
+                // TODO
+            },
+
+            show: function() {
+                // fileUL has to be resetted before
+                this.files.each(_.bind(this.appendFile, this));
+                //TODO: show placeholder when nothing is displayed (filtered content empty)
+                $(this.ui.files).fadeIn();
+                App.vent.trigger('dashboard:updated');
+            },
+
+            // Refresh the file if it is currently shown
+            fileUpdated: function(data) {
+                // this works with ids and object
+                var file = this.files.get(data);
+                if (file)
+                    if (_.isObject(data)) // update directly
+                        file.set(data);
+                    else // fetch from server
+                        file.fetch();
+            }
+        });
+    });
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/dashboard/fileView.js b/pyload/web/app/scripts/views/dashboard/fileView.js
new file mode 100644
index 000000000..4e5884ed8
--- /dev/null
+++ b/pyload/web/app/scripts/views/dashboard/fileView.js
@@ -0,0 +1,102 @@
+define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abstract/itemView', 'helpers/formatTime', 'hbs!tpl/dashboard/file'],
+    function($, Backbone, _, App, Api, ItemView, formatTime, template) {
+        'use strict';
+
+        // Renders single file item
+        return ItemView.extend({
+
+            tagName: 'li',
+            className: 'file-view row-fluid',
+            template: template,
+            events: {
+                'click .checkbox': 'select',
+                'click .btn-delete': 'deleteItem',
+                'click .btn-restart': 'restart'
+            },
+
+            initialize: function() {
+                this.listenTo(this.model, 'change', this.render);
+                // This will be triggered manually and changed before with silent=true
+                this.listenTo(this.model, 'change:visible', this.visibility_changed);
+                this.listenTo(this.model, 'change:progress', this.progress_changed);
+                this.listenTo(this.model, 'remove', this.unrender);
+                this.listenTo(App.vent, 'dashboard:destroyContent', this.destroy);
+            },
+
+            onDestroy: function() {
+            },
+
+            render: function() {
+                var data = this.model.toJSON();
+                if (data.download) {
+                    var status = data.download.status;
+                    if (status === Api.DownloadStatus.Offline || status === Api.DownloadStatus.TempOffline)
+                        data.offline = true;
+                    else if (status === Api.DownloadStatus.Online)
+                        data.online = true;
+                    else if (status === Api.DownloadStatus.Waiting)
+                        data.waiting = true;
+                    else if (status === Api.DownloadStatus.Downloading)
+                        data.downloading = true;
+                    else if (this.model.isFailed())
+                        data.failed = true;
+                    else if (this.model.isFinished())
+                        data.finished = true;
+                }
+
+                this.$el.html(this.template(data));
+                if (this.model.get('selected'))
+                    this.$el.addClass('ui-selected');
+                else
+                    this.$el.removeClass('ui-selected');
+
+                if (this.model.get('visible'))
+                    this.$el.show();
+                else
+                    this.$el.hide();
+
+                return this;
+            },
+
+            select: function(e) {
+                e.preventDefault();
+                var checked = this.$el.hasClass('ui-selected');
+                // toggle class immediately, so no re-render needed
+                this.model.set('selected', !checked, {silent: true});
+                this.$el.toggleClass('ui-selected');
+                App.vent.trigger('file:selection');
+            },
+
+            visibility_changed: function(visible) {
+                // TODO: improve animation, height is not available when element was not visible
+                if (visible)
+                    this.$el.slideOut(true);
+                else {
+                    this.$el.calculateHeight(true);
+                    this.$el.slideIn(true);
+                }
+            },
+
+            progress_changed: function() {
+                if (!this.model.isDownload())
+                    return;
+
+                if (this.model.get('download').status === Api.DownloadStatus.Downloading) {
+                    var bar = this.$('.progress .bar');
+                    if (!bar) { // ensure that the dl bar is rendered
+                        this.render();
+                        bar = this.$('.progress .bar');
+                    }
+
+                    bar.width(this.model.get('progress') + '%');
+                    bar.html('&nbsp;&nbsp;' + formatTime(this.model.get('eta')));
+                } else if (this.model.get('download').status === Api.DownloadStatus.Waiting) {
+                    this.$('.second').html(
+                        '<i class="icon-time"></i>&nbsp;' + formatTime(this.model.get('eta')));
+
+                } else // Every else state can be renderred normally
+                    this.render();
+
+            }
+        });
+    });
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/dashboard/filterView.js b/pyload/web/app/scripts/views/dashboard/filterView.js
new file mode 100644
index 000000000..64bc56724
--- /dev/null
+++ b/pyload/web/app/scripts/views/dashboard/filterView.js
@@ -0,0 +1,133 @@
+define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'models/Package', 'hbs!tpl/dashboard/actionbar'],
+    /*jslint -W040: false*/
+    function($, Backbone, _, App, Api, Package, template) {
+        'use strict';
+
+        // Modified version of type ahead show, nearly the same without absolute positioning
+        function show() {
+            this.$menu
+                .insertAfter(this.$element)
+                .show();
+
+            this.shown = true;
+            return this;
+        }
+
+        // Renders the actionbar for the dashboard, handles everything related to filtering displayed files
+        return Backbone.Marionette.ItemView.extend({
+
+            events: {
+                'click .filter-type': 'filter_type',
+                'click .filter-state': 'switch_filter',
+                'submit .form-search': 'search'
+            },
+
+            ui: {
+                'search': '.search-query',
+                'stateMenu': '.dropdown-toggle .state'
+            },
+
+            template: template,
+            state: null,
+
+            initialize: function() {
+                this.state = Api.DownloadState.All;
+
+                // Apply the filter before the content is shown
+                App.vent.on('dashboard:contentReady', _.bind(this.apply_filter, this));
+            },
+
+            onRender: function() {
+                                // use our modified method
+                $.fn.typeahead.Constructor.prototype.show = show;
+                this.ui.search.typeahead({
+                    minLength: 2,
+                    source: this.getSuggestions
+                });
+
+            },
+
+            // TODO: app level api request
+            search: function(e) {
+                e.stopPropagation();
+                var query = this.ui.search.val();
+                this.ui.search.val('');
+
+                var pack = new Package();
+                // Overwrite fetch method to use a search
+                // TODO: quite hackish, could be improved to filter packages
+                //       or show performed search
+                pack.fetch = function(options) {
+                    pack.search(query, options);
+                };
+
+                App.dashboard.openPackage(pack);
+            },
+
+            getSuggestions: function(query, callback) {
+                $.ajax(App.apiRequest('searchSuggestions', {pattern: query}, {
+                    method: 'POST',
+                    success: function(data) {
+                        callback(data);
+                    }
+                }));
+            },
+
+            switch_filter: function(e) {
+                e.stopPropagation();
+                var element = $(e.target);
+                var state = parseInt(element.data('state'), 10);
+                var menu = this.ui.stateMenu.parent().parent();
+                menu.removeClass('open');
+
+                if (state === Api.DownloadState.Finished) {
+                    menu.removeClass().addClass('dropdown finished');
+                } else if (state === Api.DownloadState.Unfinished) {
+                    menu.removeClass().addClass('dropdown active');
+                } else if (state === Api.DownloadState.Failed) {
+                    menu.removeClass().addClass('dropdown failed');
+                } else {
+                    menu.removeClass().addClass('dropdown');
+                }
+
+                this.state = state;
+                this.ui.stateMenu.text(element.text());
+                this.apply_filter();
+            },
+
+            // Applies the filtering to current open files
+            apply_filter: function() {
+                if (!App.dashboard.files)
+                    return;
+
+                var self = this;
+                App.dashboard.files.map(function(file) {
+                    var visible = file.get('visible');
+                    if (visible !== self.is_visible(file)) {
+                        file.set('visible', !visible, {silent: true});
+                        file.trigger('change:visible', !visible);
+                    }
+                });
+
+                App.vent.trigger('dashboard:filtered');
+            },
+
+            // determine if a file should be visible
+            // TODO: non download files
+            is_visible: function(file) {
+                if (this.state === Api.DownloadState.Finished)
+                    return file.isFinished();
+                else if (this.state === Api.DownloadState.Unfinished)
+                    return file.isUnfinished();
+                else if (this.state === Api.DownloadState.Failed)
+                    return file.isFailed();
+
+                return true;
+            },
+
+            filter_type: function(e) {
+
+            }
+
+        });
+    });
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/dashboard/packageView.js b/pyload/web/app/scripts/views/dashboard/packageView.js
new file mode 100644
index 000000000..2738fcbea
--- /dev/null
+++ b/pyload/web/app/scripts/views/dashboard/packageView.js
@@ -0,0 +1,75 @@
+define(['jquery', 'app', 'views/abstract/itemView', 'underscore', 'hbs!tpl/dashboard/package'],
+    function($, App, itemView, _, template) {
+        'use strict';
+
+        // Renders a single package item
+        return itemView.extend({
+
+            tagName: 'li',
+            className: 'package-view',
+            template: template,
+            events: {
+                'click .package-name, .btn-open': 'open',
+                'click .icon-refresh': 'restart',
+                'click .select': 'select',
+                'click .btn-delete': 'deleteItem'
+            },
+
+            // Ul for child packages (unused)
+            ul: null,
+            // Currently unused
+            expanded: false,
+
+            initialize: function() {
+                this.listenTo(this.model, 'filter:added', this.hide);
+                this.listenTo(this.model, 'filter:removed', this.show);
+                this.listenTo(this.model, 'change', this.render);
+                this.listenTo(this.model, 'remove', this.unrender);
+
+                // Clear drop down menu
+                var self = this;
+                this.$el.on('mouseleave', function() {
+                    self.$('.dropdown-menu').parent().removeClass('open');
+                });
+            },
+
+            onDestroy: function() {
+            },
+
+            // Render everything, optional only the fileViews
+            render: function() {
+                this.$el.html(this.template(this.model.toJSON()));
+                this.$el.initTooltips();
+
+                return this;
+            },
+
+            unrender: function() {
+                itemView.prototype.unrender.apply(this);
+
+                // TODO: display other package
+                App.vent.trigger('dashboard:loading', null);
+            },
+
+
+            // TODO
+            // Toggle expanding of packages
+            expand: function(e) {
+                e.preventDefault();
+            },
+
+            open: function(e) {
+                e.preventDefault();
+                App.dashboard.openPackage(this.model);
+            },
+
+            select: function(e) {
+                e.preventDefault();
+                var checked = this.$('.select').hasClass('icon-check');
+                // toggle class immediately, so no re-render needed
+                this.model.set('selected', !checked, {silent: true});
+                this.$('.select').toggleClass('icon-check').toggleClass('icon-check-empty');
+                App.vent.trigger('package:selection');
+            }
+        });
+    });
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/dashboard/selectionView.js b/pyload/web/app/scripts/views/dashboard/selectionView.js
new file mode 100644
index 000000000..8685fd849
--- /dev/null
+++ b/pyload/web/app/scripts/views/dashboard/selectionView.js
@@ -0,0 +1,155 @@
+define(['jquery', 'backbone', 'underscore', 'app', 'hbs!tpl/dashboard/select'],
+    function($, Backbone, _, App, template) {
+        'use strict';
+
+        // Renders context actions for selection packages and files
+        return Backbone.Marionette.ItemView.extend({
+
+            el: '#selection-area',
+            template: template,
+
+            events: {
+                'click .icon-check': 'deselect',
+                'click .icon-pause': 'pause',
+                'click .icon-trash': 'trash',
+                'click .icon-refresh': 'restart'
+            },
+
+            // Element of the action bar
+            actionBar: null,
+            // number of currently selected elements
+            current: 0,
+
+            initialize: function() {
+                this.$el.calculateHeight().height(0);
+                var render = _.bind(this.render, this);
+
+                App.vent.on('dashboard:updated', render);
+                App.vent.on('dashboard:filtered', render);
+                App.vent.on('package:selection', render);
+                App.vent.on('file:selection', render);
+
+                this.actionBar = $('.actionbar .btn-check');
+                this.actionBar.parent().click(_.bind(this.select_toggle, this));
+
+                // API events, maybe better to rely on internal ones?
+                App.vent.on('package:deleted', render);
+                App.vent.on('file:deleted', render);
+            },
+
+            get_files: function(all) {
+                var files = [];
+                if (App.dashboard.files)
+                    if (all)
+                        files = App.dashboard.files.where({visible: true});
+                    else
+                        files = App.dashboard.files.where({selected: true, visible: true});
+
+                return files;
+            },
+
+            get_packs: function() {
+                if (!App.dashboard.tree.get('packages'))
+                    return []; // TODO
+
+                return App.dashboard.tree.get('packages').where({selected: true});
+            },
+
+            render: function() {
+                var files = this.get_files().length;
+                var packs = this.get_packs().length;
+
+                if (files + packs > 0) {
+                    this.$el.html(this.template({files: files, packs: packs}));
+                    this.$el.initTooltips('bottom');
+                }
+
+                if (files + packs > 0 && this.current === 0)
+                    this.$el.slideOut();
+                else if (files + packs === 0 && this.current > 0)
+                    this.$el.slideIn();
+
+                // TODO: accessing ui directly, should be events
+                if (files > 0) {
+                    this.actionBar.addClass('icon-check').removeClass('icon-check-empty');
+                    App.dashboard.ui.packages.addClass('ui-files-selected');
+                }
+                else {
+                    this.actionBar.addClass('icon-check-empty').removeClass('icon-check');
+                    App.dashboard.ui.packages.removeClass('ui-files-selected');
+                }
+
+                this.current = files + packs;
+            },
+
+            // Deselects all items
+            deselect: function() {
+                this.get_files().map(function(file) {
+                    file.set('selected', false);
+                });
+
+                this.get_packs().map(function(pack) {
+                    pack.set('selected', false);
+                });
+
+                this.render();
+            },
+
+            pause: function() {
+                alert('Not implemented yet');
+                this.deselect();
+            },
+
+            trash: function() {
+                _.confirm('default/confirmDialog.html', function() {
+
+                    var pids = [];
+                    // TODO: delete many at once
+                    this.get_packs().map(function(pack) {
+                        pids.push(pack.get('pid'));
+                        pack.destroy();
+                    });
+
+                    // get only the fids of non deleted packages
+                    var fids = _.filter(this.get_files(),function(file) {
+                        return !_.contains(pids, file.get('package'));
+                    }).map(function(file) {
+                            file.destroyLocal();
+                            return file.get('fid');
+                        });
+
+                    if (fids.length > 0)
+                        $.ajax(App.apiRequest('deleteFiles', {fids: fids}));
+
+                    this.deselect();
+                }, this);
+            },
+
+            restart: function() {
+                this.get_files().map(function(file) {
+                    file.restart();
+                });
+                this.get_packs().map(function(pack) {
+                    pack.restart();
+                });
+
+                this.deselect();
+            },
+
+            // Select or deselect all visible files
+            select_toggle: function() {
+                var files = this.get_files();
+                if (files.length === 0) {
+                    this.get_files(true).map(function(file) {
+                        file.set('selected', true);
+                    });
+
+                } else
+                    files.map(function(file) {
+                        file.set('selected', false);
+                    });
+
+                this.render();
+            }
+        });
+    });
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/headerView.js b/pyload/web/app/scripts/views/headerView.js
new file mode 100644
index 000000000..512c7259b
--- /dev/null
+++ b/pyload/web/app/scripts/views/headerView.js
@@ -0,0 +1,240 @@
+define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'collections/ProgressList',
+    'views/progressView', 'views/notificationView', 'helpers/formatSize', 'hbs!tpl/header/layout',
+    'hbs!tpl/header/status', 'hbs!tpl/header/progressbar' , 'flot'],
+    function($, _, Backbone, App, ServerStatus, ProgressList, ProgressView, NotificationView, formatSize,
+             template, templateStatus, templateHeader) {
+        'use strict';
+        // Renders the header with all information
+        return Backbone.Marionette.ItemView.extend({
+
+            events: {
+                'click .icon-list': 'toggle_taskList',
+                'click .popover .close': 'toggle_taskList',
+                'click .btn-grabber': 'open_grabber'
+            },
+
+            ui: {
+                progress: '.progress-list',
+                speedgraph: '#speedgraph'
+            },
+
+            // todo: maybe combine these
+            template: template,
+            templateStatus: templateStatus,
+            templateHeader: templateHeader,
+
+            // view
+            grabber: null,
+            speedgraph: null,
+
+            // models and data
+            ws: null,
+            status: null,
+            progressList: null,
+            speeds: null,
+
+            // sub view
+            notificationView: null,
+
+            // save if last progress was empty
+            wasEmpty: false,
+
+            initialize: function() {
+                var self = this;
+                this.notificationView = new NotificationView();
+
+                this.status = new ServerStatus();
+                this.listenTo(this.status, 'change', this.update);
+
+                this.progressList = new ProgressList();
+                this.listenTo(this.progressList, 'add', function(model) {
+                    self.ui.progress.appendWithAnimation(new ProgressView({model: model}).render().el);
+                });
+
+                // TODO: button to start stop refresh
+                var ws = App.openWebSocket('/async');
+                ws.onopen = function() {
+                    ws.send(JSON.stringify('start'));
+                };
+                // TODO compare with polling
+                ws.onmessage = _.bind(this.onData, this);
+                ws.onerror = function(error) {
+                    console.log(error);
+                    alert('WebSocket error' + error);
+                };
+
+                this.ws = ws;
+            },
+
+            initGraph: function() {
+                var totalPoints = 120;
+                var data = [];
+
+                // init with empty data
+                while (data.length < totalPoints)
+                    data.push([data.length, 0]);
+
+                this.speeds = data;
+                this.speedgraph = $.plot(this.ui.speedgraph, [this.speeds], {
+                    series: {
+                        lines: { show: true, lineWidth: 2 },
+                        shadowSize: 0,
+                        color: '#fee247'
+                    },
+                    xaxis: { ticks: [] },
+                    yaxis: { ticks: [], min: 1, autoscaleMargin: 0.1, tickFormatter: function(data) {
+                        return formatSize(data * 1024);
+                    }, position: 'right' },
+                    grid: {
+                        show: true,
+//            borderColor: "#757575",
+                        borderColor: 'white',
+                        borderWidth: 1,
+                        labelMargin: 0,
+                        axisMargin: 0,
+                        minBorderMargin: 0
+                    }
+                });
+
+            },
+
+            // Must be called after view was attached
+            init: function() {
+                this.initGraph();
+                this.update();
+            },
+
+            update: function() {
+                // TODO: what should be displayed in the header
+                // queue/processing size?
+
+                var status = this.status.toJSON();
+                status.maxspeed = _.max(this.speeds, function(speed) {
+                    return speed[1];
+                })[1] * 1024;
+                this.$('.status-block').html(
+                    this.templateStatus(status)
+                );
+
+                var data = {tasks: 0, downloads: 0, speed: 0, single: false};
+                this.progressList.each(function(progress) {
+                    if (progress.isDownload()) {
+                        data.downloads += 1;
+                        data.speed += progress.get('download').speed;
+                    } else
+                        data.tasks++;
+                });
+
+                // Show progress of one task
+                if (data.tasks + data.downloads === 1) {
+                    var progress = this.progressList.at(0);
+                    data.single = true;
+                    data.eta = progress.get('eta');
+                    data.percent = progress.getPercent();
+                    data.name = progress.get('name');
+                    data.statusmsg = progress.get('statusmsg');
+                }
+                // TODO: better progressbar rendering
+
+                data.etaqueue = status.eta;
+                data.linksqueue = status.linksqueue;
+                data.sizequeue = status.sizequeue;
+
+                this.$('#progress-info').html(
+                    this.templateHeader(data)
+                );
+                return this;
+            },
+
+            toggle_taskList: function() {
+                this.$('.popover').animate({opacity: 'toggle'});
+            },
+
+            open_grabber: function() {
+                var self = this;
+                _.requireOnce(['views/linkGrabberModal'], function(ModalView) {
+                    if (self.grabber === null)
+                        self.grabber = new ModalView();
+
+                    self.grabber.show();
+                });
+            },
+
+            onData: function(evt) {
+                var data = JSON.parse(evt.data);
+                if (data === null) return;
+
+                if (data['@class'] === 'ServerStatus') {
+                    // TODO: load interaction when none available
+                    this.status.set(data);
+
+                    // There tasks at the server, but not in queue: so fetch them
+                    // or there are tasks in our queue but not on the server
+                    if (this.status.get('notifications') && !this.notificationView.tasks.hasTaskWaiting() ||
+                        !this.status.get('notifications') && this.notificationView.tasks.hasTaskWaiting())
+                        this.notificationView.tasks.fetch();
+
+                    this.speeds = this.speeds.slice(1);
+                    this.speeds.push([this.speeds[this.speeds.length - 1][0] + 1, Math.floor(data.speed / 1024)]);
+
+                    // TODO: if everything is 0 re-render is not needed
+                    this.speedgraph.setData([this.speeds]);
+                    // adjust the axis
+                    this.speedgraph.setupGrid();
+                    this.speedgraph.draw();
+
+                }
+                else if (_.isArray(data))
+                    this.onProgressUpdate(data);
+                else if (data['@class'] === 'EventInfo')
+                    this.onEvent(data.eventname, data.event_args);
+                else
+                    console.log('Unknown Async input', data);
+
+            },
+
+            onProgressUpdate: function(progress) {
+                // generate a unique id
+                _.each(progress, function(prog) {
+                    if (prog.download)
+                        prog.pid = prog.download.fid;
+                    else
+                        prog.pid = prog.plugin + prog.name;
+                });
+
+                this.progressList.set(progress);
+                // update currently open files with progress
+                this.progressList.each(function(prog) {
+                    if (prog.isDownload() && App.dashboard.files) {
+                        var file = App.dashboard.files.get(prog.get('download').fid);
+                        if (file) {
+                            file.set({
+                                progress: prog.getPercent(),
+                                eta: prog.get('eta')
+                            }, {silent: true});
+
+                            file.trigger('change:progress');
+                        }
+                    }
+                });
+
+                if (progress.length === 0) {
+                    // only render one time when last was not empty already
+                    if (!this.wasEmpty) {
+                        this.update();
+                        this.wasEmpty = true;
+                    }
+                } else {
+                    this.wasEmpty = false;
+                    this.update();
+                }
+            },
+
+            onEvent: function(event, args) {
+                args.unshift(event);
+                console.log('Core send event', args);
+                App.vent.trigger.apply(App.vent, args);
+            }
+
+        });
+    });
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/input/inputLoader.js b/pyload/web/app/scripts/views/input/inputLoader.js
new file mode 100644
index 000000000..11665abb4
--- /dev/null
+++ b/pyload/web/app/scripts/views/input/inputLoader.js
@@ -0,0 +1,8 @@
+define(['./textInput'], function(textInput) {
+    'use strict';
+
+    // selects appropriate input element
+    return function(input, value, default_value, description) {
+        return textInput;
+    };
+});
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/input/inputView.js b/pyload/web/app/scripts/views/input/inputView.js
new file mode 100644
index 000000000..1fbe5042d
--- /dev/null
+++ b/pyload/web/app/scripts/views/input/inputView.js
@@ -0,0 +1,86 @@
+define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
+    'use strict';
+
+    // Renders input elements
+    return Backbone.View.extend({
+
+        tagName: 'input',
+
+        input: null,
+        value: null,
+        default_value: null,
+        description: null,
+
+        // enables tooltips
+        tooltip: true,
+
+        initialize: function(options) {
+            this.input = options.input;
+            this.value = options.value;
+            this.default_value = options.default_value;
+            this.description = options.description;
+        },
+
+        render: function() {
+            this.renderInput();
+            // data for tooltips
+            if (this.description && this.tooltip) {
+                this.$el.data('content', this.description);
+                // TODO: render default value in popup?
+//                this.$el.data('title', "TODO: title");
+                this.$el.popover({
+                    placement: 'right',
+                    trigger: 'hover'
+//                    delay: { show: 500, hide: 100 }
+                });
+            }
+
+            return this;
+        },
+
+        renderInput: function() {
+            // Overwrite this
+        },
+
+        showTooltip: function() {
+            if (this.description && this.tooltip)
+                this.$el.popover('show');
+        },
+
+        hideTooltip: function() {
+            if (this.description && this.tooltip)
+                this.$el.popover('hide');
+        },
+
+        destroy: function() {
+            this.undelegateEvents();
+            this.unbind();
+            if (this.onDestroy) {
+                this.onDestroy();
+            }
+            this.$el.removeData().unbind();
+            this.remove();
+        },
+
+        // focus the input element
+        focus: function() {
+            this.$el.focus();
+        },
+
+        // Clear the input
+        clear: function() {
+
+        },
+
+        // retrieve value of the input
+        getVal: function() {
+            return this.value;
+        },
+
+        // the child class must call this when the value changed
+        setVal: function(value) {
+            this.value = value;
+            this.trigger('change', value);
+        }
+    });
+});
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/input/textInput.js b/pyload/web/app/scripts/views/input/textInput.js
new file mode 100644
index 000000000..0eebbf91e
--- /dev/null
+++ b/pyload/web/app/scripts/views/input/textInput.js
@@ -0,0 +1,36 @@
+define(['jquery', 'backbone', 'underscore', './inputView'], function($, Backbone, _, inputView) {
+    'use strict';
+
+    return inputView.extend({
+
+        // TODO
+        tagName: 'input',
+        events: {
+            'keyup': 'onChange',
+            'focus': 'showTooltip',
+            'focusout': 'hideTooltip'
+        },
+
+        renderInput: function() {
+            this.$el.attr('type', 'text');
+            this.$el.attr('name', 'textInput');
+
+            if (this.default_value)
+                this.$el.attr('placeholder', this.default_value);
+
+            if (this.value)
+                this.$el.val(this.value);
+
+            return this;
+        },
+
+        clear: function() {
+            this.$el.val('');
+        },
+
+        onChange: function(e) {
+            this.setVal(this.$el.val());
+        }
+
+    });
+});
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/linkGrabberModal.js b/pyload/web/app/scripts/views/linkGrabberModal.js
new file mode 100644
index 000000000..e6f59c134
--- /dev/null
+++ b/pyload/web/app/scripts/views/linkGrabberModal.js
@@ -0,0 +1,49 @@
+define(['jquery', 'underscore', 'app', 'views/abstract/modalView', 'hbs!tpl/dialogs/linkgrabber'],
+    function($, _, App, modalView, template) {
+        'use strict';
+        // Modal dialog for package adding - triggers package:added when package was added
+        return modalView.extend({
+
+            events: {
+                'click .btn-success': 'addPackage',
+                'keypress #inputPackageName': 'addOnEnter'
+            },
+
+            template: template,
+
+            initialize: function() {
+                // Inherit parent events
+                this.events = _.extend({}, modalView.prototype.events, this.events);
+            },
+
+            addOnEnter: function(e) {
+                if (e.keyCode !== 13) return;
+                this.addPackage(e);
+            },
+
+            addPackage: function(e) {
+                var self = this;
+                var options = App.apiRequest('addPackage',
+                    {
+                        name: $('#inputPackageName').val(),
+                        // TODO: better parsing / tokenization
+                        links: $('#inputLinks').val().split('\n')
+                    },
+                    {
+                        success: function() {
+                            App.vent.trigger('package:added');
+                            self.hide();
+                        }
+                    });
+
+                $.ajax(options);
+                $('#inputPackageName').val('');
+                $('#inputLinks').val('');
+            },
+
+            onShow: function() {
+                this.$('#inputPackageName').focus();
+            }
+
+        });
+    });
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/loginView.js b/pyload/web/app/scripts/views/loginView.js
new file mode 100644
index 000000000..891b3ec99
--- /dev/null
+++ b/pyload/web/app/scripts/views/loginView.js
@@ -0,0 +1,37 @@
+define(['jquery', 'backbone', 'underscore', 'app', 'hbs!tpl/login'],
+    function($, Backbone, _, App, template) {
+        'use strict';
+
+        // Renders context actions for selection packages and files
+        return Backbone.Marionette.ItemView.extend({
+            template: template,
+
+            events: {
+                'submit form': 'login'
+            },
+
+            ui: {
+                'form': 'form'
+            },
+
+            login: function(e) {
+                e.stopPropagation();
+
+                var options = App.apiRequest('login', null, {
+                    data: this.ui.form.serialize(),
+                    type : 'post',
+                    success: function(data) {
+                        // TODO: go to last page, better error
+                        if (data)
+                            App.navigate('');
+                        else
+                            alert('Wrong login');
+                    }
+                });
+
+                $.ajax(options);
+                return false;
+            }
+
+        });
+    });
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/notificationView.js b/pyload/web/app/scripts/views/notificationView.js
new file mode 100644
index 000000000..abfcd8079
--- /dev/null
+++ b/pyload/web/app/scripts/views/notificationView.js
@@ -0,0 +1,83 @@
+define(['jquery', 'backbone', 'underscore', 'app', 'collections/InteractionList', 'hbs!tpl/notification'],
+    function($, Backbone, _, App, InteractionList, queryModal, template) {
+        'use strict';
+
+        // Renders context actions for selection packages and files
+        return Backbone.View.extend({
+
+            // Only view for this area so it's hardcoded
+            el: '#notification-area',
+            template: template,
+
+            events: {
+                'click .btn-query': 'openQuery',
+                'click .btn-notification': 'openNotifications'
+            },
+
+            tasks: null,
+            // area is slided out
+            visible: false,
+            // the dialog
+            modal: null,
+
+            initialize: function() {
+                this.tasks = new InteractionList();
+
+                this.$el.calculateHeight().height(0);
+
+                App.vent.on('interaction:added', _.bind(this.onAdd, this));
+                App.vent.on('interaction:deleted', _.bind(this.onDelete, this));
+
+                var render = _.bind(this.render, this);
+                this.listenTo(this.tasks, 'add', render);
+                this.listenTo(this.tasks, 'remove', render);
+
+            },
+
+            onAdd: function(task) {
+                this.tasks.add(task);
+            },
+
+            onDelete: function(task) {
+                this.tasks.remove(task);
+            },
+
+            render: function() {
+
+                // only render when it will be visible
+                if (this.tasks.length > 0)
+                    this.$el.html(this.template(this.tasks.toJSON()));
+
+                if (this.tasks.length > 0 && !this.visible) {
+                    this.$el.slideOut();
+                    this.visible = true;
+                }
+                else if (this.tasks.length === 0 && this.visible) {
+                    this.$el.slideIn();
+                    this.visible = false;
+                }
+
+                return this;
+            },
+
+            openQuery: function() {
+                var self = this;
+
+                _.requireOnce(['views/queryModal'], function(ModalView) {
+                    if (self.modal === null) {
+                        self.modal = new ModalView();
+                        self.modal.parent = self;
+                    }
+
+                    self.modal.model = self.tasks.at(0);
+                    self.modal.render();
+                    self.modal.show();
+                });
+
+            },
+
+            openNotifications: function() {
+
+            }
+        });
+    });
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/progressView.js b/pyload/web/app/scripts/views/progressView.js
new file mode 100644
index 000000000..3a4bb2825
--- /dev/null
+++ b/pyload/web/app/scripts/views/progressView.js
@@ -0,0 +1,33 @@
+define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abstract/itemView',
+    'hbs!tpl/header/progress', 'helpers/pluginIcon'],
+    function($, Backbone, _, App, Api, ItemView, template, pluginIcon) {
+        'use strict';
+
+        // Renders single file item
+        return ItemView.extend({
+
+            idAttribute: 'pid',
+            tagName: 'li',
+            template: template,
+            events: {
+            },
+
+            initialize: function() {
+                this.listenTo(this.model, 'change', this.render);
+                this.listenTo(this.model, 'remove', this.unrender);
+            },
+
+            onDestroy: function() {
+            },
+
+            render: function() {
+                // TODO: icon
+                // TODO: other states
+                // TODO: non download progress
+                // TODO: better progressbar rendering
+                this.$el.css('background-image', 'url('+ pluginIcon('todo') +')');
+                this.$el.html(this.template(this.model.toJSON()));
+                return this;
+            }
+        });
+    });
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/queryModal.js b/pyload/web/app/scripts/views/queryModal.js
new file mode 100644
index 000000000..7c6439b49
--- /dev/null
+++ b/pyload/web/app/scripts/views/queryModal.js
@@ -0,0 +1,69 @@
+define(['jquery', 'underscore', 'app', 'views/abstract/modalView', './input/inputLoader', 'text!tpl/default/queryDialog.html'],
+    function($, _, App, modalView, load_input, template) {
+        'use strict';
+        return modalView.extend({
+
+            // TODO: submit on enter reloads the page sometimes
+            events: {
+                'click .btn-success': 'submit',
+                'submit form': 'submit'
+            },
+            template: _.compile(template),
+
+            // the notificationView
+            parent: null,
+
+            model: null,
+            input: null,
+
+            initialize: function() {
+                // Inherit parent events
+                this.events = _.extend({}, modalView.prototype.events, this.events);
+            },
+
+            renderContent: function() {
+                var data = {
+                    title: this.model.get('title'),
+                    plugin: this.model.get('plugin'),
+                    description: this.model.get('description')
+                };
+
+                var input = this.model.get('input').data;
+                if (this.model.isCaptcha()) {
+                    data.captcha = input[0];
+                    data.type = input[1];
+                }
+                return data;
+            },
+
+            onRender: function() {
+                // instantiate the input
+                var input = this.model.get('input');
+                var InputView = load_input(input);
+                this.input = new InputView(input);
+                // only renders after wards
+                this.$('#inputField').append(this.input.render().el);
+            },
+
+            submit: function(e) {
+                e.stopPropagation();
+                // TODO: load next task
+
+                this.model.set('result', this.input.getVal());
+                var self = this;
+                this.model.save({success: function() {
+                    self.hide();
+                }});
+
+                this.input.clear();
+            },
+
+            onShow: function() {
+                this.input.focus();
+            },
+
+            onHide: function() {
+                this.input.destroy();
+            }
+        });
+    });
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/settings/configSectionView.js b/pyload/web/app/scripts/views/settings/configSectionView.js
new file mode 100644
index 000000000..e05701b2a
--- /dev/null
+++ b/pyload/web/app/scripts/views/settings/configSectionView.js
@@ -0,0 +1,99 @@
+define(['jquery', 'underscore', 'backbone', 'app', '../abstract/itemView', '../input/inputLoader',
+    'hbs!tpl/settings/config', 'hbs!tpl/settings/configItem'],
+    function($, _, Backbone, App, itemView, load_input, template, templateItem) {
+        'use strict';
+
+        // Renders settings over view page
+        return itemView.extend({
+
+            tagName: 'div',
+
+            template: template,
+            templateItem: templateItem,
+
+            // Will only render one time with further attribute updates
+            rendered: false,
+
+            events: {
+                'click .btn-primary': 'submit',
+                'click .btn-reset': 'reset'
+            },
+
+            initialize: function() {
+                this.listenTo(this.model, 'destroy', this.destroy);
+            },
+
+            render: function() {
+                if (!this.rendered) {
+                    this.$el.html(this.template(this.model.toJSON()));
+
+                    // initialize the popover
+                    this.$('.page-header a').popover({
+                        placement: 'left'
+//                        trigger: 'hover'
+                    });
+
+                    var container = this.$('.control-content');
+                    var self = this;
+                    _.each(this.model.get('items'), function(item) {
+                        var json = item.toJSON();
+                        var el = $('<div>').html(self.templateItem(json));
+                        var InputView = load_input(item.get('input'));
+                        var input = new InputView(json).render();
+                        item.set('inputView', input);
+
+                        self.listenTo(input, 'change', _.bind(self.render, self));
+                        el.find('.controls').append(input.el);
+                        container.append(el);
+                    });
+                    this.rendered = true;
+                }
+                // Enable button if something is changed
+                if (this.model.hasChanges())
+                    this.$('.btn-primary').removeClass('disabled');
+                else
+                    this.$('.btn-primary').addClass('disabled');
+
+                // Mark all inputs that are modified
+                _.each(this.model.get('items'), function(item) {
+                    var input = item.get('inputView');
+                    var el = input.$el.parent().parent();
+                    if (item.isChanged())
+                        el.addClass('info');
+                    else
+                        el.removeClass('info');
+                });
+
+                return this;
+            },
+
+            onDestroy: function() {
+                // TODO: correct cleanup after building up so many views and models
+            },
+
+            submit: function(e) {
+                e.stopPropagation();
+                // TODO: success / failure popups
+                var self = this;
+                this.model.save({success: function() {
+                    self.render();
+                    App.settingsView.refresh();
+                }});
+
+            },
+
+            reset: function(e) {
+                e.stopPropagation();
+                // restore the original value
+                _.each(this.model.get('items'), function(item) {
+                    if (item.has('inputView')) {
+                        var input = item.get('inputView');
+                        input.setVal(item.get('value'));
+                        input.render();
+                    }
+                });
+                this.render();
+            }
+
+        });
+    });
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/settings/pluginChooserModal.js b/pyload/web/app/scripts/views/settings/pluginChooserModal.js
new file mode 100644
index 000000000..91e9f11b3
--- /dev/null
+++ b/pyload/web/app/scripts/views/settings/pluginChooserModal.js
@@ -0,0 +1,69 @@
+define(['jquery', 'underscore', 'app', 'views/abstract/modalView', 'hbs!tpl/dialogs/addPluginConfig',
+    'helpers/pluginIcon', 'select2'],
+    function($, _, App, modalView, template, pluginIcon) {
+        'use strict';
+        return modalView.extend({
+
+            events: {
+                'click .btn-add': 'add'
+            },
+            template: template,
+            plugins: null,
+            select: null,
+
+            initialize: function() {
+                // Inherit parent events
+                this.events = _.extend({}, modalView.prototype.events, this.events);
+                var self = this;
+                $.ajax(App.apiRequest('getAvailablePlugins', null, {success: function(data) {
+                    self.plugins = _.sortBy(data, function(item) {
+                        return item.name;
+                    });
+                    self.render();
+                }}));
+            },
+
+            onRender: function() {
+                // TODO: could be a seperate input type if needed on multiple pages
+                if (this.plugins)
+                    this.select = this.$('#pluginSelect').select2({
+                        escapeMarkup: function(m) {
+                            return m;
+                        },
+                        formatResult: this.format,
+                        formatSelection: this.formatSelection,
+                        data: {results: this.plugins, text: function(item) {
+                            return item.label;
+                        }},
+                        id: function(item) {
+                            return item.name;
+                        }
+                    });
+            },
+
+            onShow: function() {
+            },
+
+            onHide: function() {
+            },
+
+            format: function(data) {
+                var s = '<div class="plugin-select" style="background-image: url(' + pluginIcon(data.name) +')">' + data.label;
+                s += '<br><span>' + data.description + '<span></div>';
+                return s;
+            },
+
+            formatSelection: function(data) {
+                return '<img class="logo-select" src="' + pluginIcon(data.name) + '"> ' + data.label;
+            },
+
+            add: function(e) {
+                e.stopPropagation();
+                if (this.select) {
+                    var plugin = this.select.val();
+                    App.vent.trigger('config:open', plugin);
+                    this.hide();
+                }
+            }
+        });
+    });
\ No newline at end of file
diff --git a/pyload/web/app/scripts/views/settings/settingsView.js b/pyload/web/app/scripts/views/settings/settingsView.js
new file mode 100644
index 000000000..cad5ab075
--- /dev/null
+++ b/pyload/web/app/scripts/views/settings/settingsView.js
@@ -0,0 +1,184 @@
+define(['jquery', 'underscore', 'backbone', 'app', 'models/ConfigHolder', './configSectionView',
+    'hbs!tpl/settings/layout', 'hbs!tpl/settings/menu', 'hbs!tpl/settings/actionbar'],
+    function($, _, Backbone, App, ConfigHolder, ConfigSectionView, template, templateMenu, templateBar) {
+        'use strict';
+
+        // Renders settings over view page
+        return Backbone.Marionette.ItemView.extend({
+
+            template: template,
+            templateMenu: templateMenu,
+
+            events: {
+                'click .settings-menu li > a': 'change_section',
+                'click .btn-add': 'choosePlugin', // TODO not in scope
+                'click .icon-remove': 'deleteConfig'
+            },
+
+            ui: {
+                'menu': '.settings-menu',
+                'content': '.setting-box > form'
+            },
+
+            selected: null,
+            modal: null,
+
+            coreConfig: null, // It seems collections are not needed
+            pluginConfig: null,
+
+            // currently open configHolder
+            config: null,
+            lastConfig: null,
+            isLoading: false,
+
+            initialize: function() {
+                this.actionbar = Backbone.Marionette.ItemView.extend({
+                    template: templateBar,
+                    events: {
+                        'click .btn': 'choosePlugin'
+                    },
+                    choosePlugin: _.bind(this.choosePlugin, this)
+
+                });
+                this.listenTo(App.vent, 'config:open', this.openConfig);
+
+                this.refresh();
+            },
+
+            refresh: function() {
+                var self = this;
+                $.ajax(App.apiRequest('getCoreConfig', null, {success: function(data) {
+                    self.coreConfig = data;
+                    self.renderMenu();
+                }}));
+                $.ajax(App.apiRequest('getPluginConfig', null, {success: function(data) {
+                    self.pluginConfig = data;
+                    self.renderMenu();
+                }}));
+            },
+
+            onRender: function() {
+                // set a height with css so animations will work
+                this.ui.content.height(this.ui.content.height());
+            },
+
+            renderMenu: function() {
+                var plugins = [],
+                    addons = [];
+
+                // separate addons and default plugins
+                // addons have an activated state
+                _.each(this.pluginConfig, function(item) {
+                    if (item.activated === null)
+                        plugins.push(item);
+                    else
+                        addons.push(item);
+                });
+
+                this.ui.menu.html(this.templateMenu({
+                    core: this.coreConfig,
+                    plugin: plugins,
+                    addon: addons
+                }));
+
+                // mark the selected element
+                this.$('li[data-name="' + this.selected + '"]').addClass('active');
+            },
+
+            openConfig: function(name) {
+                // Do nothing when this config is already open
+                if (this.config && this.config.get('name') === name)
+                    return;
+
+                this.lastConfig = this.config;
+                this.config = new ConfigHolder({name: name});
+                this.loading();
+
+                var self = this;
+                this.config.fetch({success: function() {
+                    if (!self.isLoading)
+                        self.show();
+
+                }, failure: _.bind(this.failure, this)});
+
+            },
+
+            loading: function() {
+                this.isLoading = true;
+                var self = this;
+                this.ui.content.fadeOut({complete: function() {
+                    if (self.config.isLoaded())
+                        self.show();
+
+                    self.isLoading = false;
+                }});
+
+            },
+
+            show: function() {
+                // TODO animations are bit sloppy
+                this.ui.content.css('display', 'block');
+                var oldHeight = this.ui.content.height();
+
+                // this will destroy the old view
+                if (this.lastConfig)
+                    this.lastConfig.trigger('destroy');
+                else
+                    this.ui.content.empty();
+
+                // reset the height
+                this.ui.content.css('height', '');
+                // append the new element
+                this.ui.content.append(new ConfigSectionView({model: this.config}).render().el);
+                // get the new height
+                var height = this.ui.content.height();
+                // set the old height again
+                this.ui.content.height(oldHeight);
+                this.ui.content.animate({
+                    opacity: 'show',
+                    height: height
+                });
+            },
+
+            failure: function() {
+                // TODO
+                this.config = null;
+            },
+
+            change_section: function(e) {
+                // TODO check for changes
+                // TODO move this into render?
+
+                var el = $(e.target).closest('li');
+
+                this.selected = el.data('name');
+                this.openConfig(this.selected);
+
+                this.ui.menu.find('li.active').removeClass('active');
+                el.addClass('active');
+                e.preventDefault();
+            },
+
+            choosePlugin: function(e) {
+                var self = this;
+                _.requireOnce(['views/settings/pluginChooserModal'], function(Modal) {
+                    if (self.modal === null)
+                        self.modal = new Modal();
+
+                    self.modal.show();
+                });
+            },
+
+            deleteConfig: function(e) {
+                e.stopPropagation();
+                var el = $(e.target).parent().parent();
+                var name = el.data('name');
+                var self = this;
+                $.ajax(App.apiRequest('deleteConfig', {plugin: name}, { success: function() {
+                    self.refresh();
+                }}));
+
+            }
+
+        });
+    });
\ No newline at end of file