// Initialise les variables
var maximumWidth  = 0;
var scale  = 0;
var closeTimeout  = null;
var closeInterval = null;
var openInterval  = null;
var minimumSize = 80;
var maximumSize = 120;
var range = 2;
//var imageDetails = Categories();
var iconSizes = [minimumSize, minimumSize, minimumSize, minimumSize];

function updateIconProperties(k){

	var size = minimumSize + scale * (iconSizes[k] - minimumSize);
	
	document.images[k].style.width = size + 'px';
	document.images[k].style.height = size + 'px';
	document.images[k].style.marginTop = (maximumSize - size)/2 + 'px';
	document.images[k].style.marginBottom = (maximumSize - size)/2 + 'px';
}

  /* Processes a mousemove event on an image in the 'dock'. The parameter is:
   *
   * e - the event object. window.event will be used if this is undefined.
   */
  function processMouseMove(e){
   
    // clear the closing interval and time-out
    window.clearTimeout(closeTimeout);
    closeTimeout = null;
    window.clearInterval(closeInterval);
    closeInterval = null;
    
    // check that the opening interval is required but does not yet exist
    if (scale != 1 && !openInterval){
    
      // create the opening interval
      openInterval = window.setInterval(
          function(){
            if (scale < 1) scale += 0.125;
            if (scale >= 1){
              scale = 1;
              window.clearInterval(openInterval);
              openInterval = null;
            }
            for (var i = 1; i < 6; i++){
              updateIconProperties(i);
            }
          },
          20);
          
    }
    
    // set the event object if the browser does not supply it
    if (!e) e = window.event;
    
    // find the DOM node on which the mouseover event occured
    var target = e.target || e.srcElement;
    
    // obtain the index of the icon on which the mouseover event occured
    var index = 1;
    while (document.images[index] != target) index++;

    
      // initialise the current width to 0
      var currentWidth = 0;
    
      // loop over the icons
      for (var i = 1; i < 6; i++){
      
        // check whether the icon is in the range to be resized
        if (i < index - 2 || i > index + 2){
        
          // set the icon size to the minimum size
          iconSizes[i] = minimumSize;
          
        }else if (i == index){
        
          // set the icon size to be the maximum size
          iconSizes[i] = maximumSize;
        
        }else if (i < index){
        
		// obtain the fraction across the icon that the mouseover event occurred
    var across = (e.layerX || e.offsetX) / iconSizes[index]; // de 0 à 1 (selon que le curseur soit tout à gauche ou tout à droite de l'image)
    
    // check a distance across the icon was found (in some cases it will not be)
    if (across){
          // set the icon size to the appropriate value
          iconSizes[i] =
              minimumSize
              + Math.round(
                  (maximumSize - minimumSize - 1)
                  * (
                      Math.cos(
                          (i - index - across + 1) / 2 * Math.PI)
                      + 1)
                  / 2);
          
          // add the icon size to the current width
          currentWidth += iconSizes[i];
        }
        }else{
        // obtain the fraction across the icon that the mouseover event occurred
    var across = (e.layerX || e.offsetX) / iconSizes[index];
    
    // check a distance across the icon was found (in some cases it will not be)
    if (across){
          // set the icon size to the appropriate value
          iconSizes[i] =
              minimumSize
              + Math.round(
                  (maximumSize - minimumSize - 1)
                  * (
                      Math.cos(
                          (i - index - across) / 2 * Math.PI)
                      + 1)
                  / 2);
          
          // add the icon size to the current width
          currentWidth += iconSizes[i];
        }
        }
        
       
      }
      
      // update the maximum width if necessary
      //if (currentWidth > maximumWidth) maximumWidth = currentWidth;
      
      // detect if the total size should be corrected
      if (index >= range
          && index < iconSizes.length - range
          && currentWidth < maximumWidth){

        // correct the size of the smallest magnified icons
        iconSizes[index - range] += Math.floor((maximumWidth - currentWidth) / 2);
        iconSizes[index + range] += Math.ceil((maximumWidth - currentWidth) / 2);
      
      }
      
      // update the sizes of the images
      for (var i = 1; i < 6; i++) updateIconProperties(i);
      
}

  // Crée un mouseout event
  function processMouseOut(){
  
    if (!closeTimeout && !closeInterval){
    
      closeTimeout = window.setTimeout(
          function(){
            closeTimeout = null;
            if (openInterval){
              window.clearInterval(openInterval);
              openInterval = null;
            }
            closeInterval = window.setInterval(
                function(){
                  if (scale > 0) scale -= 0.125;
                  if (scale <= 0){
                    scale = 0;
                    window.clearInterval(closeInterval);
                    closeInterval = null;
                  }
                  for (var i = 1; i < 6; i++){
                    updateIconProperties(i);
                  }
                },
                20);
          },
          100);
          
    }
    
  }