function MacStyleDock(node, imageDetails, minimumSize, maximumSize, range){

  // initialise the maximum width to 0
  var maximumWidth  = 0;

  // initialise the scale factor to 0
  var scale  = 0;
  
  // initialise the time-outs and intervals to 0
  var closeTimeout  = null;
  var closeInterval = null;
  var openInterval  = null;
  
  // cria array para as td's
  var tds = [];
  // cria array das imagens
  var images = [];
  
  // cria array para os DOM nodes dasimagens
  var iconNodes = [];
  
  // create an array to store the sizes of the icons
  var iconSizes = [];
  // defina largura da imagem para poder dar  a area do mouseover para cad uma
  var larg = [];
  
  // loop over the images
  for (var i = 0; i < imageDetails.length; i++){
 	tds[i] = document.createElement('td');
	node.appendChild(tds[i]);
	tds[i].style.textAlign = 'center';
	tds[i].style.height = '152px';
	tds[i].style.margin = 0;
	tds[i].style.padding = 0;
    iconNodes[i] = document.createElement('img');
	tds[i].appendChild(iconNodes[i]);
	iconNodes[i].setAttribute('src', imageDetails[i].name);
	iconNodes[i].style.paddingRight = '8px';
	iconNodes[i].style.cursor = 'pointer';
    
   if (navigator.appName!="Microsoft Internet Explorer"){
    iconNodes[i].style.position = 'relative';
   }
    
    iconSizes[i] = minimumSize;
    
    // update the properties of the icon for this image
    updateIconProperties(i);
   
    if (iconNodes[i].addEventListener){
      iconNodes[i].addEventListener('mousemove', processMouseMove, false); 
      iconNodes[i].addEventListener('mouseout', processMouseOut, false);
      iconNodes[i].addEventListener('click', imageDetails[i].onclick, false);
    }else if (iconNodes[i].attachEvent){
      iconNodes[i].attachEvent('onmousemove', processMouseMove);
      iconNodes[i].attachEvent('onmouseout', processMouseOut);
      iconNodes[i].attachEvent('onclick', imageDetails[i].onclick);
    }
    
  }


  function updateIconProperties(index){
  
    // determine the size for the icon, taking into account the scale factor
    var size = minimumSize + scale * (iconSizes[index] - minimumSize);
    
    // set the width and height of the image for the iconß
	iconNodes[index].setAttribute('width',  parseInt(size*imageDetails[index].largura/100));
    iconNodes[index].setAttribute('height', parseInt(size*imageDetails[index].altura/100));
	larg[index]=(imageDetails[index].largura * (minimumSize/50));
    
  }

  /* 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 = 0; i < iconNodes.length; 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 = 0;
    while (iconNodes[index] != target) index++;
    
    // obtain the fraction across the icon that the mouseover event occurred
    //var across = (e.layerX || e.offsetX) / iconSizes[index];
	var across = (e.layerX || e.offsetX) / larg[index];
    
    // check a distance across the icon was found (in some cases it will not be)
    if (across){
    
      // initialise the current width to 0
      var currentWidth = 0;
    
      // loop over the icons
      for (var i = 0; i < iconNodes.length; i++){
      
        // check whether the icon is in the range to be resized
        if (i < index - range || i > index + range){
        
          // 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){
        
          // set the icon size to the appropriate value
          iconSizes[i] =
              minimumSize
              + Math.round(
                  (maximumSize - minimumSize - 1)
                  * (
                      Math.cos(
                          (i - index - across + 1) / range * Math.PI)
                      + 1)
                  / 2);
          
          // add the icon size to the current width
          currentWidth += iconSizes[i];
        
        }else{
        
          // set the icon size to the appropriate value
          iconSizes[i] =
              minimumSize
              + Math.round(
                  (maximumSize - minimumSize - 1)
                  * (
                      Math.cos(
                          (i - index - across) / range * 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 = 0; i < iconNodes.length; i++) updateIconProperties(i);
      
    }

    
  }

  // Processes a mouseout event on an image in the dock.
  function processMouseOut(){
  
    // check that neither the closing interval nor time-out are set
    if (!closeTimeout && !closeInterval){
    
      // create the closing time-out
      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 = 0; i < iconNodes.length; i++){
                    updateIconProperties(i);
                  }
                },
                20);
          },
          100);
          
    }
    
  }

}