/**
 * BlueMars People-Animation 
 */
function animation() {

	// 1st, preload images needed for animation
	function preload(urls) {
		ret = [];
		for ( var i = 0, ito= urls.length; i<ito; i++ ) {
			var image = new Image();
			image.src = "/fileadmin/templates/img/" + urls[i];
			ret.push(image);
		}
		return ret;
	};
	preload([
		"spray_black.png",
		"intro_sprayfrontal_blue.png",
		"intro_sprayfrontal_black.png",
		"graffiti.png",
		"graffiti.png",
		"sprayer.png",
		"banderole.png",
		"mars.png",
		"pfeil_blau.png"
	]);
	
	$.extend($.easing, {
		
		easein: function(x, t, b, c, d){
			return c * (t /= d) * t + b; // in
		},
		easeinout: function(x, t, b, c, d) {
			if (t < d/2) return 2*c*t*t/(d*d) + b;
			var ts = t - d/2;
			return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b;		
		},
		easeout: function(x, t, b, c, d) {
			return -c*t*t/(d*d) + 2*c*t/d + b;
		}
		
	});
	
	
	var curperson = 1,
		cursprayout = 1,
		curplanet = 1,
		framedelay = 500,
		planetdelay = 200,
		currot = 0,	
		container = $("#main .center"),
		spray = $(
'<div class="sprayholder">\
<div class="spraycan"></div>\
<div class="spraycolor spraycolor-1" style="display:none"></div>\
<div class="spraycolormid" style="display:none"></div>\
<div class="spraycolorblu" style="display:none"></div>\
</div>')
			.appendTo(container),
		spraycan = spray.find(".spraycan"),
		sprayout = spray.find(".spraycolor"),
		sprayoutmid = spray.find(".spraycolormid"),
		sprayoutblu = spray.find(".spraycolorblu"),
		graffiti = $('<div class="graffiti" style="display:none"></div>')
			.appendTo(container),
		planet = $('<div class="planetwrap"><div class="banderole" style="display:none"></div><div class="planet planet-1" style="display:none;"></div></div>')
			.appendTo(container),
		blueplanet = planet.find(".planet"),
		// positions: array of objects
		//   x,y: coordinate [px] 
		//   rotation: angle [deg]
		//   nomove: (opt) flag to set if no position change is wanted
		//   callback: (opt) function to call
		//   css: (opt) object w/additional css to apply to spray 
		//   animate: (opt) object w/additional css to animate spray with
		pos = [
			// move1
			{x:-338, y:640, rotation: -22},
			{x:-220, y:384, rotation: -20},
			{x:-116, y:317, rotation: -4},
			{x:0, y:0, rotation: 0,nomove:true, callback:doSpray},
			{x:0, y:0, rotation: 0,nomove:true, callback:doSpray},
			{x:0, y:0, rotation: 0,nomove:true, callback:doSpray},
			//{x:0, y:0, rotation: 0,nomove:true, callback:doSpray},
			
			{x:111, y:407, rotation: 0, callback:doPerson, delay:600},
			{x:235, y:384, rotation: 0, callback:doPerson, delay:600},
			{x:428, y:400, rotation: -15, callback:doPerson, delay:600},
			{x:587, y:376, rotation: -36, callback:doPerson, delay:600},

			{x:673, y:382, rotation: -36, callback:hideSpray},
			{x:870, y:236, rotation: -20, callback:hideSpray},
			{x:0, y:0, rotation: 0,css:{display:"none"},nomove:true, callback:hideSpray},
			// move 2
			{x:-426, y:36, rotation: 32,css:{display:"block"}},
			{x:-234, y:82, rotation: 15},
			{x:-22, y:122, rotation: 7},
			{x:236, y:193, rotation: 3, callback:doSprayPlanet},
			{x:167, y:147, rotation: 3, callback:doBanderole,nomove:true},
			
			{x:381, y:106, rotation: -27, callback:hideSpray},
			{x:671, y:22, rotation: -27},
			{x:869, y:-43, rotation: -8},
			{x:0, y:0, rotation: 0, animate:{opacity:0}, nomove:true},
			{x:0, y:0, rotation: 0, callback:showArrow, nomove:true}
		],
		curframe = 0,
		maxframe = pos.length-1;
		
	// arrow shown at the end of animation
	function showArrow() {
		startArrow();
		/**
		$('<div class="anim-arrow"></div>')
			.appendTo(container)
			.animate({left:-285},{
				easing: "easeout",
				duration:1000
			});
			*/
	};

	// nextplanet: endlessly changes background image of planet
	function nextPlanet() {
		
		for (var i=1;i<=6;i++){
			blueplanet[i==curplanet ? "addClass" : "removeClass"]( "planet-" + i );
		}
		
		curplanet++;
		if (curplanet>6) curplanet = 1;
		window.setTimeout(nextPlanet, planetdelay);
	};
	
	// shows the banderole
	function doBanderole() {
		sprayoutblu.css({display: "none"});
		planet.find(".banderole").fadeIn();
	};
	
	// blue play on planet
	function doSprayPlanet() {
		sprayoutblu.css({display: "block"});
		blueplanet.css({display: "block"});
		nextPlanet();
	};

	// spray bg anim
	function doSpray() {
		for (var i=1;i<cursprayout;i++)sprayout.removeClass("spraycolor-"+i);
		sprayout.addClass("spraycolor-"+cursprayout);
		
		cursprayout ++;
		graffiti.css({display:"block"});
		sprayout.css({display: "block"});
	};

	// hide all sprayouts
	function hideSpray() {
		sprayout.css({display: "none"});
		sprayoutmid.css({display: "none"});
		sprayoutblu.css({display: "none"});
	};
	
	// show next graffiti person
	function doPerson() {
		curperson++;
		for (var i=0;i<curperson;i++) graffiti.removeClass("graffiti-"+i);
		graffiti.addClass("graffiti-"+curperson);
		sprayout.css({display: "none"});
		sprayoutmid.css({display: "block"});
	};

	// main animation function
	function nextFrame() {
		if (spray.data("stop")) {
			spray.hide();
			planet.hide();
			graffiti.hide();
			return;
		}
		var frm = pos[curframe];
		// apply css and rotation of frame # curframe
		if (frm.css) spray.css(frm.css);
		if (frm.animate) spray.animate(frm.animate);
		if (!frm.nomove) {
			spray.css({
				left: frm.x,
				top: frm.y
			});
			spraycan.rotate(currot = frm.rotation);
			if (sprayoutmid.is(":visible")) {
				var sang = Math.sin(currot*Math.PI/180.0)*spraycan.height()/2,
					cang = (1-Math.cos(currot*Math.PI/180.0))*spraycan.width()/2;
				sprayoutmid.css({left:-22 + sang, top: -160 + cang});
			};
			
	
		};
		// a callback for this frame?
		if (frm.callback) frm.callback();
		curframe++;
		if (curframe<=maxframe) {
			window.setTimeout(nextFrame, frm.delay||framedelay);
		};
	};
	spray.data("nextFrame", nextFrame);
	// here we go: start!
	nextFrame();

	
	
};