document.observe('dom:loaded', function(){

	var l = new Element('div', {className:'l'});
	var m = new Element('div', {className:'m'});
	var r = new Element('div', {className:'r'});

	var container = new Element('div', {className:'l-m-r-container'}).hide();
	container.insert(l); container.insert(m); container.insert(r);

	var navigation = $('navigation');
	
	navigation.insert({before:container});
	
	navigation.select('li').invoke('observe', 'mouseover', function(){

		if (this.readAttribute('class')) {return;}
		container.setStyle({left:this.offsetLeft - 19 + 'px'});
		m.setStyle({width:this.offsetWidth - 34 + 'px'});
		container.show();

	});

	navigation.select('li').invoke('observe', 'mouseout', function() {container.hide();});

	var containerClone = container.clone(true);
	navigation.insert({before:containerClone});

	var s = navigation.down('li.s');
	 
	containerClone.setStyle({left:s.offsetLeft - 19 + 'px'});
	containerClone.down('.m').setStyle({width:s.offsetWidth - 34 + 'px'});
	containerClone.show();

	// container decorator
	$('content').select('.container').each(function(container){

		if (container.hasClassName('start')) {

			var tblc = new Element('div', {className:'tblc'});
			var tblh = new Element('div', {className:'tblh'});
			var tblm = new Element('div', {className:'tblm'});
			var tblf = new Element('div', {className:'tblf'});

			var end = container.next('.container.end');
			var height = (end.offsetTop - container.offsetTop) + end.offsetHeight;
			
			tblc.setStyle({top:container.offsetTop - 10 + 'px', height: height+19+'px'});
			
			tblc.insert(tblh); tblc.insert(tblm); tblc.insert(tblf);
			container.insert({before:tblc});
			
		}


	});
	
	// remove background last nav item
	$('navigation').down(6).setStyle({background:'none'});
	
});