window.addEvent('domready', function() {
 
	// prev / next
	var fx = new Fx.Cycles.fadeZoom('main1', {
			autostart: false,
			duration:2000,
			steps: 4000,
			onAnimeIn: function(curr, next) {
				$('text1').set('html', next.get('src').replace('/examples/1.3.1/cycle_slide/images/', ''));	
			},
			onAnimeOut: function(curr, next) {
				$('text1').set('html', 'doing... ' + curr.get('src').replace('/examples/1.3.1/cycle_slide/images/', ''));	
			},
			handles: {
				next: 'next1',
				prev: 'prev1'
			}
	});
 
	// 0 | 1 | 2
	var fx2 = new Fx.Cycles.fadeZoom('main2', {
			autostart: false,
			duration:2000,
			steps: 4000,
			onAnimeIn: function(curr, next) {
				$('text2').set('html', next.get('src').replace('/examples/1.3.1/cycle_slide/images/', ''));	
			},
			onAnimeOut: function(curr, next) {
				$('text2').set('html', 'doing... ' + curr.get('src').replace('/examples/1.3.1/cycle_slide/images/', ''));	
			}
	});
 
	$('img0').addEvent('click', function() {	  
		fx2.goTo(0);									  
	});
 
	$('img1').addEvent('click', function() {								 
		fx2.goTo(1);									  
	});
 
	$('img2').addEvent('click', function() {								  
		fx2.goTo(2);									  
	});
});