/*
 * jQuery Spacescape 1.0 - http://www.15watts.com
 *
 * Provides a framework for easy animation/scene/sprite control
 *
 * Copyright © 2011 15 Watts Ltd <hello@15watts.com>
 * All rights reserved.
 * 
 *
*/

var ssSprites = {
  asteroid: {
  	spriteId:'asteroid', 
  	cssClass:'asteroid',
  	spriteImage:'/animation/asteroid-small.png',
  	width: 60,
  	height: 59
  },
  asteroid2: {
  	spriteId:'asteroid2', 
  	cssClass:'asteroid2',
  	spriteImage:'/animation/asteroid-small.png',
  	width: 60,
  	height: 59
  },
  satellite: {
  	spriteId: 'satelite', 
  	cssClass:'satelite',
  	spriteImage:'/animation/sat.png',
  	width: 75,
  	height: 50
  },
  orangeShip: {
  	spriteId: 'ship-close1', 
  	cssClass:'ship',
  	spriteImage:'/animation/orange-ship.png',
  	width: 39,
  	height: 100,
  	preHook: function($sprite) {
  	   var state = 0;
       function animateShip() {
         if(state == 0) {
           $sprite.css({'background-position':'-39px 0'});
           state = 1;
         } else {
           $sprite.css({'background-position':'0px 0'});
           state = 0;
         }
       }
       setInterval(animateShip,200);
  	}
  },
  redShip: {
  	spriteId: 'red-ship', 
  	cssClass:'ship',
  	spriteImage:'/animation/red-ship.png',
  	width: 39,
  	height: 89,
  	preHook: function($sprite) {
  	   var state = 0;
       function animateShip() {
         if(state == 0) {
           $sprite.css({'background-position':'-40px 0'});
           state = 1;
         } else {
           $sprite.css({'background-position':'0px 0'});
           state = 0;
         }
       }
       setInterval(animateShip,200);
  	}
  },
  redShip90: {
  	spriteId: 'red-ship90', 
  	cssClass:'',
  	spriteImage:'/animation/red-ship90.png',
  	width: 90,
  	height: 40,
  	preHook: function($sprite) {
  	   var state = 0;
       function animateShip90() {
         if(state == 0) {
           $sprite.css({'background-position':'-90px 0'});
           state = 1;
         } else {
           $sprite.css({'background-position':'0px 0'});
           state = 0;
         }
       }
       setInterval(animateShip90,200);
  	}
  },
  redShip315: {
  	spriteId: 'red-ship315', 
  	cssClass:'ship',
  	spriteImage:'/animation/red-ship315.png',
  	width: 66,
  	height: 66,
  	preHook: function($sprite) {
  	   var state = 0;
       function animateShip315() {

         if(state == 0) {
           $sprite.css({'background-position':'-66px 0'});
           state = 1;
         } else {
           $sprite.css({'background-position':'0px 0'});
           state = 0;
         }
       }
       setInterval(animateShip315,200);
  	}
  },
  blueShip315: {
  	spriteId: 'blue-ship315', 
  	cssClass:'ship',
  	spriteImage:'/animation/blue-ship-315.png',
  	width: 64,
  	height: 63,
  	preHook: function($sprite) {
  	   var state = 0;
       function animateShip315() {

         if(state == 0) {
           $sprite.css({'background-position':'-64px 0'});
           state = 1;
         } else {
           $sprite.css({'background-position':'0px 0'});
           state = 0;
         }
       }
       setInterval(animateShip315,200);
  	}
  },
  greenShip: {
  	spriteId: 'green-ship', 
  	cssClass:'ship',
  	spriteImage:'/animation/green-ship.png',
  	width: 25,
  	height: 55,
  	preHook: function($sprite) {
  	   var state = 0;
       function animateShip() {
         if(state == 0) {
           $sprite.css({'background-position':'-25px 0'});
           state = 1;
         } else {
           $sprite.css({'background-position':'0px 0'});
           state = 0;
         }
       }
       setInterval(animateShip,200);
  	}
  },
  blueShip: {
  	spriteId: 'blue-ship', 
  	cssClass:'ship',
  	spriteImage:'/animation/blue-ship.png',
  	width: 50,
  	height: 99,
  	preHook: function($sprite) {
  	   var state = 0;
       function animateShip() {
         if(state == 0) {
           $sprite.css({'background-position':'-60px 0'});
           state = 1;
         } else {
           $sprite.css({'background-position':'0px 0'});
           state = 0;
         }
       }
       setInterval(animateShip,200);
  	}
  },
  greenShip225: {
  	spriteId: 'green-ship-225', 
  	cssClass:'ship',
  	spriteImage:'/animation/green-ship-225.png',
  	width: 41,
  	height: 40,
  	preHook: function($sprite) {
  	   var state = 0;
       function animateShip() {
         if(state == 0) {
           $sprite.css({'background-position':'-41px 0'});
           state = 1;
         } else {
           $sprite.css({'background-position':'0px 0'});
           state = 0;
         }
       }
       setInterval(animateShip,200);
  	}
  },
  
  orangeShip225: {
   	spriteId: 'orange-ship-225', 
   	cssClass:'ship',
   	spriteImage:'/animation/orange-ship-225.png',
   	width: 40,
   	height: 40,
   	preHook: function($sprite) {
   	   var state = 0;
        function animateShip() {
          if(state == 0) {
            $sprite.css({'background-position':'-40px 0'});
            state = 1;
          } else {
            $sprite.css({'background-position':'0px 0'});
            state = 0;
          }
        }
        setInterval(animateShip,200);
   	}
   },
  blueShipSmall: {
  	spriteId: 'ship-distance1', 
  	cssClass: 'ship',
  	spriteImage: '/animation/blue-ship-16px.png',
  	width: 22,
  	height: 22
  },								
  saucer: {
  	spriteId:'saucer', 
  	cssClass:'ship',
  	spriteImage:'/animation/saucer.png',
  	width: 50,
  	height: 21,
  	preHook: function($sprite) {
      var saucerState = 0;
      function animateSaucer() {

       if(saucerState == 0) {
         $sprite.css({'background-position':'-50px 0'});
              saucerState = 1;

       } else if (saucerState == 1) {
         $sprite.css({'background-position':'-100px 0'});
         saucerState = 2;
       } else {
         $sprite.css({'background-position':'0px 0'});
         saucerState = 0;
       }

      }

      setInterval(animateSaucer ,200);
  	}
	}
};

