var offsetX;
var offsetY;
var obj;
var type;
var table;
var browserType;

function setupPage()
{
	getBrowserType();
	fixPngs();
	fixSpectrum();
	resetColors();
}

function resetColors()
{
	var tables = document.getElementsByTagName("table");
	for(q=0; q < tables.length; q++)
	{
		if(getClassValue(tables[q]) == "color_selector")
		{
			setColor(tables[q], 90, 0, 100);
		}
	}
}

function gatherColors()
{
	var colorString = "";
	var tables = document.getElementsByTagName("table");

	for(q=0; q < tables.length; q++)
	{
		if(getClassValue(tables[q]) == "color_selector")
		{
			colorString = colorString +
				tables[q].getAttribute("h") + "," +
				tables[q].getAttribute("s") + "," +
				tables[q].getAttribute("v") + ",";
		}
	}

	document.color_pick.colorString.value = colorString.substring(0, colorString.length - 1);
}

function prepareSubmit()
{
	gatherColors();
	if(document.color_pick.name.value.length < 1)
	{
		alert("Please provide a name");
		return false;
	}
}

function loadColors(a)
{
	var tables = document.getElementsByTagName("table");
	var h = 0;
	var s = 0;
	var v = 0;
	arrayIndex = 0;

	for(tableIndex=0; tableIndex < tables.length; tableIndex++)
	{
		if(getClassValue(tables[tableIndex]) == "color_selector")
		{
			if(a.length > arrayIndex)
			{
				h = a[arrayIndex];
				s = a[arrayIndex + 1];
				v = a[arrayIndex + 2];
				setColor(tables[tableIndex], h, s, v);
				arrayIndex = arrayIndex + 3;
			}
		}
	}
}

function fixSpectrum()
{
	if(browserType != "opera" && browserType != "ie")
		return;

	var imgs = document.getElementsByTagName("img");
	for(i=0; i < imgs.length; i++)
	{
		if(getRealSrc(imgs[i]).indexOf("spectrum-black") > -1)
		{
			imgs[i].style.display = "none";
		}
	}
}

function selectedColor(s)
{
	var index = s.selectedIndex;
	if(index > -1)
		loadColors( eval('new Array('+s.options[index].value+')'));
}









//drag functions
function startDrag(e, ob, t)
{
	var ev = e? e : window.event;
	obj = ob;
	type = t;
	table = getMainTable(obj);
	var left = parseInt(obj.style.left);
	var top = parseInt(obj.style.top);

	stopPropagation(ev);

	offsetX = ev.clientX - left;
	offsetY = ev.clientY - top;

	document.onmouseup=stopDrag;
	document.onmousemove=move;

	return false;
}

function updateSpectrum(eventX, eventY)
{
	var maxDistance = 100;
	var centerX = getWidth(obj.parentNode) / 2;
	var centerY = getHeight(obj.parentNode) /2;
	var newX = eventX - offsetX;
	var newY = eventY - offsetY;
	var selectedX = newX + obj.width / 2;
	var selectedY = newY + obj.height / 2;
	var polarVector = convertToPolar(selectedX - centerX, -(selectedY - centerY));

	if(polarVector[0] > maxDistance)
		polarVector[0] = maxDistance;
	
	if(isNaN(polarVector[1]))
		polarVector[1] = 0;

	setSpectrumPos(obj, polarVector[1], polarVector[0]);
}

function updateBrightness(eventY)
{
	var maxLength = getHeight(obj.parentNode) - obj.height;
	var newY = eventY - offsetY;
	var selectedY = newY + obj.height / 2;

	if(newY < 0)
		newY = 0;
	if(newY > maxLength)
		newY = maxLength;

	var bright = (newY / maxLength * 100);
	bright = Math.abs(100 - bright);

	setBrightnessPos(obj, bright);
}

