function navigation() {
	// Header navigation
	width = 0;
	$each($(document.body).getElement('div.nav').getElements('a[class!=lang]'), function(item, index) {
		item.setStyles({'z-index': ($(document.body).getElement('div.nav').getElements('a').length-(index+1))*10, 'position': 'absolute', 'float': 'none'});
		// Place nav buttons at the right place (z-index and left position)
		if (index==0) item.getElement('span').setStyle('width', item.getElement('span').getSize().x.toFloat()-40);
		if (index!=0&$chk(item.getElement('span'))) {
			width += item.getPrevious('a').getElement('span').getSize().x;
			item.getElement('span').setStyle('width', item.getElement('span').getSize().x.toFloat()-66);
			item.setStyle('left', (width-(index*17))+'px');
		}
		item.getElement('span').setStyle('display', 'block');
		// Add div that will fade in / fade out on mouse enter
		item.div = new Element('div', {'class': 'a', 'styles': {
			'z-index': item.getStyle('z-index').toFloat()-1,
			'left': item.getStyle('left'),
			'opacity': '0',
			'float': 'none',
			'position': 'absolute',
			'width': item.getSize().x
		}}).inject(item, 'after');
		text = new Element('div', {'styles': {'width': item.getElement('span').getSize().x.toFloat()-66}}).inject(item.div);
		if (index==0) text.setStyle('padding-right', 46);
		// Add a div in the background with the proper item background
		item.div2 = item.div.clone().inject(item.div, 'after');
		item.div2.setStyles({'background-position': 'left -120px', 'z-index': item.getStyle('z-index').toFloat()-2, 'opacity': 1});
		item.div2.getElement('div').setStyle('background-position', 'right 0');
		if (item.hasClass('focus')) {
			item.div2.setStyle('background-position', 'left -180px');
			item.div2.getElement('div').setStyle('background-position', 'right -60px');
		}
		// Take off the item background
		item.setStyle('background', 'none');
		item.getElement('span').setStyle('background', 'none');
		
		// Add events to item
		item.addEvents({
			'mouseenter': function() {
				item.div.setStyle('background-position', 'left -150px');
				item.div.getElement('div').setStyle('background-position', 'right -30px');
				// Start fade in effect only if item is not focused
				if (!item.hasClass('focus')) {
					if (item.fadefx!=undefined) item.fadefx.cancel();
					item.fadefx = new Fx.Tween(item.div).start('opacity', 1);
				}
			},
			'mouseleave': function() {
				// Fade out in rollout
				if (item.fadefx!=undefined) item.fadefx.cancel();
				item.fadefx = new Fx.Tween(item.div).start('opacity', 0);
			},
			'mousedown': function() {
				// Set background in active mode
				item.div.setStyle('background-position', 'left -210px');
				item.div.getElement('div').setStyle('background-position', 'right -90px');
			},
			'click': function(e) {
				if (item.fadefx!=undefined) item.fadefx.cancel();
				item.div.setStyle('opacity', 0);
/*
				e.stop();
				item.fadefx = new Fx.Tween(item.div).start('opacity', 0);
				// Unfocus the current focused item
				refocus(this.get('href'));
				// Change content
				loadcontent.start(this.get('href'));
*/
			}
		});
	});
	

	// Footer big buttons
	$each($(document.body).getElement('div.footer').getElements('div.promo'), function(item) {
		// Create a div container with the same dimensions and background as the anchor
		new Element('div', {'styles': {'width': 280, 'height': 113, 'float': 'left', 'background-image': item.getStyle('background-image'), 'position': 'relative', 'margin': item.getStyle('margin'), 'overflow': 'hidden', 'top': 0, 'left': 0}}).wraps(item);
		item.setStyle('margin', 0);
		// Create the div that's going to fade in and out
		item.div = new Element('div', {'styles': {
			'position': 'absolute',
			'float': 'left',
			'width': 280,
			'height': 113,
			'background-image': item.getStyle('background-image'),
			'z-index': 200,
			'opacity': 0
		}}).inject(item, 'after');
		// Set original div to absolute and without background
		item.setStyles({'position': 'absolute', 'z-index': 500, 'background': 'none', 'top': 0, 'left': 0});
		item.addEvents({
			'mouseenter': function() {
				item.div.setStyle('background-position', 'left -113px');
				// Cancel a tween if in process
				if (item.fadefx!=undefined) item.fadefx.cancel();
				// Fade in!
				item.fadefx = new Fx.Tween(item.div).start('opacity', 1);
			},
			'mouseleave': function() {
				item.fadefx.cancel();
				item.fadefx = new Fx.Tween(item.div).start('opacity', 0);
			}
		});
		$each(item.getElements('a'), function(button) {
			button.addEvent('mousedown', function() {
				// Set background to active mode
				item.div.setStyle('background-position', 'left -226px');
			});
			button.addEvent('click', function(e) {
				// Cancel a tween if in process
				if (item.fadefx!=undefined) item.fadefx.cancel();
				item.div.setStyle('opacity', 0);
/*
				e.stop();
				//item.fadefx = new Fx.Tween(item.div).start('opacity', 0);
				// Load new content
				loadcontent.start(this.get('href'));
				// Focus the correct nvaigation button in header
				refocus(this.get('href'));
*/
			});
		});
	});

	
/*
	// Subnav in footer
	$each($(document.body).getElement('div.footer').getNext().getElements('a[target!=_blank]'), function(item) {
		item.addEvent('click', function(e) {
			e.stop();
			refocus(false);
			loadcontent.start(this.get('href'));
		});
	});
*/
}

