window.addEvent('domready', function() {

var target = $('target');
var fx = new Fx.Styles(target, {duration: 1000, wait: false});
var box = $('box');
 
target.setStyles({
	'top': 0,
	'left': 325
});
 
var selectTransition = $('fxTransition');
var selectEase = $('fxEase');
var durationInput = $('duration');
 
var result = $('result');
 
 
$$(selectEase, selectTransition).addEvent('change', function(){
	var transition = selectTransition.getValue();
	if (transition == 'linear'){
		fx.options.transition = Fx.Transitions.linear;
		transition = 'Fx.Transitions.linear';
	} else {
		var ease = selectEase.getValue();
		fx.options.transition = Fx.Transitions[transition][ease];
		transition = 'Fx.Transitions.' + transition + '.' + ease;
	}
	result.setHTML(transition);
});
 
selectEase.fireEvent('change');
 
durationInput.addEvent('blur', function(){
	fx.options.duration = parseFloat(durationInput.getValue());	
});
 
box.addEvent('mousedown', function(event){
	event = new Event(event);
	fx.start({
		'top': 0,
		'left': 325
	});
	event.stop();
});
 
new Drag.Base(target, {
 
	onComplete: function(){
		fx.start({'top': 0, 'left': 325});
	},
 
	onStart: function(){
		this.s = {
			'left': 325,
			'top': 0
		};
	}
 
});});