function imageUI(elemName, w, h)
{
    this.m_state = 1;
    this.m_elemName = elemName; 
    this.m_elem = document.getElementById(elemName);
	this.m_nLoaded = 0;
    
    this.m_width = w;
    this.m_height = h;
    
    this.m_elem.style.width = w + "px"; 
    this.m_elem.style.height = h + "px"; 
    this.m_elem.style.overflow = "hidden"; 

	this.m_arrangement = 0; // not specified
    
    this.organise = function(type) 
    { 	
        this.m_children = this.m_elem.children.length;

		this.m_arrangement = type; 
		
		if (myImageUI.m_nLoaded >= myImageUI.m_children)
		{
			this.doArrange();
		}
    }
    
    this.doArrange = function()
    {
        switch (this.m_arrangement)
        {
        case 1:
		this.showGrid();       
        break;
        }
    }
    
    
	this.setOpacity = function(obj, value) 
	{
		obj.style.opacity = value/100;
		obj.style.filter = 'alpha(opacity=' + value + ')';
		
		if (value == 100)
		{
			if (obj.style.removeAttribute)
			{
				obj.style.removeAttribute('filter');
			}
		}
	}
	
	this.showGrid = function()
	{
        var cols = Math.ceil(Math.sqrt(this.m_children));
        var rows = this.m_children / cols;
        
        rows = (rows > (cols - 1)) ? cols : cols - 1;
        
        var wSpace = this.m_width / cols;
        
        var hSpace = this.m_height / rows;
             
        var nextKid = 0;            
        var spaceFac = 12;
        var maxH = 0;
               
		for (l = 0; l < this.m_children; l++)
		{
			var imgdiv = this.m_elem.children[l];
            imgdiv.style.visibility = 'hidden';
            imgdiv.style.display = '';
                    
			var imgElem = imgdiv.children[1];

			var scale = (wSpace - spaceFac) / imgElem.width;
			
			var newHeight = Math.floor(scale * imgElem.height);
			
			imgElem.style.width = (wSpace - spaceFac) + 'px';
			imgElem.style.height = newHeight + 'px';
						
			maxH = Math.max(newHeight, maxH);
		}
		
		for (j = 0; j < rows; j++)
		{            
			for (i = 0; i < cols; i++)
			{
				var imgdiv = this.m_elem.children[nextKid++];
				if (imgdiv != undefined)
				{
					imgdiv.style.position = 'absolute';
					//imgdiv.style.height = maxH + 'px';    
					imgdiv.style.top = (j * (maxH + spaceFac)) + 'px';    
					imgdiv.style.left = (i * wSpace) + 'px';    
	
					var imgElem = imgdiv.children[1];
					
					var hDiff = maxH - parseInt(imgElem.style.height); 
					var hTop = Math.round(hDiff / 2) + 5;
					var hBot = (hDiff - hTop) + 10;
					
					imgdiv.style.paddingTop = hTop + "px";
					imgdiv.style.paddingBottom = hBot + "px";
		            imgdiv.style.visibility = 'visible';
	            }
        	}
		}        
	} 
    
    this.addImage = function(imgName, tip) 
    {
        var newDiv = document.createElement('a');
        
        newDiv.href = imgName + ".asp";
                
		newDiv.onmouseover = function()
		{
			 this.children[0].style.visibility = 'visible';
			 myImageUI.setOpacity(this.children[1], 15);
		}
		
		newDiv.onmouseout = function()
		{	
			this.children[0].style.visibility = 'hidden';
			myImageUI.setOpacity(this.children[1], 100);
		}	     
                
        var newText = document.createElement('p');
        newText.className = "imgText";
       	newText.innerHTML = "<b>" + imgName + " </b></br>" + tip;
        newText.style.visibility = 'hidden';
        newDiv.appendChild(newText)
       
        var newImg = document.createElement('img');
        newImg.id = "image" + this.m_elem.children.length;
        newDiv.className = 'imageDiv';
        
    	newImg.onload = function()
		{	
			if (this.id)
			{
				myImageUI.m_nLoaded++;
				
				if (myImageUI.m_nLoaded >= myImageUI.m_children)
				{
					myImageUI.doArrange();
				}
			}
		}  
        
        newDiv.style.display = "none";
        newImg.src = "Images/UI" + imgName + '.png';
        
        newDiv.appendChild(newImg)
        this.m_elem.appendChild(newDiv)
    } 
}