function generateCode() {
	var title = $('#title').val();
	var width = $('#width').val();
	var height = $('#height').val();
	var events = $('#events').val();
	var widgetbg = $('#widgetbg').val();
	var widgettext = $('#widgettext').val();
	var eventbg = $('#eventbg').val();
	var eventtext = $('#eventtext').val();
	var eventdate = $('#eventdate').val();
	var linkcolor = $('#linkcolor').val();

	var code = '<!-- BEGIN Tawidget -->\n';
	code += '<script src="http://tawidget.com/js/tawidget.js"></script>\n';
	code += '<script>Taweet.showWidget("'+$('#username').val()+'", {\n';
	if (title) code += '\ttitle: "'+title+'",\n';
	if (width) code += '\twidth: "'+width+'px",\n';
	if (height) code += '\theight: "'+height+'px",\n';
	if (events) code += '\tevents: "'+events+'",\n';
	if ($('#scroll-yes').attr('checked')) code += '\tscroll: true,\n';
	if (widgetbg || widgettext || eventbg || eventtext || eventdate || linkcolor)
	{
		code += '\tcolors: {\n';
		if (widgetbg) code += '\t\twidgetbg: "'+widgetbg+'",\n';
		if (widgettext) code += '\t\twidgettext: "'+widgettext+'",\n';
		if (eventbg) code += '\t\teventbg: "'+eventbg+'",\n';
		if (eventtext) code += '\t\teventtext: "'+eventtext+'",\n';
		if (eventdate) code += '\t\teventdate: "'+eventdate+'",\n';
		if (linkcolor) code += '\t\tlinkcolor: "'+linkcolor+'"\n';
		code += '\t}\n';
	}
	code += '});</script>\n<!-- END Tawidget -->\n';
	$('#widget-code').val(code);
}

function updatePreview() {
	var title = $('#title').val();
	var width = $('#width').val();
	var height = $('#height').val();
	var events = $('#events').val();
	var widgetbg = $('#widgetbg').val();
	var widgettext = $('#widgettext').val();
	var eventbg = $('#eventbg').val();
	var eventtext = $('#eventtext').val();
	var eventdate = $('#eventdate').val();
	var linkcolor = $('#linkcolor').val();
	var settings = {};

	if (title) settings.title = title;
	if (width) settings.width = width+'px';
	if (height) settings.height = height+'px';
	if (events) settings.events = events;
	if ($('#scroll-yes').attr('checked')) settings.scroll = true;
	if (widgetbg || widgettext || eventbg || eventtext || eventdate || linkcolor)
	{
		settings.colors = {};
		if (widgetbg) settings.colors.widgetbg = widgetbg;
		if (widgettext) settings.colors.widgettext = widgettext;
		if (eventbg) settings.colors.eventbg = eventbg;
		if (eventtext) settings.colors.eventtext = eventtext;
		if (eventdate) settings.colors.eventdate = eventdate;
		if (linkcolor) settings.colors.linkcolor = linkcolor;
	}
	Taweet.reloadWidget($('#username').val(), settings);
}

$(document).ready(function() {
	generateCode();
	// set up color pickers on the color fields
	$('#widgetbg, #widgetbg-preview').ColorPicker({
		onSubmit: function(hsb, hex, rgb, el) {
			$('#widgetbg').val('#' + hex);
			$(el).ColorPickerHide();
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor($('#widgetbg').val());
		},
		onChange: function (hsb, hex, rgb) {
			$('#widgetbg-preview').css('background-color', '#' + hex);
		}
	})
	.bind('keyup', function(){
		$(this).ColorPickerSetColor(this.value);
		$('#widgetbg-preview').css('background-color', this.value);
	});
	$('#widgettext, #widgettext-preview').ColorPicker({
		onSubmit: function(hsb, hex, rgb, el) {
			$('#widgettext').val('#' + hex);
			$(el).ColorPickerHide();
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor($('#widgettext').val());
		},
		onChange: function (hsb, hex, rgb) {
			$('#widgettext-preview').css('background-color', '#' + hex);
		}
	})
	.bind('keyup', function(){
		$(this).ColorPickerSetColor(this.value);
		$('#widgettext-preview').css('background-color', this.value);
	});
	$('#eventbg, #eventbg-preview').ColorPicker({
		onSubmit: function(hsb, hex, rgb, el) {
			$('#eventbg').val('#' + hex);
			$(el).ColorPickerHide();
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor($('#eventbg').val());
		},
		onChange: function (hsb, hex, rgb) {
			$('#eventbg-preview').css('background-color', '#' + hex);
		}
	})
	.bind('keyup', function(){
		$(this).ColorPickerSetColor(this.value);
		$('#eventbg-preview').css('background-color', this.value);
	});
	$('#eventtext, #eventtext-preview').ColorPicker({
		onSubmit: function(hsb, hex, rgb, el) {
			$('#eventtext').val('#' + hex);
			$(el).ColorPickerHide();
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor($('#eventtext').val());
		},
		onChange: function (hsb, hex, rgb) {
			$('#eventtext-preview').css('background-color', '#' + hex);
		}
	})
	.bind('keyup', function(){
		$(this).ColorPickerSetColor(this.value);
		$('#eventtext-preview').css('background-color', this.value);
	});
	$('#eventdate, #eventdate-preview').ColorPicker({
		onSubmit: function(hsb, hex, rgb, el) {
			$('#eventdate').val('#' + hex);
			$(el).ColorPickerHide();
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor($('#eventdate').val());
		},
		onChange: function (hsb, hex, rgb) {
			$('#eventdate-preview').css('background-color', '#' + hex);
		}
	})
	.bind('keyup', function(){
		$(this).ColorPickerSetColor(this.value);
		$('#eventdate-preview').css('background-color', this.value);
	});
	$('#linkcolor, #linkcolor-preview').ColorPicker({
		onSubmit: function(hsb, hex, rgb, el) {
			$('#linkcolor').val('#' + hex);
			$(el).ColorPickerHide();
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor($('#linkcolor').val());
		},
		onChange: function (hsb, hex, rgb) {
			$('#linkcolor-preview').css('background-color', '#' + hex);
		}
	})
	.bind('keyup', function(){
		$(this).ColorPickerSetColor(this.value);
		$('#linkcolor-preview').css('background-color', this.value);
	});

	// handle form submit
	$('#applybtn').click(function() {
		if ($(this).val() == 'Change Settings')
		{
			$('#code').hide();
			$('#config').show();
			$(this).val('Apply Settings');
			$('#applybtn_code').show();
		}
		updatePreview();
		return false;
	});
	$('#applybtn_code').click(function() {
		updatePreview();
		generateCode();
		$('#config').hide();
		$(this).hide();
		$('#applybtn').val('Change Settings');
		$('#code').show();
		return false;
	});

	// automatically select all the code when clicking in the textarea
	$('#widget-code').click(function() {
		$(this).focus();
		$(this).select();
	});
});