///////////////////////////
// FishEye Mac-Like Dock //
///////////////////////////

function ge(id) {
	return document.getElementById(id);
}

function DockMe(imageDetails, minimumSize, maximumSize){

	//create the dock in the "bottom" div

	var bottom = ge('bottom');
	var container = document.createElement('div');
	container.id="dockContainer";
	var div1 = document.createElement('div');
	div1.id="maindock";
	var div2 = document.createElement('div');
	var dock = document.createElement('div');
	var iconDiv = document.createElement('div');
  	dock.id="dock";
	dock.appendChild(iconDiv);
	div2.appendChild(dock);
	div1.appendChild(div2);
	container.appendChild(div1);
	dock.style.display="none";
	bottom.appendChild(container);
	
	// create icon div
	
	iconDiv.style.textAlign = 'center';
  	iconDiv.style.height  = maximumSize + 'px';
	var maximumWidth  = 0;
	var scale  = 0;
  	var closeTimeout  = null;
  	var closeInterval = null;
  	var openInterval  = null;
  	var icons = [];
  	var captions = [];
  	var iconSizes = [];
  	var range=2;
  	
  	//for every image, create an image node and attach attributes
  
  	for (var i = 0; i < imageDetails.length; i++){
  		icons[i] = document.createElement('img');
  		icons[i].setAttribute("src",imageDetails[i].name+'.png');
  		icons[i].setAttribute("id","dock_image_"+imageDetails[i].id);
    	icons[i].style.position = 'relative';
    	icons[i].setAttribute("title",imageDetails[i].caption);
    	iconSizes[i] = minimumSize;
    	updateIconProperties(i);
    	iconDiv.appendChild(icons[i]);
    	
    	if (icons[i].addEventListener){
      		icons[i].addEventListener('mousemove', processMouseMove, false); 
      		icons[i].addEventListener('mouseout', processMouseOut, false);
      		icons[i].addEventListener('click', imageDetails[i].onclick, false);
    	}
    	else if (icons[i].attachEvent){
      		icons[i].attachEvent('onmousemove', processMouseMove);
      		icons[i].attachEvent('onmouseout', processMouseOut);
      		icons[i].attachEvent('onclick', imageDetails[i].onclick);
    	}
  }

function updateIconProperties(index){
  var size = minimumSize + scale * (iconSizes[index] - minimumSize);   
  icons[index].setAttribute('width',  size);
  icons[index].setAttribute('height', size);
  icons[index].style.cursor="pointer";
  icons[index].style.marginTop=(maximumSize-size-10)+"px";
}

function processMouseMove(e){
	window.clearTimeout(closeTimeout);
	closeTimeout = null;
    window.clearInterval(closeInterval);
    closeInterval = null;
    
    if (scale != 1 && !openInterval){
    	openInterval = window.setInterval(
          function(){
            if (scale < 1) scale += 0.25;
            if (scale >= 1){
              scale = 1;
              window.clearInterval(openInterval);
              openInterval = null;
            }
            for (var i = 0; i < icons.length; i++) updateIconProperties(i);
          },
          1);
          
    }
    
    if (!e) e = window.event;
    var target = e.target || e.srcElement;
    var index = 0;
    while (icons[index] != target) index++;
    	var across = (e.layerX || e.offsetX) / iconSizes[index];
    	if (across){
    	var currentWidth = 0;
    	for (var i = 0; i < icons.length; i++){
    		if (i < index - range || i > index + range) iconSizes[i] = minimumSize;
    		else if (i == index) iconSizes[i] = maximumSize;
        	else {
        		iconSizes[i] = fishEye(index,across,i);
         		currentWidth += iconSizes[i];
         	}
      }
      
      if (currentWidth > maximumWidth) currentWidth = maximumWidth;
      if (index >= range && index < iconSizes.length - range && currentWidth < maximumWidth){
      	iconSizes[index - range] += Math.floor((maximumWidth - currentWidth) / 2);
        iconSizes[index + range] += Math.ceil((maximumWidth - currentWidth) / 2);
      }
      for (var i = 0; i < icons.length; i++) updateIconProperties(i);
    }
  }
  
  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.25;
                  else {
                    scale = 0;
                    window.clearInterval(closeInterval);
                    closeInterval = null;
                  }
                  for (var i = 0; i < icons.length; i++) updateIconProperties(i);
                },
                1);
          },
          10);
          
    }
    
  }
  
  function fishEye(index,across,i) {
  	if(i<index) var cos = i-index-across+1;
  	else if(i>index) var cos = i-index-across;
  	 var val = minimumSize + Math.round((maximumSize - minimumSize - 1)*(Math.cos((cos) / range * Math.PI)+ 1) / 2);
  	 return val;
  }

}