app.directive('sfTable', function(SubFilterService,PrimaryFilterService, SortService) {
  return {
    restrict: 'E',
    templateUrl: 'templates/sf-table.html',
    scope: {
//			filter: "@"
    },
    link: function(scope, element, attrs) {
      scope.primaryFilter = PrimaryFilterService.filter;
      scope.aggregate_data = [];
      scope.filter = SubFilterService.filter.type;
      scope.toggleOptions = [];
      // Passed on to Child Directives
      scope.field = "volume";

      // Scope fields for pagination
      scope.start = 0;
      scope.end = 10;
      scope.total = 0;
      scope.radioValues = {
        'set1':[{value:'transport/storage', name:'Transport/Storage'},
                {value:'rate_schedule', name:'Rate Schedules'}],
        'set2':[{value:'volume', name:'Volume'},
                {value:'contract', name: 'Contracts count'}]
      }

      // Watch the primary filter value
      scope.$watch(
        function() {
          return scope.primaryFilter.value;
        },
        function(newVal, oldVal) {
          SubFilterService.getFilterData(scope, element);
        }
      );

      // Watch the sub filter value
      scope.$watch(function() {
          return SubFilterService.filter.type;
      }, function(newVal, oldVal) {
        switch(newVal){
          case 'contract':
            scope.toggleOptions = [{value: "set1", name:"Set 1"}];
            break;
          default:
            scope.toggleOptions = [{value: "set1", name:"Set 1"}, {value: "set2", name:"Set 2"}];
        }
        SubFilterService.getFilterData(scope, element);
        SubFilterService.redrawTable(element, scope);
        }
      );
      // Watch the sub filter value
      scope.$watch( "toggleCharts", function(newVal, oldVal) {
        //console.log("toggleCharts");

        }
      );
      scope.$watch( "field", function(newVal, oldVal) {
        //console.log("field asd", newVal);

        }
      );

      // Sort function, takes in the key to sort aggregate data by and reverse indicator
      scope.sort = function(key,reverse) {
        // Set all header bacgrounds to normal
        element.find('.sort-header').css('background-color','#f9f9f9');
        // Set relevant headers background to indicate sort key selection
        element.find('.header-' + key).css('background-color', '#E6E6E6');
        // Call to sorting service function
        scope.aggregate_data = SortService.sort(key,scope.aggregate_data,scope.reverse);
        // Broadcast message to child scopes
        scope.$broadcast('SORTING-CHANGED');
      }
    }
  }
});