window.onload = function(){
	$Ajax("categorias.php", {
		  onfinish: cargarCategorias,
		  tipoRespuesta: $tipo.JSON,
		  onerror: function(e) { alert(e) }
	});
	
	$("btnBuscar").onclick = enviarBusqueda;
	$("listaCategorias").onchange = buscarCategoria;
	
	// Define el droppable.
	Droppables.add("listaCanasto", {
		onDrop: sueltaProducto,
		accept: ["productoResultado", "detalleFoto"]
	});
}

function cargarCategorias(lista){
	// Itero entre cada categoria recibida.
	for (var i=0; i<lista.length; i++){
		var cat = lista[i];
		//Agrego la categoria de la lista de opciones.
		var opc = new Option(cat.nombre, cat.id);
		$("listaCategorias").options[$("listaCategorias").length] = opc;		
	};
	
	// Cargo los productos de la primera categoría.
	buscarCategoria();
}

function enviarBusqueda(){
	$Ajax("buscar.php?buscar=" + $F("textoBusqueda"), {
		onfinish: cargarResultados,
		tipoRespuesta: $tipo.JSON,
		divCargando: "cargando"
	});
}

function buscarCategoria(){
	$Ajax("categoria.php?id=" + $F("listaCategorias"),{
		onfinish: cargarResultados,
		tipoRespuesta: $tipo.JSON,
		divCargando: "cargando"
	});	
}

var listaResultados;

function cargarResultados(lista){
	// Apago el cartel de Loading.
	$("cargando").hide();
	
	// Guardo la lista en una varialble global para posible uso futuro.
	listaResultados = lista;
	
	// Limpio la lista de resultados vieja.
	$("listaResultados").innerHTML = "";
	
	// Itero entre los resultados.
	for (var i=0; i<lista.length; i++){
		agregarResultado(lista[i]);
	}
	//	
	detalle(lista[0].id);
}

//Hash de productos previamente navegados.
var cacheProductos = [];

function agregarResultado(producto){
	var div = document.createElement("div");
	div.className = 'productoResultado';
	div.id = 'producto' + producto.id;
	div.innerHTML += "<div class='nombreProducto' onclick='detalle(" + producto.id + ")'>" + producto.nombre + "</div>";
	div.innerHTML += "<div class='precioProducto'>" + producto.precio + " &euro;</div>";
	div.innerHTML += "<div class='agregarProducto' onclick='agregar(" + producto.id + ")'>Agregar</div>";
	$("listaResultados").appendChild(div);	
	
	// Agregamos el producto al hash.
	cacheProductos[producto.id] = {
		nombre: producto.nombre,
		precio: producto.precio,
		// Definimos el producto como Draggable.
		drag: new Draggable("producto" + producto.id, {revert: true})
	}
}

function detalle(id){
	//Tengo que ir al servidor a buscar los detalles del prducto.
	$Ajax("producto.php?id=" + id, {
		  onfinish: mostrarDetalle,
		  tipoRespuesta: $tipo.JSON,
		  avisoCargando: "cargando",
		  cache: true
	});
}

function mostrarDetalle(producto){
	//Creo el contenido de la zona de Detalle.
	var html = "<div class='detalleNombre'>" + producto.nombre + "</div>";
	if (producto.foto!= ""){
		//Si tiene la foto la incluimos
		html += "<img src='imgProductos/" + producto.foto + " ' class='detalleFoto' />";
	}
	html += "<input type='button' class='detalleAgregar' value='Agregar al Canasto' " + "onclick='agregar(" + producto.id + ")' />";
	html += "<div class='detalleCategoria'><span class='resaltar_info'>Fabricante:</span> " + producto.categoria + "</div>";
	html += "<div class='detallePrecio'><span class='resaltar_info'>por s&oacute;lo</span> &nbsp;&nbsp;" + producto.precio + " &euro;</div>";
	html += "<div class='detalleDescripcion'><span class='resaltar_info'>Descripci&oacute;n:</span> " + producto.descripcion + "</div>";
	$("listaDetalle").innerHTML = html;
	
	new Draggable("foto" + producto.id, {revert:true});
}

