function update() {
	new Asset.image('./images/rounded.php?' + buildQuery(), {
		onload: function(el) {
			$('image').setStyles({
				'width':			el.get('width').toInt(),
				'height':			el.get('height').toInt(),
				'background-image':	'url(' + el.get('src') + ')'
			});
			
			try {
				IEPNGFix.update();
			} catch(e) {/*do nothing*/}
		}
	});
}

function buildQuery() {
	return new Hash({
		sh:		$('shape').get('value'),
		o:		$('orientation').get('value'),
		si:		$('side').get('value'),
		r:		$('radius').get('value'),
		bw:		$('borderwidth').get('value'),
		h:		$('height').get('value'),
		w:		$('width').get('value'),
		fgc:	$('foregroundcolor').get('value').match(/[a-fA-F0-9]+/)[0],
		bc:		$('bordercolor').get('value').match(/[a-fA-F0-9]+/)[0],
		bgc:	$('backgroundcolor').get('value').match(/[a-fA-F0-9]+/)[0],
		tc:		$('transparentcolor').get('value').match(/[a-fA-F0-9]+/)[0],
		fgo:	$('foregroundopacity').get('value'),
		bo:		$('borderopacity').get('value'),
		bgo:	$('backgroundopacity').get('value'),
		f:		$('format').get('value'),
		aa:		$('antialias').checked ? 1 : 0
	}).toQueryString();
}

function placeCanvas() {
	var s = window.getSize();
	$('canvas').setStyles({
		'width':	s.x,
		'height':	s.y - 34
	});
}

function updateShape() {
	switch ($('shape').get('value')) {
		case 's' :
			updateSide();
			$('side').disabled = false;
			$('orientation').disabled = true;
			break;
		case 'r' :
			$('height').disabled = false;
			$('width').disabled = false;
			$('side').disabled = true;
			$('orientation').disabled = true;
			break;
		case 'c' :
		default :
			$('height').disabled = true;
			$('width').disabled = true;
			$('side').disabled = true;
			$('orientation').disabled = false;
			break;
	}
}

function updateSide() {
	switch ($('side').get('value')) {
		case 'l' :
		case 'r' :
			$('height').disabled = false;
			$('width').disabled = true;
			break;
		case 'b' :
		case 't' :
		default :
			$('height').disabled = true;
			$('width').disabled = false;
			break;
	}
}

window.addEvent('domready', function() {
	new Drag('image', {
		snap: 0,
		handle: $('canvas')
	});
	
	new Slider('fgoslider', 'fgoknob', {
		onChange: function(step) {
			$('foregroundopacity').set('value', step);
		},
		onComplete: function(step) {
			update();
		}
	}).set($('foregroundopacity').get('value'));
	
	new Slider('boslider', 'boknob', {
		onChange: function(step) {
			$('borderopacity').set('value', step);
		},
		onComplete: function(step) {
			update();
		}
	}).set($('borderopacity').get('value'));
	
	new Slider('bgoslider', 'bgoknob', {
		onChange: function(step) {
			$('backgroundopacity').set('value', step);
		},
		onComplete: function(step) {
			update();
		}
	}).set($('backgroundopacity').get('value'));
	
	$('shape').addEvent('change', function(evt) {
		updateShape();
	});
	
	$('side').addEvent('change', function(evt) {
		updateSide();
	});
	
	$$('#orientation, #format, #side, #shape').addEvent('change', function(evt) {
		update();
	});
	
	$('antialias').addEvent('click', function(evt) {
		update();
	});
	
	var timer;
	$$('#radius, #borderwidth, #height, #width').addEvent('keyup', function(evt) {
		$clear(timer);
		timer = update.delay(750);
	});
	
	$('foregroundpalatte').setStyle('background-color', $('foregroundcolor').get('value'));
	new MooRainbow('foregroundpalatte', {
		id: 'rainbow1',
		startColor: $('foregroundcolor').get('value').hexToRgb(true),
		onChange: function(color) {
			$('foregroundpalatte').setStyle('background-color', color.hex);
			$('foregroundcolor').set('value', color.hex);
			$clear(timer);
			timer = update.delay(750);
		}
	});
	
	$('borderpalatte').setStyle('background-color', $('bordercolor').get('value'));
	new MooRainbow('borderpalatte', {
		id: 'rainbow2',
		startColor: $('bordercolor').get('value').hexToRgb(true),
		onChange: function(color) {
			$('borderpalatte').setStyle('background-color', color.hex);
			$('bordercolor').set('value', color.hex);
			$clear(timer);
			timer = update.delay(750);
		}
	});
	
	$('backgroundpalatte').setStyle('background-color', $('backgroundcolor').get('value'));
	new MooRainbow('backgroundpalatte', {
		id: 'rainbow3',
		startColor: $('backgroundcolor').get('value').hexToRgb(true),
		onChange: function(color) {
			$('backgroundpalatte').setStyle('background-color', color.hex);
			$('backgroundcolor').set('value', color.hex);
			$clear(timer);
			timer = update.delay(750);
		}
	});
	
	$('transparentpalatte').setStyle('background-color', $('transparentcolor').get('value'));
	new MooRainbow('transparentpalatte', {
		id: 'rainbow4',
		startColor: $('transparentcolor').get('value').hexToRgb(true),
		onChange: function(color) {
			$('transparentpalatte').setStyle('background-color', color.hex);
			$('transparentcolor').set('value', color.hex);
			$clear(timer);
			timer = update.delay(750);
		}
	});
	
	placeCanvas();
	updateShape();
	update();
});

window.addEvent('resize', function(evt) {
	placeCanvas();
});