$(document).ready(function(){
	var boxElements = [ "imageURL", "imageAlign", "boxWidth", "boxHeight", "boxBackgroundColor", "boxBorderColor", "boxBorderWidth", "boxBorderStyle", "boxTextColor", "boxTextSize", "boxTextStyle", "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, #boxTextColor').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' : $("#boxWidth").val() + 'px',
		'height' : $("#boxHeight").val() + 'px',
		'background-color' : $("#boxBackgroundColor").val(),
		'border-color' : $("#boxBorderColor").val(),
		'border-width' : $("#boxBorderWidth").val(),
		'border-style' : $("#boxBorderStyle").val(),
		'color' : $("#boxTextColor").val(),
		'font-size' : $("#boxTextSize").val() + 'px',
		'font-family' : $("#boxTextStyle").val(),
		'overflow' : 'auto'
	}
	
	$("#wpreview").css(cssObj);
	
	if ($("#imageURL").val() != '')
	{
		var imgSrc = $("#imageURL").val();
	}
	else
	{
		var imgSrc = '/images/ico-example.gif';
	}
	
	$("#wpreview").html("<img src=\""+ imgSrc +"\" align=\""+ $("#imageAlign").val() +"\" style=\"display: inline; margin-right: 2px;\" />" + $("#textData").val());
}