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;
  				});
  
               	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]);
  })();