// Vector global del canasto de compras.
var canasto = [];

// Agrega un producto al canasto de compras.
function agregar(id){
	// Primero buscamos si el producto ya estaba en el canasto.
	var i = 0;
	var encontrado = false;
	while((i<canasto.length) && (!encontrado)){
		if(canasto[i].id == id){
			encontrado = true;
		}else{
			i++;
		}
	}
	if(encontrado){
		// El producto ya estaba en el canasto, sólo aumentamos su cantidad. "i" tiene la posición actual.
		canasto[i].cantidad++;
	}else{
		// El producto no estaba en el canasto, lo agregamos con los datos del producto desde el hash global.
		var producto = cacheProductos[id];
		nuevoProducto = {
			'id': id,
			'nombre': producto.nombre,
			'precio': producto.precio,
			'cantidad': 1
		};
		canasto[canasto.length] = nuevoProducto;
	}
	// Llama a la función que dibuja el canasto.
	actualizarCanasto();
}

// Dibuja el canasto en la zona especificada.
function actualizarCanasto(){
	// Primero creamos la lista de productos.
	var contenido = "";
	if(canasto.length == 0){
		contenido = "El canasto esta vacío. <br />";
	}else{
		var filaCanasto;
		var total = 0;
		for(var i=0; i<canasto.length; i++){
			//Creo una fila para cada producto.
			filaCanasto = "<div class='filaCanasto' id='canasto_" + canasto[i].id + "'>";
			// Armamos cada fila con una tabla.
			var tablaCanasto;
			var strNombreCanasto = canasto[i].nombre.substring(0, 15) + "...";
			var mulPrecioTotal = canasto[i].cantidad * canasto[i].precio;
			mulPrecioTotal = mulPrecioTotal.toFixed(2);
			tablaCanasto = "<table width='100%'><tr>";
			tablaCanasto += "<td class='canastoNombre'>" + strNombreCanasto + "</td>";
			tablaCanasto += "<td class='canastoCantidad'> " + canasto[i].cantidad + "<img src='img/flechadown.png' onclick='bajar( " + canasto[i].id + ")' />" + "<img src='img/flechaup.png' onclick='subir( " + canasto[i].id + ")' /></td>";
			tablaCanasto += "<td class='canastoPrecio'>$" + mulPrecioTotal + "</td>";
			tablaCanasto += "<td align='center'><a title='Borrar elemento' href='javascript:quitar(" + canasto[i].id + ")' class='canastoQuitar'><img src='img/del.png' /></a></td></tr></table>";
			filaCanasto += tablaCanasto + "</div>";
			contenido += filaCanasto;
			total += canasto[i].precio * canasto[i].cantidad;
		}
		total = total.toFixed(2);
		// Mostramos el TOTAL.
		contenido += generarFilaTotal(total);
		// Agregamos el botón para finalizar la compra.
		contenido += "<input type='button' id='btnFinalizar' value='Realizar pedido' />";
	}
	$("listaCanasto").innerHTML = contenido;
	
	//Agrego todas las filas como draggables
	for(var i=0; i<canasto.length; i++){
		new Draggable("canasto_" + canasto[i].id, {revert: true});
	}
	
	//Creamos el bote de basura
	var bote = document.createElement("img");
	bote.src = "img/papelera.png";
	bote.width = "280";
	bote.height = "70";
	bote.id = "basura";
	$("listaCanasto").appendChild(bote);
	//Creo la zona de Drop con el Bote
	Droppables.add("basura", {
	   accept: 'filaCanasto',
	   onDrop: tiraProducto
	});
	
	$("btnFinalizar").onclick = finalizar;
}

