// -- Clase que gestiona el menu principal --

var metamorfosisMenu = Class.create( );

metamorfosisMenu.prototype = {
	
	initialize: function( ) {

        $('menu').addClassName("menuConJs");

		//Buscamos los A que son hijos de li con la clase submenu aplicada
		var nodos = $$( '#menu li ul' );
		$A( nodos ).each(
			function( nodo ) {
				if( nodo ) {
					this.buttonsInsert( nodo.parentNode );
					var boton1 = this.searchNodeByTag( nodo.parentNode.firstChild, 'IMG' );
					var boton2 = this.searchNodeByTag( boton1.nextSibling, 'IMG' );
					this.processUL( boton1 );
					this.attachEvent( boton1 );
					this.attachEvent( boton2 );
				}
			}.bind( this )
		);

	},
	
	buttonsInsert: function( nodo, visible ) {
		/*var code = '<img src="/imagenes/verde.png" alt="boton mas" class="boton" /><img src="/imagenes/rojo.png" alt="boton menos" class="boton" style="display: none;" />';
		if( visible ) {
			code = '<img src="/imagenes/verde.png" alt="boton mas" class="boton" style="display: none;" /><img src="/imagenes/rojo.png" alt="boton menos" class="boton" />';
		}
		new Insertion.Top( nodo, code );   */

        var boton = document.createElement('img');
        boton.setAttribute('class', 'boton');
        if( !visible ){
          boton.setAttribute('src', '/imagenes/verde.png');
          boton.setAttribute('alt', 'Ver más');
        }else{
          boton.setAttribute('src', '/imagenes/rojo.png');
          boton.setAttribute('alt', 'Ver menos');
        }
        new Insertion.Top(nodo, boton);
	},
	
	changeButton: function( nodo ) {
		var buttons = nodo.parentNode.getElementsByTagName( 'IMG' );
        
        Element.extend(buttons);

        if(buttons[0].src.indexOf('verde') != -1){
            buttons[0].setAttribute('src', '/imagenes/rojo.png');
        }else{
            buttons[0].setAttribute('src', '/imagenes/verde.png');
        }

	},
	
	processUL: function( nodo ) {
		//Creamos un div contenedor (para el correcto funcionamiento del efecto) y lo ocultamos (si no tiene la clase actual aplicada)
		nodo = this.searchNodeByTag( nodo, 'UL' );
                Element.extend(nodo);
                nodo.removeClassName('ulInvisible');
		var div = document.createElement( 'DIV' );
                Element.extend(div);
                div.style.display = 'none';

		var parent = nodo.parentNode;
		div.appendChild( nodo.cloneNode( true ) );
		parent.replaceChild( div, nodo );
		
		if( this.isCurrent( nodo ) ) {
			this.processEvent( div );
		}else if( this.isCurrent2( nodo ) ) {
			this.processEvent( div );
		}	   
	},
	
	isCurrent: function( nodo ) {
		var list = $A( nodo.getElementsByTagName( 'LI' ) );
		var current = list.find( function( nodo ) {
			return ( Element.hasClassName( $( nodo ), 'actual' ) );
		});
		if( current ) {
			return( true );
		}
		else {
			return( false );
		}
	},

	isCurrent2: function( nodo ) {
		var list = $A( nodo.getElementsByTagName( 'LI' ) );
		var current = list.find( function( nodo ) {
			return ( Element.hasClassName( $( nodo ), 'madre_actual' ) );
		});
		if( current ) {
			return( true );
		}
		else {
			return( false );
		}
	},

	changeClassToLI: function( nodo ) {
		var li = nodo.parentNode;
		if( Element.hasClassName( $( li ), 'expandido' ) ) {
			Element.removeClassName( $( li ), 'expandido' );
		}
		else {
			Element.addClassName( $( li ), 'expandido' );
		}
	},
	
	searchNodeByTag: function( nodo, tagName, previous ) {
		if( ! nodo ) {
			return( false );
		}
		while( nodo.tagName != tagName ) {
			if( previous ) {
				nodo = nodo.previousSibling;
			}
			else {
				nodo = nodo.nextSibling;
			}
			if( ! nodo ) {
				return( false );
			}
		}
		return( nodo );
	},
	
	attachEvent: function( nodo ) {
		nodo.onclick = this.toogle.bindAsEventListener( this );                
	},
	
	processEvent: function( nodo ) {
		this.changeButton( nodo );
		this.changeClassToLI( nodo );
                Effect.toggle(this.searchNodeByTag( nodo, 'DIV' ), 'slide', { duration: 0.5 });
	},

	toogle: function( evt ) {
		this.processEvent( Event.element( evt ) );
	}

}