function $X(element)
{
	element = document.getElementById(element);
	return element;
}

$(document).ready(function(){
	var selectElements = [ "selectWidth", "selectHeight", "selectBackgroundColor", "selectTextColor", "selectTextSize", "selectTextStyle" ];
	
	jQuery.each(selectElements, function() {
		$("#" + this).change(function () {
			selectUpdate();
		}).keyup(function () {
			selectUpdate();
		});
	});
	
	$("#row_1 input").focus(function() { if ($(this).attr("value") == "Enter Text Here") { $(this).attr("value",""); } });
	
	$('#selectBackgroundColor, #selectTextColor').ColorPicker({
		targetID : '',
		newTimeout : '',
		
		eventName: 'focus',
		
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val("#" + hex);
			$(el).ColorPickerHide();
			selectUpdate();
		},
		onChange: function(cal, hex, el) {
			$("#" + targetID).val('#' + hex);
			
			newTimeout = setTimeout("selectUpdate();", 1200); //IE gets slow
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor(this.value);
			targetID = this.id;
		}
	});
	
	selectUpdate();
	Rows.RebuildOptions();
});

function selectUpdate()
{
	var cssObj = {
		'width' : $("#selectWidth").val() + 'px',
		'height' : $("#selectHeight").val() + 'px',
		'background-color' : $("#selectBackgroundColor").val(),
		'color' : $("#selectTextColor").val(),
		'font-size' : $("#selectTextSize").val() + 'px',
		'font-family' : $("#selectTextStyle").val()
	}
	
	$("#pselect").css(cssObj);
}

Rows =
{
	count: 5,
	row: 5,
	
	Add: function()
	{
		Rows.row++;
		Rows.count++;
	    
		ol = $X('listmgr');
		li = document.createElement('li');
		li.setAttribute ('id', 'row_' + Rows.row); 
		li.innerHTML = '<div class="form-text"><input type="text" name="text[]" onchange="Rows.Update(this.parentNode.id, this.value);" onkeyup="Rows.Update(this.parentNode.id, this.value);"></div><a href="javascript:void(0);" onclick="Rows.Remove(this.parentNode.id);"><img src="images/delete.gif" alt="delete" /></a>';
		ol.appendChild(li);
	},
	
	Remove: function(id)
	{	
		if (Rows.count <= 1)
		{
			alert("Sorry, you must have at least one item to make a list.");
		}
		else
		{
			Rows.RemoveOption (id + '_option');
			var li = $X(id);
			li.parentNode.removeChild (li);
		}
		
		Rows.count--;
		
		Rows.RebuildOptions();
	},
	
	Update: function(id, text)
	{
		if (text.length == 0)
		{
			Rows.RemoveOption (id + '_option');
		}
		else
		{
			Rows.RebuildOptions();
			return true;
		}
	},
	
	AddOption: function (id, text)
	{
		var option = document.createElement('option');
		option.setAttribute ('id', id + '_option'); 
		option.text = text;
		option.value = text;
		$X('pselect').options.add(option);
	},
	
	RemoveOption: function (id)
	{
		Rows.RebuildOptions();
		return true;
	},
	
	RemoveOptions: function ()
	{
		var select = $X('pselect');
		while (select.hasChildNodes())
		{
			select.removeChild(select.childNodes[0]);
		}
	},
	
	RebuildOptions: function ()
	{
		Rows.RemoveOptions();
		
		var lis = $X('listmgr').getElementsByTagName('li');
		for (var li = 0; li < lis.length; ++li)
		{
			var value = lis[li].getElementsByTagName('input')[0].value;
			if (value.length > 0)
			{
				Rows.AddOption (lis[li].id, value);
			}
		}
	}
}