filling-factory/filling-factory.js

function collect()
{
	var values = {};
	$(".ui-slider").each(function()
		{
			values[this.id] = $(this).slider('value');
		});
	return values;
}

function getImage()
{
	var params = $.param(collect());
	var image = $(new Image())
		.attr('src', 'fill.php?'+params)
		.load(function()
			{
				$(this)
					.wrap('<a href="'+$(this).attr('src')+'"></a>')
					.closest('div')
					.effect('slide')
			});
	
	$('<div>')
		.append(image)
		.append($('<code>').text(params))
		.prependTo('#output')
		.hide();
}

function update()
{
	var color = collect();
	color.a *= 2;
	
	hex = {};			
	$.each(color, function(i, val)
		{
			var h = val.toString(16);
			
			hex[i] = h.length == 1
				? '0' + h
				: h;
		});
	
	
	// Color swatch
	$('#swatch')
		.css('background-color', '#' + hex.r + hex.g + hex.b)
		.css('opacity', 1-color.a/256)
		.children()
		.html('#' + hex.r + hex.g + hex.b);
	
	
	// Sliders
	$('#r .ui-slider-range').css('background', '#'+hex.r+'0000');
	$('#g .ui-slider-range').css('background', '#00'+hex.g+'00');
	$('#b .ui-slider-range').css('background', '#0000'+hex.b);
	$('#a .ui-slider-range').css('background', '#'+hex.a+hex.a+hex.a);
}

$(function()
{
	// Set up sliders
	$('#a, #r, #g, #b')
		.slider(
			{
				orientation: 'horizontal',
				range: 'min',
				max: 255,
				value: 0,
				animate: true,
				slide: update,
				change: update
			})
		.filter('#a')
		.slider('option', 'max', 127);
	
	// Give them random starting values
	$('#r').slider('option', 'value', Math.floor(Math.random()*256));
	$('#g').slider('option', 'value', Math.floor(Math.random()*256));
	$('#b').slider('option', 'value', Math.floor(Math.random()*256));			
			
	// Set up button
	$('button')
		.click(getImage);
	
	// Initial update
	update();
});