$(document).ready( function()
{
  
  // Lee el XML
  $.ajax({
    type: "GET",
    url: "xml/trabajos.xml",
    dataType: ($.browser.msie) ? "text" : "xml",
    success: function(data)
    {
       var xml;
       if (typeof data == "string") {
         xml = new ActiveXObject("Microsoft.XMLDOM");
         xml.async = false;
         xml.loadXML(data);
       } else {
         xml = data;
       }
       procesarXML(xml);
    },
    error: function(xml) { alert(xml.responseText); }
  }); 
  
});

function procesarXML(xml)
{
  $xml = $(xml);
  $xml = $xml.find('trabajos');
    
  // Si es la página de inicio cargamos sólo los destacados
  if ($('body').attr('id') == 'index') { cargaDestacados($xml); }
  
  // Si es la página de trabajos cargamos los primeros
  else if ($('body').attr('id') == 'works') { iniciaCargaTrabajos($xml); }
  
  // Si es el detalle de un trabajo
  else if ($('body').attr('id') == 'element') { iniciaCargaDetalles($xml); }
  
}

function iniciaCargaDetalles($xml)
{
  // posibles parametros
  var param = getUrlParameters();
  
  if (param["item"]) 
  { 
    var elemento = unescape(param["item"]).replace(/\+/g, " ");
  }
  
  if (elemento)
  { 
    var $elemento = $('elemento titulo:contains("'+ elemento +'")', $xml).parent();
    // si no existe, avisamos y fuera
    if ($elemento.length == 0) { alert('No existe el trabajo indicado'); return; }
    // cargamos el directorio de imagenes
    var dirImagenes = $('directorios dirImagenes', $xml).attr('src');
    // cargamos los detalles
    detalleElemento($elemento, dirImagenes);
  }
  else
  { 
    alert("No se ha especificado un elemento");  
  }

}

function iniciaCargaTrabajos($xml,categorias,dirMiniaturas,dirImagenes)
{
  // Leemos las categorías posibles de los elementos del xml
  var categorias = new Array();
  $xml.find('elemento').each(function(count,item)
  {
    var tempCategorias = $(item).attr('categorias');
    tempCategorias = tempCategorias.split(' ');
    $(tempCategorias).each(function(count,item)
    {
      var cat = item;
      cat = limpiaAcentos(cat);
      if ($.inArray(cat, categorias) == -1) { categorias.push(cat); }
    });    
  });  
  
  // Creamos los enlaces con las categorías
  var htmlToInsert = '';
  htmlToInsert += '<li><a href="nuestros-trabajos.html?cat=todos" title="todos">todos</a></li>';
  $.each(categorias, function(count, item) 
  { 
    htmlToInsert += '<li><a href="nuestros-trabajos.html?cat='+ item +'" title="'+ item +'">'+ item +'</a></li>';
  });
  $('#categories').empty();
  $('#categories').append(htmlToInsert);
  $('#categories li a').click(function(e)
  {
    e.preventDefault();
    
    var cat = $(this).attr('title');
    
    cargaElementos($xml,cat,0,6);
    
    return false;
  });
  
  // posibles parametros
  var param = getUrlParameters();
  
  if (param["cat"]) 
  { 
    var cat = param["cat"];
    if (param["page"])
    {
      var cuantos = 6;
      var pagina = param["page"];
      var inicio = (cuantos * pagina)-cuantos;
      cargaElementos($xml,cat,inicio,cuantos);
    }
    else
    {
      cargaElementos($xml,cat,0,6);
    }
  }
  else
  {
    cargaElementos($xml,'todos',0,6);
  }
  
}

function cargaDestacados($xml)
{
  var dirMiniaturas = $('directorios dirMiniaturas', $xml).attr('src');
  var fichas = new Array();
  var $elementos = $('elemento[destacado]', $xml);
  
  $("#thumbs").empty();
  
  for (var i = 0; i < 3; i++)
  {
    var $elemento = $($elementos.get(i));
    var titulo = $elemento.find('titulo').text();
    var resumen = $elemento.find('resumen').text();
    var dirMiniatura = dirMiniaturas + $elemento.find('miniatura').attr('src');
    fichas[i] = new ficha(titulo,resumen,dirMiniatura);
  };
}

