$(document).ready(function(){
	var boxElements = [ "boxWidth", "boxHeight", "boxBackgroundColor", "boxBackgroundImage", "boxBackgroundRepeat", "boxBackgroundPosition", "boxBorderColor", "boxBorderWidth", "boxBorderStyle", "boxAlign", "boxTextData", "boxTextColor", "boxTextSize", "boxTextStyle", "boxTextAlign", "submitData", "resetData", "buttonTextColor", "buttonTextSize", "buttonTextStyle", "buttonBackgroundColor", "buttonBorderColor", "buttonBorderWidth", "buttonBorderStyle" ];
	
	jQuery.each(boxElements, function() {
		$("#" + this).change(function () {
			boxUpdate();
		}).keyup(function () {
			boxUpdate();
		});
	});
	
	$("#boxTextData").focus(function() { if ($(this).attr("value") == "Leave me a comment!") { $(this).attr("value",""); } });
	$("#myspaceURL").change(function() { getFriendID($("#myspaceURL").val()); });
	
	$('#boxBackgroundColor, #boxBorderColor, #boxTextColor, #buttonTextColor, #buttonBackgroundColor, #buttonBorderColor').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;
		}
	});
	
	setType();
	boxUpdate();
});

function boxUpdate()
{
	var cssObj01 = {
		'width' : $("#boxWidth").val() + 'px',
		'height' : $("#boxHeight").val() + 'px',
		'background-color' : $("#boxBackgroundColor").val(),
		'background-image' : 'url(\'' + $("#boxBackgroundImage").val() + '\')',
		'background-repeat' : $("#boxBackgroundRepeat").val(),
		'background-position' : $("#boxBackgroundPosition").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(),
		'text-align' : $("#boxTextAlign").val()
	}
	
	$("#textBox").css(cssObj01);
	$("#textBox").html($("#boxTextData").val());
	
	$("#fullBox").css("text-align", $("#boxAlign").val());
	
	var cssObj02 = {
		'color' : $("#buttonTextColor").val(),
		'font-size' : $("#buttonTextSize").val() + 'px',
		'font-family' : $("#buttonTextStyle").val(),
		'background-color' : $("#buttonBackgroundColor").val(),
		'border-color' : $("#buttonBorderColor").val(),
		'border-width' : $("#buttonBorderWidth").val(),
		'border-style' : $("#buttonBorderStyle").val()
	}
	
	$("#submitButton").css(cssObj02).val($("#submitData").val());
	$("#resetButton").css(cssObj02).val($("#resetData").val());
}

function setType()
{
	if ($("#backgroundType").val() == "image")
	{
		$("#showBackgroundImage").css("display", "");
		$("#boxBackgroundImage").val("");
		boxUpdate();
	}
	else
	{
		$("#showBackgroundImage").css("display", "none");
		$("#boxBackgroundImage").val("");
		boxUpdate();
	}
}

function getFriendID(location)
{
	$("#loadingImage").css("visibility", "visible").attr("src", "/images/loading-small.gif");
	
	$.ajax({
		method: 'get',
		url : '/files/comment_box/friend_id.php?url='+ location +'&time='+ Math.round(new Date().getTime() / 1000) +'',
		type: "GET",
		dataType : 'text',
		success: function (text) { var splitData = text.split('|'); if (splitData[0] == 'true') { $("#displayName").val(splitData[1]); $("#friendID").val(splitData[2]); $("#loadingImage").attr("src", "/images/ico-check.png"); } else { $("#loadingImage").attr("src", "/images/ico-cross.png"); } }
	});
}