Dragdealer 3D Animation Render

jq-animation-dragdealer.js

	$(document).ready(function() {
				
		$.fn.animator = function() {
			var that 		= this;
			var tabID 		= '#' + $(this).attr('id');
			var frameCount 	= $(this).find('.frame-container').children('.frame').length;
			var steps 		= Math.floor(frameCount + 1);
			var slider 		= $(this).find('.dragdealer').attr('id');
			var middle 		= Math.ceil(steps / 2.001);
			
			if( typeof Dragdealer !== 'function') {
				alert('Dragdealer library missing!');
				return;
			}
			
			var animation = new Dragdealer(slider, {
				steps: steps,
				animationCallback: function(x, y)
				{
					var frame = (Math.floor(x * steps));
					if(frame < 1) frame = 1;
					if(frame >= steps) frame = (steps - 1);					
					$(tabID).find('.frame').css('display', 'none');
					$(tabID + '-frame' + frame).css('display', 'block');
				}
			});
			
			// init styling to force in browsers
	        $(this).find('.dragdealer').css('position', 'relative');
	        $(this).find('.handle').css('position', 'absolute');
	        $(this).find('.dark-bar').css('width', '60px');
	        $(this).find('.dark-bar').css('height', '25px');	
	        
	        // init animation to rotate towards the middle
	        animation.setStep(middle);
		}
		
		$('#deg360').animator();
		
		$('#lift').animator();
		
		$('#other').animator();

		// TABS MUST BE INIT AFTER THE ANIMATORS!!!!!
		$('#spinners').tabs();
	});