var ssScenes;
$(document).ready(function() {
  
  var spaceWidth = $(document).width();
	var spaceHeight = $(document).height();
	
  ssScenes = {
    scene1: {
        sprites: [
  			{
  				sprite: ssSprites.asteroid,
  				startFrom: [300,50],
  				endAt: [300,spaceWidth + 50],
  		  	speed: 120000,
  		  	easing: 'easeOutCubic'
  			},
  			{
  				sprite: ssSprites.satellite,
  				startFrom: [50,spaceWidth - 200],
  		  	endAt: [50, -100],
  		  	speed: 120000,
  		  	easing: 'easeInCubic'
  			},
  			{
  				sprite: ssSprites.orangeShip,
  				startFrom: [spaceHeight,spaceWidth / 2.5 ],
  		  	endAt: ['-300',spaceWidth / 2.5],
  		  	speed: 8000,
  		  	easing: 'easeOutCubic'
  			},
  			{
  				sprite: ssSprites.blueShipSmall,
  				startFrom: [spaceHeight, -300],
  		  	endAt: ['-=' + spaceWidth + 200, '+=' + spaceWidth + 200],
  		  	easing: 'easeOutCubic',
  		  	speed: 1200000
  			},
  			{
  				sprite: ssSprites.asteroid2,
  				startFrom: [spaceHeight - (spaceHeight / 3), spaceWidth + 500],
  				endAt: [spaceHeight - (spaceHeight / 3), -100],
  		  	speed: 130000
  			},
  			{
  				sprite: ssSprites.redShip90,
  				startFrom: [spaceHeight - ((spaceHeight / 3) * 2), -1000],
  				endAt: [spaceHeight - ((spaceHeight / 3) * 2), 10000],
  		  	speed: 120000
  			},				
  			{
  				sprite: ssSprites.greenShip225,
  				startFrom: [-100, (spaceWidth / 2)],
  				endAt: [spaceWidth / 2, -100],
  		  	speed: 6000
  			},
  			{
  				sprite:	ssSprites.saucer,
  				startFrom: [spaceHeight - 300, ((spaceWidth / 3) * 2)],
  		  	endAt: [spaceHeight - 300, -100],
  		  	easing: 'easeInCubic',
  		  	speed: 60000

  			}
  		]

    },
    
    scene2: {
      sprites: [
				{
					sprite: ssSprites.satellite,
					startFrom: [300,50],
					endAt: [300,spaceWidth + 50],
			  	speed: 120000
				},
				{
					sprite: ssSprites.asteroid,
					startFrom: [50,spaceWidth - 200],
			  	endAt: [50, -100],
			  	speed: 120000
				},
				{
					sprite: ssSprites.orangeShip,
					startFrom: [spaceHeight,spaceWidth  - 200 ],
			  	endAt: ['-300', spaceWidth - 100],
			  	speed: 8000,
			  	easing: 'easeOutCubic'
				},

				{
					sprite: ssSprites.asteroid2,
					startFrom: [spaceHeight - (spaceHeight / 3), spaceWidth + 500],
					endAt: [spaceHeight - (spaceHeight / 3), -100],
			  	speed: 130000
				},
				{
					sprite: ssSprites.redShip90,
					startFrom: [spaceHeight - ((spaceHeight / 3) * 2), -1000],
					endAt: [spaceHeight - ((spaceHeight / 3) * 2), 10000],
			  	speed: 120000
				},				

				{
					sprite:	ssSprites.saucer,
					startFrom: [spaceHeight - 100, spaceWidth - ((spaceWidth / 6) * 5)],
			  	endAt: [spaceHeight - 100, spaceWidth + 100],
			  	easing: 'easeInCubic',
			  	speed: 100000
			  	
				}
			]
    },
    
    scene3: {
      	sprites: [
  				{
  					sprite: ssSprites.saucer,
  					startFrom: [75,100],
  					endAt: [75,spaceWidth + 50],
  			  	speed: 120000
  				},
  				{
  					sprite: ssSprites.asteroid,
  					startFrom: [spaceHeight / 3,spaceWidth - 200],
  			  	endAt: [spaceHeight / 3, -100],
  			  	speed: 120000
  				},
  				{
  					sprite: ssSprites.redShip315,
  					startFrom: [1000,spaceWidth  + 500 ],
  			  	endAt: [-500, spaceWidth / 2],
  			  	speed: 8000,
  			  	easing: 'easeOutCubic'
  				},
  				{
  					sprite: ssSprites.greenShip225,
  					startFrom: [-100, spaceWidth / 2],
  			  	endAt: [800, -100],
  			  	easing: 'linear',
  			  	speed: 10000
  				},
  				{
  					sprite: ssSprites.satellite,
  					startFrom: [spaceHeight - 75, spaceWidth + 500],
  					endAt: [spaceHeight - 75, -100],
  			  	speed: 130000
  				}

  			]
    },
    
    scene4: {
      sprites: [
				{
					sprite: ssSprites.asteroid,
					startFrom: [300,-50],
					endAt: [300,spaceWidth + 50],
			  	speed: 120000
				},
				{
					sprite: ssSprites.satellite,
					startFrom: [50,spaceWidth - 200],
			  	endAt: [50, -100],
			  	speed: 120000
				},
				{
					sprite: ssSprites.blueShip,
					startFrom: [spaceHeight,spaceWidth / 2.5 ],
			  	endAt: ['-300',spaceWidth / 2.5],
			  	speed: 8000,
			  	easing: 'easeOutCubic'
				},

				{
					sprite: ssSprites.asteroid2,
					startFrom: [spaceHeight - (spaceHeight / 3), spaceWidth + 500],
					endAt: [spaceHeight - (spaceHeight / 3), -100],
			  	speed: 130000
				},
  			{
  				sprite: ssSprites.greenShip225,
  				startFrom: [-100, (spaceWidth / 2)],
  				endAt: [spaceWidth / 2, -100],
  		  	speed: 6000
  			},		
				{
					sprite:	ssSprites.saucer,
					startFrom: [spaceHeight - 225, ((spaceWidth / 3) * 2)],
			  	endAt: [spaceHeight - 225, -100],
			  	easing: 'easeInCubic',
			  	speed: 100000
			  	
				}
			]
    },
    
    scene5: {
      sprites: [
				{
					sprite: ssSprites.orangeShip,
					startFrom: [spaceHeight,spaceWidth  - 200 ],
			  	endAt: ['-300', spaceWidth - 100],
			  	speed: 8000,
			  	easing: 'easeOutCubic'
				}


			
			]
    },
    scene6: {
      sprites: [
				{
  				sprite: ssSprites.orangeShip225,
  				startFrom: [spaceHeight - ((spaceHeight / 3) * 2), spaceWidth],
  				endAt: [spaceHeight + (spaceHeight / 3), -100],
  		  	speed: 6000
  			},
  				{
  					sprite: ssSprites.redShip315,
  					startFrom: [spaceHeight,spaceWidth  + 500 ],
  			  	endAt: [-500, 0],
  			  	speed: 8000,
  			  	easing: 'easeOutCubic'
  				}


			
			]
    },
     scene7: {
        sprites: [
  				{
    				sprite: ssSprites.orangeShip225,
    				startFrom: [spaceHeight - ((spaceHeight / 3) * 2), spaceWidth],
    				endAt: [spaceHeight + (spaceHeight / 3), -100],
    		  	speed: 6000
    			},
    				{
    					sprite: ssSprites.blueShip315,
    					startFrom: [spaceHeight,spaceWidth  + 500 ],
    			  	endAt: [-500, 0],
    			  	speed: 8000,
    			  	easing: 'easeOutCubic'
    				}



  			]
      }
    
  }
  
});

