window.addEvent( 'domready', function() {
	var els = $$( '#slider ul li' );
	var size = els.length;
	if( size > 1 ) {
		var controls = $$( '#slider .controllers span' );
		els.fade( 0 );
		els[0].fade( 1 );
		controls[0].addClass( 'active' );

		var active = 0;
		// periodical
		var fx = function() {
			els[active].fade( 'out' );
			controls[active].removeClass( 'active' );
			if( active == size - 1 ) active = 0;
			else active++;
			els[active].fade( 'in' );
			controls[active].addClass( 'active' );
		};
		periodical = fx.periodical( 3000 );

		controls.each( function( item, index ) {
			item.addEvent( 'click', function() {
				if( index == active ) return;
				els[active].fade( 0 );
				els[index].fade( 1 );
				controls[active].removeClass( 'active' );
				controls[index].addClass( 'active' );
				active = index;
			});
		});
	}
});