var c = [
	{r: 255, g: 0, b: 0},
	{r: 255, g: 255, b: 0}
];

function init() {
	var params = window.location.toString().replace(/[^?]*\?/, '').split(/&/);
	
	var name;
	for (var i=0; i<params.length; i++) {
		name = params[i].replace(/=.*/, '');
		if (name == 'c') {
			var cols = params[i].replace(/[^=]*=/, '').split(/,/);
			for (var j=0; j<cols.length; j++) {
				if (j >= c.length) {
					addRow($('rows').getElementsByTagName('tr')[
							c.length-1]);
				}
				c[j] = sToCol('#' + cols[j]);
			}
		} else if (name == 'h') {
			$('size').value = params[i].replace(/[^=]*=/, '');
		}
	}
	
	setupPickers(100, 40);
	update();
	generate();
}
var curr = 0;

function generate() {
	var height = parseInt($('size').value);
	
	var grad = [];
	
	for (var i=1; i<c.length; i++)
		grad = grad.concat(gradient(c[i-1], c[i], height/(c.length-1)));
	
	var example = '', code = '';
	for (var i=0; i<grad.length; i++) {
		example += '<hr style="background: ' + grad[i] + '" />';
		code += '[linje=' + grad[i] + ']';
	}
	$('example').innerHTML = example;
	$('code').value = code;
	
	closePicker();
	
	var hex = '?c=' + colToS(c[0]).substr(1);
	for (var i=1; i<c.length; i++)
		hex += ',' + colToS(c[i]).substr(1);
	hex += '&h=' + $('size').value;
	
//	window.location.replace(window.location.toString().replace(/(\?.*|$)/, hex));
	
	$('link').innerHTML = 'Du kan nå din linje på:<br/>' +
			'<a href="' + hex + '">http://etc.firefly.nu/fnu' +
			hex + '</a>';
	return false;
}

function gradient(c1, c2, height) {
	var dr = (c2.r - c1.r) / height;
	var dg = (c2.g - c1.g) / height;
	var db = (c2.b - c1.b) / height;
	
	var cs = [];
	for (var i=0; i<height; i++) {
		var r = parseInt(c1.r + dr * i);
		var g = parseInt(c1.g + dg * i);
		var b = parseInt(c1.b + db * i);
		
		cs[i] = '#' +
			(r<16 ? '0' : '') + r.toString(16) +
			(g<16 ? '0' : '') + g.toString(16) +
			(b<16 ? '0' : '') + b.toString(16);
	}
	
	return cs;
}

function $(s){return document.getElementById(s)}
function sToCol(s) {
	if (s.charAt(0) != '#' || (s.length != 7 &&
			s.length != 4)) {
		throw new Error("Incorrect HTML colour");
	} else {
		var r, g, b;
		if (s.length == 4) {
			r = 17 * parseInt(s.charAt(1), 16);
			g = 17 * parseInt(s.charAt(2), 16);
			b = 17 * parseInt(s.charAt(3), 16);
		} else {
			r = parseInt(s.substr(1, 2), 16);
			g = parseInt(s.substr(3, 2), 16);
			b = parseInt(s.substr(5, 2), 16);
		}
		
		return {r: r, g: g, b: b};
	}
}
function colToS(c) {
	return '#' + (c.r<16 ? '0' : '') + c.r.toString(16) +
			(c.g<16 ? '0' : '') + c.g.toString(16) +
			(c.b<16 ? '0' : '') + c.b.toString(16);
}
function domIdxOf(el) {
	var nodes = $('rows').getElementsByTagName('tr');
	var tr = el;
	
	while (tr.nodeName.toUpperCase() != 'TR')
		tr = tr.parentNode;
	
	for (var i=0; i<nodes.length; i++)
		if (nodes[i] == tr)
			return i + 1;
}

