var nav_main;
var nav_bottom;
var default_alpha = .6;

var nav_description
var pages				 = ['about',
							'menu',
							'gallery',
							'contact',
							'location'
							 ];

var descriptions 		= [ 'Our history',
							'Take a look at our menu.',
							'This is our photo gallery',
							'Phone: 561-200-4860<br/>info@tastesabor.com',
							'Sabor<br />220 N. Congress Ave.<br />Boynton Beach, FL 33426 <br/>561-200-4860'
							];


/////// -------- ASSOCIATE THE DESCRIPTIONS WITH THE PAGES FOR ID
nav_description = descriptions.associate(pages);

function create_description(el)
{
	var text = nav_description[el.id]
	if (text) 
	{
		var id = 'nav_description_' + el.id;
		
		var description = new Element('span', {
				'class': 'nav_description',
				'id' : id,
				'html': text ,
				'opacity': 0 ,
				'events': {
					'click': function(){
						//alert('clicked');
					}
				}
			});
	 	description.fade(0);
		description.inject(el);	

	}
}


function init_nav()
{

 set_nav();

}

function show_description(el) {
	
	var id = 'nav_description_' + el.id;

	$(id).fade(1);
}

function hide_description(el) {
 //alert("completed  " + e   );	
 	var id = 'nav_description_' + el.id;

 	var d = $(id);
 	d.fade(0);
}

function animate(el)
{
	if (el.over) {
		show_description(el)
	} else {
		hide_description(el);
	}	
	
}


function set_nav()
{
	nav_main = $('nav_main');
	nav_bottom = $('nav_bottom');
	var morph = new Fx.Morph(nav_main, {duration: 'short'});

	if (nav_main) {
		nav_main.getElements('a').each(function(item, index){
  		  //alert(index + " = " + item);
		//  item.get('tween', {property: 'opacity', duration: 'short'}).start(default_alpha);
		  item.default_height = item.getStyle('height');
		  
		  item.set('morph', {duration: 'short'});
		  item.id = item.get('text').toLowerCase();
		  
		  // --- create description for each element
  		  create_description(item);

		  this.over = false;
		 //alert(item.id);
			if (nav_description[item.id]) {
			  item.addEvents({
					'mouseover': function(){
						
						this.over = true
						animate(this);
						this.morph({height: 100});			
			
					},
					'mouseleave': function(){
						//alert('mouseleave');
						//this.tween('width', this.default_width);
						this.over = false
						animate(this);
						this.morph({height: this.default_height});
			
			
					},
			
					'click': function(){
						//alert('click');
					}
				});
			}

		}); 

		
		
	}
	
}

window.addEvent('domready', function() {									 
				
	init_nav();
});