var allLinks;
var allDivs;
var dragBox;
var dragBoxWidth = 661;
var dragBoxHeight = 384;
var togColorbox;
var togColors;

function addListeners() {
	doDivs();
	dragObject.init();

	allLinks = getEl('linkDiv').getElementsByTagName('a');
	for (var i = 0; i < allLinks.length; i++)
		addEvent(allLinks[i], 'mouseup', aBlurListener, false);

	allDivs = document.getElementsByTagName('div');
	var j = allDivs.length;
	for (var i = 0; i < j; i++) {
		var theDiv = allDivs[i];
		if ((theDiv.className.indexOf('black') != -1) || (theDiv.className.indexOf('white') != -1)) {
			addEvent(theDiv, 'mousedown', divListener, false);
			addEvent(theDiv, 'dblclick', divListener, false);
		}
	}

	dragBox = getEl('dragBox');
	togColorbox = getEl('togColorbox');
	togColors = getEl('togColors');

	centerColorbox();

	addEvent(window, 'resize', centerColorbox, false);
}

function doDivs() {
	var body = document.getElementsByTagName('body')[0];
	var theDragDiv = document.createElement('div');
	theDragDiv.isVisible = true;
	theDragDiv.id = 'dragBox';
	theDragDiv.className = 'draggable';
	body.appendChild(theDragDiv);

	var theDiv;
	var divLeft = 0;
	var divTop = 0;
	var divHeight = 16;
	var iCounter = 0;
	var j = Colors.length;
	for (var i = 0; i < j; i++) {
		iCounter++;
		theDiv = document.createElement('div');
		theDiv.id = Colors[i][0];
		theDiv.style.backgroundColor = Colors[i][1];
		theDiv.colorName = Colors[i][0];
		theDiv.title = Colors[i][1];
		theDiv.isTextVisible = true;
		if (Colors[i][2] == 1)
			theDiv.className = 'black';
		else
			theDiv.className = 'white';
		theDiv.style.position = 'absolute';
		theDiv.style.left = divLeft + 'px';
		theDiv.style.top = divTop + 'px';
		theDiv.style.height = divHeight - 3 + 'px';
		if ((iCounter % 6) == 0) {
			divLeft = 0;
			divTop += divHeight;
		} else {
			divLeft += 110;
		}
		var theTextNode = document.createTextNode(Colors[i][0]);
		theDiv.appendChild(theTextNode);
		theDragDiv.appendChild(theDiv);
	}
}

function aBlurListener() {
	var el = ascendDOM(this, 'a');
	if (el == null) return;
	el.blur();
}

function divListener(e) {
	var e = e || window.event;
	document.getElementsByTagName('body')[0].style.backgroundColor = this.colorName;

	var newClass = (this.className.indexOf('black') != -1) ? 'Black' : 'White';

	for (var i = 0; i < allLinks.length; i++) {
		var theLink = allLinks[i];
		if ((theLink.className.indexOf('linkActionsBlack') != -1) || (theLink.className.indexOf('linkActionsWhite') != -1))
			theLink.className = 'linkActions' + newClass;
	}

	if (e.type == 'dblclick') {
		window.prompt('Hexadecimal value for you to copy:', this.title)
	}
}

function toggleColorbox() {
	var theLinkText = '';
	if (dragBox.isVisible) {
		dragBox.style.visibility = 'hidden';
		dragBox.isVisible = false;
		theLinkText = 'Show';
	} else {
		dragBox.style.visibility = 'visible';
		dragBox.isVisible = true;
		theLinkText = 'Hide';
	}
	togColorbox.firstChild.nodeValue = theLinkText + ' Color Box';
}

function toggleColorNames() {
	var theLinkText = '';
	// allDivs is set in addListeners function!
	var j = allDivs.length;
	for (var i = 0; i < j; i++) {
		var theDiv = allDivs[i];
		if ((theDiv.className.indexOf('black') != -1) || (theDiv.className.indexOf('white') != -1)) {
			if (theDiv.isTextVisible) {
				theDiv.firstChild.nodeValue = '';
				theDiv.isTextVisible = false;
				theLinkText = 'Show';
			} else {
				theDiv.firstChild.nodeValue = theDiv.colorName;
				theDiv.isTextVisible = true;
				theLinkText = 'Hide';
			}
		}
	}
	togColors.firstChild.nodeValue = theLinkText + ' Color Names';
}

function centerColorbox() {
	dragBox.style.left = (parseInt(winWidth() / 2) - parseInt(dragBoxWidth /2)) + 'px';
	dragBox.style.top = (parseInt(winHeight() / 2) - parseInt(dragBoxHeight /2)) + 'px';
}

addEvent(window, 'load', addListeners, false);