(function () {
"use strict";

angular.module('shared')

    .directive('slider', function() {
        return {
            restrict: 'E',
            scope: {
                ngModel: '=',
                onChanged: '&',
                onSlide: '&'
            },
            replace: true,
            template: '<div></div>',
            require: 'ngModel',
            link: function (scope,element,attrs) {
                var settingInitVal = false;
                scope.$watch('ngModel', function(newVal, oldVal) {
                    if (newVal !== undefined){
                        settingInitVal = true;
                        element.slider("value", parseInt(newVal,10));
                        settingInitVal = false;
                    }
                });

                element.bind( "slide", onSlide);

                if ('onChanged' in attrs){
                    //(not executed during dragging the slider)
                    element.bind( "slidechange", onChanged);
                }

                function onSlide( event, ui ) {
                    if ('onSlide' in attrs) {
                        scope.onSlide()(ui.value);
                    }
                    scope.ngModel = ui.value;
                    scope.$apply();
                }

                function onChanged(event, ui) {
                    if (!settingInitVal) {
                        scope.onChanged()(ui.value);
                    }
                }

                var min = parseInt(attrs.min, 10);
                var max = parseInt(attrs.max, 10);
                var step = parseInt(attrs.step, 10) || 1;
                var numTicks = Math.ceil((max - min) / step);

                element.slider({
                    min: min,
                    max: max,
                    value: scope.ngModel,
                    step: step
                });
                var handle = element.children("a");
                var handleValue;

                function getNearestTickFromPositionAsDecimal(position) {
                    var sliderLeftBoundary = element.offset();
                    var sliderWidth = element.width();

                    position -= sliderLeftBoundary.left;
                    position /= sliderWidth;

                    //position is unrounded to the nearest tick at this point

                    position *= numTicks;
                    position = Math.round(position);

                    //convert position into a slider value, to determine percentage

                    position *= step;
                    position += min;
                    return getValueAsPercentageOfSlider(position);

                }

                function getValueAsPercentageOfSlider(value) {
                    value -= min;
                    value /= step * numTicks;
                    value = Math.min(value, 1);
                    return Math.max(value, 0);
                }

                handle.bind("touchstart", function(event) {
                    event.preventDefault();
                    handle.bind("touchmove", touchMove);
                    handle.bind("touchend", touchEnd);
                });

                function touchMove(event) {
                    var handlePosition = getNearestTickFromPositionAsDecimal(event.originalEvent.touches[0].pageX);
                    if (handleValue !== handlePosition * numTicks * step + min) {
                        handleValue = handlePosition * numTicks * step + min;
                        handle.css({
                            left: handlePosition * 100 + '%'
                        });
                        onSlide(event, {
                            handle: handle,
                            value: handleValue
                        });
                    }
                }

                function touchEnd(event) {
                    handle.unbind("touchmove");
                    handle.unbind("touchend");
                    onChanged(event, {
                        handle: handle,
                        value: handleValue
                    });
                }
            }
        };
    });
})();