// Functions
function createRef(pNom, pPhotos, pPhotoDesc, pDesc, pListe) {
  this.nom = pNom;
  this.photos = pPhotos;
  this.photoDesc = pPhotoDesc; // Desc. par photo
  this.desc = pDesc;
  this.liste = pListe;
}

function createCat(pNom, pTabRef) {
  this.nom = pNom;
  this.tabRef = pTabRef;
}

function showBlocImage() {
  var content = "<img src=\"visu/popup/default.jpg\"/>";
  document.getElementById("popup").innerHTML = content;
}

function constructBloc(pObj) {
  var content = "";
  
  content += "<div class=\"bloc_nav\">";
    content += "<div class=\"bloc_nav_title\">";
      content += "<span id=\"title_category\"></span>";
    content += "</div>";
    content += "<div class=\"bloc_nav_crochet\">";
      content += "<div id=\"crochet_g\" onclick=\"changeCatArrow(false);\" onmouseover=\"overArrow(this.id);\" onmouseout=\"outArrow(this.id);\"></div>";
      content += "<div id=\"crochet_d\" onclick=\"changeCatArrow(true);\" onmouseover=\"overArrow(this.id);\" onmouseout=\"outArrow(this.id);\"></div>";
    content += "</div>";
    content += "<div id=\"close\" onmouseover=\"overArrow(this.id);\" onmouseout=\"outArrow(this.id);\" onclick=\"closePopup();\"></div>";
  content += "</div>";
  content += "<div class=\"bloc_top\"></div>";
  content += "<div id=\"bloc_content\" class=\"bloc_mid\">";
    if (pObj.photos.length > 0) {
      content += "<div id=\"bloc_photo\" class=\"bloc_photo\">";
        content += "<div class=\"photo_on\"><img id=\"photo_g\" name=\""+pObj.photos[0]+"\" src=\""+dirImage+pObj.photos[0]+"_g.jpg\" alt=\""+pObj.photoDesc[0]+"\" title=\""+pObj.photoDesc[0]+"\"></div>";
        content += "<div class=\"nom_ref\">"+pObj.nom+"</div>";
        content += constructBlocPhotos(pObj, pObj.nom);
        content += "<div id=\"desc_photos\" class=\"desc_photos\">"+pObj.photoDesc[0]+"</div>";
      content += "</div>";
    }
    content += "<div class=\"bloc_desc\">";
      content += "<div>"+pObj.desc+"</div>";
    content += "</div>";
    content += "<div class=\"nav\">";
      content += "<div id=\"nav_g\" onclick=\"changeRefArrow(false);\" onmouseover=\"overArrow(this.id);\" onmouseout=\"outArrow(this.id);\"></div>";
      content += "<div id=\"nav_d\" onclick=\"changeRefArrow(true);\" onmouseover=\"overArrow(this.id);\" onmouseout=\"outArrow(this.id);\"></div>";
    content += "</div>";
    content += "<div style=\"clear:both;\"></div>";
  content += "</div>";
  content += "<div class=\"bloc_bot\"></div>";
  
  document.getElementById("popup").innerHTML = content;
  if (pObj.photos.length > 1) centerPhotos(pObj.photos.length);
}

function constructBlocPhotos(pObj, pNomRef) {
  var contentPhoto = "";
  if (pObj.photos.length > 1) {
    contentPhoto += "<div id=\"bloc_photos_p\">";
    for (var i = 1; i < pObj.photos.length; i++) {
      contentPhoto += "<div class=\"photo_off\" onclick=\"changePhoto("+i+");\"><img id=\"photo_p_"+i+"\" name=\""+pObj.photos[i]+"\" src=\""+dirImage+pObj.photos[i]+"_p.jpg\" alt=\""+pObj.photoDesc[i]+"\" title=\""+pObj.photoDesc[i]+"\"></div>";
    }
    contentPhoto += "</div>";
    contentPhoto += "<div style=\"clear: both;\"></div>";
    return contentPhoto;
  } else return "";
}

function centerPhotos(pNbPhotos) {
  size = (largeurPhotosP + marginRightPhoto) * (pNbPhotos - 1);
  if (size < document.getElementById("bloc_photo").offsetWidth)
    document.getElementById("bloc_photos_p").style.paddingLeft = (document.getElementById("bloc_photo").offsetWidth - size) / 2 + "px";
}

