var currentPicture = -1;
var isAllLoaded = false;
var timerVerifLoading = null;

function createPictures () {
  document.getElementsByTagName("body")[0].style.overflowX="hidden";
  var picturesDiv = document.getElementById ("pictures");
  var divLoading;
  for (i = 0; i < pictures.length; i++) {
    divLoading = document.createElement ("div");
    divLoading.style.position = "absolute";
    divLoading.style.background =
      "#707B85 url(images/loading.gif) center no-repeat";
    divLoading.moveToParameter = i;

    img = document.createElement ("img");
    img.setAttribute ("src", pictures[i]);
    img.setAttribute ("alt", titles[i]);
    img.style.position = "absolute";
    img.style.display = "none";
    img.moveToParameter = i;

    if (divLoading.addEventListener) {
      divLoading.addEventListener ("click", moveTo, false);
      img.addEventListener ("click", moveTo, false);
    } else if (divLoading.attachEvent) {
      divLoading.attachEvent ("onclick", moveTo, false);
      img.attachEvent ("onclick", moveTo, false);
    }

    divLoading.appendChild (img);
    picturesDiv.appendChild (divLoading);
  }
  timerVerifLoading = setInterval ("verifyAllLoaded()", 500);
  moveTo (picturesDiv.childNodes.item(0));
}


function verifyAllLoaded () {

  if (isAllLoaded) {
    var picturesDiv = document.getElementById ("pictures");
    clearInterval(timerVerifLoading);
    return;
  }
  var picturesDiv = document.getElementById ("pictures");
  var childList = picturesDiv.childNodes;
  var nbLoaded = 0;
  var elem = null;
  var img = null;
  for (i = 0; i < childList.length; i++) {
    elem = childList.item(i);
    if ((elem.nodeName == "DIV") && elem.firstChild.complete) {
      elem.firstChild.style.left = elem.style.left;
      elem.firstChild.style.top = elem.style.top;
      elem.firstChild.style.width = elem.style.width;
      elem.firstChild.style.height = elem.style.height;
      elem.firstChild.style.visibility = elem.style.visibility;
      setPropertiesToElement (elem.firstChild, elem.newLeft, elem.newTop,
                              elem.newWidth, elem.newHeight, elem.style.zIndex);

      
      elem.firstChild.style.display = "block";
      picturesDiv.replaceChild(elem.firstChild, elem);
      nbLoaded++;
    }
  }
  if (nbLoaded == childList.length)
    isAllLoaded = true;
}


function moveTo (where) {
  var index = where;
  var userClicked = true;
  if (this.moveToParameter != undefined)
    index = this.moveToParameter;
  else if (where.moveToParameter != undefined) {
    index = where.moveToParameter;
    userClicked = false;
  } else if (window.event.srcElement != null)
    index = window.event.srcElement.moveToParameter;
  else {
    alert ("Changez de navigateur !");
    return;
  }

  /* Si l'on vient de cliquer sur la photo qui est déjà en premier plan,
   * on l'ouvre dans une nouvelle fenêtre.
   */
  if ((currentPicture == index) && userClicked) {
    window.open (pictures[index]);
    return;
  }

  var picturesDiv = document.getElementById ("pictures");
  var childList = picturesDiv.childNodes;

  var maximumSize = picturesDiv.offsetHeight - 80;
  var pageMiddle = picturesDiv.offsetWidth / 2;
  
  var currentElement, lastSizeW, lastSizeH, maxSize, distToIndex, bigWidth;
  var lastWidth = 0;
  var leftProperty = pageMiddle;
  var zindex = pictures.length;

  for (i = index; i < childList.length; i++) {
    currentElement = childList.item (i);
    distToIndex = i - index;
   
    maxSize = (distToIndex<3)? (maximumSize/(distToIndex+1)) : (maximumSize/4);
    lastSizeW = (sizes[i][0]>sizes[i][1])? maxSize : (sizes[i][0]*maxSize/sizes[i][1]);
    lastSizeH = (sizes[i][0]>sizes[i][1])? (sizes[i][1]*maxSize/sizes[i][0]) : maxSize; 
    
    if (i == index) bigWidth = lastSizeW;

    if (distToIndex < 3)
      leftProperty += lastWidth - (lastSizeW / 2);
    else
      leftProperty += lastWidth + 10;

    lastWidth = lastSizeW;
    setPropertiesToElement(currentElement, leftProperty,
                           (((picturesDiv.offsetHeight - lastSizeH) / 2) - 25),
                           lastSizeW, lastSizeH, zindex - distToIndex);
  }

  leftProperty = pageMiddle - (bigWidth / 2);

  for (i = index - 1; i >= 0; i--) {
    currentElement = childList.item (i);
    distToIndex = Math.abs(i - index);
   
    maxSize = (distToIndex<3)? (maximumSize/(distToIndex+1)) : (maximumSize/4);
    lastSizeW = (sizes[i][0]>sizes[i][1])? maxSize : (sizes[i][0]*maxSize/sizes[i][1]);
    lastSizeH = (sizes[i][0]>sizes[i][1])? (sizes[i][1]*maxSize/sizes[i][0]) : maxSize; 

    if (distToIndex < 3)
      leftProperty -= lastSizeW / 2;
    else
      leftProperty -= lastSizeW + 10;

    setPropertiesToElement(currentElement, leftProperty,
                           (((picturesDiv.offsetHeight - lastSizeH) / 2) - 25),
                           lastSizeW, lastSizeH, zindex - distToIndex);
  }
  refreshAll (userClicked);
  currentPicture = index;
  setComments ();
}

