function coveronload() {
 hani_totalcats=0; //total number of categories - counted below.
 hani_catincrease=5; // the amount of pixels we want to increase the focuscat by.
 hani_catheight=22; // starting height of cats.
 hani_targetheight=parseInt(hani_catheight+hani_catincrease);
 hani_biggestheightid=0; // the unfocussed cat with the biggest height to take pixels from.
 hani_framebuffer=0;
 
 	// for loop counts the total cats by checking for the existence of the ids ccc + number.

 for (i=1;i<=100;i++){
		if (document.getElementById && (element = document.getElementById('ccc'+i)))
			{
				hani_totalcats=hani_totalcats+1;
			}
		else break;}
		
		hani_catheights=new Array(hani_totalcats);
		 for (i=1;i<=hani_totalcats;i++){
  				hani_catheights[i]=new Array(2);
				hani_catheights[i][0]=i;
				hani_catheights[i][1]=hani_catheight;		
			}
 }
 
 function mouseovercat(callingelement) {
 
	if (typeof(hani_catheights) == "undefined") {
		coveronload();
	}
	
	focuscatid=callingelement.replace(/ccc/, ""); //focuscatid is the numeric id of the category div which will be increased in size when mouse overed.
	
	var _st = window.setTimeout; 
	
	window.setTimeout = function(fRef, mDelay) {  
			if(typeof fRef == "function") {   
				var argu = Array.prototype.slice.call(arguments,2);
				var f = (function(){ fRef.apply(null, argu); });  
				return _st(f, mDelay);  
				}  
				return _st(fRef,mDelay); 

				}
				
    Object.prototype.clone = function () 
		{var o = new Object();
			for (var property in this) {
			o[property] = typeof (this[property]) == 'object' ? this[property].clone() : this[property]} return o}

	Array.prototype.clone = function ()
		{var a = new Array(); 
			for (var property in this) {
			a[property] = typeof (this[property]) == 'object' ? this[property].clone() : this[property]} return a}
    

	var currentframepause;
	var framepause=2;

	if (hani_catheights[focuscatid][1]<hani_targetheight){
	for (a=1;a<=hani_catincrease;a++){
	currentframepause=(framepause*a);
	hani_catheights[focuscatid][1]++;
	
	
		var catsorted=hani_catheights.clone();
		catsorted.sort(sortMultiDimensional);
		catsorted.reverse();

	    hani_biggestheightid=catsorted[1][0];
		if (hani_biggestheightid==focuscatid) {hani_biggestheightid=catsorted[2][0]};
		hani_catheights[hani_biggestheightid][1]--;
		shownewfocusheight=hani_catheights[focuscatid][1];
		shownewheight=hani_catheights[hani_biggestheightid][1];
		hani_framebuffer=hani_framebuffer+currentframepause+20;
		
		setTimeout(showframe,currentframepause+hani_framebuffer,currentframepause,focuscatid,hani_biggestheightid,shownewfocusheight,shownewheight);
			}
		}

  }
 
     function showframe(passedframepause,focuscatid,catpointer,focusheight,newheight)  {
	 	
		var focuscolour;
		var newcolour;	

		if (newheight<=22) newcolour="#5A8EC5";
		if (newheight==23) newcolour="#6C9ACB";
		if (newheight==24) newcolour="#7FA7D2";
		if (newheight==25) newcolour="#92B4D9";
		if (newheight>25) newcolour="#A4C1DF";
		
		if (focusheight<=22) focuscolour="#5A8EC5";
		if (focusheight==23) focuscolour="#6C9ACB";
		if (focusheight==24) focuscolour="#7FA7D2";
		if (focusheight==25) focuscolour="#92B4D9";
		if (focusheight>25) focuscolour="#A4C1DF";
		
		document.getElementById("ccc"+focuscatid).style.height=focusheight+"px";
		document.getElementById("ccc"+catpointer).style.height=newheight+"px";		
		document.getElementById("ccc"+focuscatid).style.background=focuscolour;
		document.getElementById("ccc"+catpointer).style.background=newcolour;
				
		hani_framebuffer=hani_framebuffer-passedframepause-20;
	}


	function mousecatout(){
				
				for(i=1;i<=hani_totalcats;i++)
				{
				document.getElementById("ccc"+i).style.background="#5A8EC5";
				}
			}
		
  function sortMultiDimensional(a,b){
		// this sorts the array using the second element
		return ((a[1] < b[1]) ? -1 : ((a[1] > b[1]) ? 1 : 0));
		}