// Id único para cada consulta
var n = 0;

// Devuelve una referencia al elemento XHTML
// cuyo nombre se facilita como parámetro
function el(nombre)
{
  return document.getElementById(nombre);
}

function CreaXHR()
{
  var ref = false;

  try { // Procedimiento para crear un objeto
   // XMLHttpRequest compatible entre distintos
   ref = new ActiveXObject('Msxml2.XMLHTTP');
  } catch (e1) { // navegadores Web
   try {
     ref = 
        new ActiveXObject('Microsoft.XMLHTTP');
     }  catch (e2) {
     objXML = false;
   }
  }

  if (!ref && (typeof XMLHttpRequest != 'undefined' || window.XMLHttpRequest)) 
   ref = new XMLHttpRequest();  
   
  return ref;
}

// Función encargada de enviar el formulario y 
// obtener los resultados
function enviaFormulario(elemento)
{
  var strContenido = 
       'tematica=' + el('tematica').value;
    
  var objXML = CreaXHR();
  // Si no tenemos el objeto
  if(!objXML) return false; 

  // Enviamos la solicitud al servidor
  objXML.open('POST', 'bibliovotos.php', 
     false);
  // con las cabeceras apropiadas
  objXML.setRequestHeader('Content-Type', 
     'application/x-www-form-urlencoded');
  objXML.setRequestHeader('Content-Length', 
    strContenido.length);
  objXML.send(strContenido);

  // Analizamos la respuesta obteniendo 
  // las filas de datos
  var filas;

  var cadena = // preparamos una tabla XHTML
    '<table border="1"><tr><td><b>ID</b>' +
    '</td><td><b>url</b></td><td><b>mensaje' +
    '</b></td>';

  try { // prevenimos un posible error de JSON
    filas = objXML.responseText.parseJSON();

    for(var i in filas) // recorremos las filas
      if(filas.hasOwnProperty(i)) 
        cadena = cadena + '<tr>' +
        '<td>' + filas[i].id + '</td>' +
        '<td>' + filas[i].url + '</td>' +
        '<td>' + filas[i].id_mensaje + '</td>' +       
        '</tr>';
  } catch(e) {
    cadena = 'No hay datos';
}

cadena = cadena + '</table>'; // fin de tabla
elemento.innerHTML = cadena;
}


// Procedimiento de suscripción a una fuente
function agregaConsulta_onclick() {
 var nuevaConsulta = 
  '<div class="consulta" id="c' + n + '">' +
   '<div class="titulo" ' +
       'onmouseover="muestraVentana(event, '+
       n+')" onmouseout="ocultaFlotante('+
       n+')">' +
    '<span style="float:left"> [Consulta ' + 
         n + ']</span>' +
    '<span class="controles" id="abre'+n+'">' +
      '<span class="cierre" onclick=' +
         '"alto(this, ' + n + ')">' + 
      '_</span>' +
      '<span class="cierre" onclick=' +
         '"cierra(' + n + ')"> x</span>' +
    '</span>' +
   '</div>' +
   '<div class="contenido" id="con' + n + 
    '"><p>Aquí se insertaría el resultado ' +
    'de la consulta</p>' +
   '</div>' +
  '</div>';

   // Por ahora añadimos una sección vacía
   el('consultas').innerHTML = 
    el('consultas').innerHTML + nuevaConsulta;

   // Enviamos la consulta al servidor y 
   // obtenemos los datos
   enviaFormulario(el('con' + n));    
   n++;
    
    return false; // No ejecutar el 'submit' del formulario
}

// Esta función minimiza o devuelve a su estado original una consulta
function alto(boton, n) {
   var seccion = el('con' + n);
   
   if(seccion.style.display != 'none') {
     seccion.style.display = 'none';
     boton.innerHTML = '+';
   } else {
     seccion.style.display = 'block';
     boton.innerHTML = '_';
   }
}

// Procedimiento que elimina una consulta
function cierra(n) {
   // Obtenemos una referencia a la sección
   var consulta = el('c' + n);
   // y ao eliminamos
   consulta.parentNode.removeChild(consulta);
}

