$(document).ready(function(){
	var boxElements = [ "marqueeBehavior", "marqueeDirection", "marqueeSpeed", "marqueeText", "marqueeTextColor", "marqueeTextSize", "marqueeTextStyle", "marqueeTextDecoration", "boxWidth", "boxHeight", "boxBackgroundColor", "boxBorderColor", "boxBorderWidth", "boxBorderStyle" ];
	
	jQuery.each(boxElements, function() {
		$("#" + this).change(function () {
			marqueeUpdate();
		}).keyup(function () {
			marqueeUpdate();
		});
	});
	
	$("#marqueeText").focus(function() { if ($(this).attr("value") == "Example Text") { $(this).attr("value",""); } });
	
	$('#marqueeTextColor, #boxBackgroundColor, #boxBorderColor').ColorPicker({
		targetID : '',
		newTimeout : '',
		
		eventName: 'focus',
		
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val("#" + hex);
			$(el).ColorPickerHide();
			marqueeUpdate();
		},
		onChange: function(cal, hex, el) {
			$("#" + targetID).val('#' + hex);
			
			newTimeout = setTimeout("marqueeUpdate();", 1200); //IE gets slow
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor(this.value);
			targetID = this.id;
		}
	});
	
	marqueeUpdate();
});

function marqueeUpdate()
{
	var cssObj = {
		'color' : $("#marqueeTextColor").val(),
		'font-size' : $("#marqueeTextSize").val() + 'px',
		'font-family' : $("#marqueeTextStyle").val(),
		'text-decoration' : $("#marqueeTextDecoration").val(),
		'width' : $("#boxWidth").val() + 'px',
		'height' : $("#boxHeight").val() + 'px',
		'background-color' : $("#boxBackgroundColor").val(),
		'border-color' : $("#boxBorderColor").val(),
		'border-width' : $("#boxBorderWidth").val(),
		'border-style' : $("#boxBorderStyle").val()
	}
	
	$("#pmarquee").attr("behavior", $("#marqueeBehavior").val());
	$("#pmarquee").attr("direction", $("#marqueeDirection").val());
	$("#pmarquee").attr("scrollamount", $("#marqueeSpeed").val());
	
	$("#pmarquee").css(cssObj);
	$("#pmarquee").html($("#marqueeText").val());
}