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

	
	
	/* DOT MOVING */
	var dot = $('filled');
	
	var one = $('stage-one');
	var two = $('stage-two');
	var three = $('stage-three');
	var array=new Array();
	array[0] = one;
	array[1] = two;
	array[2] = three;
	
				 
	var fun1 = function(last){ 
		array[last].setStyle('visibility','visible'); 
		array[last].fade('out'); 
	};
	var fun2 = function(c){ 
		dot.setStyle('margin-left',c * 6 + c * 7 + 3); 
		array[c].setStyle('visibility','visible'); 
		array[c].fade('in'); 
	};
	


	function transistion(){
		
		var last = current;
		current++;
		if(current >= array.length) current = 0;
		
		var x = new Chain();
		x.chain(fun1(last));
		x.chain(fun2(current));
		x.callChain(); 
		x.callChain.delay(500, x); /*wait .5 secs'*/
	
	}
	
	

	
	
	 $$(".dot").addEvent("click", function(e) {
	 
		$clear(timer);
		new Event(e).stop();
		
		var last = current;
		current = e.target.get('id');
		
		var x = new Chain();
		x.chain(fun1(last));
		x.chain(fun2(current));
		x.callChain(); 
		x.callChain.delay(500, x);
		
		timer = transistion.periodical(6000, null, null);
		
	 });
	 
	 
	var current = 0;
	two.fade('hide');
	three.fade('hide');
	var timer = transistion.periodical(6000, null, null); 
	 
	/* END OF DOT MOVING */
	
	
});