/*
---------------------------------------------------------------------
		Petrobras Argentina

		[jvs_menu.01.js]
		-	engine de menu para sitio dinamico.
		-	sin ocultamiento opciones "hermanas" dentro del arbol 
			de opciones.

		Medialab Argentina :: Juan Manuel Melillo, Agosto 08 2004
---------------------------------------------------------------------
*/

//	comienzo --------------------------------------------------------

//	[draw_text_suboption()]
//	define el metodo que dibujara la opcion de segundo nivel de
//	anidamiento para el objeto [text_suboption].
//	no requiere parametros.

	function draw_text_suboption() {
		document.write( "<table width=\"139\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr>" );
		document.write( "<td width=\"7\"><img src=\"imagenes/x.gif\" width=\"7\" height=\"1\"></td>" );
		document.write( "<td width=\"11\" align=\"right\" valign=\"top\">" );
		document.write( "<a class=\"" + this.style + "\" href=\"" + this.url + "\" "+ this.target +" onclick=\"toogle_display( '" + this.id + "' );\">" );
		document.write( "&#0155;&nbsp;" );
		document.write( "</a></td>" );
		document.write( "<td width=\"121\" valign=\"top\">" );
		document.write( "<a class=\"" + this.style + "\" href=\"" + this.url + "\" "+ this.target +"  onclick=\"toogle_display( '" + this.id + "' );\">" );
		document.write(  this.caption );
		document.write( "</a></td>");
		document.write( "</tr></table>" );
	}

//	[text_suboption( id, caption, style, parent )]
//	define el prototipo del objeto que contiene la informacion de
//	una opcion con segundo nivel de anidamiento.
//	requiere:
//		[string id] 		identificador unico de objeto.
//		[string caption]	texto a mostrar en la opcion.
//		[string style] 		estilo a utilizar para la presentacion de la opcion.
//		[string parent]		identificador de la opcion "padre" con la cual 
//							esta relacionada.
//		[string url]		(opcionla) el URL de la pagina que debe invocar la 
//							opcion del menu.

	function text_suboption( id, caption, style, parent, url, target) {
		this.id	= id;
		this.caption = caption;
		this.style = style;
		this.parent = parent;
//********************************************
		this.url = url || "javascript:void(0)";
		this.target = target || "target='_self'" ;
// *******************************************
        this.draw = draw_text_suboption;
	}

//	[draw_text_suboption()]
//	define el metodo que dibujara la opcion de primer nivel de
//	anidamiento para el objeto [text_option].
//	no requiere parametros.

	function draw_text_option() {
        document.write( "<table style=\"display:"+ this.isHidden +"\" width=\"139\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr>" );
        document.write( "<td width=\"7\"><img src=\"imagenes/x.gif\" width=\"7\" height=\"1\"></td>" );
        document.write( "<td width=\"11\" align=\"right\" valign=\"top\">" );
        document.write( "<a class=\"" + this.style + "\" href=\"" + this.url + "\" "+ this.target +" onclick=\"toogle_display( '" + this.id + "' );\">" );
        document.write( "&#0155;&#0155;&nbsp;" );
        document.write( "</a></td>" );
        document.write( "<td width=\"121\" valign=\"top\">" );
        document.write( "<a class=\"" + this.style + "\" href=\"" + this.url + "\" "+ this.target + " onclick=\"toogle_display( '" + this.id + "' );\">" );
        document.write(  this.caption );
        document.write( "</a></td>");
        document.write( "</tr></table>" );
	}

//	[text_option( id, caption, style, parent )]
//	define el prototipo del objeto que contiene la informacion de
//	una opcion con primer nivel de anidamiento.
//	requiere:
//		[string id] 		identificador unico de objeto.
//		[string caption]	texto a mostrar en la opcion.
//		[string style] 		estilo a utilizar para la presentacion de la opcion.
//		[string parent]		identificador de la opcion "padre" con la cual 
//							esta relacionada.
//		[string url]		(opcional) el URL de la pagina que debe invocar la 
//							opcion del menu.
//		[string target]		(opcional) el Target de la pagina que permite detectar
//							cuando abrir el link en la próxima página

    function text_option( id, caption, style, parent, url , hidden , target) {
        this.id = id;
        this.caption = caption;
        this.style = style;
        this.parent = parent;
// ****************************************
        this.url = url || "javascript:void(0)";
        this.isHidden = hidden || 'block' ;
    
        this.target = target || "target='_self'" ;
// ****************************************     
        this.draw = draw_text_option;
    }

