var JN = JN || {};
JN.Circles = new (function() {
	var	width,
		height,
		circles = [],
		twinkleTimer,
		me = this;
	addLoadEvent(function() {
		if (J2.isIE) return;
		updateWindowSize();
		var count = Math.min(Math.floor(Math.random() * Math.min(width,height)), 150);
		//for the number of randoms, create a circle for each one
		for (var i = 0; i<count; i++) {
			circles.push(new Circle(i));
		}
		startTwinkle();
		addEvent("resize", handleResize, 0);
	});
	
	this.startTwinkle = startTwinkle;
	
	this.stopTwinkle = function() {
		clearTimeout(twinkleTimer);
	}
	
	function startTwinkle() {
		var timeout = Math.round(Math.random() * 2500);
		twinkleTimer = setTimeout( doTwinkle, timeout);
	}
	function doTwinkle() {
		var m = (Math.round(Math.random() * 10) % 2) + 1;
		var i = Math.round(Math.random() * 10 * Math.pow(10, m));
		if (circles[i]) circles[i].doTwinkle();
		startTwinkle();
	}
	
	function handleResize() {
		updateWindowSize();
		for (var i = circles.length - 1; i>=0; i--) {
			circles[i].handleResize();
		}
	}
	function getSize(i) {
		var seed = Math.min(width, height);
		var random = Math.round(Math.random()*10);
		seed = Math.min( Math.max(seed/700, 0.7), 0.9 );
		random = random * ((i % 5)+2) * seed;
		return Math.round(random + (random % 2));
	}
	function updateWindowSize() {
		width = J2.Window.width();
		height = J2.Window.height();
	}
	
	function Circle(i) {
		this.i = i;
		
		this.circle = document.createElement("div", {cssClass: "circle"});
		this.opacity = Math.min(Math.random(), 0.65)
		this.size = getSize(i);
		
		document.body.appendChild(this.circle);
		var me = this;
		var delay = Math.round(1000 * Math.random());
		setTimeout( function() {me.show()}, delay );
	}
	Circle.prototype = {
		currentDisplay: "block",
		shrink: function() {
			this.circle.setStyle("opacity", 0);
			this.circle.setStyle("width", 0);
			this.circle.setStyle("height", 0);
			this.circle.setStyle("-moz-border-radius", 0);
			this.circle.setStyle("-webkit-border-radius", 0);
		},
		grow: function() {
			var me = this;
			var animTime = Math.round(Math.random() * 200);
			this.circle.animate( {
				opacity: {
					to: 1,
					time: animTime,
					transition: J2.Transitions.Exp.easeIn
				},
				width: {
					to: this.size,
					time: animTime,
					transition: J2.Transitions.Exp.easeIn
				},
				height: {
					to: this.size,
					time: animTime,
					transition: J2.Transitions.Exp.easeIn
				},
				"-moz-border-radius": {
					to: this.size/2,
					time: animTime,
					transition: J2.Transitions.Exp.easeIn
				},
				"-webkit-border-radius": {
					to: this.size/2,
					time: animTime,
					transition: J2.Transitions.Exp.easeIn
				}
			}, function() {me.show(false);} );
		},
		show: function(setPosition) {
			if (setPosition !== false)
				this.position();
			this.circle.setStyle("opacity", this.opacity);
			this.circle.setStyle("width", this.size);
			this.circle.setStyle("height", this.size);
			this.circle.setStyle("-moz-border-radius", this.size/2);
			this.circle.setStyle("-webkit-border-radius", this.size/2);
		},
		position: function() {
			var h = Math.max( (width - this.size) * Math.random(), 5 ),
				v = Math.max( (height - this.size) * Math.random(), 5 ),
				hD = Math.round((Math.random()*10)) % 2 ? "left" : "right",
				vD = Math.round((Math.random()*10)) % 2 ? "top" : "bottom";
			
			this.circle.setStyle(hD , h);
			this.circle.setStyle(vD , v);
			
			this.offset = {
				top: vD === "top" ? v : height - v,
				left: hD === "left" ? h : width - h
			};
		},
		doTwinkle: function() {
			this.shrink();
			this.grow();
		},
		handleResize: function() {
			var display = "block";
			if (!this.offset) return;
			if (this.offset.top+this.size > height || this.offset.left+this.size > width) {
				display = "none";
			}
			if (display !== this.currentDisplay) {
				this.currentDisplay = display;
				this.circle.setStyle("display", display);
			}
		}
	};
});