// Function to unfocus an item in the header navigation
function refocus(href) {
	if ($chk($(document.body).getElement('div.nav').getElement('a.focus'))) {
		focused = $(document.body).getElement('div.nav').getElement('a.focus');
		focused.removeClass('focus');
		focused.div2.setStyle('background-position', 'left -120px');
		focused.div2.getElement('div').setStyle('background-position', 'right 0');
	}
	if (href!=false) {
		newFocus = $(document.body).getElement('div.nav').getElement('a[href='+href+']');
		newFocus.addClass('focus');
		newFocus.div2.setStyle('background-position', 'left -180px');
		newFocus.div2.getElement('div').setStyle('background-position', 'right -60px');
	}
}

// Next content button
function nextButton() {
	next = $(document.body).getElement('div.next');
	// Background
	new Element('div', {'styles': {'position': 'relative', 'width': next.getElement('a').getSize().x, 'height': 28, 'padding': 0, 'background-position': 'right 0','background-image': 'url("/images/elements/button.gif")'}}).inject(next);
	// Divs to fade in
	next.div = new Element('div', {'styles': {'position': 'absolute', 'background-image': 'url("/images/elements/button.gif")', 'background-position': 'left -112px','height': '28px','width': next.getElement('a').getSize().x,'padding-left': 14,'margin': 0,'opacity': 0,'z-index': 5,'top': 0,'left': 0}}).inject(next);
	new Element('div', {'styles': {'position': 'relative', 'width': next.getElement('a').getSize().x, 'height': 28, 'padding': 0, 'background-position': 'right -28px','background-image': 'url("/images/elements/button.gif")'}}).inject(next.div);
	next.getElement('a').setStyle('background', 'none');
	//next.setStyle('overflow', 'hidden');
	// Events
	next.getElement('a').addEvents({
		'mouseenter': function() {
			next.div.setStyle('background-position', 'left -112px');
			next.div.getElement('div').setStyle('background-position', 'right -28px');
			// Fade in
			if (next.fadefx!=undefined) next.fadefx.cancel();
			next.fadefx = new Fx.Tween(next.div).start('opacity', 1);
		},
		'mouseleave': function() {
			// Fade out
			next.fadefx.cancel();
			next.fadefx = new Fx.Tween(next.div).start('opacity', 0);
		},
		'mousedown': function() {
			next.fadefx.cancel();
			next.div.setStyle('background-position', 'left -140px');
			next.div.getElement('div').setStyle('background-position', 'right -56px');
		}/*
,
		'click': function(e) {
			e.stop();
			loadcontent.start(this.get('href'));
			// Focus the correct nvaigation button in header
			refocus(this.get('href'));
		} 
*/
	});
}

// Login buttons
function loginButtons() {
	$each($(document.body).getElement('div.login').getElements('a'), function(item, index) {
	    item.bgpos = (index==0 ? 'left' : 'right');
	    item.setStyle('position', 'absolute');
	    item.div = new Element('div', {'styles': {
	    	'background-image': item.getParent().getStyle('background-image'),
	    	'background-position': item.bgpos+' -28px',
	    	'height': 28,
	    	'width': item.getSize().x,
	    	'top': 0,
	    	'left': 0,
	    	'z-index': 5,
	    	'float': 'none',
	    	'opacity': 0
	    }}).inject(item, 'after');
	    item.addEvents({
	    	'mouseenter': function() {
	    		item.div.setStyle('background-position', item.bgpos+' -28px');
	    		// Fade in
	    		if (item.fadefx!=undefined) item.fadefx.cancel();
	    		item.fadefx = new Fx.Tween(item.div).start('opacity', 1);
	    	},
	    	'mouseleave': function() {
	    		// Fade out
	    		item.fadefx.cancel();
	    		item.fadefx = new Fx.Tween(item.div).start('opacity', 0);
	    	},
	    	'mousedown': function() {
	    		item.fadefx.cancel();
	    		item.div.setStyle('background-position', item.bgpos+' -56px');
	    	}
	    });
	});
}

// Start
window.addEvent('domready', function() { navigation(); });
