// Countries
var ChangeCountries = function() {	
	var button = $(document.body).getElement('div.toolbar').getChildren('a');
	var div = $(document.body).getElement('div.toolbar div.countries');
	button.addEvent('click', function(e){
		e.stop();
		div.setStyle('display', 'block');
		$(document.body).addEvent('click', function(){
			div.setStyle('display', 'none');
			$(document.body).removeEvents('click');
		});
	});

//=	button.destroy();
};

// Search bar
var SearchBar = function() {
	var label = $('labelSearch');
	var input = $(label.get('for'));
	var form = $('search');
	var input = $('searchKeyword');
	var button = form.getElement('a');
	
	// Add Search in the search input
	if ($chk(input)) {
		input.set('value', label.get('html'));
		input.addEvent('focus', function() { if (input.get('value')==label.get('html')) input.set('value', null); });
		input.addEvent('blur', function() { if (!$chk(input.get('value'))) input.set('value', label.get('html')); });
	}
	
	// Search History
	button.addEvent('click', function() {
		// AjaxRequest for recent search
		if (!$chk($('search-history'))) {
    		var myRequest = new Request({url: '/sync/search/recent.html?lang='+language, onSuccess: function (responseText) {
				// Create Div
				var results = new Element('div',
					{'id': 'search-history','html': '<div></div>', 'class': 'results', 'styles': {'top': 22, 'right': 0, 'z-index': 5000}
				}).inject(form); 
				// On click, destroy the div recent search
				$(document.body).addEvent('click', function(){
					$('search-history').destroy();
					$(document.body).removeEvents('click');
				});
    			// Adding the recent search to the div
    			results.set('html', '<div>'+responseText+'</div>');
    		}}).send();
		}
	});
};

// Buttons functions
var Buttons = function (item) {
	// Get content and size and empty element
	var text = item.get('html');
	var size = item.getSize();
	item.set('html', '');
	// Create spans
	new Element('span').inject(item);
	new Element('span', {'html': text.replace(' ', '&nbsp;')}).inject(item.getElement('span'));
	// Create Events
	var down = function() {
		item.setStyle('background-position', '0 -'+(size.y*2)+'px');
		item.getElement('span').setStyle('background-position', 'right -'+(size.y*2)+'px');
		item.getElement('span').getElement('span').setStyle('background-position', 'center -'+(size.y*2)+'px');
	};
	var over = function() {
		item.setStyle('background-position', '0 -'+size.y+'px');
		item.getElement('span').setStyle('background-position', 'right -'+size.y+'px');
		item.getElement('span').getElement('span').setStyle('background-position', 'center -'+size.y+'px');
	};
	var up = function() {
		item.setStyle('background-position', '0 0');
		item.getElement('span').setStyle('background-position', 'right 0');
		item.getElement('span').getElement('span').setStyle('background-position', 'center 0');
	};
	// Add events to anchor
	item.addEvent('mousedown', down);
	item.addEvent('mouseup', up);
	item.addEvent('mouseleave', up);
	item.addEvent('mouseover', over);
};

// Navigations effect (tween the color and uses the background fade function)
var Navigation = function () {
	// Check if focused item exists
	var focused = ($chk($(document.body).getElement('div.nav').getElement('a.focus'))) ? $(document.body).getElement('div.nav').getElement('a.focus') : false;
	// Create effects for focused item
	if (focused) {
		FadeBackground(focused);
		focused.removeEvents();
		var myfx2 = new Fx.Tween(focused.getParent().getElement('div'), {property: 'opacity', link: 'cancel', duration: 425});
   		var myfx3 = new Fx.Tween(focused, {property: 'color', link: 'cancel', duration: 425});
   	}
	// Process all navigation items
	$each($(document.body).getElement('div.nav').getElement('ul').getChildren(), function(item){
		// Get anchor
		var anchor = item.getElement('a');
		if (!anchor.hasClass('focus')) {
			// Create Color FX on anchor
			var myfx = new Fx.Tween(anchor, {property: 'color', link: 'cancel', duration: 425});
			var color = anchor.getStyle('color');
			// Add the background fade function
			FadeBackground(anchor);
			// Add events to anchor
			anchor.addEvent('mouseover', function() {
				// Fade color
				myfx.start('#111');
				// Create effects for focused item
				if (focused) {
					myfx2.start(0);
					myfx3.start(color);					
				}
			}).addEvent('mouseout', function() {
				myfx.start(color);
				// Create effects for focused item
				if (focused) {
					myfx2.start(1);
					myfx3.start('#111');					
				}
			}).addEvent('click', function(e) { item.getParent().getElements('li').getElement('a').removeEvents(); });
		}
	});
};

