// 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(e) {
		e.stop();
		// AjaxRequest for recent search
		if (!$chk($('search-history'))) {
			var myRequest = new Request({url: '/sync/search/recent.html?lang='+language+'&category='+this.get('target')+'&href='+this.get('href'), 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);
				//alert(responseText);
				// 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();
		}
	});
};

// Settings drop down
var Settings = function() {
	var ul = $(document.body).getElement('div.header').getElement('ul');
	if ($chk(ul)) {
		ul.getElements('li').each(function(item) {
			if (item.hasClass('a')||item.hasClass('b')) {
				// IE6 mouse over fix
				item.addEvent('mouseover', function() {
					this.addClass('mouseover');
					this.getElement('a').setStyle('color', '#ffffff');
				});
				item.addEvent('mouseout', function() {
					this.removeClass('mouseover');
					this.getElement('a').setStyle('color', '#c9d6e6');
				});
				if (item.hasClass('a')) {
					var anchor = item.getElement('a');
					var list = item.getElement('ul');
					list.setStyles({'opacity': 0, 'display': 'block'});
					var myfx = new Fx.Tween(list, {property: 'opacity', duration: 400, link: 'cancel'});
					anchor.addEvent('click', function(e) {
						e.stop();
						if (list.getStyle('opacity')==1) myfx.start(0);
						else myfx.start(1);
					});
					document.addEvent('click', function() {
						if (list.getStyle('display')=='block') { myfx.start(0); }
					});
				}
			}
		});
	}
}


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

// Admin
var Admin = new Class({
	initialize: function() {
		var obj = this;
		// Edit button (show/hide on mouseover)
		$each($(document.body).getElements('div.edit'), function(item, index) {
			var myFx = new Fx.Morph(item, {link: 'cancel', duration: 250});
			var padleft = item.getStyle('padding-left').toInt();
			if (item.hasClass('right')) {
				var padleft = item.getStyle('width').toInt();
				item.getElement('div').setStyles({'position': 'absolute', 'left': -(padleft)});
				var myFx = new Fx.Morph(item.getElement('div'), {link: 'cancel', duration: 250});
				item.getParent().addEvents({
				    'mouseenter': function() { myFx.start({'left': 0}); },
				    'mouseleave': function() { myFx.start({'left': -(padleft)}); }
				});
			} else {
				var myFx = new Fx.Morph(item, {link: 'cancel', duration: 250});
				var padleft = item.getStyle('padding-left').toInt();
				item.getParent().addEvents({
				    'mouseenter': function() { myFx.start({'padding-left': 0, 'width': padleft}); },
				    'mouseleave': function() { myFx.start({'padding-left': padleft, 'width': 0}); }
				});
			}
		});
	}
});

// Account (drop down effect)
var Account = new Class({
	initialize: function() {
		var obj = this;
		this.div = $(document.body).getElement('div.account');
		this.ul = this.div.getElement('ul');
		this.open = false;
		// Prepare tween
		this.myFx = new Fx.Tween(this.ul, {property: 'height', duration: 200, link: 'cancel'});
		
		// Div events
		this.div.addEvents({
			'click': function() { obj.toggle(); },
			'mouseleave': function() { if (obj.open) obj.toggle(); }
		});
	}, 

	toggle: function() {
		var obj = this;
		// Open or close
		if (!this.open) this.myFx.start(60);
		else this.myFx.start(0);
		// Set variable open to true or false
		this.open = (!this.open ? true : false);
	}
});

// Contact
var Contact = function() {
	$each($(document.body).getElement('ul.contact').getElements('li:even'), function(li, index) {
		if ($chk(li.getNext('li'))) {
			var li2 = li.getNext('li');
			var height = li.getSize().y.toInt()-li.getStyle('padding-top').toInt()-li.getStyle('padding-bottom').toInt()-1;
			var height2 = li2.getSize().y.toInt()-li2.getStyle('padding-top').toInt()-li2.getStyle('padding-bottom').toInt()-1;
			if (height > height2) li2.setStyle('height', height);
			else li.setStyle('height', height2);
		}
	});
}

// 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 admin, account, subnav, subnav2, nav;
window.addEvent('domready', function() {
	// Admin
	if ($chk($(document.body).getElement('div.edit'))) admin = new Admin;
	// User
	if ($chk($(document.body).getElement('div.account'))) account = new Account;
	// 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();
	// Contact
	if ($chk($(document.body).getElement('ul.contact'))) Contact.run();
	// Get each buttons
	$each($(document.body).getElements('a.button, a.bigbutton, a.register'), function(item) { Buttons(item); });
	// Change Countries
	//Settings.run();
	// Run search bar
	if ($chk($('labelSearch'))) SearchBar.run();
});