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

	var selectTransition = $('fxTransition');
	var selectEase = $('fxEase');
	var durationInput = $('duration');
	 
	var result = $('result');
	
	var myTransition;
	var myDuration; 
		 
	var pleahs = $$("#acCase .acContent");
	var pleahFx = new Fx.Elements(pleahs, {wait: false, duration: 1000});
	
 
	 
	$$(selectEase, selectTransition).addEvent('change', function(){
		var transition = selectTransition.getValue();
		if (transition == 'linear'){
			pleahFx.options.transition = Fx.Transitions.linear;
			transitions = 'Fx.Transitions.linear';
			//myTransition = Fx.Transitions.transition;
		} else {
			var ease = selectEase.getValue();
			pleahFx.options.transition = Fx.Transitions[transition][ease];
			transitions = 'Fx.Transitions.' + transition + '.' + ease;
			//myTransition = Fx.Transitions.transition.ease;
		}
		result.setHTML(transitions);
	});
	 
	selectEase.fireEvent('change');
	durationInput.addEvent('blur', function(){
		pleahFx.options.duration = parseFloat(durationInput.getValue());	
	});
	

	var moveAmount = 0, interval = 0;
	
	$$('#acCase .acContent h2').each(function(pleahH2, i) {
		interval = pleahH2.getStyle('width').toInt();
	});
	moveAmount = $('acCase').getStyle('width').toInt() - interval * $$('#acCase .acContent h2').length;
	
	pleahs.each(function(acCase, i) {
		acCase.setStyle("left", i * interval);
//		acCase.addEvent("mousedown", function(event) {
		acCase.addEvent("mouseover", function(event) {
			var o = {};
			var l = acCase.getStyle("left").toInt()
			o[i] = {left: [l, i * interval]}
			pleahs.each(function(other, j) {
				var l2 = other.getStyle("left").toInt();
				if(i > j) {
					o[j] = {left: [l2, j * interval]};
				}
				if(i < j) {
					o[j] = {left: [l2, (j * interval) + moveAmount]};
				}
			});
			pleahFx.start(o);

		});
	});
});