var pixler = {
	
	load: function(){
		this.red = this.green = this.blue = this.opacity = 0;
		this.createSliders();
	},

	createSliders: function(){
		$$('.slider').each(function(e){
			if(e.id == 'opacity')
				var range = [0, 100];
			else
				var range = [0, 255];
			new Slider(e, e.getElement('.knob'), {
			    range: range,
			    wheel: true,
			    onStart: function(){
			    },
			    onChange: function(v){
					this.sliderChanged(e, v);
			    }.bind(this),
			    onComplete: function(){
					this.updateBg();
			    }.bind(this)
			}).set($random(range[0],range[1]));
		}, this);
	},
	
	sliderChanged: function(e, value){
		which = e.id;
		var bgColor;
			if(which == 'red'){
				this.red = value;
				bgColor = [value, 0, 0];
			}
			if(which == 'green'){
				this.green = value;
				bgColor = [0, value, 0]
			}
			if(which == 'blue'){
				this.blue = value;
				bgColor = [0, 0, value]
			}
			if(which == 'opacity')
				this.opacity = value;
		if(which == 'opacity')
			e.setStyle('background-image', 'url(pixler.php?o='+value+')');
		else
			e.setStyle('background-color', new Color(bgColor));
	},
	
	updateBg: function(){
		var pixlerUrl = 'http://trickeries.com/demo/pixler/pixler.php?';
		pixlerUrl += 'o=' + this.opacity;
		pixlerUrl += '&r=' + this.red;
		pixlerUrl += '&g=' + this.green;
		pixlerUrl += '&b=' + this.blue;
		$('pixler').setStyle('background', 'transparent url('+pixlerUrl+') repeat scroll 0 0');
		$('pixler-url').set('text', pixlerUrl);
	}

}

window.addEvent('domready', function(){
	pixler.load();
});