(function($) {
	
	var $ruler = $.fn.ruler = function(options) {
		
		options = $.extend({}, $ruler.defaults, options);
		
		this.each(initializeRuler);
		
		function initializeRuler() {
			
			$(this).css({
				overflow: 'hidden',
				height: options.dashHeight+'px',
				width: '100%'
			});
			
			var containerWidth = $(this).innerWidth();
			var containerHeight = $(this).innerHeight();
			var targetViewWidth = containerWidth * options.to / 100;
			var targetDashPercentage = options.dashWidth / (targetViewWidth / 100);
			
			var dashContainer = $('<div />').css({
				height: options.dashHeight+'px',
				position: 'absolute',
				left: '-'+((options.from-100)/2)+'%',
				width: options.from+'%'
			});
			
			var currentLeft = 0;
			while (currentLeft + targetDashPercentage < 100) {
				
				dashContainer.append(
					$('<div />').css({
						position: 'absolute',
						left: currentLeft+'%',
						width: options.dashWidth+'px',
						height: options.dashHeight+'px',
						background: options.dashColor
					})
				);
				currentLeft += targetDashPercentage;
				
				if (currentLeft + options.dashSpace < 100) {
					dashContainer.append(
						$('<div />').css({
							position: 'absolute',
							left: currentLeft+'%',
							width: options.dashSpace+'%',
							height: options.dashHeight+'px'
						})
					);
					currentLeft += options.dashSpace;
				}
			}
			
			$(this).prepend(dashContainer);
			
			$(dashContainer).animate({
				left: ((100-options.to)/2)+'%',
				width: options.to+'%'
			}, options.duration, options.onFinish);
		}
	};

	$ruler.defaults = {
		dashWidth: 6,
		dashSpace: 0.4,
		duration: 8000,
		from: 3000,
		to: 150,
		dashHeight: 2,
		dashColor: '#6B6B6B'
	};
	
})(jQuery);