var letterboxes = [];

Event.observe(document, "dom:loaded", function() {
	var letterCount = controlIDs.hidLetterCount;
	if (isNaN(letterCount)) { letterCount = 6; }
	var slider = new Control.Slider($('slider').down('.handle'), $('slider'), {
		range: $R(2, 30),
		sliderValue: letterCount,
		values: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
		onSlide: function(value) {
			$('lettercount').update(value);
		},
		onChange: function(value) {
			setLetterboxes(value);
		}
	});
	setLetterboxes(letterCount);
	$('showCompound').checked = controlIDs.showCompound;
});

function setLetterboxes(value) {
	if (value > letterboxes.length) {
		for (var count = letterboxes.length; count != value; count++) {
			var letterbox = new Element('input', { 'class': 'letterbox', type: 'text', maxlength: '1', id: 'letter' + (count + 1), name: 'letter' + (count + 1) });
			letterboxes.push(letterbox);
		}
	}
	if (value < letterboxes.length) {
		for (var count = letterboxes.length; count != value; count--) {
			letterboxes.pop();
		}
	}
	var letters = $('letters').update('');
	letterboxes.each(function(ele) {
		letters.insert(ele);
	});
	$('lettercount').update(value);
	$('hidLettercount').value = value;
}

function loadDefinition(li) {
	var wordObj = $(li.id);
	var wordObjLoc = wordObj.cumulativeOffset();
	$$('div.definition').each(function(ele) {
		ele.remove()
	});
	var def = new Element('div', {
		'class': 'definition',
		id: 'definition' + li.value
	}).update('Loading...').setStyle({
		top: (wordObjLoc.top + 5 + li.getHeight()) + 'px',
		left: wordObjLoc.left + 15 + 'px',
		color: 'gray'
	});
	new Ajax.Request('/definitions.ashx', {
		method: 'get',
		parameters: { w: li.value },
		onLoading: function() {
			Element.insert(document.body, def);
		},
		onSuccess: function(transport) {
			def.update(transport.responseText).setStyle({
				color: 'black'
			}).writeAttribute({
				title: 'Click to close'
			}).observe('click', function() {
				def.remove();
			});
		},
		onFailure: function() {
			def.update('Sorry. We could not find a definition for this word').setStyle({
				color: 'black'
			}).writeAttribute({
				title: 'Click to close'
			}).observe('click', function() {
				def.remove();
			});
		}
	});
}