(function(window){

function RopeCanvas(){
	this.initialize.apply(this,arguments);
}
var p = RopeCanvas.prototype;
	p.targetAry = null;
	p.ballAry = null;
	p.canvasElement = null;
	p.context = null;
	p.canvasWidth = 0;
	p.canvasHeight = 0;
	p.isActive = false;
	p.intervalId = null;
	
	p.initialize = function(canvasElement,replaceImageSrc){
		if(!canvasElement.getContext) {
			this.add = this.active = function(){};
			var img = document.createElement('img');
			img.setAttribute('src',replaceImageSrc);
			img.style.position = "absolute";
			img.style.top = "40px";
			img.style.left = "215px";
			canvasElement.parentNode.replaceChild(img,canvasElement);
			return;
		}
		this.canvasElement =canvasElement;
		this.context = canvasElement.getContext('2d');
		this.context.beginPath();
		this.canvasWidth = this.canvasElement.width;
		this.canvasHeight = this.canvasElement.height;
		this.targetAry = [];
		this.ballAry = [];
		this.context.strokeStyle = "#1F9AFE";
	}
	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.add = function(targetBall1,asset1,targetBall2,asset2){
		this.targetAry.push({start:targetBall1,startAsset:asset1,end:targetBall2,endAsset:asset2});
		this.ballAry.push(targetBall2);
	}
	p.update = function(){
		this.context.save();
		this.context.clearRect(0,0,this.canvasWidth,this.canvasHeight);
		var i,l;
		for(i=0,l = this.ballAry.length;i<l;i++)
		{
			this.ballAry[i].update();
		}
		for(i=0,l = this.targetAry.length;i<l;i++)
		{
			var target = this.targetAry[i];
			this.context.beginPath();
			this.context.moveTo(target.start.x()+target.startAsset.x,target.start.y()+target.startAsset.y);
			this.context.lineTo(target.end.x()+target.endAsset.x,target.end.y()+target.endAsset.y);
			this.context.stroke();
		}
		this.context.restore();
		var that = this;
		var arg = arguments;
		this.intervalId = setTimeout(function(){that.update.apply(that,arg);},33);
	}

function BlankBall(){
	this.initialize.apply(this,arguments);
}
var p = BlankBall.prototype;
	p.initialize = function(x,y){
		this._x = x;
		this._y = y;
	}
	p.x = function(value){
		if(typeof value !== 'undefined') this._x = value;
		else return this._x;
	}
	p.y = function(value){
		if(typeof value !== 'undefined') this._y = value;
		else return  this._y;
	}

function RopeBall(){
	this.initialize.apply(this,arguments);
}
var p = RopeBall.prototype;
	p.element = null;
	p._x = 0;
	p._y = 0;
	p.vtheta = 0;
	p.theta = 0;
	p.distance = 0;
	p.parent = null;
	p.child = null;
	
	p.initialize = function(element,distance,theta){
		this.element = element;
		this.distance = distance;
		this.theta = theta;
		this.parent = {x:function(){return 0},y:function(){return 0}}
	}
	p.move = function(value){
		this.vtheta += value;
		if(this.child) this.child.vtheta -=value/10;
		if(this.parent) this.parent.vtheta +=value/5;
	}
	p.update = function(){
		var e = 1 - Math.cos(this.theta);
		if(this.x() > 0 ) e = -e;
		this.vtheta += e;
		this.theta += this.vtheta/100;
		this.y(this.distance * Math.cos(this.theta) + this.parent.y());
		this.x(this.distance * Math.sin(this.theta) + this.parent.x());
		if(this.child) this.child.vtheta -= this.vtheta/100;
		if(this.parent) this.parent.vtheta += this.vtheta/100;
		this.vtheta *=0.99;
	}
	p.x = function(value){
		if(typeof value !== 'undefined')
		{
			this._x = value;
			this.element.style.left = value + "px";
		}
		else return this._x;
	}
	p.y = function(value){
		if(typeof value !== 'undefined')
		{
			this._y = value;
			this.element.style.top = value + "px";
		}
		else return  this._y;
	}
	p.setParent = function(parent){
		this.parent = parent;
		this.parent.child = this;
	}

window.BlankBall = BlankBall;
window.RopeBall = RopeBall;
window.RopeCanvas = RopeCanvas;

}(window));