function updatePreview(){
	var settings = [];
	settings[0] = $('#numberUpdates').attr('value');
	settings[1] = $('#showDate').attr('value');
	settings[2] = $('#width').attr('value');
	settings[3] = $('#backgroundColor').attr('value').substr(1, 6);
	settings[4] = $('#backgroundTransparent').attr('value');
	settings[5] = $('#borderColor').attr('value').substr(1, 6);
	settings[6] = $('#foregroundColor').attr('value').substr(1, 6);
	var code = '[url=http://twitter.com/'+escape($('#username').attr('value'))+'][img]http://twitterforweb.com/twitterforweb.'+escape($('#username').attr('value'))+'.'+settings.join(',')+'.png[/img][/url]\n[b][url=http://twitterforweb.com/twitterforforum.html]Twitter for Forum[/url][/b]';
	var code2 = '<a href="http://twitter.com/'+escape($('#username').attr('value'))+'" target="_blank" title="Follow '+escape($('#username').attr('value'))+'\'s Twitter"><img src="http://twitterforweb.com/twitterforweb.'+escape($('#username').attr('value'))+'.'+settings.join(',')+'.png" alt="Twitter loading" /></a><br><strong><a href="http://twitterforweb.com/twitterforforum.html" title="Twitter for Forum">Twitter for Forum</a></strong>';
	try {
		document.getElementById('code').value=code;
	} catch(e) {
		document.getElementById('code').innerHTML=code.replace(/\</g, '&lt;').replace(/\>/g, '&gt;');
	}
	try {
		document.getElementById('code2').value=code2;
	} catch(e) {
		document.getElementById('code2').innerHTML=code2.replace(/\</g, '&lt;').replace(/\>/g, '&gt;');
	}
	$('#code3').attr('value', "http://twitterforweb.com/twitterforweb."+escape($('#username').attr('value'))+'.'+settings.join(',')+'.png');
	
	$('#previewSignature').html(' ').attr('class', 'loadingSig');
	
	img = new Image();
	img.onload = function() {
		$('#previewSignature').attr('class', '').html('<a href="http://twitter.com/'+escape($('#username').attr('value'))+'" target="_blank"><img src="'+this.src+'" /></a>');
	}
	img.src = "http://twitterforweb.com/twitterforweb."+escape($('#username').attr('value'))+'.'+settings.join(',')+'.png?_rnd='+(new Date()).getTime();
	return false;
};

var $_memoryValue = '';

$(document).ready(function() {
	updatePreview();
	$('#backgroundColor').ColorPicker({
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val('#'+hex);
			$(el).ColorPickerHide();
			if ($('#backgroundColor').attr('value') != $_memoryValue) {
				$_memoryValue = $('#backgroundColor').attr('value');
				updatePreview();
			}
		},
		onChange: function(hsb, hex, rgb, el) {
			$('#backgroundColor').val('#'+hex);
		},
		onBeforeShow: function () {
			$_memoryValue = this.value;
			$(this).ColorPickerSetColor(this.value);
		},
		onHide: function (hsb) {
			if ($('#backgroundColor').attr('value') != $_memoryValue) {
				$_memoryValue = $('#backgroundColor').attr('value');
				updatePreview();
			}
		}
	});
	$('#borderColor').ColorPicker({
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val('#'+hex);
			$(el).ColorPickerHide();
			if ($('#borderColor').attr('value') != $_memoryValue) {
				$_memoryValue = $('#borderColor').attr('value');
				updatePreview();
			}
		},
		onChange: function(hsb, hex, rgb, el) {
			$('#borderColor').val('#'+hex);
		},
		onBeforeShow: function () {
			$_memoryValue = this.value;
			$(this).ColorPickerSetColor(this.value);
		},
		onHide: function (hsb) {
			if ($('#borderColor').attr('value') != $_memoryValue) {
				$_memoryValue = $('#borderColor').attr('value');
				updatePreview();
			}
		}
	});
	$('#foregroundColor').ColorPicker({
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val('#'+hex);
			$(el).ColorPickerHide();
			if ($('#foregroundColor').attr('value') != $_memoryValue) {
				$_memoryValue = $('#foregroundColor').attr('value');
				updatePreview();
			}
		},
		onChange: function(hsb, hex, rgb, el) {
			$('#foregroundColor').val('#'+hex);
		},
		onBeforeShow: function () {
			$_memoryValue = this.value;
			$(this).ColorPickerSetColor(this.value);
		},
		onHide: function (hsb) {
			if ($('#foregroundColor').attr('value') != $_memoryValue) {
				$_memoryValue = $('#foregroundColor').attr('value');
				updatePreview();
			}
		}
	});
	$('#backgroundTransparent').bind('change', function() {
		$('#backgroundColor').attr('disabled', this.value == 1);
		return updatePreview();
	});
	$('#numberUpdates, #showDate').bind('change', updatePreview);
	$('#username, #width').bind('focus', function() {
		$_memoryValue = this.value;
	}).bind('blur', function() {
		if (this.value != $_memoryValue) {
			return updatePreview();
		}
	});
	$('#code, #code2, #code3').bind('focus', function() {
		try {
			this.select();
		} catch (e){};
	});
	$('#twitterForm').bind('submit', function() {
		return updatePreview();
	});
	$('#resetButton').bind('click', function() {
		$('#numberUpdates').attr('value', 2);
		$('#showDate').attr('value', 1);
		$('#width').attr('value', 500);
		$('#backgroundColor').attr('value', '#f4f4f4').attr('disabled', false);
		$('#backgroundTransparent').attr('value', 0);
		$('#borderColor').attr('value', '#c4c4c4');
		$('#foregroundColor').attr('value', '#000000');
		return updatePreview();
	});
});