$(document).ready(function(){
	var boxElements = [ "topText", "topTextColor", "topTextSize", "topTextStyle", "topTextDecoration", "lineHeight", "textAlign", "bottomText", "bottomTextColor", "bottomTextSize", "bottomTextStyle", "bottomTextDecoration" ];
	
	jQuery.each(boxElements, function() {
		$("#" + this).change(function () {
			updateLines();
		}).keyup(function () {
			updateLines();
		});
	});
	
	$("#topText").focus(function() { if ($(this).attr("value") == "Top Line") { $(this).attr("value",""); } });
	$("#bottomText").focus(function() { if ($(this).attr("value") == "Bottom Line") { $(this).attr("value",""); } });
	
	$('#topTextColor, #bottomTextColor').ColorPicker({
		targetID : '',
		newTimeout : '',
		
		eventName: 'focus',
		
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val("#" + hex);
			$(el).ColorPickerHide();
			updateLines();
		},
		onChange: function(cal, hex, el) {
			$("#" + targetID).val('#' + hex);
			
			newTimeout = setTimeout("updateLines();", 1200); //IE gets slow
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor(this.value);
			targetID = this.id;
		}
	});
	
	updateLines();
});

function updateLines()
{
	var cssObjTop = {
		'color' : $("#topTextColor").val(),
		'font-size' : $("#topTextSize").val() + 'px',
		'font-family' : $("#topTextStyle").val(),
		'text-decoration' : $("#topTextDecoration").val()
	}
	
	$("#topLine").css(cssObjTop);
	$("#topLine").html($("#topText").val());
	
	var cssObjBottom = {
		'color' : $("#bottomTextColor").val(),
		'font-size' : $("#bottomTextSize").val() + 'px',
		'font-family' : $("#bottomTextStyle").val(),
		'text-decoration' : $("#bottomTextDecoration").val()
	}
	
	$("#bottomLine").css(cssObjBottom);
	$("#bottomLine").html($("#bottomText").val());
	
	var cssObjBoth = {
		'line-height' : $("#lineHeight").val() + 'px',
		'text-align' : $("#textAlign").val()
	}
	
	$("#bothLines").css(cssObjBoth);
}