function move(e)
{
	var ev = e? e : window.event;

	if(type == "spectrum")
		updateSpectrum(ev.clientX, ev.clientY);
	else
		updateBrightness(ev.clientY);
	
	//document.debug.test1.value = table.getAttribute("h");
	//document.debug.test2.value = table.getAttribute("s");
	//document.debug.test3.value = table.getAttribute("v");

	setRgb(table);

	updateImageDiv(table);
	updateCurrentColor(table);
	
	return false;
}


function stopDrag(e)
{

	var ev = e? e : window.event;
	stopTrackingMove();
	stopPropagation(ev);
	return false;
}

function stopTrackingMove()
{
	document.onmouseup=null;
	document.onmousemove=null;
}

function stopPropagation(ev)
{
	if(document.all)
	{
		ev.cancelBubble=false;
		ev.returnValue=false;
	}
	else
	{
		ev.preventDefault();
		ev.stopPropagation();
	}
}













//helper functions
function getLength(px, py)
{
	return Math.sqrt(px*px + py*py); 
	return getDistance(0, 0, px, py);
}

function getPolarAngle(px, py)
{
	var angle = Math.atan(py/px);
	if(px < 0)
		return angle+Math.PI;
	return angle;
}

function convertToPolar(newX, newY)
{
	var distance = getLength(newX, newY);
	var angle = getPolarAngle(newX, newY);
	return new Array(distance, toDegrees(angle));
}

function convertToCartesian(dis, angle)
{
	a = toRadians(angle);
	return new Array(dis*Math.cos(a), dis*Math.sin(a));
}

function toDegrees(rad)
{
	return 180 * rad / Math.PI;
}

function toRadians(deg)
{
	return deg / 180 * Math.PI;
}

function colorIsDark()
{
	var value = table.getAttribute("v");
	value = parseInt(value);

	if(value < 60)
		return true;
	return false;
}

function updateCursors()
{
	var cross = getSpectrumSelector(table);
	var bar = getBrightnessSelector(table);
	
	if(colorIsDark() && getRealSrc(bar).indexOf("light") < 0)
	{
		switch(browserType)
		{
			case "opera":
				bar.src = "bar-light.png";
				break;
			case "ie":
				bar.src = "bar-light.png";
				fixPngImage(bar);
				break;
			default:
				cross.src = "cross-light.png";
				bar.src = "bar-light.png";
				break;
		}
	}
	else if(!colorIsDark() && getRealSrc(bar).indexOf("dark") < 0)
	{
		switch(browserType)
		{
			case "opera":
				bar.src = "bar-dark.png";
				break;
			case "ie":
				bar.src = "bar-dark.png";
				fixPngImage(bar);
				break;
			default:
				cross.src = "cross-dark.png";
				bar.src = "bar-dark.png";
				break;
		}
	}
}

function updateSpectrumBlack(val)
{
	var opacity = Math.abs(100 - val);
	var img = getSpectrumBlack(table);

	setOpacity(img, opacity);
}

function updateBrightnessColor()
{
	var h = table.getAttribute("h");
	var s = table.getAttribute("s");
	var div = getBrightnessColor(table);
	var color = hsvToRgb(h, s, 100); 

	div.style.backgroundColor = "#" + color;
}












//setting colors

function setSpectrumPos(img, hue, sat)
{
	var centerX = getWidth(img.parentNode) / 2;
	var centerY = getHeight(img.parentNode) / 2;
	var coords = convertToCartesian(sat, hue);
	var newX = centerX + coords[0] - img.width / 2;
	var newY = centerY-1 - coords[1] - img.height / 2;

	setHue(hue);
	setSat(sat);

	updateBrightnessColor();

	img.style.left = newX +"px";
	img.style.top = newY +"px";
}

function setBrightnessPos(img, val)
{
	var length = getHeight(img.parentNode);
	var newY = Math.abs(100 - val) * (length - img.height) / 100;
	setValue(val);

	updateCursors();
	updateSpectrumBlack(val);

	img.style.top = newY +"px";
}


