window.addEvent('domready', function() {
	var region_uparrow_status = {
		0: 'visibility:hidden',
		1: 'visibility:visible',
		2: 'visibility:visible',
		3: 'visibility:visible',
		4: 'visibility:visible'
	};

	var region_downarrow_status = {
		0: 'visibility:visible',
		1: 'visibility:visible',
		2: 'visibility:visible',
		3: 'visibility:visible',
		4: 'visibility:hidden'
	};

	var regionSlide = 1;

	var regionVerticalSlide = new Fx.Tween('region_vertical_slide',{
    property: 'marginTop', duration: 1000, transition: Fx.Transitions.Quart.easeInOut});

	$('region_toggle_down').addEvent('click', function(e){
		e.stop();
		if(regionSlide >= 1 && regionSlide < 5){
			regionVerticalSlide.start(-276 * regionSlide);
			regionSlide = regionSlide + 1;
		};
		
	});

	$('region_toggle_up').addEvent('click', function(e){
		e.stop();
		if(regionSlide > 1 && regionSlide <= 5){
			regionVerticalSlide.start(-276 * (regionSlide - 2));
			regionSlide = regionSlide - 1;
		};
		
	});

	// When Vertical Slide ends its transition, we check for its status
	// note that complete will not affect 'hide' and 'show' methods
	regionVerticalSlide.addEvent('complete', function() {
		$('region_toggle_up').set('style', region_uparrow_status[regionSlide - 1]);
	});
	regionVerticalSlide.addEvent('complete', function() {
		$('region_toggle_down').set('style', region_downarrow_status[regionSlide - 1]);
	});

});