function cargaElementos($xml,categoria,inicio,cuantos)
{
  // activamos la categoria
  $('a', '#categories').removeClass('active');
  $('a[title="'+categoria+'"]','#categories').addClass('active');
  
  // cogemos los elementos de la categoría correspondiente
  if (categoria != 'todos') { var $elementos = $('elemento[categorias~='+categoria+']', $xml); }
  else { var $elementos = $('elemento', $xml); }
  
  // calculamos cuántas páginas hay
  var paginas = Math.ceil($elementos.length/cuantos);
  
  // ponemos los links de paginacion y activamos el actual
  var pagActual = Math.ceil(inicio/cuantos)+1;
  var $paginacion = $('#pagination');
  var htmlToInsert = '';
  for (var i=0; i<paginas; i++)
  {
    if (i+1 == pagActual) { htmlToInsert += '<li><a href="nuestros-trabajos.html?cat='+ categoria +'&page='+ parseInt(i+1) +'" title="'+ parseInt(i+1) +'" class="active">'+ parseInt(i+1) +'</a></li>'; }
    else { htmlToInsert += '<li><a href="nuestros-trabajos.html?cat='+ categoria +'&page='+ parseInt(i+1) +'" title="'+ parseInt(i+1) +'">'+ parseInt(i+1) +'</a></li>'; }
  }
  $('#pagination').empty();
  $('#pagination').append(htmlToInsert);
  $('#pagination a').click(function(e)
  {
    e.preventDefault();
    
    var pagina = parseInt($(this).attr('title'));
    var elemInicio = cuantos * (pagina-1);
    cargaElementos($xml,categoria,elemInicio,cuantos);
    
    return false;   
  });
  
  // cargamos los directorios de imagenes
  var dirMiniaturas = $('directorios dirMiniaturas', $xml).attr('src');
  
  // cargamos y mostramos los elementos correspondientes
  var aCargar = ($elementos.length-inicio);
  if (aCargar > 6) { aCargar = 6; }
  var index = inicio;
  var fichas = new Array();
  
  var altura = Math.ceil(aCargar/3);
  altura = altura * ($('#thumbs li:eq(0)').height() + parseFloat($('#thumbs li:eq(0)').css('margin-top')) + parseFloat($('#thumbs li:eq(0)').css('margin-bottom')));
  
  $('#thumbs a').css('background','transparent');
  $('#thumbs .title').css('opacity','0');
  $('#thumbs img.light').css('opacity','0'); 
  $('#thumbs li a .imagesThumb img').animate({ 'opacity' : '0'}, 150);
  $('#thumbs').animate({ 'height' : altura}, 250, function()
  {
    $(this).empty();
    for (var i = 0; i < aCargar; i++)
    {
      var $elemento = $($elementos.get(index));
      var titulo = $elemento.find('titulo').text();
      var resumen = $elemento.find('resumen').text();
      var dirMiniatura = dirMiniaturas + $elemento.find('miniatura').attr('src');
      fichas[i] = new ficha(titulo,resumen,dirMiniatura);
      index++;
    };    
  }); 
    
}

