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