var xhr;
var xhr2;
var xhr3;

function inicializar(){

    // Se cargan los datos existentes en la tabla*/
	refrescarMarcas();
}

// Funci�n refrescar().
// Obtiene la lista XML con los datos de los usuarios a trav�s de una llamada AJAX.
// Una vez la recibe, llama a la funci�n pintarTabla para repoblar la tabla.
function refrescarMarcas(){
	// En el caso de navegadores normales... Firefox, etc...
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    // Para el caso de MS Explorer
    else
        if (window.ActiveXObject) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    // Direcci�n donde se encuentra el servlet que valida el nombre de usuario
    var url = "getmarcas.php";
    // Se establece el callback, y se indica que la llamada es as�ncrona
    xhr.onreadystatechange = listarMarcas;
    xhr.open("GET", url, true);
    xhr.send(null);
}

function listarMarcas(){
	if (xhr.readyState == 4 && xhr.status == 200) {
		// Se obtiene la representacion DOM de la lista de usuarios
		var dom = xhr.responseXML;

		// Se obtiene una lista con los nodos <usuario>
		var marca = dom.getElementsByTagName("marca");
		// En el caso de tener usuarios...
		if (marca.length > 0) {
			// Se obtiene una referencia al tbody de la tabla
			var tabla = document.getElementById("menumarcas");

			// y lo primero que se hace es borrar los TR
			// existentes para no duplicarlos. Para ello
			// se indica que el codigo HTML contenido
			// entre las etiquetas de apertura y cierre
			// del tbody es nada (""), luego con eso se borran
			// los <tr> que existiesen.
			tabla.innerHTML = "";
			// Para cada usuario existente...
			for (var i = 0; i < marca.length; i++) {
					var u = marca[i];
					// Se crea el elemento TR de la tabla
					tabla.innerHTML += "<h2>" + u.firstChild.nodeValue + "</h2>";
			}
		}
	}
}

//Creo la clase Menu

function Menu(){
	//Esta propiedad me dice cual es el ítem actual abierto.
	this.actual;
	//Esta propiedad me dice si un ítem está abierto o no.
	this.estado = false;
	//Esta propiead almacena el total de ítems que tiene el menú.
	this.total;
	//Metodo que se encarga de escribir los ítems y sub ítems del menu, asegurándose de dejar a todos los ítems sin desplegar.
	this.principal;
	
	this.stringfunc = "\" onClick=\"menu1.despliega(";
														
	this.altosfinales = new Array();
	
	this.velocidad;
	
	this.escribe = function(contenedor,alto,velocidad){
		
		this.principal = document.getElementById(contenedor);
		this.total = this.items.length;
		this.velocidad = velocidad;
		
		for(var i=0;i<this.total;i++){
			this.principal.innerHTML+= "<div id=\"" + this.items[i][0] + "\"><a href=\"" + this.items[i][1] + this.stringfunc + i + ");\" alt=\"" + this.items[i][2] + "\">" + this.items[i][2] + "</a></div>";
	
			this.principal.innerHTML+= "<ul id=\"sub" + this.items[i][0] + "\">";
			
			for(var k=0;k<this.subitems[i].length;k++){
					document.getElementById("sub" + this.items[i][0]).innerHTML+= "<li><a href=\"" + this.subitems[i][k][1] + "\" alt=\"" + this.subitems[i][k][0] + "\">" + this.subitems[i][k][2] + "</a></li>";
			}
			this.principal.innerHTML+= "</ul>"
			
			document.getElementById("sub" + this.items[i][0]).style.height = "0px";
			
			this.altosfinales[i] = this.subitems[i].length * alto;
			
		}

	}

	this.despliega = function(itemdiv){
	
		for(var i=0;i<this.total;i++){
			var principal = document.getElementById("subitem-" + i);
			if(itemdiv == i){
				if(itemdiv == this.actual && this.estado == false){
					principal.style.height = "0px";
					this.estado = true;
				}else{
					principal.style.height = this.altosfinales[i] + "px";
					this.estado = false;
				}
			}else{
				principal.style.height = "0px";
			}
		}
	this.actual = itemdiv;
	}

}