function changePhoto(pId) {
  document.getElementById("photo_p_"+pId).src = dirImage + document.getElementById("photo_g").name +"_p.jpg";
  document.getElementById("photo_g").src = dirImage + document.getElementById("photo_p_"+pId).name +"_g.jpg";
  
  var temp = document.getElementById("photo_p_"+pId).alt;
  document.getElementById("photo_p_"+pId).alt = document.getElementById("photo_g").alt;
  document.getElementById("photo_g").alt = temp;
  temp = document.getElementById("photo_p_"+pId).title;
  document.getElementById("photo_p_"+pId).title = document.getElementById("photo_g").title;
  document.getElementById("photo_g").title = temp;
  
  temp = document.getElementById("photo_p_"+pId).name;
  document.getElementById("photo_p_"+pId).name = document.getElementById("photo_g").name;
  document.getElementById("photo_g").name = temp;
  
  document.getElementById("desc_photos").innerHTML = document.getElementById("photo_g").title;
}

function reload() {
  constructBloc(tabCat[indiceCat].tabRef[indiceRef]);
}

// createLists
function createListCategory() {
  var content = "";
  for (var i = 0; i < tabCat.length; i++) {
    content += "<li><a href=\"javascript:changeCat("+i+");\">"+tabCat[i].nom.toLowerCase()+"</a> <span class=\"txt_vert\">("+tabCat[i].tabRef.length+" r&eacute;f&eacute;rences)</span></li>"; 
  }
  document.getElementById("categories").innerHTML = content;
}
function createListReferences(pListeName) {
  var content = "";
  for (var i = 0; i < tabCat.length; i++) {
    for (var j = 0; j < tabCat[i].tabRef.length; j++) {
      if (tabCat[i].tabRef[j].liste == pListeName) {
        content += "<li><a href=\"javascript:changeRef("+i+", "+j+");\">"+tabCat[i].tabRef[j].nom.toLowerCase()+"</a></li>";
      }
    } 
  }
  document.getElementById(pListeName).innerHTML = content;
}
function createListReferencesByCat(pListeId, pObjetCat) {
  var content = "";
  var i = idCategory(pObjetCat);
  for (var j = 0; j < pObjetCat.tabRef.length; j++) {
    content += "<li><a href=\"javascript:changeRef("+i+", "+j+");\">"+pObjetCat.tabRef[j].nom.toLowerCase()+"</a></li>";
  } 
  document.getElementById(pListeId).innerHTML = content;
}
function createListCategoryByCat(pListeId, pTabCat) {
  var content = "";
  var idCat = 0;
  for (var i = 0; i < pTabCat.length; i++) {
    idCat = idCategory(pTabCat[i]);
    content += "<li><a href=\"javascript:changeCat("+idCat+");\">"+pTabCat[i].nom.toLowerCase()+"</a> <span class=\"txt_vert\">("+pTabCat[i].tabRef.length+" r&eacute;f&eacute;rences)</span></li>"; 
  }
  document.getElementById(pListeId).innerHTML = content;
}
function idCategory(pObj) {
  for (var i = 0; i < tabCat.length; i++) {
    if (tabCat[i].nom == pObj.nom) break;
  }
  return i;
}

// nav
function changeRef(pIdCat, pIdRef) {
  indiceCat = pIdCat;
  indiceRef = pIdRef;
  
  reload();
  document.getElementById("title_category").innerHTML = tabCat[pIdCat].nom;
}
function changeRefArrow(pRight) {
  if (tabCat[indiceCat].tabRef.length > 1) {
    if (pRight) {
      if (indiceRef < (tabCat[indiceCat].tabRef.length - 1)) indiceRef++;
      else indiceRef = 0;
    } else {
      if (indiceRef > 0) indiceRef--;
      else indiceRef = (tabCat[indiceCat].tabRef.length - 1);
    }
    reload();
    document.getElementById("title_category").innerHTML = tabCat[indiceCat].nom;
  }
}

function changeCat(pId) {
  indiceCat = pId;
  indiceRef = 0;
  
  reload();
  document.getElementById("title_category").innerHTML = tabCat[pId].nom;
}
function changeCatArrow(pRight) {
  if (tabCat.length > 1) {
    if (pRight) {
      if (indiceCat < (tabCat.length - 1)) indiceCat++;
      else indiceCat = 0;
    } else {
      if (indiceCat > 0) indiceCat--;
      else indiceCat = (tabCat.length - 1);
    }
    indiceRef = 0;
    reload();
    document.getElementById("title_category").innerHTML = tabCat[indiceCat].nom;
  }
}

function overArrow(pId) {
  document.getElementById(pId).style.backgroundPosition = "bottom";
}
function outArrow(pId) {
  document.getElementById(pId).style.backgroundPosition = "top";
}

function closePopup() {
  showBlocImage();
}

// onLoad  
window.onload = function () {  
  //obj = tabCat[indiceCat].tabRef[indiceRef];
  //createListCategory();
  showBlocImage();
  //constructBloc(obj);
}