// Sub Navigation Effects (spotlight follow the mouse)
var SubNavigation = new Class({
	initialize: function() {
		// Get div container and list
		this.container = $(document.body).getElement('div.sub-nav');
		this.navigation = this.container.getElement('ul');
		// Initialize list items
		this.initItems();
	},
	initItems: function() {
		// Get all items in list
		var items = this.navigation.getChildren();
		// Add the background fade function to the first item
		FadeBackground(items[0].getElement('a'));
		// Process all other items 
		$each(items.erase(items[0]), function(item) { 
			var myfx = new Fx.Morph(item.getElement('a'), {duration: 250, link: 'cancel'});
			var defaultColor = item.getElement('a').getStyle('color');
			// Add events to anchor
			item.getElement('a').addEvent('mouseover', function() { myfx.start({'color': '#000000', 'padding-left': 13}); }).addEvent('mouseout', function() { myfx.start({'color': defaultColor, 'padding-left': 11}); });
		});
	}
});

// Sub Navigation 2 Effects (spotlight follow the mouse)
var SubNavigation2 = new Class({
	counter: 0,
	initialize: function() {
		// Get div container and list
		this.container = $(document.body).getElement('div.s-sub-nav');
		this.navigation = this.container.getElement('ul');
		// Give anchor dimensions to li and absolute position anchor
		$each(this.navigation.getChildren(), function(item){
			var anchor = item.getElement('a');
			item.setStyle('height', anchor.getSize().y);
			anchor.setStyle('position', 'absolute');
		});
		// Get focused item
		this.focused = ($chk(this.navigation.getElement('li.focus'))) ? this.navigation.getElement('li.focus') : null;
		// Create focus
		if (this.focused) this.createFocus();		
		// Create Spotlight
		if (Browser.Engine.trident) this.spotlight = new Element('li', {'html': '<img src="/images/elements/s-sub-navigation/spotlight.gif">', 'class': 'spotlight'}).inject(this.navigation, 'top');
		else this.spotlight = new Element('li', {'html': '<img src="/images/elements/s-sub-navigation/spotlight.png">', 'class': 'spotlight'}).inject(this.navigation, 'top');
		this.placeSpotLight();
		this.effect1 = new Fx.Morph(this.spotlight, {link: 'cancel', duration: 500, transition: Fx.Transitions.Back.easeOut }).set({'opacity': 0});
		this.effect2 = new Fx.Tween(this.spotlight.getElement('img'), {link: 'cancel', duration: 500, transition: Fx.Transitions.Back.easeOut });
		// Initialize list items
		this.initItems();
	},
	createFocus: function() {
		this.focus = new Element('li', {'class': 'focus2'}).inject(this.navigation, 'top');
		// Place Focus
		this.placeFocus();
	},
	placeFocus: function() {
		// Get focused item
		this.focused = this.navigation.getElement('li.focus');
		if (!$chk(this.focus)) this.createFocus();
		// Get numer of lines
		var y = this.focused.getSize().y;
		if (y<=22) this.line = 1; else if (y<=36) this.line = 2; else this.line = 3;
		// Get focused item
		this.focused = this.navigation.getElement('li.focus');
		// Put the focus and spotlight behind the focused item and resize the spotlight image
		this.focus.setStyles({'top': (this.focused.getPosition(this.container).y)+'px', 'height': this.focused.getSize().y, 'background-position': '0 -'+((this.line*50)-50)+'px'});
		// Place Spotlight
		if ($chk(this.spotlight)) this.placeSpotLight();
	},
	placeSpotLight: function() {
		if (!$chk(this.line)) this.line = 1;
		if (this.focused) this.pos = this.focused.getPosition(this.container).y+((this.line*7)-7);
		else this.pos = -20+((this.line*7)-7);
		this.spotlight.setStyle('top', this.pos+'px');
		this.spotlight.getElement('img').setStyles({'width': '194px', 'height': 20});
	},
	initItems: function() {
		// Process all items in list 
 		$each(this.navigation.getChildren(), function(item) { 
 			// Check if item has anchor to avoid the focus and spotlight
 			if ($chk(item.getElement('a'))) {
				item.getElement('a').addEvent('mouseover', function() { subnav2.counter++; subnav2.moveSpotlight(this); }).addEvent('mouseout', function() { subnav2.counter--; subnav2.moveSpotlight(this); });
 			}
 		});
	},
	moveSpotlight: function(target) {
		// Move spotlight
		this.effect1.start({
			'top': (!this.counter ? this.pos : target.getPosition(this.container).y), 
			'opacity': (!this.counter ? 0 : (Browser.Engine.trident ? 0.4 : 1)),
			'height': (!this.counter ? 20 : target.getSize().y-1)
		});
		// Resize image
		this.effect2.start('height', (!this.counter ? 20 : target.getSize().y-1));
	}
});

