text: (function() {
      function seekBar($document) {
         var calculatePercent = function(seekBar, event) {
             var offsetX = event.pageX - seekBar.offset().left;
             var seekBarWidth = seekBar.width();
             var offsetXPercent = offsetX / seekBarWidth;
             offsetXPercent = Math.max(0, offsetXPercent);
             offsetXPercent = Math.min(1, offsetXPercent);
             return offsetXPercent;
   };
         return {
             templateUrl: '/app/templates/directives/seek_bar.html',
             replace: true,
             restrict: 'E',
             scope: {
               onChange: '&'
             },
             link: function(scope, element, attributes) {
               // directive logic to return
                 scope.value = 0;
                 scope.max = 100;
  
                 var seekBar = $(element);
  
             attributes.$observe('value', function(newValue) {
                scope.value = newValue;
                });
  
              attributes.$observe('max', function(newValue) {
                  scope.max = newValue;
                });
  
              var percentString = function () {
                  var value = scope.value;
                  var max = scope.max;
                  var percent = value / max * 100;
                  return percent + "%";
                  };
  
            scope.fillStyle = function() {
                return {width: percentString()};
                  };
  
      var notifyOnChange = function(newValue) {
        if (typeof scope.onChange === 'function') {
        scope.onChange({value: newValue});
        }
      };
  
            scope.onClickSeekBar = function(event) {
                 var percent = calculatePercent(seekBar, event);
                 scope.value = percent * scope.max;
                 notifyOnChange(scope.value);
                  };
  
            scope.trackThumb = function() {
                $document.bind('mousemove.thumb', function(event) {
                    var percent = calculatePercent(seekBar, event);
                    scope.$apply(function() {
                      scope.value = percent * scope.max;
                      notifyOnChange(scope.value);
                  });
              });
  
  
  
              scope.thumbStyle = function() {
                  return {left: percentString()};
                    };
  
              $document.bind('mouseup.thumb', function() {
                  $document.unbind('mousemove.thumb');
                  $document.unbind('mouseup.thumb');
                  });
              };
           }
        };
     }
  
       angular
           .module('blocjams')
           .directive('seekBar', ['$document', seekBar]);
   })();
  