var icon = new Image();
var icon_d = new Image();
var close = new Image();
var shadow = new Image();
var c, ctx;
var down = false;
var closedown = false;
var downtime = 0;
var i = 0;
var wiggling = false;
var frametimer;
var wiggletimer;

function drawplainicon() {
	ctx.globalCompositeOperation = "copy";
	ctx.drawImage(shadow, -55, -55);
	ctx.globalCompositeOperation = "source-over";
	ctx.drawImage(icon, -55, -55);
}

function startwiggle() {
	wiggling = true;
	frametimer = setInterval(wiggle, 15);
}

function wiggle() {
	if (!wiggling) { /* last iteration */
		clearInterval(frametimer);
		drawplainicon();
		return;
	}
	if (down && downtime < 15) {
		downtime++;
	} else if (!down && downtime > 0) {
		downtime--;
	}
	ctx.save();
	var iconimg;
	ctx.globalCompositeOperation = "copy";
	if (downtime > 0) {
		var s = 1+downtime/90;
		ctx.globalAlpha = 1-downtime/30;
		ctx.drawImage(shadow, -55, -55);
		ctx.scale(s, s);
		iconimg = icon_d;
	} else {
		var j = i/180*Math.PI; /* convert to radians */
		ctx.translate(Math.cos(j+Math.PI/4) / 1.3, Math.sin(j+Math.PI/4) / 1.3);
		ctx.rotate(Math.sin(j) / 45); /* arbitrary divisor */
		iconimg = icon;
		ctx.drawImage(shadow, -55, -55);
	}
	ctx.globalCompositeOperation = "source-over";
	ctx.drawImage(iconimg, -55, -55);
	ctx.drawImage(close, -52, -52);
	ctx.restore();
	i += 20;
}
function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		}
		while (obj = obj.offsetParent);
	}
	return {left:curleft, top:curtop};
}
function findEvtPos(evt) {
	var posx = 0;
	var posy = 0;
	if (!evt) var evt = window.event;
	if (evt.pageX || evt.pageY) 	{
		posx = evt.pageX;
		posy = evt.pageY;
	}
	else if (evt.clientX || evt.clientY) 	{
		posx = evt.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = evt.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	/* posx and posy contain the mouse position relative to the document */
	return {x:posx, y:posy};
}
function cvsmousedown(evt) {
	if (wiggling) {
		var evtpos = findEvtPos(evt);
		var cvspos = findPos(c);
		if (evtpos.x >= cvspos.left+8 && evtpos.x <= cvspos.left+26 &&
								evtpos.y >= cvspos.top+8 && evtpos.y <= cvspos.top+26) {
			closedown = true;
		} else {
			down = true;
		}
	} else {
		down = true;
		ctx.globalCompositeOperation = "copy";
		ctx.drawImage(shadow, -55, -55);
		ctx.globalCompositeOperation = "source-over";
		ctx.drawImage(icon_d, -55, -55);
		wiggletimer = setTimeout(startwiggle, 1000);
	}
}
function cvsmouseup(evt) {
	down = false;
	if (wiggling) {
		var evtpos = findEvtPos(evt);
		var cvspos = findPos(c);
		if (closedown && evtpos.x >= cvspos.left+8 && evtpos.x <= cvspos.left+26 &&
								evtpos.y >= cvspos.top+8 && evtpos.y <= cvspos.top+26) {
			wiggling = false;
			closedown = false;
		}
	} else {
		ctx.globalCompositeOperation = "copy";
		ctx.drawImage(shadow, -55, -55);
		ctx.globalCompositeOperation = "source-over";
		ctx.drawImage(icon, -55, -55);
		clearTimeout(wiggletimer);
	}
}
function cvsmouseout(evt) {
	if (!wiggling) {
		clearTimeout(wiggletimer);
		cleardown = false;
	}
}

function showcvsicon() {
	drawplainicon(); /* draw icon once it loads */
	var i = document.getElementById("icon-i");
	i.parentNode.replaceChild(c, i);
}
function initwiggler() {
	c = document.createElement("canvas");
	c.id = "icon-c";
	c.width = 110;
	c.height = 110;
	/* The animation is too much for MobileSafari to handle */
	if (c.getContext && navigator.userAgent.indexOf("iPhone") == -1 && navigator.userAgent.indexOf("iPod") == -1) {
		ctx = c.getContext("2d");
		ctx.translate(55, 55); /* initial translation, to change rotational center */
		var shl = false, icl = false;
		icon.onload = function() {
			icl = true;
			if (shl) {
				showcvsicon();
			}
		};
		shadow.onload = function() {
			shl = true;
			if (icl) {
				showcvsicon();
			}
		};
		c.onmousedown = cvsmousedown;
		c.onmouseup = cvsmouseup;
		document.onmouseup = cvsmouseup;
		c.onmouseout = cvsmouseout;
		icon.src = "images/icon-plain.png";
		icon_d.src = "images/icon-down-plain.png";
		shadow.src = "images/shadow.png";
		close.src = "images/close.png";
	}
}

window.onload = function() {
	inputs = document.getElementsByTagName("input");
	textareas = document.getElementsByTagName("textarea");
	for (var i = 0; i < inputs.length; i++) {
		if (inputs[i].className.indexOf("error") > -1) {
			inputs[i].focus();
			return;
		}
	}
	for (var i = 0; i < textareas.length; i++) {
		if (textareas[i].className.indexOf("error") > -1) {
			textareas[i].focus();
			return;
		}
	}
	var name = document.getElementById("name-i");
	if (name) name.focus();
	initwiggler();
};