var word1, word2, word3, word4;
var g;
var mouseX, mouseY;
var userInteractionEnabled = false;
var mousedIn = false;
var offSetX, offSetY;




function init(path) {
	var o = $("#main").offset();
	offSetX = o.left;
	offSetY = o.top;
	// get main context stuff
	g=$('#main_canvas')[0].getContext("2d");
	WIDTH=$("#main_canvas").width();
	HEIGHT=$("#main_canvas").height();

	// create our words from the images supplied
	// since firefox is stinking slow, I cut the particles in half basically
	if ($.browser.mozilla) {
		word1 = new ParticleShape(path+"/img/transforming.png", 160, ["#38404D"], "#hidden_canvas_1", 280, 62);
		word2 = new ParticleShape(path+"/img/research.png", 116, ["#8FC8C7"], "#hidden_canvas_2", 280, 132);
		word3 = new ParticleShape(path+"/img/medicine.png", 95, ["#74C690"], "#hidden_canvas_3", 280, 202);
		word4 = new ParticleShape(path+"/img/lives.png", 46, ["#AFB0B2"], "#hidden_canvas_4", 280, 272);
	}
	else {
		word1 = new ParticleShape(path+"/img/transforming.png", 301, ["#38404D"], "#hidden_canvas_1", 280, 62);
		word2 = new ParticleShape(path+"/img/research.png", 210, ["#8FC8C7"], "#hidden_canvas_2", 280, 132);
		word3 = new ParticleShape(path+"/img/medicine.png", 203, ["#74C690"], "#hidden_canvas_3", 280, 202);
		word4 = new ParticleShape(path+"/img/lives.png", 98, ["#AFB0B2"], "#hidden_canvas_4", 280, 272);
	}

	// set time intervals for them to spell out
	setTimeout(function(){word1.spell(); setTimeout(function(){letterFade(word1)}, 2000);}, 1500);
	setTimeout(function(){word2.spell(); setTimeout(function(){letterFade(word2);}, 2000);}, 2000);
	setTimeout(function(){word3.spell(); setTimeout(function(){letterFade(word3);}, 2000);}, 2500);
	setTimeout(function(){word4.spell(); setTimeout(function(){letterFade(word4);userInteractionEnabled = true;}, 2000);}, 3000);

	// this was really the only way to get the mouse events working properly. Not ideal but it works.
	$("#main_canvas").mousemove(function(e){
		mouseX = e.pageX;
		mouseY = e.pageY;
		mouseOverEvent(word2);
		mouseOverEvent(word3);
		mouseOverEvent(word4);
	});

	return setInterval(draw,20); //draw called every 20 miliseconds
}

function draw(){

	// clear the context
	g.globalAlpha=1.0;
	g.fillStyle="#FFFFFF";
	g.fillRect(0,0,WIDTH,HEIGHT);
	
	// draw all the words
	word1.draw();
	word2.draw();
	word3.draw();
	word4.draw();
}


function mouseOverEvent(particleWord) {

	if (userInteractionEnabled) {
		if (!mousedIn && mouseX-offSetX >= particleWord.x && mouseX-offSetX <= particleWord.x + particleWord.width && mouseY-offSetY >= particleWord.y && mouseY-offSetY <= particleWord.y + particleWord.height && !particleWord.exploded) {
			mousedIn = true;
			particleWord.explode();
			particleWord.makeColor();
			particleWord.hideImage();
			clearTimeout(particleWord.timeout);
			particleWord.exploded = true;
		}
		else if (mousedIn && particleWord.exploded && (mouseX-offSetX < particleWord.x || mouseX-offSetX > particleWord.x + particleWord.width || mouseY-offSetY < particleWord.y || mouseY-offSetY > particleWord.y + particleWord.height)) {
			mousedIn = false;
			particleWord.showParticles();
			particleWord.spell();
			particleWord.timeout = setTimeout(function(){letterFade(particleWord)}, 2000);
			particleWord.exploded = false;	
		}
	}
}

function letterFade(particleWord) {
	particleWord.makeBlack(); 
	particleWord.showImage(); 
	setTimeout(function(){particleWord.hideParticles();}, 1000);
	
	if (particleWord == word1)
		setTimeout(function(){particleWord.destroyParticles();}, 3000);
	
}