// Background fade effect on anchors
var FadeBackground = function (item) {
	// Get the size and background image of the anchor
	var size = item.getSize();
	var background = item.getStyle('background-image');
	// Create a div container with the same dimensions and background as the anchor
	var div = new Element('div', {'styles': {'width': size.x, 'height': size.y, 'background-image': background, 'position': 'relative', 'overflow': 'hidden'}}).wraps(item);
	// Remove background from anchor and change position to absolute
	item.setStyles({'position': 'absolute', 'background-image': 'none', 'z-index': 2000, 'top': 0, 'left': 0});
	// Create fader
	var fader = new Element('div', {'styles': {
		'width': size.x, 'height': size.y, 
		'background-image': background, 
		'position': 'absolute', 
		'opacity': 0, 
		'top': 0, 'left': 0, 
		'z-index': 1000, 
		'background-position': '0 -'+size.y+'px'
	}}).inject(div);
	var effect = new Fx.Tween(fader, {property: 'opacity', link: 'cancel', duration: 425});
	// Add event to anchor
	item.addEvent('mouseover', function(){ effect.start(1); }).addEvent('mouseout', function(){ effect.start(0); });
	// If anchor is focused fader is visible
	if (item.hasClass('focus')) fader.setStyle('opacity', 1);
};

// Background color effect on section list
var SectionBackground = function () {
	// Process all sections items
	$each($(document.body).getElement('ul.sections').getChildren(), function(item) {
		// Get original background color
		var backgroundColor = item.getStyle('background-color');
		// Create effect
		var myfx = new Fx.Tween(item, {property: 'background-color', link: 'cancel', duration: 250});
		// Add events to list
		item.addEvent('mouseover', function() { myfx.start('#d9d9d9'); }).addEvent('mouseout', function() { myfx.start(backgroundColor); });
	});
};

var subnav, subnav2, nav;
window.addEvent('domready', function() {
	// Navigation
	if ($chk($(document.body).getElement('div.nav'))) Navigation.run();
	// Sub Navigation
	if ($chk($(document.body).getElement('div.sub-nav'))) subnav = new SubNavigation;
	// Sub Navigation 2
	if ($chk($(document.body).getElement('div.s-sub-nav'))) subnav2 = new SubNavigation2;
	// Sections Browsing
	if ($chk($(document.body).getElement('ul.sections'))) SectionBackground.run();
	// Get each buttons
	$each($(document.body).getElements('a.button'), function(item) { Buttons(item); });
	// SearchBar
	SearchBar.run();
	// Change Countries
	ChangeCountries.run();
});