angular.module('yds').directive('ydsYearRange', ['$timeout', 'DashboardService',
    function($timeout, DashboardService) {
        return {
            restrict: 'E',
            scope: {
                minYear: '@',       // Minimum year of the slider
                maxYear: '@',       // Maximum year of the slider
                dashboardId: '@',   // ID to use for saving year range in DashboardService
                vertical: '@',      // If true the slider will be vertical (defaults to horizontal)
                height: '@',        // Height of the slider (optional)
                title: '@'          // Title to show above slider (optional)
            },
            templateUrl: ((typeof Drupal != 'undefined') ? Drupal.settings.basePath + Drupal.settings.yds_project.modulePath  +'/' :'') + 'templates/year-range-selector.html',
            link: function (scope, element, attrs) {
                scope.initialized = false;

                var minYear = parseInt(scope.minYear);
                var maxYear = parseInt(scope.maxYear);
                var height = parseInt(scope.height);
                var dashboardId = scope.dashboardId;
                var vertical = scope.vertical;

                // Check if minYear attr is defined, else assign default value
                if (_.isUndefined(minYear) || _.isNaN(minYear))
                    minYear = 1970;

                // Check if maxYear attr is defined, else assign default value
                if (_.isUndefined(maxYear) || _.isNaN(maxYear))
                    maxYear = 2050;

                // Check if dashboardId attr is defined, else assign default value
                if (_.isUndefined(dashboardId) || dashboardId.length == 0)
                    dashboardId = "default";

                // Check if vertical attr is defined, else assign default value
                if (_.isUndefined(vertical) || (vertical != "true" && vertical != "false"))
                    vertical = "false";

                if (!_.isUndefined(height) && !_.isNaN(height)) {
                    scope.containerStyle = {
                        height: height + "px"
                    }
                }

                /**
                 * Update the year range in DashboardService
                 */
                var updateYearRange = function() {
                    var minValue = scope.yearSlider.minValue;
                    var maxValue = scope.yearSlider.maxValue;

                    // Update selected years in DashboardService
                    DashboardService.setYearRange(dashboardId, minValue, maxValue);
                };

                // Set initial year selection in DashboardService
                DashboardService.setYearRange(dashboardId, minYear, maxYear);

                // Set slider options
                scope.yearSlider = {
                    minValue: minYear,
                    maxValue: maxYear,
                    options: {
                        floor: minYear,
                        ceil: maxYear,
                        step: 1,
                        vertical: (vertical == "true"),
                        onEnd: updateYearRange
                    }
                };

                // Show angular slider after options are set
                scope.initialized = true;

                // Make sure to show the pointers in the correct places
                $timeout(function(){
                    scope.$broadcast('reCalcViewDimensions');
                }, 50);
            }
        };
    }
]);

@@ -86,16 +86,17 @@
 function
+ 
 ($timeou
@@ -798,15 +798,16 @@
 ath 
- 
 +
+ 
 '/' :
+ 
 '') 
@@ -2182,16 +2182,124 @@
      %7D%0A%0A
+                // Set cookie key for this selector%0A                var cookieKey = %22year_%22 + dashboardId;%0A%0A
         
@@ -2437,16 +2437,17 @@
 function
+ 
 () %7B%0A   
@@ -2717,16 +2717,17 @@
 Value);%0A
+%0A
         
@@ -2738,154 +2738,186 @@
     
-%7D;%0A%0A                // Set initial year selection in DashboardService%0A                DashboardService.setYearRange(dashboardId, minYear, maxYear)
+    DashboardService.setCookieObject(cookieKey, %7B%0A                        minValue: minValue,%0A                        maxValue: maxValue%0A                    %7D);%0A                %7D
 ;%0A%0A 
@@ -3456,24 +3456,833 @@
 ed = true;%0A%0A
+                // If there are any min/max years saved in a cookie, restore them%0A                var cookieYears = DashboardService.getCookieObject(cookieKey);%0A%0A                if (!_.isEmpty(cookieYears)) %7B%0A                    // Set values on the slider model to be shown on the page%0A                    scope.yearSlider.minValue = cookieYears.minValue;%0A                    scope.yearSlider.maxValue = cookieYears.maxValue;%0A%0A                    // Set selected year range to the one from the cookie%0A                    DashboardService.setYearRange(dashboardId, cookieYears.minValue, cookieYears.maxValue);%0A                %7D else %7B%0A                    // Set initial year selection to be the entire range%0A                    DashboardService.setYearRange(dashboardId, minYear, maxYear);%0A                %7D%0A%0A
             
@@ -4374,18 +4374,20 @@
 function
+ 
 ()
+ 
 %7B%0A      

Make year range selector save/load selection to cookies