function detalleElemento($elemento, dirImagenes)
{
  // carga los datos del elemento seleccionado
  var titulo;
  var fecha;
  var categorias = new Array();
  var descripcion;
  var imagenes = new Array();
  
  titulo = $elemento.find('titulo').text();
  fecha = $elemento.attr('fecha');
  descripcion = $elemento.find('descripcion').text();
    
  $elemento.find('imagen').each( function(index, value)
  {
    imagenes.push($(value).attr('src'));
  });
  
  var tempCat = $elemento.attr('categorias');
  categorias = tempCat.split(' ');
  
  // escribe detalles en la página
  var $type = $('#type');
  var $imgActive = $('#imgActive');
  var $imgList = $('#imagesList');
  var $description = $('#description');
  
  $titulo = $('#title');
  $titulo.empty();
  $titulo.html(titulo);
  
  var metadata = 'Categorías:';
  $(categorias).each( function(index, value)
  {
    metadata += ' <a href="nuestros-trabajos.html?cat='+value+'">'+value+'</a>';
    if (index < categorias.length-1) { metadata += ', '; }
  });
  
  if (fecha) { metadata += ' - Fecha:' + fecha; }
  metadata += ' - <a href="nuestros-trabajos.html" title="">Volver al listado de trabajos</a>'
  $type.empty();
  $type.html(metadata);
  
  // desglosar la descripción en párrafos
  var description = $elemento.find('descripcion').text();
  description = jQuery.trim(description);
  description = '<p>'+description;
  description = description.replace(/^\s+|\s+$/g, '');
  description = description.replace( /  +/g, ' ' );
  description = description.replace(/\n/g,'<\/p><p>');
  description = description.replace(/<p> /g,'<p>');
  description += '</p>';
  
  $description.empty();
  $description.html(description);
  
  // imagenes
  var imagenesHTML = "";
  $(imagenes).each(function(index, value)
  {
    if (index >= imagenes.length-1) { imagenesHTML += '<li class="last">'; }
    else { imagenesHTML += '<li>'; }
    imagenesHTML += '<a href="'+ dirImagenes + value +'" title=""><img src="'+ dirImagenes + value +'" width="70" height="47" alt="" /></a></li>'
  });
  
  $imgList.empty();
  $imgList.html(imagenesHTML);
  
  $('a:eq(0)', $imgList).click();
  
}

// El objeto ficha
function ficha(titulo,resumen,miniatura)
{
  this.titulo = titulo;
  this.resumen = resumen;
  this.miniatura = miniatura;
  
  var $item = $('<li class="preload"><a href=trabajo.html?item=' + escape(titulo) + ' title=""><span class="title">'+ titulo +'<span class="type">'+ resumen +'</span></span><span class="imagesThumb"><img src="'+ miniatura +'" width="312" height="400" alt="Título del trabajo" class="dark" /><img src="'+ miniatura +'" width="312" height="400" alt="'+ titulo +'" class="light" /></span></a></li>');
  $('.title', $item).css('opacity','0');
  $('.imagesThumb', $item).css('opacity','0');
  $('#thumbs').append($item);
  
  var img = new Image();
  img.onload = function()
  {
    $item.removeClass('preload');
    $('.imagesThumb', $item).animate({ 'opacity' : '1'}, 550);
  };
  img.src = this.miniatura;
}

function getUrlParameters()
{
  var map = {};
  var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
  map[key] = value;
  });
  return map; 
}

function limpiaAcentos(s)
{
  var r=s.toLowerCase();
  r = r.replace(new RegExp("\\s", 'g'),"");
  r = r.replace(new RegExp("[àáâãäå]", 'g'),"a");
  r = r.replace(new RegExp("æ", 'g'),"ae");
  r = r.replace(new RegExp("ç", 'g'),"c");
  r = r.replace(new RegExp("[èéêë]", 'g'),"e");
  r = r.replace(new RegExp("[ìíîï]", 'g'),"i");
  r = r.replace(new RegExp("ñ", 'g'),"n");                            
  r = r.replace(new RegExp("[òóôõö]", 'g'),"o");
  r = r.replace(new RegExp("œ", 'g'),"oe");
  r = r.replace(new RegExp("[ùúûü]", 'g'),"u");
  r = r.replace(new RegExp("[ýÿ]", 'g'),"y");
  r = r.replace(new RegExp("\\W", 'g'),"");
  
  //r = r.slice(0,1).toUpperCase() + r.slice(1);
  
  return r;
}