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();
});