function Desplegable(){
	
	this.stringfunc = "\" onClick=\"menu1.despliegaacor(";
														
	this.alturaparciala = 0;
	
	this.ultimosubmenu;
	
	this.estadoclick = true;

	this.escribeacordeon = function(contenedor,alto,velocidad){
		this.escribe(contenedor,alto,velocidad);
	}
	

	this.despliegaacor = function(itemdiv){
		
		if(this.estadoclick == true){
		
			var raiz = this;
			var principalactual;
			var sigueabriendo;
			
							function abre(principal,est){
						
						raiz.estado = false;
						
						if(est){
							principalactual = principal;
						}
						
						raiz.alturaparciala = raiz.alturaparciala + raiz.velocidad;
						
						if(raiz.alturaparciala >= principalactual.alturaparcialc){
							raiz.ultimosubmenu = principalactual;
							clearTimeout(inter);
							raiz.alturaparciala = 0;
							raiz.estadoclick = true;
							//alert(raiz.estadoclick);
		
						}else{
							principalactual.style.height = raiz.alturaparciala + "px";
							var inter = setTimeout(abre,10);
						}
	
				}
				
				function cierra(principal,est,sigue){
					
					if(est){
						principalactual = principal;
						sigueabriendo = sigue;
					}
					
					principalactual.alturaparcialc = principalactual.alturaparcialc - raiz.velocidad;
					
					if(principalactual.alturaparcialc <= 0){
						clearTimeout(inter);
						principalactual.style.height = "0px";
						if(sigueabriendo){
							abre(sigueabriendo,true);
							raiz.estadoclick = false;
						}else{
							raiz.estadoclick = true;
						}
						//alert(raiz.estadoclick);
					}else{
						principalactual.style.height = principalactual.alturaparcialc + "px";
						var inter = setTimeout(cierra,10);
					}
					
				}

			
			
			for(var i=0;i<this.total;i++){
				
				var principal = document.getElementById("subitem-" + i);
				
				principal.alturaparcialc = this.altosfinales[i];
				
				if(principal.alturaparcialc > 0){
					
					if(itemdiv == i){
						if(itemdiv == this.actual && this.estado == false){
							cierra(principal,true);
							this.estado = true;
							this.ultimosubmenu = undefined;
						}else{
							if(this.ultimosubmenu){
								cierra(this.ultimosubmenu,true,principal);
							}else{
								abre(principal,true);
								
							}
						}
	
					}
	
				}
										
			}
			
		this.actual = itemdiv;
		
		}
		
		if(this.total == 0){
			this.estadoclick = true;
		}
	}
		
}

Desplegable.prototype= new Menu();















function anadir(p,uni){
    // En el caso de navegadores normales... Firefox, etc...
    if (window.XMLHttpRequest) {
        xhr3 = new XMLHttpRequest();
    }
    // Para el caso de MS Explorer
    else
        if (window.ActiveXObject) {
            xhr3 = new ActiveXObject("Microsoft.XMLHTTP");
        }
    // Direcci�n donde se encuentra el servlet que valida el nombre de usuario
    var url = "comprar";

    // Par�metros a pasar...
    var params = "idProducto=" + escape(p) + "&uniProducto=" + escape(uni);

    // Se establece el callback, y se indica que la llamada es as�ncrona
    xhr3.onreadystatechange = comprar;
    xhr3.open("POST", url, true);
    xhr3.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr3.setRequestHeader("Content-length", params.length);
    xhr3.setRequestHeader("Connection", "close");
    xhr3.send(params);

    // Se devuelve un falso para no enviar los datos del formulario
    // como un formulario normal. Ya los hemos enviado mediante AJAX.
}

// Funci�n crearUsuario.
// Funci�n de callback llamada en el caso de crear un usuario.
function comprar() {
    if (xhr3.readyState == 4 && xhr3.status == 200) {
        var resp = xhr3.responseText;
        // Si el usuario se ha creado correctamente,
        // se indica en el DIV creado para tal efecto.
        if(resp=="true")
        {
             // Se refresca la tabla.
            refrescarCarrito();
        }
        else
        {
            alert("No se ha podido a&nacute;adir ese producto");
        }
    }
}

function ver(p){
	// En el caso de navegadores normales... Firefox, etc...
    if (window.XMLHttpRequest) {
        xhr3 = new XMLHttpRequest();
    }
    // Para el caso de MS Explorer
    else
        if (window.ActiveXObject) {
            xhr3 = new ActiveXObject("Microsoft.XMLHTTP");
        }
    // Direcci�n donde se encuentra el servlet que valida el nombre de usuario
    var url = "ver";

    // Par�metros a pasar...
    var params = "idProducto=" + escape(p);

    // Se establece el callback, y se indica que la llamada es as�ncrona
    xhr3.onreadystatechange = verDetalle;
    xhr3.open("POST", url, true);
    xhr3.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr3.setRequestHeader("Content-length", params.length);
    xhr3.setRequestHeader("Connection", "close");
    xhr3.send(params);

    // Se devuelve un falso para no enviar los datos del formulario
    // como un formulario normal. Ya los hemos enviado mediante AJAX.
}

