// Ninja animation 

var NINJA = {
		frames: [ 
				 /* -- text hide -- */
			{
				selector: '#jqsubtitle', // hide subtitle text
				css: {
					opacity:0
				}
			},
				 /* -- promobar hide -- */
			{
				selector: '#promobar2', // hide promobar with 0 height
				css: {
					height: '0'
				}
			},
						{
				selector: '#promobar2', // show promobar
				animations: {
					height: '+=60'
				},
				duration: 2000,
				easing: 'easeOutBounce'
			},
 
				/* -- hanging ninja -- */
			{
				selector: '#box1 .frame1',  // slide down ninja
				animations: {
					height: '+=50'
				},
				duration: 1000,
				easing: 'easeOutBounce'
			},
			 /* -- peeking ninja enters-- */
			{
				selector: '#box2 .frame1', // slide up eyes
				animations: {
					height: '+=50'
				},
				duration: 700,
				easing: 'easeOutBounce'
			},
			{
				selector: '#box3',  // #3 slide board on 
				animations: {
					backgroundPosition:"-50px 0px "
				},
				duration: 300,
				easing: 'easeOutBack'
			},
			{
				selector: '#box3 .frame1', // #3 fist of fury
				animations: {
					backgroundPosition:"-50px 0px"
				},
				duration: 200,
				easing: 'easeOutBounce'
			},
			{
				selector: '#box3',  // #3 break board
				css: {
					backgroundPosition:"-150px 0px "
				},
				delay: 700,
			},
			 /* -- Stars-- */
			{
				selector: '#box1 .frame1',   // #1: slide out hanging ninja body to ninja hand
				animations: {					
					opacity:0
				},
				duration: 1000,
				easing: 'easeOutBack'
			},
			{
				selector: '#box3',  // #3 FRAME - remove board
				css: {
					backgroundPosition:"0px 0px "
				},
				duration: 10	
			},
			{
				selector: '#box3 .frame1',  // #3 FRAME - remove board
				animations: {
					backgroundPosition:"0px 0px ",
					opacity:0
				},
				duration: 100,
				easing: 'easeOutBack'
			},

			{
				selector: '#box1 .frame1',   // #1 FRAME: Blank frame
				css: {					
					backgroundPosition:"-61px -100px",
					opacity:1
				}
			},
			{
				selector: '#box1 .frame1',   // #1: SLIDE slide hand in
				animations: {					
					backgroundPosition:"-22px -100px"
				},
				duration: 500,
				easing: 'easeOutBack'
			},


			{
				selector: '#box1 .frame1',   // #1 FRAME: throw frame
				css: {					
					backgroundPosition:"-11px -50px"
				},
				delay: 10
			},
			{
				selector: '#box1 .frame1',   // #1: SLIDE" throw slide extension
				animations: {					
					backgroundPosition:"-22px -50px"
				},
				duration: 300,
				easing: 'easeOutBack'
			},
			{
				selector: '#box3 .frame1', // #3: FRAME: star 1 hits wall
				css: {
					backgroundImage:"url(http://sitepointstatic.com/examples/jquery/ninja2-b.jpg)",
					backgroundPosition:"-0px 0px ",
					opacity:1
				},
				delay: 50
			},
			{
				selector: '#box1 .frame1',   // #1 FRAME: throw frame
				css: {					
					backgroundPosition:"-11px -100px"
				},
				delay: 200
			},	
			{
				selector: '#box1 .frame1',   // #1 FRAME: throw frame
				css: {					
					backgroundPosition:"-11px -50px"
				},
				delay: 10
			},
			{
				selector: '#box1 .frame1',   // #1: SLIDE" throw slide extension
				animations: {					
					backgroundPosition:"-22px -50px"
				},
				duration: 300,
				easing: 'easeOutBack'
			},
			{
				selector: '#box3 .frame1', // #3: FRAME: star 2 hits wall
				css: {
					backgroundPosition:"-50px 0px  "
				},
				delay: 50
			},


			{
				selector: '#box1 .frame1',   // #1 FRAME: throw frame
				css: {					
					backgroundPosition:"-11px -100px"
				},
				delay: 200
			},	
{
				selector: '#box1 .frame1',   // #1 FRAME: throw frame
				css: {					
					backgroundPosition:"-11px -50px"
				},
				delay: 10
			},
			{
				selector: '#box1 .frame1',   // #1: SLIDE" throw slide extension
				animations: {					
					backgroundPosition:"-22px -50px"
				},
				duration: 300,
				easing: 'easeOutBack'
			},
			{
				selector: '#box3 .frame1', // #2: FRAME: star 3 hits wall
				css: {
					backgroundPosition:"-100px 0px "
				},
				delay: 50
			},
			{
				selector: '#box1 .frame1',   // #1 FRAME: throw frame
				css: {					
					backgroundPosition:"-11px 0px"
				},
				delay: 1500
			},
			{
				selector: '#box1 .frame1',   // #1 FRAME: positionsword guy off screen
				css: {					
					backgroundPosition:"-161px 0px"
				},
				delay: 10
			},
			{
				selector: '#box1 .frame1',   // #1: SLIDE: sword guy slide
				animations: {					
					backgroundPosition:"-111px 0px"
				},
				duration: 700,
				easing: 'easeOutBack'
			},		

			{
				selector: '#jqtitle', // show title text
				animations: {
					opacity:1
				},
				duration: 1500,
				easing: 'easeOutBack'
			},
			{
				selector: '#jqsubtitle', // show title text
				animations: {
					opacity:1
				},
				duration: 1500,
				easing: 'easeOutBack'
			}
			
		],
		animate: function(i) {
			if(skip)
				$('#promobar2').hide();
			if(this.frames[i]) {
				var frame = this.frames[i];
				if (frame.animations) {
					$(frame.selector)
						.animate(
							frame.animations, 
							{
								duration: (skip ? 0 : frame.duration), 
								easing: frame.easing, 
								complete: function(){NINJA.animate(i + 1)}
							});
					} else if (frame.css) {
						$(frame.selector)
						  .css(frame.css);
						setTimeout(function() {NINJA.animate(i + 1);}, (skip ? 0 : frame.delay));
					} 
			}else{
			
			if(skip)
				$('#promobar2').show();
			if(skip)
				$('body').css('padding-top','0px');
			}
			
		}
	}
	
	if(skip && !hidepromo())
		$('body').css('padding-top','60px');
  $(document).ready(function() {
		NINJA.animate(0);
	});