var Selector = null;
var SelectorTds = 0;
var SelectorRows = 0;
var SelectorCols = 0;

function SetSize (sizes)
{
	createCookie ('sizes', sizes, 365);
	window.location.reload();
}
function createCookie (name, value, days)
{
	var expires = '';
	if (days)
	{
		var date = new Date();
		date.setTime (date.getTime() + (days * 24 * 60 * 60 * 1000));
		expires = "; expires=" + date.toGMTString();
	}
	document.cookie = name + "=" + value + expires + "; path=/";
}

function SelectorInit()
{
	Selector = document.getElementById ('Selector');
	if (Selector)
	{
		SelectorTds = Selector.getElementsByTagName ('td');
		SelectorRows = Selector.getElementsByTagName ('tr').length || 1;
		SelectorCols = SelectorTds.length / SelectorRows;
	}
	if (Selector)
	{
		for (var c = 0; c != SelectorTds.length; c++)
		{
			SelectorTds[c].onmouseover = HoverSelection;
			SelectorTds[c].onclick = SelectSelection;
			SelectorTds[c].CellCounter = c;
		}
	}
}

function HoverSelection (event)
{
	if (window.event) event = window.event;
	var td = event.target ? event.target : event.srcElement ? event.srcElement : null;
	if (!td || !td.CellCounter) return;

	MarkCells (td.CellCounter);
}

function MarkCells (pos)
{
	var row = parseInt (pos / SelectorCols);
	var col = pos - row * SelectorCols;
	var c = 0;
	for (var y = 0; y != SelectorRows; y++)
		for (var x = 0; x != SelectorCols; x++, c++)
		{
			var className = (x < 2 && y < 2 && row < 2 && col < 2) || (x <= col && y <= row) ? 'used' : 'clear';
			SelectorTds[c].className = SelectorTds[c].className.indexOf ('left') == -1 ? className : 'left ' + className;
		}
		
	var SizeX = document.getElementById ('SizeX');
	var SizeY = document.getElementById ('SizeY');
	if (SizeX && SizeY)
	{
		if (row < 2 && col < 2)
		{
			row = 1;
			col = 1;
		}
		SizeX.innerHTML = (col + 1);
		SizeY.innerHTML = (row + 1);
	}
}

function SelectSelection (event)
{
	if (window.event) event = window.event;
	var td = event.target ? event.target : event.srcElement ? event.srcElement : null;
	if (!td || !td.CellCounter) return;

	var row = parseInt (td.CellCounter / SelectorCols);
	var col = td.CellCounter - (row * SelectorCols);

	if (row < 2 && col < 2)
	{
		row = 1;
		col = 1;
	}

	SetSize ((col + 1) + 'x' + (row + 1));
}

function ToggleSelector (event)
{
	var SelectorArea = document.getElementById ('SelectorArea');
	if (!SelectorArea) return;	
	if (window.event) event = window.event;
	
	SelectorArea.style.top = (event.clientY + 5) + 'px';
	SelectorArea.style.left = event.clientX + 'px';

	if (SelectorArea.className == 'visible')
	{
		SelectorArea.className = 'invisible';
		document.body.onclick = null;
	}
	else
	{
		SelectorArea.className = 'visible';
		document.body.onclick = SelectorOff;
	}

	event.cancelBubble = true;
	if (event.stopPropagation) event.stopPropagation();
}

function SelectorOff()
{
	var SelectorArea = document.getElementById ('SelectorArea');
	if (!SelectorArea) return;	

	SelectorArea.className = 'invisible';
}