window.addEvent('domready',function(){
	
	if ($('characters_r') && $('characters_l')){
		var active = 1;
		var total = $$('.container>div').length;

		$('characters_r').addEvent('click',function(event){
			event.stop();
			if (active<(total-2)){
				++active;
				if (active==(total-2)) $('characters_r').className='characters_r_off';
					else $('characters_r').className='characters_r_on';
				if (active==(1)) $('characters_l').className='characters_l_off';
					else $('characters_l').className='characters_l_on';

				
				var myE = new Fx.Morph($$('.container')[0], {duration: 500, wait: false, unit: '%', transition: Fx.Transitions.Sine.easeOut});
				if (myE){myE.cancel();}
				myE.start({
				 	'margin-left':((active-1)*(-100)/3)
				});
			}
		});

		$('characters_l').addEvent('click',function(event){
			event.stop();
			if (active>1){
				--active;
				if (active==(total-2)) $('characters_r').className='characters_r_off';
					else $('characters_r').className='characters_r_on';
				if (active==(1)) $('characters_l').className='characters_l_off';
					else $('characters_l').className='characters_l_on';
				
				var myE = new Fx.Morph($$('.container')[0], {duration: 500, wait: false, unit: '%', transition: Fx.Transitions.Sine.easeOut});
				if (myE){myE.cancel();}
				myE.start({
				 	'margin-left':((active-1)*(-100)/3)
				});
			}
		});
	}
	
});