var ctx = null;
var canvas = null;
var rubbelDieKatz = true;

//--------------------------
// SETTINGS
//--------------------------
var PXL_DIAMETER = 26;
var USER_IMPACT = 10;
var OPACITY_USER = .05;
var OPACITY_GRID = .02;
var OPACITY_USER_CLICK = .2;
var MIN_COLOR = 0;
var MAX_COLOR = 255;
//--------------------------

var usrX = PXL_DIAMETER;
var usrY = PXL_DIAMETER;

var unicorn = false;
var unicornColor;

var addressVisible = false;

var mailAddress = [];
mailAddress[0] = "hallo";
mailAddress[1] = "@";
mailAddress[2] = "burgeins";
mailAddress[4] = ".de";

var timer_hideIOSURLBar;
function hideIOSURLBar() {
    timer_hideIOSURLBar = window.setInterval( function () { window.scrollTo(0, 1); clearInterval(timer_hideIOSURLBar);},500);
};

window.onload = function init () {

    document.getElementById("toggleContent").onclick = toggleContentVisibility;

	if(supportsCanvas()) {

		ctx = createRenderContextAt('canvas');
		canvas = ctx.canvas;
	
		addListener();
	
		updateFx();
		
		hideIOSURLBar();
	} else {
		
		document.getElementById('leRoot').style.backgroundImage = "url(img/noCanvas.gif)";
	}
	
	insertMail();
};

function toggleContentVisibility() {

    var footer = document.getElementById("footer");

    var currentState = "";

    if(footer.style.display == "none")
    {
        footer.style.display = "block";
        currentState = "expanded";
    } else {
        footer.style.display = "none";
        currentState = "collapsed";
    }

    document.getElementById('toggleContent').className = currentState;
}

function addListener () {

	document.onmousemove = getPos;

	document.onclick = clickUserPos;

	document.onkeydown = checkInput;
	
	window.onresize = resize;
};

function updateGrid () {

    var _width = window.innerWidth + PXL_DIAMETER;
    var _height = window.innerHeight + PXL_DIAMETER;

    for(var x = 0; x <= _width; x += PXL_DIAMETER)
        for(var y = 0; y <= _height; y += PXL_DIAMETER)
			setPixel(x, y);
};

function resize() {
	
	hideIOSURLBar();
	
	canvas.width = document.getElementById('canvas').offsetWidth;
	canvas.height = document.getElementById('canvas').offsetHeight;
};

function updateFx () {

	if(rubbelDieKatz) {

		calcFrameDelta();
		
		ctx.globalAlpha = OPACITY_USER;
		drawUserPos();
		
		ctx.globalAlpha = OPACITY_GRID;
		updateGrid();
		
		requestAnimationFrame(updateFx);
	}
};

function drawUserPos() {

	for (var i = USER_IMPACT; i > 0; i--)
		if(i*10 < zeitScheibe) {
		
			circle(usrX, usrY, i);
		}
};

function clickUserPos() {
	
	unicorn = true;
	unicornColor = randColor();
	ctx.globalAlpha = OPACITY_USER_CLICK;


	for (var i = USER_IMPACT; i > 0; i--)
		if(i*10 < zeitScheibe) {
			
			circle(usrX, usrY, i);
		}
	
	unicorn = false;
};

function getPos (e) {

	usrX = PXL_DIAMETER * Math.round((e.clientX - canvas.offsetLeft) / PXL_DIAMETER);
	usrY = PXL_DIAMETER * Math.round((e.clientY - canvas.offsetTop) / PXL_DIAMETER);
};

//incredible spambot protection O_o
function insertMail() {
	
	mailAddress[0] = getLang() == 'de' ? 'hallo' : 'hello'; // WAS?
	
	document.getElementById('eMail').innerHTML = 'E-Mail: <a href="mailto:'+mailAddress.join('')+'">'+mailAddress.join('')+'</a>';
};

function toggleAddress() {
	var legalText = document.getElementById("address");
	var extraText = document.getElementById("extraText");
	
	if(addressVisible) {
		
		legalText.style.height = '22px';
		extraText.style.display = 'none';
		
	} else {
		
		legalText.style.height = 'auto';
		extraText.style.display = 'block';
	}
		
	addressVisible = !addressVisible;
};