//  initialise variables
            images = new Array(118);
            largeImages = new Array(118);
            clear = new Image();
            clear.src = 'images/silhouettes/clear.gif';
            ready = false;
            
            items = 117;
            itemsPerRow = 9;
            rowCount = Math.ceil(items/itemsPerRow);
            
            marginRight = 3;
            marginBottom = 3;
            
            thumbWidth = 47;
            thumbHeight = 56;
            fullThumbWidth = thumbWidth + marginRight;
            fullThumbHeight = thumbHeight + marginBottom;
            
            largeWidth = 147;
            largeHeight = 220;
            fullLargeWidth = largeWidth + marginRight;
            fullLargeHeight = largeHeight + marginBottom;
            
            captionHeight = 23;
            
            lastOver = 0;
            
        //  cycle through all the icons (by row), setting their position
        //  and storing the path to their image
        
            function init()
            {
            	   if(!document.getElementById('icon1')) return false;
            	   
                for (count=0; count<(items/itemsPerRow); count++)
                {
                    for (innerCount=1; innerCount<=itemsPerRow; innerCount++)
                    {
                        index = (count*itemsPerRow)+innerCount;
                        if(index <= items)
                        {
                        //  get the icon
                            icon = document.getElementById('icon' + index);
                            
                        //  set the position attributes to allow javascript control
                        //  of these later on
                            icon.style.left = ( innerCount - 1 ) * fullThumbWidth + 'px';
                            icon.style.top = count*fullThumbHeight + 'px';
                            
                            if(document.getElementById('icon'+index+'s'))
                            {
                            //  store the path of the image
                                images[index] = document.getElementById('icon'+index+'s').src;
                            //  blank the image's title
                                document.getElementById('icon'+index+'s').title='';
                                
                            //  preload the large images
                                largeImages[index] = new Image();
                                largeImages[index].src = images[index];
                                largeImages[index].src = largeImages[index].src.replace('_th', '');
                            }
                        }
                    }
                }
            //  indicate that rollovers can begin
                ready = true;
            }
          
          
        //  mouse over icon function - display the larger icon image with caption
            function over(item)
            {  
            //  don't allow this function to complete unless initialisation has finished
                if (ready==false) return false;
                
            //  if the mouse out function didn't complete for the last icon rolled over, run it now
                if(lastOver > 0)
                {
                    out(document.getElementById('icon'+lastOver+'s'));
                }
                lastOver = item.id;    
            
            //  get containing div of icon image
                var parent;
                parent = item.parentNode.parentNode;
                
            //  get index of current icon
                index = parent.id
                index = index.replace('icon', '')
                
            //  get the row number of current icon
                rowIndex = Math.ceil(index/itemsPerRow);
            
            //  set the appropriate styles on the containing div
                parentCss = parent.style;
                parentCss.background = 'url(' + largeImages[index].src + ') no-repeat 0% 0%';
                parentCss.height = largeHeight+'px';
                parentCss.width = largeWidth+'px';  
                parentCss.overflow='hidden';
                
            //  calculate how much to shift the large image pop-up by
            
                if (rowIndex==1)
                {
                //  top row doesn't need any shift
                    offsetTop = 0;
                }
                else
                {
	                if (rowIndex==rowCount) offsetMultiple = 3;
	                else offsetMultiple = 2;
	            
	                offsetTop = (rowIndex-offsetMultiple)*(thumbHeight+marginBottom);
	                
	            //  bottom two rows need to be shifted a little less to account for
	            //  the caption at the bottom
	                if(rowIndex >= rowCount-1) offsetTop = offsetTop-captionHeight;
                }
                
                parentCss.top = offsetTop + 'px';
                parentCss.zIndex=1000;
           
                //  item is last in a row
                if (index % itemsPerRow == 0)
                {
                    parentCss.left = ( fullThumbWidth * itemsPerRow ) - fullLargeWidth + 'px';
                }
                //  item is first in a row
                else if ((index-1) % itemsPerRow == 0)
                {
                    parentCss.left = '0px';
                }
                else
                {
                    parentCss.left = (( index % itemsPerRow) - 2 ) * fullThumbWidth + 'px';
                }
                

                
            //  set the appropriate styles on the thumbnail
                item.src = 'images/silhouettes/clear.gif';
                item.style.marginTop = (Math.floor( (index-1) / itemsPerRow ) * fullThumbHeight) - offsetTop + 'px';
                
            //  make the caption visible   
                document.getElementById('icon'+index+'cap').style.display = 'inline';
                
            }
            
            
        //  mouse out icon function - revert to the thumbnail view
            function out(item)
            {   
            //  don't allow this function to complete unless initialisation has finished
                if (ready==false) return false;
            
            //  get containing div of icon image
                var parent;
                parent = item.parentNode.parentNode;
            
            //  get index of current icon
                index = parent.id
                index = index.replace('icon', '')
                
            //  hide the caption   
                document.getElementById('icon'+index+'cap').style.display = 'none';
                
            //  set the appropriate styles on the thumbnail
                item.src = images[index];
                item.style.marginTop = '0px';
                
            //  set the appropriate styles on the containing div
                parentCss = parent.style;
                parentCss.background = '';
                parentCss.zIndex=0;
                parentCss.height = thumbHeight+'px';
                parentCss.width = thumbWidth+'px';
                parentCss.borderWidth='0'; 
                parentCss.top = Math.floor( (index-1) / itemsPerRow ) * fullThumbHeight + 'px';
                
                //  item is last in a row
                if (index % itemsPerRow == 0)
                {
                    parentCss.left = fullThumbWidth * (itemsPerRow-1) + 'px';
                }
                //  item is first in a row
                else if ((index-1) % itemsPerRow == 0)
                {
                    parentCss.left = '0px';
                }
                else
                {
                    parentCss.left = ( ( index % itemsPerRow) - 1 ) * fullThumbWidth + 'px';
                }
                
            //  indicate that mouse out for this item has completed
                lastOver = 0;
            }