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: '/templates/directives/seek_bar.html',
           replace: true,
           restrict: 'E',
           scope: {
             onChange: '&'
           },
           link: function(scope, element, attributes) {
             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;
             });
  
             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()};
             };
  
             scope.thumbStyle = function () {
                return {left: percentString()};
             };
  
             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);
                 });
               });
  
               $document.bind('mouseup.thumb', function() {
                 $document.unbind('mousemove.thumb');
                 $document.unbind('mouseup.thumb');
               });
          };
          var notifyOnChange = function(newValue) {
            if (typeof scope.onChange === 'function') {
              scope.onChange({value: newValue});
            }
          };
           }
       };
  }
  
       angular
           .module('blocJams')
           .directive('seekBar', ['$document', seekBar]);
   })();
  