// JavaScript Document
var startMenuNavegacion=function(){
		var ancho_submenu=$('menuElementosWeb').getStyle('width');
		ancho_submenu='200px';
		  // quito la clase activa a todas las cabeceras
		  $$('span.head_menu').each(function(el){
							    el.removeClass('active');
		
						    }
		  );
		  // añadir evento click a todas las imágenes
		  $$('img.arrow').each(function(el){
								// no muestro las flechas
							   el.setStyle('display','none');
							   
							   // comento el comportamiento anterior
							  /*
							   var submenu=el.getParent().getParent().getChildren('div.sub_menu_flicker');
							   							   
							   // evento onclick
							   el.addEvent('click',function(e){
									//alert(submenu)
									e=new Event(e);
									
									// oculto todos los submenus
									$$('div.sub_menu_flicker').each(function(elSub){
											elSub.setStyle('display','none');
											}
										);
									// poner todas flechas en su estado original
									$$('img.arrow').each(function(elFlecha){
											elFlecha.src='images/menulateral/arrow.png';
											}
										);
									// quito el activo de las cabeceras que no son en la que pincho
									// en que cabecera hemos pinchado
							   		var idheadsubmenu=el.getParent().getProperty('id');
									$$('span.head_menu').each(function(elCabecera){
											if(elCabecera.getProperty('id')!=idheadsubmenu){
												elCabecera.removeClass('active');	
												}
											}
										);
									
									
									if(submenu.getStyle('display')=="block"){
										submenu.getParent().removeClass('active');
										submenu.setStyle('display','none');
										el.src='images/menulateral/arrow_hover.png';
										}
									else{
										//alert('top: ' + submenu.getStyle('top') + ' left: ' + submenu.getStyle('left'))
										submenu.getParent().addClass('active');
										submenu.setStyle('display','inline');
										el.src='images/menulateral/arrow_select.png';
										}
									
									
									
									e.stop();
								});
							    
								// evento over imagen
								 el.addEvent('mouseover',function(e){
									//alert(submenu)
									e=new Event(e);
									el.src='images/menulateral/arrow_hover.png';
									// activo el span
									el.getParent().addClass('active');
									e.stop();
								});
								 
								// evento out imagen
								 el.addEvent('mouseout',function(e){
									//alert(submenu)
									e=new Event(e);
									if(submenu.getStyle('display')!="block"){
										el.src='images/menulateral/arrow.png';
										// activo el span
										el.getParent().removeClass('active');
										}
									else{
										el.src='images/menulateral/arrow_select.png';
										}
									e.stop();
								});
								 */
						    }
		   ); // each img.arrow
		   
		   // para las cabeceras span.head_menu
		   $$('span.head_menu').each(function(el){
							// evento over cabacera
							 el.addEvent('mouseover',function(e){
								//alert('top: ' + el.getStyle('top') + ' left: ' + el.getStyle('left') + ' width: ' + el.getStyle('width'))
								e=new Event(e);
								el.addClass('over');
								
								// añado para comportamiento over
								var submenu=el.getParent().getChildren('div.sub_menu_flicker');
								
									
									// oculto todos los submenus
									$$('div.sub_menu_flicker').each(function(elSub){
											elSub.setStyle('display','none');
											}
										);
									// poner todas flechas en su estado original
									$$('img.arrow').each(function(elFlecha){
											elFlecha.src='images/menulateral/arrow.png';
											}
										);
									// quito el activo de las cabeceras que no son en la que pincho
									// en que cabecera hemos pinchado
							   		var idheadsubmenu=el.getProperty('id');
									$$('span.head_menu').each(function(elCabecera){
											if(elCabecera.getProperty('id')!=idheadsubmenu){
												elCabecera.removeClass('active');	
												}
											}
										);
									
									
									if(submenu.getStyle('display')=="block"){
										submenu.getParent().removeClass('active');
										submenu.setStyle('display','none');
										el.src='images/menulateral/arrow_hover.png';
										}
									else{
										
										submenu.getParent().addClass('active');
										submenu.setStyle('display','inline');
										el.src='images/menulateral/arrow_select.png';
										}
									
									
									
									e.stop();
									// fin over
								
							});	
							// evento out cabacera
							 el.addEvent('mouseout',function(e){
								//alert(submenu)
								e=new Event(e);
								el.removeClass('over');
								e.stop();
							});	
						}
			); // each span head_menu
		   // para los div.submenu
		   $$('div.sub_menu_flicker').each(function(el){
							// le pongo la propiedad left de su parent para que salga a la dcha delñ mismo
							var posicion_submenu;
							//var imagen_flecha=el.getParent().getChildren('span.head_menu').getChildren('img.arrow').getProperty('width');
							//var imagen_flecha=el.getParent().getChildren('span.head_menu');//.getChildren('img.arrow')
							//alert(imagen_flecha[0].getStyle('width').toInt())
							/*if(imagen_flecha){
								el.setStyle('left',imagen_flecha.getStyle('width').toInt() + imagen_flecha.getStyle('left').toInt() + 1);
								};
							*/
							/* para recolocarlo */
							
							
							el.setStyle('left',ancho_submenu);
							
							//evento over submenu
							 el.addEvent('mouseover',function(e){
								//alert(submenu)
								e=new Event(e);
								el.setStyle('display','block');
								e.stop();
							});	
							
						}
			); // each span head_menu
		 	
			document.addEvent('click',function(e){
					e=new Event(e);
					if($(e.target).getParents('#menu_principal') != null){
						if(e.target.getParents('#menu_principal').length==0){
							$$('span.head_menu').each(function(el){
									el.removeClass('active');
								}
							);
							$$('div.sub_menu_flicker').each(function(el){
									el.setStyle('display','none');
								}
							);
							$$('img.arrow').each(function(el){
									el.src='images/menulateral/arrow.png';
								}
							);
							
							}
						}
					}
			);
		 }