var x = 150;
var y = 150;
var oldX = 150;
var oldY = 150;

var dx = 2;
var dy = 4;

var maxSpeed = 4;

var ctx;
var WIDTH = 2000;
var HEIGHT = 1000;

var intervalID = 0;

var cursorX = 150;
var cursorY = 150;

var lineColor = 'rgba(255,0,100,.2)';
var clearColor = 'rgb(255,255,255)';

var particleCount = 0;
var particleList = {};
var ctCanvas = document.getElementById("canvas");
var showLog = false;

function init() {
	if ($.browser.msie && document.all){
		// This timer is here cause IE needs to catch it's breath before using canvas mods
  		//alert("PC MODE");
  		setTimeout("initCanvasVars();",100);
  		setTimeout("initCanvasSize();",200);
  		showLog = false;
  	} else {
  		initCanvasVars();
  		initCanvasSize();
  	
  	
  	
	  	$('object').width(620);
	  	$('embed').width(620);
	  	$('object').height(480);
	  	$('embed').height(480);
  	
  	
  	
  	}
}

function initCanvasVars(){
	//alert("INIT VARS");
	ctx = $('#canvas')[0].getContext("2d");
	ctCanvas = document.getElementById("canvas");
	globalCompositeOperation = "source-over";
	
	//console.log(window.innerHeight);
	if ($.browser.msie && document.all){
		intervalId = setInterval(draw, 10);
	} else {
		intervalId = setInterval(draw, 1);
	}
	return intervalId;
}

/*
function initCanvasSize(){
	ctCanvas.width = document.body.clientWidth;//window.innerWidth;
	ctCanvas.height = document.documentElement.clientHeight;//window.innerHeight;
}
*/
function initCanvasSize(){
	// check for IEs innerHeight alternative
	if (window.innerHeight > 0){
		// For Everyone
		HEIGHT =  window.innerHeight;
 		WIDTH =  window.innerWidth;
 	} else {
 		// Just for IE
		WIDTH = document.body.clientWidth;
		HEIGHT = document.documentElement.clientHeight;
	}
	
	if (HEIGHT < $("#column1").height() + 200 ){
		HEIGHT = $("#column1").height() + 200;
	}
	ctCanvas.width = WIDTH - 15;
	ctCanvas.height = HEIGHT;
	
	log(window.innerHeight);
}


$(document).ready(function(){
	$(".rand").each(function () {
		var newColor = getRandomColor();
		$(this).css("color",newColor);
	});
	$(".random-color").each(function () {
		var newColor = getRandomColor();
		$(this).css("color",newColor);
	});
	// ONLY USED for :hover STYLES
	$(".rand-bg").each(function () {
		var myColorNum = Math.round(Math.random()*(4));
		$(this).addClass("rand-bg"+myColorNum);
	});
	// SOLID FILL BG
	$(".rand-bg-solid").each(function () {
		var newColor = getRandomGrayColor();
		$(this).css("background",newColor);
	});
});

function getRandomColor(){
	var myColorArray = [
		"#15c911",
		"#eb00eb",
		"#0fb4fe",
		"#f35000",
		"#b100f3",
		"#fc0000",
		"#1b5aea",
		"#00b927"
	];
	var myColorNum = Math.round(Math.random()*(myColorArray.length-1));
	return myColorArray[myColorNum];
}

function getRandomGrayColor(){
	var myColorArray = [
		"#969696",
		"#848484",
		"#666666",
		"#585858",
		"#cacaca",
		"#d8d8d8"
	];
	var myColorNum = Math.round(Math.random()*(myColorArray.length-1));
	return myColorArray[myColorNum];
}
	
var systemStarted = false;    
function onMouseMove(evt) {
  cursorX = evt.pageX;
  cursorY = evt.pageY;
  if (systemStarted == false){
  	systemStarted = true;
  	initParticleSystem();
  }
}

function line(x,y,r) {
	ctx.lineWidth = .5;
	ctx.strokeStyle = lineColor;
    ctx.beginPath();
    ctx.moveTo(oldX,oldY);
    ctx.lineTo(x,y);
    ctx.stroke();
	
	oldX = x;
	oldY = y;
}

function circle(x,y,r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI*2, true);
  ctx.closePath();
  ctx.fill();
}


function gradientDot(x,y,r,a){

	
	var rOffset = Math.round(r/2);
	var cX = x - rOffset;
	var cY = y - rOffset;
	var radgrad = ctx.createRadialGradient(x,y,0,x,y,r);
	radgrad.addColorStop(0, 'rgba(1,159,98,'+a+')' );
	radgrad.addColorStop(0.9, 'rgba(255,255,255,'+a+')' );
	//radgrad.addColorStop(1, 'rgba(1,159,98,0)');
	ctx.fillStyle = clearColor;
	ctx.beginPath();
  	ctx.arc(x, y, r, 0, Math.PI*2, true);
  	ctx.closePath();
  	ctx.fill();

	ctx.fillStyle = radgrad;
	ctx.beginPath();
  	ctx.arc(x, y, r, 0, Math.PI*2, true);
  	ctx.closePath();
  	ctx.fill();
	//ctx.fillRect(cX,cY,r);
}

function rect(x,y,w,h) {
  ctx.beginPath();
  ctx.rect(x,y,w,h);
  ctx.closePath();
  ctx.fill();
}

function fade() {
  ctx.fillStyle = "rgba(255, 255, 255, .025)"
  ctx.beginPath();
  ctx.rect(0,0,WIDTH,HEIGHT);
  ctx.closePath();
  ctx.fill();
}

function clear() {
	ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

$(document).mousemove(onMouseMove);

// Logging that i can turn off
function log(m){
	if (showLog){
	//	console.log(m);
	}
}