function setColor(t, hue, sat, val)
{
	table = t;

	var specImg = getSpectrumSelector(t);
	var briImg = getBrightnessSelector(t);

	setBrightnessPos(briImg, val);
	setSpectrumPos(specImg, hue, sat);

	setRgb(t);
	updateImageDiv(t);
	updateCurrentColor(t);
}

function setHue(x)
{ table.setAttribute("h", x); }

function setSat(x)
{ table.setAttribute("s", x); }

function setValue(x)
{ table.setAttribute("v", x); }

function setRgb(t)
{
	var h = t.getAttribute("h");
	var s = t.getAttribute("s");
	var v = t.getAttribute("v");

	t.setAttribute("rgb", hsvToRgb(h, s, v));
}

function updateImageDiv(t)
{
	var div = getTableDiv(t, "image");
	div.style.backgroundColor = "#" + t.getAttribute("rgb");
}

function updateCurrentColor(t)
{
	var div = getTableDiv(t, "current_color");
	div.style.backgroundColor = "#" + t.getAttribute("rgb");
}




//DOM navigation

function getId(element)
{
	if(element.getAttribute("id"))
		return element.getAttribute("id");
	return "";  //IE is a terrible web browser
}


function getClassValue(element)
{
	if(element.className)
		return element.className; //IE is a terrible web browser
	if(element.getAttribute("class"))
		return element.getAttribute("class");
	return "";
}

function getRealSrc(img)
{
	if(browserType == "ie")
		return img.runtimeStyle.filter;  //IE is a terrible web browser
	return img.getAttribute("src");
}

function getHeight(o)
{
	if(o.clientHeight)
		return o.clientHeight;
	if(o.offsetHeight)
		return o.offsetHeight;
}

function getWidth(o)
{
	if(o.clientWidth)
		return o.clientWidth;
	if(o.offsetWidth)
		return o.offsetWidth;
}

function getSpectrumSelector(table)
{
	var imgs = table.getElementsByTagName("img");
	for(i=0; i < imgs.length; i++)
	{
		if(getRealSrc(imgs[i]).indexOf("cross") > -1)
		{
			return imgs[i];
		}
	}
}

function getBrightnessSelector(table)
{
	var imgs = table.getElementsByTagName("img");
	for(i=0; i < imgs.length; i++)
	{
		if(getRealSrc(imgs[i]).indexOf("bar") > -1)
		{
			return imgs[i];
		}
	}
}

function getSpectrumBlack(table)
{
	var imgs = table.getElementsByTagName("img");
	for(i=0; i < imgs.length; i++)
	{
		if(getRealSrc(imgs[i]).indexOf("spectrum-black") > -1)
		{
			return imgs[i];
		}
	}
}

function getBrightnessColor(table)
{
	var divs = table.getElementsByTagName("div");
	for(i=0; i < divs.length; i++)
	{
		if(getId(divs[i]).indexOf("brightness_container") > -1)
		{
			return divs[i];
		}
	}
}

function getMainTable(img)
{
	var element = img;
	
	while(getClassValue(element) != "color_selector")
		element = element.parentNode;

	return element;
}

function getTableDiv(table, idText)
{
	var divs = table.getElementsByTagName("div");
	for(i=0; i < divs.length; i++)
	{
		if(getId(divs[i]).indexOf( idText ) > -1)
		{
			return divs[i];
		}
	}
}

function getDragElement(element)
{
	var imgs = element.getElementsByTagName("img");
	for(i=0; i < imgs.length; i++)
	{
		if(getClassValue(imgs[i]).indexOf("dragable") > -1)
		{
			return imgs[i];
		}
	}

}


function setOpacity(img, opacity)
{
	img.style.opacity = opacity / 100;
	return;

	if(browserType != "ie")
	{
		alert(img.runtimeStyle.filter);
		img.runtimeStyle.filter = "alpha(opacity=" + opacity + ")";	 //IE sucks
		return;
	}

}

