//////////////////////////////////////////////////
//ertdfgcvb - head 0
//2010
//////////////////////////////////////////////////
//defined in header:
//var templateURL; 
//var colorA;
//var colorB;
//////////////////////////////////////////////////

var WIDTH = 1008;
var HEIGHT = 181;
var OFFSETX = 0;
var OFFSETY = 0;

var canvas;
var context;

var perlin;
var dots;
var clearDots;

//////////////////////////////////////////////////
window.onload = function(){
	setup();
	var interval = setInterval(draw, 1000 / 25);
}

//////////////////////////////////////////////////
function setup() {

	canvas = document.getElementById("headerCanvas");
	canvas.width = WIDTH;
	canvas.height = HEIGHT;
	context = canvas.getContext("2d");
	
	//canvas offset
	var element = canvas; 
	if (element.offsetParent) {
		do {
			OFFSETX += element.offsetLeft;
			OFFSETY += element.offsetTop;
		} while (element = element.offsetParent);
	}
    
    //globals & stuff
	perlin = new PerlinNoise();
	dots = new Array();
	clearDots = new Array();
	
	var img = new Image();
	
	
	//img.src = templateUrl + '/assets/head/map_low_low_fat.png';	
	img.src = templateUrl + '/assets/head/map_low_slim_2.png';	
	
	img.onload = function() {
		var tmp = document.createElement("canvas");
		tmp.width = img.width;
		tmp.height = img.height;
		tmp.getContext("2d").drawImage(img,0,0);

		var pixels = tmp.getContext("2d").getImageData(0, 0, tmp.width, tmp.height).data;
		var scale = 4;
		var txtOffsX = 128*2;
		var txtOffsY = 16;
		
		for (var i=0; i<pixels.length; i+=4){
			if (pixels[i] == 0) { 	// check only the red channel;
				var dx = Math.floor((i/4) % tmp.width) * scale + txtOffsX;
				var dy = Math.floor((i/4) / tmp.width) * scale + txtOffsY;
				var d = new Dot(context, dx, dy, 0, colorA, dots);
				dots.push(d);
				
				var c = new Dot(context, dx, dy, 0, colorA, clearDots);
				clearDots.push(c);
			}
		}
	}

	//events
	canvas.addEventListener('mousemove', mouseMoveHandler, false);
	canvas.addEventListener('mousedown', mouseDownHandler, false);
 }
//////////////////////////////////////////////////
function mouseMoveHandler(e){
	var mx = e.pageX - OFFSETX;
	var my = e.pageY - OFFSETY;
	if (dots.length < 900) {
		var d = new Date();		
		var a = d.getMilliseconds() / 500;
		//for(var i=0; i<3; i++){
			var d = new Dot(context, mx, my, 1, colorB, dots);
			d.setAng(a);
			dots.push(d);
		//}
	}	
}
//////////////////////////////////////////////////
function mouseDownHandler(e){
	dots = [];
	context.clearRect(0,0,WIDTH,HEIGHT);
}

//////////////////////////////////////////////////
function draw() {
	for(var i=0; i<dots.length; i++){
		dots[i].paint();
	}

	for(var i=0; i<clearDots.length; i++){ 
		clearDots[i].clear();
	}
}

/////////////////////////////////////////////
function Dot(context, ox,  oy, type, col, myList){

	this.context = context;
	this.ox = ox;
	this.oy = oy;
	this.type = type;
	this.col = col;
	this.myList = myList;

	this.dead = false;
	this.dotSize = 4;
	this.offsY = 1;
	this.life = -1;	
	this.px = ox + Math.random()*14-7;
	this.py = oy + Math.random()*14-7;
	this.speed = Math.random()*2+1;
	this.life = Math.floor(Math.random() * 150 + 100);
	this.ang = Math.random() * Math.PI * 2;
	this.pat = Math.floor(Math.random() * 3);

	if (typeof(_Dot_prototype_called_) == 'undefined'){
		_Dot_prototype_called_ = true;
		Dot.prototype.setAng = setAng;
		Dot.prototype.paint = paint;
		Dot.prototype.kill = kill;
		Dot.prototype.clear = clear;
	}

	//----------------------------------------------------------------
	function setAng(a){
		ang = a;
	}

	//----------------------------------------------------------------
	function paint(){
		var a = perlin.noise(this.px * 0.01, this.py * 0.01) * 16.0 + this.ang; //perlin global
		
		this.px += Math.cos(a) * this.speed;
		this.py += Math.sin(a) * this.speed;			
		var gx = Math.floor(this.px/this.dotSize)*this.dotSize;
		var gy = Math.floor(this.py/this.dotSize)*this.dotSize + this.offsY;
		this.context.fillStyle = this.col;
		if (this.pat == 0){
			context.fillRect(gx+1, gy+1, 1,1); //rect seems faster than setting a pixel
		} else if (this.pat == 1){
			this.context.fillRect(gx,   gy,   1,1);
			this.context.fillRect(gx+2, gy+2, 1,1);
			this.context.fillRect(gx+2, gy,   1,1);
			this.context.fillRect(gx,   gy+2, 1,1);
		} else if (this.pat == 2){
			this.context.fillRect(gx+1, gy,   1,1);
			this.context.fillRect(gx+2, gy+1, 1,1);
			this.context.fillRect(gx+1, gy+2, 1,1);
			this.context.fillRect(gx,   gy+1, 1,1);
		}

		if(this.px < 0 || this.px > WIDTH) this.kill();
	}

	//----------------------------------------------------------------
	function kill(){
		for(var i=0; i<myList.length; i++){
			if (myList[i] == this) {
				myList.splice(i,1);
				break;
			}
		}
	}

	//----------------------------------------------------------------	
	function clear(){		
		this.context.clearRect(this.ox, this.oy + this.offsY, this.dotSize-1,this.dotSize-1);
	}	
}