angular.module('multiselect', ['template/multiselect/multiselect.html'])

.controller('MultiselectController', ['$scope', function ($scope) {
    $scope.$select = function () {
        $scope.selected.push.apply($scope.selected, _.filter($scope.selection, function (obj) {
            var filter = _.filter($scope.add, function (objAdd) { return objAdd.key == obj.key; });

            if (filter.length) return true;
            return false;
        }));
        $scope.selection = _.difference($scope.selection, $scope.selected);
    };

    $scope.$delete = function () {
        $scope.selection.push.apply($scope.selection, _.filter($scope.selected, function (obj) {
            var filter = _.filter($scope.remove, function (objRemove) { return objRemove.key == obj.key; });

            if (filter.length) return true;
            return false;
        }));
        $scope.selected = _.difference($scope.selected, $scope.selection);
    };

    $scope.$watchCollection('selected', function (val) {
        $scope.model = _.pluck($scope.selected, 'model');
    });

    $scope.$up = function () {
        $scope.$broadcast('getSelectedOptions', 'up');
    }

    $scope.$down = function () {
        $scope.$broadcast('getSelectedOptions', 'down');
    }

    this.sorting = function (values, type) {
        if (!type) { type = 'up'; }

        var sorted = [];
        if (type == 'down') $scope.selected.reverse();
        angular.forEach($scope.selected, function (selected, index) {
            if (values.indexOf(selected.key.toString()) >= 0 && sorted.indexOf(selected.key) == -1) {
                var indexSorted = index-1;

                if (indexSorted >= 0 && indexSorted < $scope.selected.length) {
                    var tmp = $scope.selected[indexSorted];

                    if ((values.indexOf(tmp.key.toString()) == -1)) {
                        $scope.selected[indexSorted] = selected;
                        $scope.selected[index] = tmp;
                    }
                }

                sorted.push(selected.key);
            }
        });
        if (type == 'down') $scope.selected.reverse();
    }
}])

.factory('optionParser', ['$parse', function ($parse) {
    var MULTISELECT_REGEXP = /^\s*(.*?)(?:\s+as\s+(.*?))?\s+for\s+(?:([\$\w][\$\w\d]*))\s+in\s+(.*)$/;

    return {
        parse: function (input) {
            var match = input.match(MULTISELECT_REGEXP), modelMapper, viewMapper, source;
            if (!match) {
                throw new Error(
                    "Invalid syntax (options): '_modelIdentifier_ (as _label_) for _item_ in _collection_'"
                );
            }

            return {
                itemName: match[3],
                source: $parse(match[4]),
                viewMapper: $parse(match[2] || match[1]),
                modelMapper: $parse(match[1])
            };
        }
    };
}])

.directive('multiselect', ['$parse', '$document', 'optionParser', function ($parse, $document, optionParser) {
    return {
        restrict: 'E',
        replace: true,
        require: 'ngModel',
        templateUrl: function (tElement, tAttributes) {
            if (tAttributes.template) {
                return tAttributes.template;
            } else  {
                return 'template/multiselect/multiselect.html';
            }
        },
        scope: {
            model: '=ngModel'
        },
        controller: 'MultiselectController',
        link: function (scope, element, attrs, ctrl) {
            var expression = attrs.options, // expression
                parsedResult = optionParser.parse(expression); // parsed expression

            scope.selection = [];
            scope.selected = [];

            scope.$parent.$on('$destroy', function () {
                scope.$destroy();
            });

            function parseModel () {
                var model = parsedResult.source(scope.$parent);
                if(!angular.isDefined(model)) return;
                _.each(model, function (value, key) {
                    var local = {};
                    local[parsedResult.itemName] = model[key];
                    var uniqModel = {
                        key: parsedResult.modelMapper(local),
                        label: parsedResult.viewMapper(local),
                        model: value
                    };

                    if (_.findWhere(scope.model, model[key])) {
                        scope.selected.push(uniqModel);
                    } else {
                        scope.selection.push(uniqModel);
                    }

                });
            }

            //shortcut bindings
            element.bind('keyup', function (event) {
                if (event.keyCode == 37) {
                    scope.delete();
                    scope.$apply();
                }

                if (event.keyCode == 39) {
                    scope.select();
                    scope.$apply();
                }
            });

            parseModel();
        }
    };
}]).

directive('optionsSortable', [
    function() {
        return {
            restrict: 'A',
            replace: false,
            require: '^multiselect',
            link: function (scope, element, attributes, controller) {
                var getSelectedOptions = function () {
                    var selected = element.find('option:selected');
                    var values = [];

                    angular.forEach(selected, function (HTMLoption) {
                        values.push(HTMLoption.value);
                    });

                    return values;
                };

                scope.$on('getSelectedOptions', function (event, type) {
                    var values = getSelectedOptions();
                    controller.sorting(values, type);
                });
            }
        }
    }
]);

angular.module("template/multiselect/multiselect.html", []).run(["$templateCache", function($templateCache) {
    $templateCache.put("template/multiselect/multiselect.html",
        '<div class="row">' +
            '<div class="col-md-5">' +
                '<select multiple class="form-control" ng-model="add" ng-dblclick="$select()" ng-options="i.label for i in selection track by i.key"></select>' +
            '</div>' +
            '<div class="col-md-2 button-bar text-center">' +
                    '<div class="up">' +
                        '<button role="button" class="btn btn-default" ng-click="$up()">' +
                            'Up' +
                        '</button>' +
                    '</div>' +
                    '<div class="select">' +
                        '<button role="button" class="btn btn-default text-center" ng-click="$select()">' +
                            'Add' +
                        '</button>' +
                    '</div>' +
                    '<div class="delete">' +
                        '<button role="button" class="btn btn-default" ng-click="$delete()">' +
                            'Delete' +
                        '</button>' +
                    '</div>' +
                    '<div class="down">' +
                        '<button role="button" class="btn btn-default" ng-click="$down()">' +
                            'Down' +
                        '</button>' +
                    '</div>' +
            '</div>' +
            '<div class="col-md-5">' +
                '<select multiple class="form-control selected" ng-model="remove" ng-dblclick="$delete()" ng-options="i.label for i in selected track by i.key" options-sortable></select>' +
            '</div>' +
        '</div>' +
    '');
}]);