/*!
 * Fancy animation for the stripes on the left side
 * Version 1. Flowing bubbles
 */
var animation = function(){	

	var particles = Array();

	var amount = 10;
	
	var colors = { 
    yellow: '#ffed00', 
    magenta: '#e2007a', 
    cyan: '#009ee0', 
    grey: '#8a8c99'
  };

	var mouse = {x: 612, y: 384};		
	
	var Particle = function(options) { this.init(options); };
	Particle.prototype = {
		
		color: 'yellow',
		x: 0,
		y: 0,
		dx: 1,
		dy: 1,
		size: 10,
		element: null,
		life: 180,
		
		init: function(options) {
			$.extend(this, options);
			this.element = $("<div class='particle "+this.color+"'></div>'");	
			this.update()					
			$('body').append(this.element);
		},
		
		update: function() {
			this.element.css({left: this.x, top: this.y, width: this.size + 'px', height: this.size + 'px', opacity: this.life/100});					
			this.x += this.dx;
			this.y += this.dy;
			// use mouse as anti-gravity, first - calculate distance
			var d = Math.sqrt((this.x - mouse.x)*(this.x - mouse.x) + (this.y - mouse.y)*(this.y - mouse.y));
			// just made up this formula - but it looks nice
			this.dx = (this.dx + ((this.x - mouse.x) / d*2)) / 2;
			this.dy = (this.dy + ((this.y - mouse.y) / d*2)) / 2;
			
			this.size += 20/this.life;
			this.life--;
		}			
	};		

	$('div#logo div').bind("mouseover mouseenter mouseleave click", function(evt) {				
		var posX = evt.pageX;
		var posY = evt.pageY;
		var emitter = $(evt.target);
		
		if(emitter.hasClass('yellow')) var color = 'yellow';
		if(emitter.hasClass('cyan')) var color = 'cyan';
		if(emitter.hasClass('magenta')) var color = 'magenta';
		
		// emit some particles				
		for(var i = 0; i < amount; i++) 
			particles.push(new Particle({
				x: posX, 
				y: posY, 
				color: color, 
				dx: Math.floor(Math.random()*50)-25, 
				dy: Math.floor(Math.random()*50)-25,
				life: Math.floor(Math.random()*100)
			}));
    
    return false;
	});
	
	$('body').mousemove(function(evt) {
		mouse.x = evt.pageX;
		mouse.y = evt.pageY;
	});
	
	function step() {
		var startTime = new Date();
		
		// process all particles and render them
		$.each(particles, function(index, particle) {
			if(particle) {
				particle.update();
				if(particle.life <= 0) {
					particle.element.remove();
					particles.splice(index,1);
				}
			}
		});
		
		var elapsed = new Date() - startTime;
		// We want a stable framerate of 25fps
		// One frame has a duration of 1000ms/25 = 40ms
		// if our elapsedtime is smaller then this, we gonna wait a while
		// otherwise we will execute the next step immediately
		if(elapsed < 40)
			window.setTimeout(step, 40-elapsed);
		else
			step();
	};	
	
	step();
	
};