$(function() {

	initDragShow();
	
});
	
var dragShowDeceleration = 50;  /* frames / s / s */
var dragShowEndV = 50; /*  frames / s  */
var dragShowPixelToFrameRatio = 4; /*  px / frames  */

function initDragShow() {
	$('.dragshow').append('<div class="animator"></div>');
	
	var dragShowOnMouseMove = function(event) {
		var dragShowTarget = event.data.dragShowTarget;
		
		var numFrames = dragShowTarget.find('.dragshow_frames img').length;
		var deltaX = dragShowTarget.hasClass('dragshow_left') ? dragShowTarget.data('dragShowStartX') - event.pageX : event.pageX - dragShowTarget.data('dragShowStartX');
		var nextFrameIndex = dragShowTarget.data('currentFrameIndex') + Math.round(deltaX / dragShowPixelToFrameRatio);
		
		nextFrameIndex = Math.max(nextFrameIndex, 0);
		nextFrameIndex = Math.min(nextFrameIndex, numFrames - 1);
		
		dragShowTarget.find('.dragshow_frames img').hide().eq(nextFrameIndex).show();
		
		var mouseEvents = dragShowTarget.data('mouseEvents');
		
		if ((event.timeStamp - mouseEvents[mouseEvents.length - 1].timeStamp ) > 40) {
			mouseEvents.push(event);
			if (mouseEvents.length > 2) mouseEvents.shift();
		}
	}
	
	var dragShowOnMouseUp = function(event) {
		$(document).unbind("mousemove mouseup");
		
		var dragShowTarget = event.data.dragShowTarget;
		
		var numFrames = dragShowTarget.find('.dragshow_frames img').length;
		var lastFrameIndex = numFrames - 1;
		
		dragShowTarget.find('.dragshow_frames img').each(function() {
			if ($(this).css('display') != 'none') dragShowTarget.data('currentFrameIndex', $(this).index());
		});
		
		var lastMouseEvent = dragShowTarget.data('mouseEvents').shift();
		var deltaTime = event.timeStamp - lastMouseEvent.timeStamp; /*  ms  */
		var deltaX = dragShowTarget.hasClass('dragshow_left') ? lastMouseEvent.pageX - event.pageX : event.pageX - lastMouseEvent.pageX;
		var deltaFrames = deltaX / dragShowPixelToFrameRatio;
		var currentFrameV = deltaFrames / deltaTime; /*  frames / ms  */
		
		var currentFrameIndex = dragShowTarget.data('currentFrameIndex');
		
		var lastStepTime = new Date().getTime();
		
		dragShowTarget.find('.animator').css('text-indent', '100px').animate({ textIndent: 0 }, {
			duration: Math.abs(currentFrameV) * 30000,
			easing: 'easeOutSine',
			step: function(now, fx) {
				currentFrameV *= (now / 100);
				var deltaStepTime = new Date().getTime() - lastStepTime;
				if (deltaStepTime <= 0) return;
				lastStepTime = new Date().getTime();
				var nextFrames = Math.round(currentFrameV * deltaStepTime);
				var nextFrameIndex = dragShowTarget.data('currentFrameIndex') + nextFrames;
				if (nextFrameIndex >= lastFrameIndex) nextFrameIndex = lastFrameIndex;
				if (nextFrameIndex <= 0) nextFrameIndex = 0;
				
				dragShowTarget.find('.dragshow_frames img').hide().eq(nextFrameIndex).show();
				dragShowTarget.data('currentFrameIndex', nextFrameIndex);
				
				if (nextFrames == 0 || nextFrameIndex <= 0 || nextFrameIndex >= lastFrameIndex)  dragShowTarget.find('.animator').stop();
			}
		});
		
	}

	$('.dragshow').bind('dragstart', function(event) { event.preventDefault(); }).mousedown(function(event) {
		var dragShowTarget = $(this);
		dragShowTarget.data('dragShowStartX', event.pageX);
		dragShowTarget.data('dragShowStartTime', event.timeStamp);
		dragShowTarget.data('mouseEvents', [event]);
		
		$('.animator', this).stop();
	
		$(document).mousemove({ dragShowTarget: dragShowTarget }, dragShowOnMouseMove);
		$(document).mouseup({ dragShowTarget: dragShowTarget }, dragShowOnMouseUp);
	}).data('currentFrameIndex', 0).addTouch();
	
}