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

$(document).ready(function(){
	var boxElements = [ "boxWidth", "boxHeight", "boxBackgroundColor", "boxBorderColor", "boxBorderWidth", "boxBorderStyle", "textColor", "textSize", "textStyle", "textData" ];
	
	jQuery.each(boxElements, function() {
		$("#" + this).change(function () {
			boxUpdate();
		}).keyup(function () {
			boxUpdate();
		});
	});
	
	$("#textData").focus(function() { if ($(this).attr("value") == "Type your paragraph here") { $(this).attr("value",""); } });
	
	$('#boxBackgroundColor, #boxBorderColor, #textColor').ColorPicker({
		targetID : '',
		newTimeout : '',
		
		eventName: 'focus',
		
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val("#" + hex);
			$(el).ColorPickerHide();
			boxUpdate();
		},
		onChange: function(cal, hex, el) {
			$("#" + targetID).val('#' + hex);
			
			newTimeout = setTimeout("boxUpdate();", 1200); //IE gets slow
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor(this.value);
			targetID = this.id;
		}
	});
	
	boxUpdate();
});

function boxUpdate()
{
	var cssObj = {
		'width' : (!isNaN($("#boxWidth").val()) && ($("#boxWidth").val() != '')) ? $("#boxWidth").val() + 'px' : '665px',
		'height' : (!isNaN($("#boxHeight").val()) && ($("#boxHeight").val() != '')) ? $("#boxHeight").val() + 'px' : '100px',
		'background-color' : $("#boxBackgroundColor").val(),
		'border-color' : $("#boxBorderColor").val(),
		'border-width' : $("#boxBorderWidth").val(),
		'border-style' : $("#boxBorderStyle").val(),
		'color' : $("#textColor").val(),
		'font-size' : (!isNaN($("#textSize").val()) && ($("#textSize").val() != '')) ? $("#textSize").val() + 'px' : '11px',
		'font-family' : $("#textStyle").val(),
		'overflow-y' : 'auto'
	}
	
	$("#sbox").css(cssObj);
	$("#sbox").html($("#textData").val());
}