window.addEvent('domready', function()
{
	$$('.area.float').pick().setStyle('opacity', 0);
	
	var showAreas = function()
	{
		var griserHeight = document.getScrollSize().y;
		
		var griser = new Element('div');
		griser.addClass('griser');
		griser.set({
			'styles': {
				'position': 'absolute',
				'top': -griserHeight,
				'left': 0,
				'width': document.getScrollSize().x,
				'height': griserHeight,
				'background-color': '#0b0b0e',
				'display': 'block',
				'opacity': 0
			}
		});
		
		if($$('.griser').length)
		{
			griser.inject($$('.griser').pick(), 'before');
		}
		else
		{
			griser.inject($('pgt_main_wrapper'));
		}
		
		var floatingArea = $$('.area.float').pick();
		
		floatingArea.set('morph', {
			duration: 'normal', 
			transition: Fx.Transitions.Sine.easeOut
		});
		
		floatingArea.morph({
			'top': 130, 
			'opacity': 1
		});
		
		griser.set('morph', {
			duration: 'normal', 
			transition: Fx.Transitions.Sine.easeOut
		});
		
		griser.morph({
			'top': 0, 
			'opacity': 0.9
		});
	}
	
	var hideAreas = function()
	{
		var floatingArea = $$('.area.float').pick();
		var griser = $$('.griser').pick();
		
		floatingArea.set('morph', {
			duration: 'normal', 
			transition: Fx.Transitions.Sine.easeOut
		});
		
		floatingArea.morph({
			'top': -500, 
			'opacity': 0
		});
		
		griser.set('morph', {
			duration: 'normal', 
			transition: Fx.Transitions.Sine.easeOut
		});
		
		griser.get('morph').addEvent('complete', function()
		{
			this.destroy();
		}.bind(griser));
		
		griser.morph({
			'top': -window.getHeight(), 
			'opacity': 0
		});
	}
	
	toggleAreas = function()
	{
		if($$('.area.float').pick().getStyle('opacity') == '0')
		{
			showAreas();
		}
		else
		{
			hideAreas();
		}
	}
	
	$$('#pgt_button_layer', '.btn_countries').addEvent('click', function()
	{
		toggleAreas();
	});
	
	$$('.area.float').pick().getElement('p.close a').addEvent('click', function(e)
	{
		e.stop();
		
		toggleAreas();
	});
	
	$$('.area').forEach(function(area)
	{
		var resultBlock = area.getElement('.results_1st_lvl');
		var resultLayer = area.getElement('.layer_resultats');
		
		resultBlock.store('topItem', 0);
		
		area.getElements('ul.map li[rel]').forEach(function(item)
		{
			item.addEvent('click', function(e)
			{
				e.stop();
				resultBlock.store('topItem', 0);
				var continent = this.get('rel');
				
				mapRequest = new Request({
					method: 'post', 
					url: '/index.php?template=includes/countries', 
					evalScripts : true, 
					onSuccess: function(responseText)
					{
						
						resultBlock.set('html', responseText);
						resultLayer.setStyle('display', 'block');
						
						resultLayer.set('morph', {
							duration: 'short', 
							transition: Fx.Transitions.Sine.easeOut
						});
						
						resultLayer.morph({
							'opacity': 1
						});
						
						var lists = resultBlock.getElements('ul.countries');
						var listCount = lists.length;
						var listWidth = lists.pick().getWidth();
						
						resultLayer.getElement('.wrapper').setStyles({
							'width': (listWidth * listCount) + 10, 
							'overflow': 'hidden'
						});
						
						countryScroller = new Fx.Scroll(resultLayer.getElement('.scroller'));
						
						if(resultLayer.getElement('a.prev') != null)
						{
							resultLayer.getElement('a.prev').setStyle('visibility', 'hidden');
							
							resultLayer.getElement('a.prev').addEvent('click', function(e)
							{
								e.stop();
								
								var newTopItem = resultBlock.retrieve('topItem') - 1;
								
								
								if(!lists[newTopItem])
								{
									return(false);
								}
								
								resultBlock.store('topItem', newTopItem);
								
								this.toElement(lists[newTopItem]);
								
								if(newTopItem == 0)
								{
									resultLayer.getElement('a.prev').setStyle('visibility', 'hidden');
								}
								else if(listCount > 1)
								{
									resultLayer.getElement('a.prev').setStyle('visibility', 'visible');
								}
								resultLayer.getElement('a.next').setStyle('visibility', 'visible');
							}.bind(countryScroller));
						}
						
						if(resultLayer.getElement('a.next') != null)
						{
							resultLayer.getElement('a.next').addEvent('click', function(e)
							{
								e.stop();
								
								var newTopItem = resultBlock.retrieve('topItem') + 1;
								
								if(!lists[newTopItem])
								{
									return(false);
								}
								
								resultBlock.store('topItem', newTopItem);
								
								this.toElement(lists[newTopItem]);
								
								if(newTopItem == listCount - 1)
								{
									resultLayer.getElement('a.next').setStyle('visibility', 'hidden');
								}

								resultLayer.getElement('a.prev').setStyle('visibility', 'visible');
							}.bind(countryScroller));
						}
						
						resultLayer.getElements('ul li').forEach(function(country)
						{
							country.addEvent('click', function(e)
							{
								e.stop();
								
								mapRequest = new Request({
									method: 'post', 
									url: '/index.php?template=includes/country',
									evalScripts : true, 
									onSuccess: function(responseText)
									{
										resultBlock.set('html', responseText);
										resultBlock.getElement('p.back a').addEvent('click', function(e)
										{
											e.stop();
											
											area.getElement('ul.map li.map_'+continent).fireEvent('click', e);
										});
									},
									link: 'cancel'
								}).send('country_id='+this.get('rel'));
							});
						});
					},
					link: 'cancel'
				}).send('continent='+continent);
			});
			
			item.addEvent('mousemove', function(e)
			{
				var layer = this.getElement('.layer');
				layer.set({
					styles: {
						position: "absolute", 
						left: (e.client.x + document.getScroll().x) - this.getLeft() - (layer.getWidth() / 2), 
						top: (e.client.y + document.getScroll().y) - this.getTop() - 35
					}
				});
			});
		});
		
		resultLayer.getElement('a.close').addEvent('click', function(e)
		{
			e.stop();
			
			this.buttonCloseEvent = function()
			{
				resultLayer.setStyle('display', 'none');
				
				resultLayer.get('morph').removeEvent('complete', this.buttonCloseEvent);
			}.bind(this);
			
			resultLayer.get('morph').addEvent('complete', this.buttonCloseEvent);
			
			resultLayer.morph({
				'opacity': 0
			});
		});
	});
});