window.addEvent('domready', function() {
	var myFx = new Fx.Slide('topfive', {
	    duration: 'long',
	    transition: Fx.Transitions.Bounce.easeOut
	});
	myFx.hide();

	$('topfive').setStyle('display','block');
	$('topfive').getParent().setStyle('margin', '0 auto');

	$('all_li').setProperty('class','navtopfiveSelected')
	$('shoes_li').setProperty('class','navtopfive')
	$('trainers_li').setProperty('class','navtopfive')
	$('boots_li').setProperty('class','navtopfive')

	myFx.show();
 
	$('showtopfiveboots').addEvent('click', function(e){
		e = new Event(e);
		myFx.hide();
		$('all_li').setProperty('class','navtopfive')
		$('shoes_li').setProperty('class','navtopfive')
		$('trainers_li').setProperty('class','navtopfive')
		$('boots_li').setProperty('class','navtopfiveSelected')

		swaptopfive('topfiveboots');
		myFx.toggle();
		$('topfive').getParent().setStyle('margin', '0 auto');
		e.stop();
	});

	$('showtopfiveall').addEvent('click', function(e){
		e = new Event(e);
		myFx.hide();
		$('all_li').setProperty('class','navtopfiveSelected')
		$('shoes_li').setProperty('class','navtopfive')
		$('trainers_li').setProperty('class','navtopfive')
		$('boots_li').setProperty('class','navtopfive')

		swaptopfive('topfiveall');
		myFx.toggle();
		$('topfive').getParent().setStyle('margin', '0 auto');
		e.stop();
	});

	$('showtopfiveshoes').addEvent('click', function(e){
		e = new Event(e);
		myFx.hide();
		$('all_li').setProperty('class','navtopfive')
		$('shoes_li').setProperty('class','navtopfiveSelected')
		$('trainers_li').setProperty('class','navtopfive')
		$('boots_li').setProperty('class','navtopfive')

		swaptopfive('topfiveshoes');
		myFx.toggle();
		$('topfive').getParent().setStyle('margin', '0 auto');

		e.stop();
	});

	$('showtopfivetrainers').addEvent('click', function(e){
		e = new Event(e);
		myFx.hide();
		$('all_li').setProperty('class','navtopfive')
		$('shoes_li').setProperty('class','navtopfive')
		$('trainers_li').setProperty('class','navtopfiveSelected')
		$('boots_li').setProperty('class','navtopfive')

		swaptopfive('topfivetrainers');
		myFx.toggle();
		$('topfive').getParent().setStyle('margin', '0 auto');
		e.stop();
	});

})


function swaptopfive(to){

	$('topfive').set('html', $(to).get('html'));

}