// Funci�n crearUsuario.
// Funci�n de callback llamada en el caso de crear un usuario.
function verDetalle() {
    if (xhr3.readyState == 4 && xhr3.status == 200) {
        var dom = xhr3.responseXML;
        // Si el usuario se ha creado correctamente,
        // se indica en el DIV creado para tal efecto.
        var titulo = dom.getElementsByTagName("titulo");
		var tabla = document.getElementById("pdetalle");
		tabla.innerHTML="";
		var descripcion = dom.getElementsByTagName("descripcion");
		if (titulo!=null){
			var pTitulo = document.createElement("h3");
			var pAtributo = document.createAttribute("class");
			pAtributo.value="descripcion";
			pTitulo.setAttributeNode(pAtributo);
			pTitulo.innerHTML = titulo[0].firstChild.nodeValue
			var pDescripcion = document.createElement("p");
			pDescripcion.innerHTML = descripcion[0].firstChild.nodeValue
			tabla.appendChild(pTitulo);
			tabla.appendChild(pDescripcion);
		}

    }
}

function hacerFactura(){
	// En el caso de navegadores normales... Firefox, etc...
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    // Para el caso de MS Explorer
    else
        if (window.ActiveXObject) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    // Direcci�n donde se encuentra el servlet que valida el nombre de usuario
    var url = "crearfactura";

    // Se establece el callback, y se indica que la llamada es as�ncrona
    xhr.onreadystatechange = dibujarFactura;
    xhr.open("GET", url, true);
    xhr.send(null);
}

function dibujarFactura(){
	if (xhr.readyState == 4 && xhr.status == 200) {
	    var dom = xhr.responseXML;
		var contenido = document.getElementById("page-bgcontent");
		contenido.innerHTML="";
		contenido.innerHTML="<h2>Factura</h2>";
		var lineas = dom.getElementsByTagName("linea");
        var tot = dom.getElementsByTagName("total");
        // En el caso de tener usuarios...
        if (lineas.length > 0) {
			var tabla = document.createElement("table");
			//tabla.border="1";
			var thead = document.createElement("thead");
			var thUnidades = document.createElement("th");
			var thProducto = document.createElement("th");
			var thPrecio   = document.createElement("th");
			var thTotal    = document.createElement("th");
			thUnidades.innerHTML = "Unidades";
			thProducto.innerHTML = "Producto";
			thPrecio.innerHTML = "Precio Unitario";
			thTotal.innerHTML = "Precio Total";
			thead.appendChild(thUnidades);
			thead.appendChild(thProducto);
			thead.appendChild(thPrecio);
			thead.appendChild(thTotal);
			tabla.appendChild(thead);
			var tbody = document.createElement("tbody");
			for (var i=0; i<lineas.length;i++) {
                // i es el �ndice, luego hay que acceder
                // al elemento concreto.
                var u = lineas[i];

                // Se crea el elemento TR de la tabla
                var tr = document.createElement("tr");
                // Se le asigna un identificador al <tr>
                tr.id = "linea"+i;
                // Se crea el TD para el identificador del usuario
                var tdIdentificador = document.createElement("td");
                tdIdentificador.innerHTML =
                           	u.getElementsByTagName("unidades")[0].firstChild.nodeValue;
                var tdProducto = document.createElement("td");
				tdProducto.innerHTML =
							u.getElementsByTagName("producto")[0].firstChild.nodeValue;
                // Se crea el TD para el nombre de usuario
                var tdPrecio = document.createElement("td");
                tdPrecio.innerHTML =
                     u.getElementsByTagName("precio")[0].firstChild.nodeValue;
                var tdTotalU = document.createElement("td");
				tdTotalU.innerHTML =
				     u.getElementsByTagName("preciou")[0].firstChild.nodeValue;
                // Se insertan los TDs en el TR
                tr.appendChild(tdIdentificador);
				tr.appendChild(tdProducto);
                tr.appendChild(tdPrecio);
				tr.appendChild(tdTotalU);

                // Se inserta el TR en la tabla.
                tbody.appendChild(tr);
            }
			var trTotal = document.createElement("tr");
			var atColspan = document.createAttribute("colspan");
			atColspan.value="3";
			var alineamiento = document.createAttribute("align");
			alineamiento.value = "right"
			var tdTotalLabel = document.createElement("td");
			tdTotalLabel.innerHTML="<strong>Total</strong>";
			tdTotalLabel.setAttributeNode(atColspan);
			tdTotalLabel.setAttributeNode(alineamiento);
			var tdTotal = document.createElement("td");
			tdTotal.innerHTML=tot[0].firstChild.nodeValue;
			trTotal.appendChild(tdTotalLabel);
			trTotal.appendChild(tdTotal);
			tbody.appendChild(trTotal);
			tabla.appendChild(tbody);
		}
		contenido.appendChild(tabla);
		contenido.innerHTML += "<a href='index.html'>Volver atras</a>"
	}
}