//crap
function getDistance(p1x, p1y, p2x, p2y)
{
	return Math.sqrt( Math.pow(p1x - p2x, 2) + Math.pow(p1y - p2y, 2) );
}

function getAngle(cx, cy, p1x, p1y, p2x, p2y)
{
	var vec1x = p1x - cx;
	var vec1y = p1y - cy;
	var vec2x = p2x - cx;
	var vec2y = p2y - cy;

	var length1 = Math.sqrt(Math.pow(vec1x, 2) + Math.pow(vec1y, 2));
	var length2 = Math.sqrt(Math.pow(vec2x, 2) + Math.pow(vec2y, 2));
	var dotProd = vec1x * vec2x + vec1y * vec2y;

	return Math.acos(dotProd / length1 / length2);

}

/*
function startRecenterDrag(e, parent, t)
{
	var ev = e? e : window.event;
	obj = getDragElement(parent);
	type = t;
	table = getMainTable(obj);
	offsetX = obj.width / 2;
	offsetY = obj.height / 2;

	document.debug.test1.value = offsetX;
	document.debug.test2.value = ev.clientX;

	obj.style.left = ev.clientX - offsetX + "px";
	obj.style.top = ev.clientY - offsetY + "px";

	stopPropagation(ev);

	document.onmouseup=stopDrag;
	document.onmousemove=move;

	//move(e);

	return false;
}
*/


//more helpers
function intToHex(tint)
{
	var mostSig = 0;
	var leastSig = 0;
	var lookup = "0123456789abcdef";

	if(tint < 16)
		mostSig = 0;
	else
		mostSig = Math.floor(tint / 16);
	
	leastSig = tint % 16;

	return lookup.charAt(mostSig) + lookup.charAt(leastSig);
}

function hsvToRgb(h, s, v)
{
	var wheelSection;
	var sectionPos;
	var main;
	var base;
	var last;
	var r=0;
	var g=0;
	var b=0;

	h = parseFloat(h);
	s = parseFloat(s) / 100;
	v = parseFloat(v) / 100;

	if(h < 0)
		h = h + 360;

	if(h > 360)
		h = h - 360;
	
	h = h / 360;

	if(h == 1)
		h = 0;
	h = h *6;

	section = Math.floor(h); //color wheel section
	sectionPos = h - section;
	first = v * (1 - s);
	second = v * (1 - s * sectionPos);
	third = v * (1 - s * (1 - sectionPos));

	switch(section)
	{
		case 6:
		case 0:
			r=v; g=third; b=first; break;
		case 5:
			r=v; g=first; b=second; break;
		case 1:
			r=second; g=v; b=first; break;
		case 2:
			r=first; g=v; b=third; break;
		case 3:
			r=first; g=second; b=v; break;
		case 4:
			r=third; g=first; b=v; break;
	}

	r=r*255;
	g=g*255;
	b=b*255;
	return ""+intToHex(r)+intToHex(g)+intToHex(b);
}

function fixPngs()
{
	if(browserType != "ie")
		return;
	
	imgs = document.getElementsByTagName("img");

	for(i=0; i < imgs.length; i++)
	{
		if(imgs[i].src.indexOf(".png") > -1);
			fixPngImage(imgs[i]);
	}
}

function fixPngImage(img)
{
	var w = img.width + "";
	var h = img.height + "";
	
	img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "',sizingMethod='scale')";
	img.src = "trans.gif";
	img.width = w;
	img.height = h;
}

function getBrowserType()
{
	browserType = "unknown";

	if(navigator.userAgent.indexOf("Opera") > -1)
	{
		browserType = "opera";
		return;
	}
	
	if(navigator.userAgent.indexOf("MSIE") > -1)
	{
		browserType = "ie";
		return;
	}
}