/*global loadRules,saveRules,loadCloseSetting,saveCloseSetting*/
angular.module('options', []).controller('options', options);

function options($scope, $timeout) {
    $scope.matchCopy = {
        exact: 'exactly',
        base: 'up to the ?',
        hash: 'up to the #'
    };

    function reloadRules() {
        if($scope.rule) {
            postSaved();
        }
        $scope.rule = {match: 'hash'};
        loadRules((rules) => {
            $scope.rules = rules;
            $scope.$apply();
        });
    }

    function postSaved() {
        $scope.settingsSaved = true;
        $timeout(() => {
            $scope.settingsSaved = false;
        }, 3000);
        $scope.$apply();
    }

    $scope.saveRule = () => {
        if($scope.rule.url) {
            delete $scope.editingRule;
            $scope.ruleSaved = false;
            $scope.rules[$scope.rule.url] = $scope.rule.match;
            saveRules($scope.rules, reloadRules);
        }
    };

    $scope.deleteRule = (url) => {
        delete $scope.rules[url];
        saveRules($scope.rules, reloadRules);
    };

    $scope.editRule = (url, match) => {
        $scope.editingRule = url;
        $scope.rule = {
            url: url,
            match: match
        };
    };

    $scope.editing = (url) => url === $scope.editingRule;

    loadCloseSetting((close) => {
        $scope.close = close;
        $scope.$apply();
        watchClose();
    });

    function watchClose() {
        var ignoreFirst = true;
        $scope.$watch('close', (close) => {
            if(ignoreFirst) {
                ignoreFirst = false;
            } else {
                saveCloseSetting(close, postSaved);
            }
        });
    }

    reloadRules();
}

@@ -87,16 +87,21 @@
 ns', %5B%5D)
+%0A    
 .control
@@ -123,16 +123,53 @@
 options)
+%0A    .directive('dropdown', dropdown)
 ;%0A%0Afunct
@@ -196,24 +196,46 @@
 $timeout) %7B%0A
+    /* Rules table */%0A
     $scope.m
@@ -367,34 +367,56 @@
 les(
-) %7B%0A        if($scope.rule
+dontDisplaySaved) %7B%0A        if(!dontDisplaySaved
 ) %7B%0A
@@ -427,20 +427,23 @@
         
-post
+display
 Saved();
@@ -613,200 +613,18 @@
     
-function postSaved() %7B%0A        $scope.settingsSaved = true;%0A        $timeout(() =%3E %7B%0A            $scope.settingsSaved = false;%0A        %7D, 3000);%0A        $scope.$apply();%0A    %7D%0A%0A    $scope.save
+$scope.add
 Rule
@@ -648,25 +648,28 @@
   if($scope.
-r
+newR
 ule.url) %7B%0A 
@@ -683,106 +683,32 @@
     
-delete $scope.editingRule;%0A            $scope.ruleSaved = false;%0A            $scope.rules%5B$scope.r
+$scope.rules%5B$scope.newR
 ule.
@@ -721,17 +721,20 @@
  $scope.
-r
+newR
 ule.matc
@@ -942,219 +942,97 @@
 ope.
-editRule = (url, match) =%3E %7B%0A        $scope.editingRule = url;%0A        $scope.rule = %7B%0A            url: url,%0A            match: match%0A        %7D;%0A    %7D;%0A%0A    $scope.editing = (url) =%3E url === $scope.editingRule;%0A
+select = (url) =%3E $scope.selected = url;%0A    reloadRules(true);%0A%0A    /* Other settings */
 %0A   
@@ -1384,70 +1384,1044 @@
 se, 
-postSaved);%0A            %7D%0A        %7D);%0A    %7D%0A%0A    reloadRules()
+displaySaved);%0A            %7D%0A        %7D);%0A    %7D%0A%0A    /* Settings saved notiication */%0A    function displaySaved() %7B%0A        $scope.settingsSaved = true;%0A        $timeout(() =%3E %7B%0A            $scope.settingsSaved = false;%0A        %7D, 3000);%0A        $scope.$apply();%0A    %7D%0A%7D%0A%0Afunction dropdown() %7B%0A    return %7B%0A        scope: %7B options: '=', value: '=' %7D,%0A        template: '%3Cdiv class=%22dropdown%22%3E' +%0A            '%3Cbutton ng-click=%22toggle()%22%3E%7B%7Boptions%5Bvalue%5D%7D%7D%3C/button%3E' +%0A            '%3Cdiv class=%22dropdown-menu%22%3E' +%0A            '%3Cdiv ng-class=%22dropdownMenu%22' +%0A            'ng-repeat=%22(val, name) in options%22 ng-click=%22click(val)%22%3E' +%0A            '%7B%7Bname%7D%7D%3C/div%3E%3C/div%3E%3C/div%3E',%0A        controller: function($scope) %7B%0A            $scope.dropdownMenu = %7Bopen: false%7D;%0A            $scope.toggle = () =%3E %7B%0A                $scope.dropdownMenu.open = !$scope.dropdownMenu.open;%0A            %7D;%0A            $scope.click = (val) =%3E %7B%0A                $scope.value = val;%0A                $scope.dropdownMenu.open = false;%0A            %7D;%0A        %7D%0A    %7D
 ;%0A%7D%0A

add dropdown directive, cleaning up controller a bit