var animCount = 0;
var hue = 0;
function startSwirlAnim() {
    return setInterval(swirlAnim, 100);
}

function swirlAnim() {
    animCount++;
    start_swirl(animCount % 100);
}

function startLineAnim() {
    return setInterval(lineAnim, 50);
}

function lineAnim() {
    hue++;
    start_line(hue % 360);
}

function init() {
    canvas = document.getElementById('canvas');
    
    r = Math.random()*100;
    if (r>66) { // do the multicolored swirl thing
        canvas.addEventListener('click', startSwirlAnim, false);
        start_swirl(0);
    } else if (r>33) {
        canvas.addEventListener('click', startLineAnim, false);
        start_line(0);
    } else {
        start_words(0);
    }
}

function finish(ctx) {
    ctx.font = "bold 25px helvetica";
    
    ctx.fillStyle = '#000';
    ctx.fillText('frantic',100,100);
    
    // draw line beneath
    ctx.moveTo(80,101);
    ctx.lineTo(250,101);
    ctx.strokeStyle = "#222";
    ctx.stroke();
}

// draw many 'frantic's around behind the logo
function start_words(c) {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    ctx.fillStyle = 'white';
    ctx.fillRect(0,0,250,200); // fill with white bg    
    var sat = 50+Math.random()*40;
    var val = 50+Math.random()*50;
    for (x=0;x<20;x++) {
        hue = (c)?c:(Math.random()*360);
        ctx.font = "bold 20px helvetica";
    	var rgb = hsvToRgb(hue, sat, val);
    	ctx.fillStyle = 'rgb(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ')';
    	ctx.fillText('frantic',50+Math.random()*100,50+Math.random()*100);
    }
    finish(ctx);
}


// draw 'frantic' in a multicolored line
function start_line(c) {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    ctx.fillStyle = 'white';
    ctx.fillRect(0,0,250,200); // fill with white bg
    hue = (c)?c:(Math.random()*200);
    for (x=-50;x<100;x++) {
        ctx.font = "bold 25px helvetica";
    	var rgb = hsvToRgb(hue, x, x);
    	ctx.fillStyle = 'rgb(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ')';
    	ctx.fillText('frantic',x,(x/3)+66);
    }
    finish(ctx);
}

// draw 'frantic' in a multicolored semicircle
function start_swirl(shift) {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    ctx.fillStyle = 'white';
    ctx.fillRect(0,0,250,200); // fill with white bg

    var num = 22;
    ctx.rotate(num*0.05);
    for (x=1;x<=num;x++) {
    	var rgb = hsvToRgb(num*(x+shift) % 360, 50+(Math.abs(50-shift)), 50+(Math.abs(50-shift)));
    	ctx.fillStyle = 'rgb(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ')';
        ctx.rotate(-0.05);
        ctx.font = "bold 25px helvetica";
        ctx.fillText('frantic',100,100);
    }
    finish(ctx);
}


// stole this from somewhere else (yay)
function hsvToRgb(h, s, v) {
	var r, g, b;
	var i;
	var f, p, q, t;
	
	// Make sure our arguments stay in-range
	h = Math.max(0, Math.min(360, h));
	s = Math.max(0, Math.min(100, s));
	v = Math.max(0, Math.min(100, v));
	
	// We accept saturation and value arguments from 0 to 100 because that's
	// how Photoshop represents those values. Internally, however, the
	// saturation and value are calculated from a range of 0 to 1. We make
	// That conversion here.
	s /= 100;
	v /= 100;
	
	if(s == 0) {
		// Achromatic (grey)
		r = g = b = v;
		return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
	}
	
	h /= 60; // sector 0 to 5
	i = Math.floor(h);
	f = h - i; // factorial part of h
	p = v * (1 - s);
	q = v * (1 - s * f);
	t = v * (1 - s * (1 - f));

	switch(i) {
		case 0:
			r = v;
			g = t;
			b = p;
			break;
			
		case 1:
			r = q;
			g = v;
			b = p;
			break;
			
		case 2:
			r = p;
			g = v;
			b = t;
			break;
			
		case 3:
			r = p;
			g = q;
			b = v;
			break;
			
		case 4:
			r = t;
			g = p;
			b = v;
			break;
			
		default: // case 5:
			r = v;
			g = p;
			b = q;
	}
	
	return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}