window.addEvent('domready', function(){
	
	
	var selectTransition = $('fxTransition');
	var selectEase = $('fxEase');
	var durationInput = $('duration');
	 
	var result = $('result');
	
	var myTransition;
	var myDuration; 
		 
	var pleahs = $$("#pleah .acContent");
	var pleahFx = new Fx.Elements(pleahs, {wait: false, duration: 1500,transition: Fx.Transitions.Back.easeInOut});
	 

	var moveAmount = 0, interval = 0, opened=1;
	
	$$('#pleah .acContent h2').each(function(pleahH2, i) {
		interval = pleahH2.getStyle('width').toInt();
	});
    
     
	moveAmount = $('pleah').getStyle('width').toInt() - interval * $$('#pleah .acContent h2').length;
        
    var o = {};
	pleahs.each(function(pleah, i) {
		//script to choose which div to be opened default
		if (i == (opened - 1)) { 

			pleah.addClass('active'); //setting the class for 'active' div [active is a CSS classname]

		}
		if (i == opened) { 
			pleah.setStyle("left", (i * interval) + moveAmount); //this is the default opened div

		}
		else if (i < opened) {
			pleah.setStyle("left", (i * interval)); //other div s which are left to opened

		}
		else if(i > opened) {
			pleah.setStyle("left", (i * interval) + moveAmount); //other div s which are right to opened

		}
		
		
		
		
		pleah.addEvent("mousedown", function(event) {
			pleah.addClass('active'); //setting the class for 'active' div

			var l = pleah.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]};
					other.removeClass('active'); // removing class from other divs
				}
				if(i < j) {
					o[j] = {left: [l2, (j * interval) + moveAmount]};
					other.removeClass('active'); // removing class from other divs
				}
			});
			pleahFx.start(o);
		});
	});
	

	
});