(function(window){

function Wave(){
	this.initialize.apply(this,arguments);
}
var p = Wave.prototype;
	p.waveCanvas = null;
	p.ballArray = null;
	p.isActive = false;
	p.intervalId = null;

	p.initialize = function(targetId,segment,height,replaceImageSrc){
		var target = document.getElementById(targetId);
		var canvasElement = document.createElement('canvas');
		if(typeof canvasElement.getContext === 'undefined'){
			var replaceImage = document.createElement('img');
			replaceImage.setAttribute('src',replaceImageSrc);
			replaceImage.setAttribute('id',targetId);
			replaceImage.style.top = "130px";
			target.parentNode.replaceChild(replaceImage,target);
			this.addBall = this.onScroll = this.active = function(){};
			document.getElementById('aboutball1').style.display = "none";
			document.getElementById('aboutball2').style.display = "none";
			document.getElementById('aboutball3').style.display = "none";
			document.getElementById('aboutball4').style.display = "none";
			return;
		}
		canvasElement.setAttribute('width',target.offsetWidth);
		canvasElement.setAttribute('height',target.offsetHeight);
		canvasElement.setAttribute('id',target.id);
		target.parentNode.replaceChild(canvasElement,target);
		this.waveCanvas = new WaveCanvas(canvasElement,segment,height);
		this.ballArray = [];
	}
	p.addBall = function(element){
		var ball = new Ball(element);
		this.ballArray.push(new Ball(element));
	}
	p.active = function(bool){
		if(!bool && this.isActive)
		{
			clearTimeout(this.intervalId);
			this.isActive = false;
		}
		else if(bool && !this.isActive)
		{
			this.update();
			this.isActive = true;
		}
	}
	p.update = function(){
		var i,l = this.ballArray.length;
		for(i =0; i < l; i++)
		{
			this.waveCanvas.collision(this.ballArray[i]);
			this.ballArray[i].update();
		}
		this.waveCanvas.update();
		var that = this;
		var arg = arguments;
		this.intervalId = setTimeout(function(){that.update.apply(that,arg);},20);
	}

function WaveCanvas(){
	this.initialize.apply(this,arguments);
	}
var p = WaveCanvas.prototype;
	p.canvasElement = null;
	p.context = null;
	p.canvasWidth = 0;
	p.canvasHeight = 0;
	p.points = null;
	p.height = 0;
	p.initialize = function(canvasElement,segment,height){
		this.canvasElement = canvasElement;
		this.context = this.canvasElement.getContext('2d');
		this.canvasWidth = this.canvasElement.width;
		this.canvasHeight = this.canvasElement.height;
		this.height = height;
		this.points = [];
		for(var i = 0; i < segment;i++ ){
			this.points.push({x:this.canvasWidth/segment*i,y:this.height,vx:0,vy:0});
		}
	}
	p.update = function(){
		this.context.save();
		this.context.clearRect(0,0,this.canvasWidth,this.canvasHeight);
		this.context.strokeStyle = '#FFFFFF';
		this.context.beginPath();
		var i,l = this.points.length - 1;
		for(i = 0; i < l ;i++)
		{
			if(i == 0) this.context.moveTo(this.points[i].x, this.points[i].y);
			else{
				var p2x = this.points[i].x;
				var p2y = this.points[i].y;
				var p3x = (this.points[i+1].x + this.points[i].x)/2;
				var p3y = (this.points[i+1].y + this.points[i].y)/2;
				this.context.bezierCurveTo(p2x, p2y,p2x, p2y,p3x, p3y);
			}
		}
		this.context.stroke();
		this.context.restore();
	}
	p.collision = function(ball){
		var i,l = this.points.length;
		var point;

		ball.vy += ball.ay + ball.gravity;
		ball.vy *= 0.985;
		ball.y += ball.vy;
		ball.x += ball.vx;

		for(i = 0; i < l ;i++)
		{
			point = this.points[i];
			var dist = Math.sqrt((point.x-ball.x)*(point.x-ball.x) + (point.y-ball.y)*(point.y-ball.y));
			if(dist <= ball.r){
				point.y = Math.sqrt(ball.r * ball.r - (ball.x-point.x) * (ball.x-point.x)) + ball.y;
				ball.vx = ball.vx - 0.1 * Math.random() + 0.05;
				ball.ay = ball.ay - 0.1;
			}
			else{
				point.vy += (this.height - point.y) * 0.005;
			}
			ball.ay = ball.ay*0.99;
			if(ball.x-ball.r < 0) {
				ball.vx = 2;
			}
			if(ball.x+ ball.r > this.canvasWidth) {
				ball.vx = -2;
			}
		}
		for(i = 0; i < l ;i++)
		{
			point = this.points[i];
			if(this.points[i-1]) this.points[i-1].vy += this.points[i].vy/40;
		}
		for(i = l; i > 0 ;i--)
		{
			point = this.points[i];
			if(this.points[i+1]) this.points[i+1].vy += this.points[i].vy/40;
		}
		for(i = 0; i < l ;i++)
		{
			point = this.points[i];
			point.vy = point.vy*0.95;
			point.y += point.vy;
			point.x += point.vx;
		}
		if(ball.y > this.canvasHeight) ball.y = 0;
	}

function Ball(){
	this.initialize.apply(this,arguments);
}
var p = Ball.prototype;
	p.element = null;
	p.x = 0;
	p.y = 0;
	p.vx = 0;
	p.vy = 0;
	p.ay = 0;
	p._r = 0;
	p.gravity = 0.2;

	p.initialize = function(element){
		this.element = element;
		var img = this.element.getElementsByTagName('img')[0];
		this.r = img.offsetWidth/2;
		img.style.position = "relative";
		img.style.top = -this.r + "px";
		img.style.left = -this.r + "px";
		this.x = Math.random()*700;
		var that = this;
		this.element.style.position = "absolute";
		this.element.onclick = function(e){that.onClick.call(that,e);}
	}
	p.update = function(){
		this.element.style.left = this.x + "px";
		this.element.style.top = this.y + "px";
	}

window.Wave = Wave;
}(window));