window.addEvent('domready', function(){
	
	var img = $$('#gallery-fade');
	var imgs = $$('#gallery-fade img');
	imgs.set('opacity', 0);
	imgs[0].set('opacity', 1);
	var count = imgs.length;
	var counter = 0;
	var	html = '';
	imgs.set('tween', {duration: '1250'});
	
	html += '<span id="fade_back">&lt;</span>';
	for( i = 0; i < count; i++) {
		html += '<span class="fade_picNum">' + (i+1) + '</span>';
	}
	html += '<span id="fade_forward">&gt;</span>'

	if(count > 1) {
	
		var eSpan = new Element('span', {id: 'fadenav'});
		eSpan.inject($('gallery-fade'), 'after');
		
		$('fadenav').innerHTML = html;
	
	}
	
	$('fade_forward').addEvents({
		'click': function() {
			fadeGallery_fade('forward');
		}
	});
	
	$('fade_back').addEvents({
		'click': function() {
			fadeGallery_fade('backward');
		}				
	});
	
	$$('.fade_picNum').addEvents({
		'click': function() {
			x = (this.get('text') - 1);
			fadeGallery_fade(x);
		}
	});

	function fadeGallery_fade(direction) {
		var fx = new Fx.Tween(imgs[counter], {
			duration: 1250,
			onComplete: function() {
				if(direction == 'forward') {
					if(counter >= count-1) {
						counter = 0;	
					}
					else {
						counter++;	
					}
				}
				else if(direction == 'backward') {
					if(counter <= 0) {
						counter = count-1;	
					}
					else {
						counter--;	
					}
				}
				else {
					counter = x;
				}
				imgs[counter].tween('opacity', 1);
			}
		});
		fx.start('opacity', 1, 0);
	}

});