//	[draw_text_suboption()]
//	define el metodo que dibujara la opcion de nivel raiz de
//	anidamiento para el objeto [image_option].
//	no requiere parametros.

	function draw_image_option( ) {
	    /** Si fueron definidos un ancho y un alto quiere decir que se requiere un popup **/
	    var tmpOnClick = "";
        if (this.popupWidth && this.popupHeight) {
            tmpOnClick = "openWin('" + this.url + "', '', '" + this.popupWidth + "', '" + this.popupHeight + "', '1'); ";
            this.url = "#";
            this.target = "";
        }

		document.write( "<table width=\"139\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">" );
		document.write( "<tr><td height=\"3\"><spacer></td></tr>" );	
		document.write( "<tr><td width=\"139\" height=\"21\">" );
		document.write( "<a href=\"" + this.url + "\" "+ this.target +" onmouseover=\"document.img" + this.id + ".src ='" + this.ovr_image + "';\" onmouseout=\"document.img" + this.id + ".src ='" + this.out_image + "';\" onclick=\"" + tmpOnClick + "toogle_display( '" + this.id + "' );\">" );
		document.write( "<img name=\"img" + this.id + "\" src=\"" + this.out_image + "\" width=\"139\" height=\"21\" border=\"0\">" );
		document.write( "</a>" );
		document.write( "</td></tr>" );
		document.write( "<tr><td height=\"3\"><spacer></td></tr>" );	
		document.write( "</table>" )	
	}

//	[image_option( id, caption, style, parent )]
//	define el prototipo del objeto que contiene la informacion de
//	una opcion con nivel raiz.
//	requiere:
//		[string id] 		identificador unico de objeto.
//		[string out_image]	imagen a mostrar en el estado "normal" de la opcion.
//		[string ovr_image]	imagen a mostrar en el estado "mouse over" de la opcion.
//		[string parent]		identificador de la opcion "padre" con la cual 
//							esta relacionada.
//		[string url]		(opcionla) el URL de la pagina que debe invocar la 
//							opcion del menu.

	function image_option( id, out_image, ovr_image, parent, url, target ) {
		this.id	= id;
		this.ovr_image = ovr_image;
		this.out_image = out_image;		
		this.parent = parent;
		this.url = url || "javascript:void(0)";		
		this.target = target;
		this.draw = draw_image_option;
	}		

//  [image_option( id, caption, style, parent )]
//  define el prototipo del objeto que contiene la informacion de
//  una opcion con nivel raiz para abrir un POPUP sin menu con un tamaño determinado.
//  Inicialmente se creo para Merchandising, pero se puede reusar y adaptar para otros casos.
//  requiere:
//      [int width]         ancho del popup.
//      [int height]        alto del popup.
//      [string id]         identificador unico de objeto.
//      [string out_image]  imagen a mostrar en el estado "normal" de la opcion.
//      [string ovr_image]  imagen a mostrar en el estado "mouse over" de la opcion.
//      [string parent]     identificador de la opcion "padre" con la cual 
//                          esta relacionada.
//      [string url]        (opcionla) el URL de la pagina que debe invocar la 
//                          opcion del menu.
    function image_option_popup( width, height, id, out_image, ovr_image, parent, url, target ) {
        this.id = id;
        this.ovr_image = ovr_image;
        this.out_image = out_image;     
        this.parent = parent;
        this.url = url || "javascript:void(0)";     
        this.target = target;
        this.draw = draw_image_option;
        this.popupWidth = width;
        this.popupHeight = height;
    }

//	[toogle_display( id )]
//	define el procedimiento necesario para realizar la presentacion
//	y el ocultamiento de las restantes opciones al hacer click en una
//	de ellas -- determinando el comportamiento del menu.
//	requiere:
//		[string id] 		identificador unico de objeto.

	function toogle_display( id ) { 

		for( father in option_collection ) if( father != id && option_collection[ father ].parent == option_collection[ id ].parent ) {
			document.all.item( father ).style.display = "none";
			for( child in option_collection ) if( child != id && option_collection[ child ].parent == father ) 
				document.all.item( child ).style.display = "none";
		}

		if( document.all.item( id ).style.display == "" ) 
			document.all.item( id ).style.display = "none";
		else
			document.all.item( id ).style.display = "";
	}

//	[draw_option( id )]
//	realiza la renderizaciion de cada opcion e invoca
//	a la renderizacion de cada opcion hija en el arbol de opciones.
//	requiere:
//		[string id] 		identificador unico de objeto.

	function draw_option( id ) {
		for( op in option_collection ) if( option_collection[ op ].parent == id ) {
			option_collection[ op ].draw();
			document.write( "<div id=\"" + option_collection[ op ].id + "\" style=\"display:none\">" );
			draw_option( option_collection[ op ].id );
			document.write( "</div>" );
		}
	}
	
//	[show_option( id )]
//	despliega la opcion correspondiente para cada pagina.
//	requiere:
//		[string id] 		identificador unico de objeto.

	function show_option( id ) {
		toogle_display( id );
		if( option_collection[ id ].parent != "root" ) show_option( option_collection[ id ].parent );
	}

//	[render_menu()]
//	dibuja el menu en la pagina invocando a [draw_option()].
//	no requiere parametros.

	function render_menu( ) {
		document.write( "<table width=\"139\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td>" );
		draw_option( "root" );
		document.write( "</td><tr></table>" );
	}
	
//	[option_collection]
//	necesario para la creacion del arbol de opciones.

	var option_collection = new Array();

//	final ----------------------------------------------------------