Event.observe(window, "load", function(){
	
	var gallerie = $('gallery-content');

	

	
	var pages = gallerie.childElements('page-gallery');
	
	
	var numPage = pages.size();
	var currentPage=1;
	
	var next = $('arrow-right');
	var prev = $('arrow-left');
	
	var p = $$('.gallery-element');
	
	function nextC(){
		if (currentPage < numPage){
			$('el'+currentPage).setStyle({color: 'white'});
			Effect.DropOut($('p'+currentPage),{duration: 0.5, afterFinish: function(){
				currentPage = currentPage + 1;
				Effect.Appear('p'+currentPage,{duration: 0.5});
				$('el'+currentPage).setStyle({color: 'red'});
			}});
		}		
		
	}
	
	function prevC(){
		if (currentPage > 1){
			$('el'+currentPage).setStyle({color: 'white'});
			Effect.DropOut('p'+currentPage,{duration: 0.5,afterFinish: function(){
				currentPage = currentPage - 1;
				Effect.Appear('p'+currentPage,{duration: 0.5});
				$('el'+currentPage).setStyle({color: 'red'});
			}});
		}		
		
	}
	
	function selectPage(sel){
		Effect.DropOut('p'+currentPage,{duration: 0.8,afterFinish: function(){
			$('el'+currentPage).setStyle({color: 'white'});
			Effect.Appear('p'+sel,{duration: 0.5});
			$('el'+sel).setStyle({color: 'red'});
			currentPage = sel;
		}});		
	}
	
	pages.each(function(el){
		el.setStyle({display: 'none'});		
	});
	
	pages[0].setStyle({display: 'block'});
	$('el'+currentPage).setStyle({color: 'red'});
	
	next.observe('click',function(){
		nextC(currentPage.toInteger);
	});
	
	prev.observe('click',function(){
		prevC(currentPage.toInteger);
	});
	
	p.each(function(el){
		el.observe('click',function(){
			var str = new String(el.id);
			var num = new String(str.slice(2));
			selectPage(parseInt(num));
		});
	});
	

	
	
	
});