function setComments () {
  var infoTitle = document.getElementById ("infoTitle");
  var infoComment = document.getElementById ("infoComment");
  while (infoTitle.hasChildNodes())
    infoTitle.removeChild (infoTitle.firstChild);
  while (infoComment.hasChildNodes())
    infoComment.removeChild (infoComment.firstChild);
  infoTitle.appendChild (document.createTextNode(titles[currentPicture]));
  if (comments[currentPicture] != undefined)
    infoComment.appendChild (document.createTextNode(comments[currentPicture]));
}

function setPropertiesToElement (elem, left, top, width, height, zIndex) {
  var picturesDiv = document.getElementById ("pictures");
  var deltaL = picturesDiv.offsetLeft;
  var deltaT = picturesDiv.offsetTop;
  
  elem.style.zIndex = zIndex;
  elem.newLeft = deltaL+left;
  elem.newTop = deltaT+top;
  elem.newWidth = width;
  elem.newHeight = height;
}

function refreshAll (withAnim) {
  var picturesDiv = document.getElementById ("pictures");
  var childList = picturesDiv.childNodes;
  var elem = null;

  if (!withAnim) {
    for (i = 0; i < childList.length; i++) {
      elem = childList.item(i);
      
      if (elem.newLeft < picturesDiv.offsetLeft || elem.newLeft > (picturesDiv.offsetLeft+picturesDiv.offsetWidth)) {
	elem.style.visibility = "hidden";
      }
      else {
	elem.style.visibility = "visible";
      }
      
      elem.style.left = elem.newLeft + "px";
      elem.style.top = elem.newTop + "px";
      elem.style.width = elem.newWidth + "px";
      elem.style.height = elem.newHeight + "px";
      
    }
    return;
  }
  for (i = 0; i < childList.length; i++) {
    elem = childList.item(i);

    oldLeft = elem.offsetLeft;
    oldTop = elem.offsetTop;
    oldWidth = elem.offsetWidth;
    oldHeight = elem.offsetHeight;

    newLeft = oldLeft + ((elem.newLeft - oldLeft) / 3);
    newTop = oldTop + ((elem.newTop - oldTop) / 3);
    newWidth = oldWidth + ((elem.newWidth - oldWidth) / 3);
    newHeight = oldHeight + ((elem.newHeight - oldHeight) / 3);

    elem.style.left = newLeft + "px";
    elem.style.top = newTop + "px";
    elem.style.width = newWidth + "px";
    elem.style.height = newHeight + "px";
    if (parseInt(elem.style.left) < picturesDiv.offsetLeft || parseInt(elem.style.left)+ parseInt(elem.style.width) > (picturesDiv.offsetLeft+picturesDiv.offsetWidth))
      elem.style.visibility = "hidden";
    else
      elem.style.visibility = "visible";
    
  }

  if (Math.abs(newLeft - elem.newLeft) < 1) {
    clearTimeout();
    refreshAll(false);
  } else
    setTimeout ("refreshAll(true)", 50);
}

window.onresize = function () {
  var picturesDiv = document.getElementById ("pictures");
  moveTo (picturesDiv.childNodes.item(currentPicture));
}