jQuery.fn.spaceScape = function(options) {
	
	var settings = {	
	};
	    
	return this.each(function() {        

	    if ( options ) { 
	    	$.extend( settings, options );
	     }

       var spaceWidth = $(document).width();
       var spaceHeight = $(document).height();;

       
       
		
		

		$(this).append($('<div id="space"></div>'));
		$('#space').css({width: spaceWidth, height: spaceHeight});

    var sceneIteration = 0;
		function animateScene(scene, i) {
		  
		  for(var i = 0; i < scene.sprites.length; i++) {
  			$('#space').append($('<div id="' + scene.sprites[i].sprite.spriteId + '-' + sceneIteration + '-' + i + '" class="' + scene.sprites[i].sprite.cssClass + '"></div>').hide());

  		}

		  for(var i = 0; i < scene.sprites.length; i++) {
  		  $('#' + scene.sprites[i].sprite.spriteId + '-' + sceneIteration + '-' + i ).css({	position: 'absolute', 'z-index': 2, width: scene.sprites[i].sprite.width, height: scene.sprites[i].sprite.height, top: scene.sprites[i].startFrom[0] + 'px', left: scene.sprites[i].startFrom[1] + 'px', 'background': 'url(' +scene.sprites[i].sprite.spriteImage +') scroll no-repeat 0 0'});

        $('#' + scene.sprites[i].sprite.spriteId + '-' + sceneIteration + '-' + i ).fadeIn(3000)                
  		  if(null != scene.sprites[i].sprite.preHook) {
          scene.sprites[i].sprite.preHook($('#' + scene.sprites[i].sprite.spriteId + '-' + sceneIteration + '-' + i ));
        }

        $('#' + scene.sprites[i].sprite.spriteId + '-' + sceneIteration + '-' + i ).fadeIn(3000).animate({
  			    left: scene.sprites[i].endAt[1],
  			    top: scene.sprites[i].endAt[0],
            easing: null != scene.sprites[i].easing ? scene.sprites[i].easing : ''
  		    }, scene.sprites[i].speed, function() {

  		    }
  		  );

  		  $('#' + scene.sprites[i].sprite.spriteId + '-' + sceneIteration + '-' + i ).fadeIn(3000);  		  
		  }

		 
		  sceneIteration++;
		}

    
    function initAnimation() {
      for(var i = 0; i < settings.scenes.length; i++) {

          if(null != settings.scenes[i].scene) {

          if(i == 0) {
          animateScene(settings.scenes[i].scene,i);          
          } else {
            var scene = settings.scenes[i].scene;
            setTimeout(function(){animateScene(scene,i)},settings.scenes[i].duration);

          }
        }


      }
      
    }

		  
        
     
    
    initAnimation();
    setInterval(function(){initAnimation();},120000);

	    });
	
	
}