/**
 * SCRIPT PARA LA MANIPULACION DEL MENU
 * AUTOR: ALEXEI BETANCOURT BRITO
 * CORREO: ALEXEIB2@GMAIL.COM
 *
 * DESCRIPCION DE LAS DISTINTAS FUNCIONES
 * 
 **/

/** VARIABLES GLOBALES DEL COMPONENTE Y LA CATEGORIA ACTUAL */
var _componenteActual;
var _categoriaActual;
/** VARIABLES GLOBALES DE LOS ELEMENTOS A MOSTRAR Y OCULTAR */
var _estadocategoria;
var _estadosubcategoria;
/** ELEMENTOS ACTIVOS */
var _componenteactivo;
var _categoriaactiva;
var _subcategoriaactiva;

function componente(valor){
	_contenedor = document.getElementById('div_submenu');
	_nuevoLayer = document.createElement('div');
	_nuevoLayer.id = 'div_' + valor;
	_nuevoLayer.className = 'div_componente_off';
	_nuevoLayer.innerHTML = valor;
	_nuevoLayer.onclick = function() {mostrar_ocultar('categoria','div_' + valor + '_sub'); modificar_elemento('componente', 'div_' + valor)};
	_contenedor.appendChild(_nuevoLayer);
	/** CREAMOS EL LAYER QUE CONTENDRÁ EL SUBMENU */
	_nuevoLayer = document.createElement('div');
	_nuevoLayer.id = 'div_' + valor + '_sub';
	_nuevoLayer.className = 'div_submenu_hide';
	_contenedor.appendChild(_nuevoLayer);
	_componenteActual = valor;	
}

function categoria(valor){
	_contenedor = document.getElementById('div_' + _componenteActual + '_sub');
	_nuevoLayer = document.createElement('div');
	_nuevoLayer.id = 'div_' + _componenteActual + '_categoria';
	_nuevoLayer.innerHTML = valor;
	_nuevoLayer.className = 'div_categoria';
	_nuevoLayer.onclick = function() {mostrar_ocultar('subcategoria','div_' + valor + '_subcategoria')};
	_contenedor.appendChild(_nuevoLayer);
	_categoriaActual = valor;	
}

function subcategoria(accion, valor){
	if(accion == "crear"){
		_contenedor = document.getElementById('div_' + _componenteActual + '_sub');
		_nuevoLayer = document.createElement('div');
		_nuevoLayer.id = 'div_' + _categoriaActual + '_subcategoria';
		_nuevoLayer.className = 'div_subcategoria';
		_contenedor.appendChild(_nuevoLayer);
		/** CREAMOS LA PRIMERA SUBCATEGORIA */
		_contenedor = document.getElementById('div_' + _categoriaActual + '_subcategoria');
		_nuevoLayer = document.createElement('div');
		_nuevoLayer.className = 'div_elemento_sub_off';
		_nuevoLayer.id = 'div_elemento_sub_' + valor; 
		_nuevoLayer.onclick = function() {modificar_elemento('subcategoria', 'div_elemento_sub_' + valor)};
		_nuevoLayer.innerHTML = valor;
		_contenedor.appendChild(_nuevoLayer);		
	}else{
		_contenedor = document.getElementById('div_' + _categoriaActual + '_subcategoria');
		_nuevoLayer = document.createElement('div');
		_nuevoLayer.className = 'div_elemento_sub_off';
		_nuevoLayer.id = 'div_elemento_sub_' + valor;
		_nuevoLayer.onclick = function() {modificar_elemento('subcategoria', 'div_elemento_sub_' + valor)};
		_nuevoLayer.innerHTML = valor;
		_contenedor.appendChild(_nuevoLayer);		
	}
}

function modificar_elemento(nivel, elemento){
	if(nivel == "componente"){
		if(!_componenteactivo){
			document.getElementById(elemento).className = "div_componente_on";
			_componenteactivo = elemento;
		}else{
			if(_componenteactivo != elemento){
				document.getElementById(_componenteactivo).className = "div_componente_off";
				document.getElementById(elemento).className = "div_componente_on";
				_componenteactivo = elemento;
			}else{
				if(document.getElementById(_componenteactivo).className == "div_componente_off"){
					document.getElementById(_componenteactivo).className = "div_componente_on"
				}else{
					document.getElementById(_componenteactivo).className = "div_componente_off"
				}
			}
		}
	}else if(nivel == "categoria"){
		if(!_categoriaactiva){
			_categoriaactiva = elemento;
			document.getElementById(elemento.id).className = "div_elemento_sub_on";
		}else{
			if(_categoriaactiva != elemento){
				document.getElementById(_categoriaactiva).className = "div_elemento_sub_off";
				document.getElementById(elemento).className = "div_elemento_sub_on";
				_categoriaactiva = elemento;
			}
		}
	}else if(nivel == "subcategoria"){
		if(!_subcategoriaactiva){
			_subcategoriaactiva = elemento;
			document.getElementById(elemento).className = "div_elemento_sub_on";
		}else{
			if(_subcategoriaactiva != elemento){
				document.getElementById(_subcategoriaactiva).className = "div_elemento_sub_off";
				document.getElementById(elemento).className = "div_elemento_sub_on";
				_subcategoriaactiva = elemento;
			}
		}
	}
}

function mostrar_ocultar(nivel, elemento){
	/** SI QUEREMOS MOSTRAR U OCULTAR UNA CATEGORIA */
	if(nivel == "categoria"){
		if(!_estadocategoria){
			document.getElementById(elemento).style.display = "block";
			_estadocategoria = elemento;
		}else{
			if(_estadocategoria == elemento){
				if(_estadosubcategoria){
					document.getElementById(_estadosubcategoria).style.display = "none";
				}
				if(document.getElementById(elemento).style.display == "block"){
					document.getElementById(elemento).style.display = "none";	
				}else{
					document.getElementById(elemento).style.display = "block";
				}
			}else{
				if(_estadosubcategoria){
					document.getElementById(_estadosubcategoria).style.display = "none";
				}
				document.getElementById(_estadocategoria).style.display = "none";
				document.getElementById(elemento).style.display = "block";
				_estadocategoria = elemento;				
			}
		}
	}else{
		if(!_estadosubcategoria){
			document.getElementById(elemento).style.display = "block";
			_estadosubcategoria = elemento;
		}else{
			if(_estadosubcategoria == elemento){
				if(document.getElementById(elemento).style.display == "block"){
					document.getElementById(elemento).style.display = "none";
				}else{
					document.getElementById(elemento).style.display = "block";
				}
			}else{
				document.getElementById(_estadosubcategoria).style.display = "none";
				document.getElementById(elemento).style.display = "block";
				_estadosubcategoria = elemento;
			}
		}
	}
}