function getSpectrum(w, h) {
	var out = [];
	
	var v = parseInt(w / 6.0), s;
	var r, g, b, x, y;
	
	for (y=0; y<h; y++) {
		out[y] = [];
		s = (y/h) * 255 / v;
		
		r = s * v;
		g = 0;
		b = 0;
		
		for (x=0; x<w; x++) {
			if (x >= 0 && x < v)
				b += s;
			else if (x >= v && x < 2*v)
				r -= s;
			else if (x >= 2*v && x < 3*v)
				g += s;
			else if (x >= 3*v && x < 4*v)
				b -= s;
			else if (x >= 4*v && x < 5*v)
				r += s;
			else if (x >= 5*v && x < 6*v)
				g -= s;
			
			r = r<0 ? 0 : r;
			g = g<0 ? 0 : g;
			b = b<0 ? 0 : b;
			
			out[y][x] = {
				r: parseInt(r),
				g: parseInt(g),
				b: parseInt(b)
			};
		}
	}
	
	return out;
}

function setupPickers(w, h) {
	var cols = getSpectrum(w, h);
	
	var table = document.createElement('table');
	table.cellSpacing = '0';
	table.id = 'pickerTable';
	$('colourPicker').appendChild(table);
	
	for (var y=0; y<h; y++) {
		var tr = document.createElement('tr');
		table.appendChild(tr);
		for (var x=0; x<w; x++) {
			var td = document.createElement('td');
			tr.appendChild(td);
			td.style.background = colToS(cols[y][x]);
			
			td.onmouseup = function(e) {
				if (!e) var e = window.event; /* Thanks, ppk */
				var el = e.target;
				var trs = $('pickerTable').getElementsByTagName('tr');
				var tds;
				
				var y2, x2;
				for (y2=0; y2<trs.length; y2++) {
					tds = trs[y2].getElementsByTagName('td');
					for (x2=0; x2<tds.length; x2++) {
						if (tds[x2] == el)
							break;
					}
					if (tds[x2] == el)
						break;
				}
				
				var cc = cols[y2][x2];
				pickColour(el, cc.r, cc.g, cc.b);
			}
		}
	}
}

function pickColour(el, r, g, b) {
	if (el.parentNode.parentNode.parentNode == $('colourPicker')) {
		c[curr-1].r = r;
		c[curr-1].g = g;
		c[curr-1].b = b;
		update();
	}
}

function update() {
	var els = $('rows').getElementsByTagName('tr');
	
	for (var i=0; i<c.length; i++) {
		els[i].getElementsByTagName('div')[0].style.background =
				colToS(c[i]);
		els[i].getElementsByClassName('hex')[0].value = colToS(c[i]);
	}
}

function showPicker(e) {
	var i = domIdxOf(e);
	curr = i;
	
	$('colourPicker').style.display = 'block';
	$('colourPicker').style.top = (70 + (i-1)*31) + 'px';
}
function closePicker() {
	$('colourPicker').style.display = 'none';
}
function addRow(e) {
	var i = domIdxOf(e);
	
	for (var j=c.length; j>i; j--)
		c[j] = c[j-1];
	c[i] = {r: 0, g: 0, b: 0};
	
	var el = document.createElement('tr');
	var th = document.createElement('th');
	var tdCBox = document.createElement('td');
	var cBox = document.createElement('div');
	var btns = document.createElement('td');
	var hex = document.createElement('input');
	var tdHex = document.createElement('td');
	
	th.innerHTML = 'Färg:';
	cBox.onclick = function() { showPicker(cBox); };
	cBox.className = 'colorBox';
	tdCBox.appendChild(cBox);
	btns.className = 'btns'
	btns.innerHTML = '<span onclick="addRow(this)">+</span>' +
			' / <span onclick="removeRow(this)">-</span>';
	hex.type = 'text';
	hex.className = 'hex';
	hex.onblur = function() { hexBlurred(hex); };
	tdHex.appendChild(hex);
	
	el.appendChild(th);
	el.appendChild(tdCBox);
	el.appendChild(tdHex);
	el.appendChild(document.createElement('td'));
	el.appendChild(btns);
	
	$('rows').insertBefore(el, $('rows').childNodes[i]);
	update();
	closePicker();
}
function hexBlurred(e) {
	var i = domIdxOf(e);
	
	c[i-1] = sToCol(e.value);
	update();
}
function removeRow(e) {
	var i = domIdxOf(e);
	if (c.length < 3)
		return;
	
	for (var j=i; j<c.length; j++)
		c[j-1] = c[j];
	c.pop();
	$('rows').removeChild($('rows').childNodes[i-1]);
	closePicker();
}