function generarFilaTotal(total){
	var filaCanasto = "<div class='totalCanasto'>";
	var tablaCanasto = "<table width='100%'><tr><td class='canastoNombre'>Total:</td><td class='canastoCantidad'></td><td class='canastoPrecio'>$" + total + "</td><td><a href='javascript:vaciar()' class='canastoQuitar'>Vaciar</a></td></tr></table>";
	filaCanasto += tablaCanasto + "</div>";
	return filaCanasto;
}

// Quita un producto del canasto.
function quitar(id){
	// primero buscamos si el producto ya estaba en el canasto
	var i = 0;
	var encontrado = false;
	while((i < canasto.length) && (!encontrado)){
		if(canasto[i].id == id){
			encontrado = true;
			// Lo eliminamos de la lista con Prototype.
			canasto = canasto.without(canasto[i]);
		}else{
			i++;
		}
	}
	actualizarCanasto();
}

// Vaciar todo el canasto.
function vaciar(){
	canasto = [];
	actualizarCanasto();
}

// Sube la cantidad de un producto del canasto.
function subir(id){
	// Primero buscamos el producto.
	var i = 0;
	var encontrado = false;
	while((i<canasto.length) && (!encontrado)){
		if(canasto[i].id == id){
			encontrado = true;
			// Aumentamos la cantidad del producto en el carrito.
			canasto[i].cantidad++;
		}else{
			i++;
		}
	}
	actualizarCanasto();
}

// Baja la cantidad de un producto del canasto.
function bajar(id){
	// Primero buscamos el producto.
	var i = 0;
	var encontrado = false;
	while((i<canasto.length) && (!encontrado)){
		if(canasto[i].id == id){
			encontrado = true;
			// Disminuimos la cantidad del producto en el carrito.
			canasto[i].cantidad--;
			// Si quedo en cero quitamos el producto.
			if(canasto[i].cantidad == 0){
				quitar(id);
			}
		}else{
			i++;
		}
	}
	actualizarCanasto();
}

// Se ejecuta cuando el usuario suelta un producto en el canasto.
function sueltaProducto(drag, drop, evento){
	var id;
	if(drag.id.substring(0, 8) == "producto"){
		// Obtenemos el ID, es productoXXX.
		id = drag.id.substring(8, drag.id.length);
	}else{
		// Obtenemos el ID, es fotoXXX.
		id = drag.id.substring(4, drag.id.length);
	}
	// Agregamos el producto al canasto.
	agregar(id);
}

function tiraProducto(drag, drop, evento){
	var id = drag.id.substring(8, drag.id.length);
	quitar(id);
}

// Muestra el formulario de finalización de compra.
function finalizar(){
	$("ventanaModal").style.visibility = "visible";
}

// Cancelar el envio de la compra.
function cancelar(){
	$("ventanaModal").style.visibility = "hidden";
}

// Envía toda la información del pedido.
function enviar(){
	// Aquí van las validaciones.
	// Armamos un string de tipo QueryString con los datos personales.
	var parametros = "";
	parametros += "nomyape=" + $F("txtNombre");
	parametros += "&direccion=" + $F("txtDireccion");
	parametros += "&telefono=" + $F("txtTelefono");
	
	// Recorremos todo el canasto y armamos un string con los ID y las cantidades.
	var strCarrito = "";
	for(var i=0; i<canasto.length; i++){
		strCarrito += canasto[i].id;
		// Para separar ID de Cantidad usamos guion
		strCarrito += "-";
		strCarrito += canasto[i].cantidad;
		// Usamos punto para separar productos.
		strCarrito += ".";
	}
	// Eliminamos último pipe.
	strCarrito = strCarrito.substring(0, strCarrito.length - 1);
	parametros += "&carrito=" + strCarrito;
	
	$Ajax("enviar.php", {
		metodo: $metodo.POST,
		parametros: parametros,
		avisoCargando: "cargando",
		onfinish: function(){
			alert("Su pedido ha sido guardado.");
			cancelar();
			vaciar();
		}
	});
}