var balls = [];
var groupA = new Group();
var groupB = new Group();

var Ball = Base.extend({
	initialize: function(point, vector){
		if(!vector || vector.isZero()){
			this.vector = Point.random() * 5;
		}else{
			this.vector = vector * 2;
		}
		this.point = point;
		this.dampen = 0.4;
		this.gravity = 0.02;
		this.bounce = -0.4;

		if(isSmartPhone()){
			this.radius = 10 * Math.random() + 40;
		}else{
			//this.radius = 20 * Math.random() + 40;
			this.radius = 50 * Math.random() + 180;
		}
		this.createPathsA();
		groupA.addChild(this.item);
		this.createPathsB();
		groupB.addChild(this.item);
	},
	createPathsA: function() {
		this.item = new Path.Circle(this.point, this.radius);
		this.item.fillColor = '#cccccc';
	},
	createPathsB: function() {
		this.item = new Path.Circle(this.point, this.radius - 4);
		this.item.fillColor = '#f0f0f0';
	},
	iterate: function(i) {
		var size = view.size;
		this.vector.y += this.gravity;
		this.vector.x *= 0.99;
		var pre = this.point + this.vector;
		if(pre.x < this.radius || pre.x > size.width - this.radius){
			this.vector.x *= -this.dampen;				
		}
		if(pre.y < this.radius || pre.y > size.height - this.radius){
			if(Math.abs(this.vector.x) < 3){
				this.vector = Point.random() * [150, 100] + [-75, 20];
			}
			this.vector.y *= this.bounce;
		}
		var max = Point.max(this.radius, this.point + this.vector);
		groupA.children[i].position = this.point = Point.min(max, size - this.radius);
		groupB.children[i].position = this.point = Point.min(max, size - this.radius);
	}
});

for(var i = 0; i < 6; i++){
	var position = Point.random() * view.size;
	var vector = (Point.random() - [0.5, 0]) * [50, 100];
	var ball = new Ball(position, vector);
	balls.push(ball);
}

function onFrame() {
	if(isSmartPhone()){
		return;
	}
	for(var i = 0; i < balls.length; i++){
		balls[i].iterate(i);
	}
}