// Esta función muestra la ventana emergente asociada 
// a una consulta en caso de que ésta se encuentre cerrada
function muestraVentana(evt, n)
{
  // Si la consulta está abierta
  if(el('con'+n).style.display != 'none') 
    return; // no tenemos que hacer nada
    
  // Generamos la ventana flotante
  var divFlotante = 
    '<div class="flotante" id="f' + n + '" ' +
    'onmouseout="ocultaFlotante('+n+')" ' +
    'style="position: absolute; left: ' + 
    // usando las coordenadas donde se 
    // encuentra el puntero
    evt.clientX / 2 + 'px; top: ' + 
    (evt.clientY + 10) +
    'px; border: solid 1px black; ' +
    'background-color: blue; color: white;' + 
    'opacity: .8; filter: alpha(opacity=80);">'
    // y el contenido original de la sección
    + el('con' + n).innerHTML + '</div>';
    
  // agregamos la ventana flotante
  if(!el('f'+n)) // si no está visible ya
    el('consultas').innerHTML = 
    el('consultas').innerHTML + divFlotante;
}

// Función para eliminar una ventana emergente
function ocultaFlotante(n)
{
  if(el('f'+n)) // Si hay una ventana flotante
    // la eliminamos
    el('consultas').removeChild(el('f'+n));
}

// Referencia a la ventana que se mueve
var consultaD = null;
// profundidad que tenía originalmente
var consultazIndex;

// Conectamos los eventos de ratón con tres
// funciones propias
document.onmousedown = inicioMovimiento;
document.onmouseup  = finMovimiento;
document.onmousemove = moviendose;

// Se activa cada vez que se detecta un clic
// de ratón sobre algún elemento de la interfaz
function inicioMovimiento(evento) 
{
  // Referencia al elemento sobre el que se ha 
  var elemento =  // pulsado el botón del ratón
      evento != null ? 
      evento.target : 
      window.event.srcElement;
      
  // Si ese elemento es una consulta
  if(elemento.className == 'consulta') {
    // convertimos la posición en absoluta
    consultaD = elemento;
    consultaD.style.position = 'absolute';
    // y ponemos la esquina superior izquierda
    // de la ventana cerca del puntero
    consultaD.style.left = (
      evento && evento.clientX ? 
       evento.clientX : 
       window.event.clientX ) - 32 + 'px'; 
    consultaD.style.top = (
      evento && evento.clientY ?
       evento.clientY :
       window.event.clientY ) - 10+ 'px'; 

    // guardamos la posición en profundidad para    
    zIndexAnt = consultaD.style.zIndex;
    // colocar la ventana arrastrada sobre
    consultaD.style.zIndex = n + 1; // las otras
    
    // El borde de la ventana cambiará
    consultaD.style.border = "5px groove black";
    // y la ventana será semitransparente
    if (navigator.appName == 
        'Microsoft Internet Explorer')
      // para IE
      consultaD.style.filter = 'alpha(opacity="50")';
    else  // para Mozilla, Opera, Safari y otros
      consultaD.style.opacity = '0.5';
    
    // no procesar normalmente onmousedown
    return(false);
  }
}

// Esta función se activa cada vez que se libera
// un botón del ratón
function finMovimiento() 
{
  // Si no estamos arrastrando una ventana
  if(!consultaD) return; // no hacer nada
  
  // Restablecer el borde original de la ventana
  consultaD.style.border = '1px solid silver';
  consultaD.style.borderTop = '10px solid navy';
  // y su profundidad
  consultaD.style.zIndex = zIndexAnt;
  // eliminar la transparencia
  if (navigator.appName == 
      'Microsoft Internet Explorer')
    // para IE
    consultaD.style.filter = 
      'alpha(opacity="100")';
  else  // para Mozilla, Opera, Safari y otros
    consultaD.style.opacity = '1';
    
  // Hemos terminado la operación
  consultaD = null; 
}

// Esta función se activa continuamente con
// el desplazamiento del ratón
function moviendose(evento) 
{
  // Entrar solamente si estamos arrastrando
  if(!consultaD) return;

  // Hacer que la ventana siga al puntero   
  consultaD.style.left = ( // del ratón
    evento && evento.clientX ? 
     evento.clientX : 
     window.event.clientX ) - 32 + 'px'; 
  consultaD.style.top = (
    evento && evento.clientY ?
     evento.clientY :
     window.event.clientY ) - 10+ 'px'; 
     
  return false;
}