function clientSelector(json_clientCategories, json_clientList) {
	
	var myself = this;
	var colorChanger = new colorTrans();
	//get the array from php using the json arrays
	clientList = json_clientList;
	clientCategories = json_clientCategories;
	var currentArea = 0;
	var previousArea = 0;
	var testno = 0;
	var fade;
	var fadeLoop = 0;
	addMouseOver(this.clientCategories);
	
	//the settable varibles to control the fade
	var endHex = "#E21377";
	var startHex = "#C1BDB6";
	var intervalSpeed = 7;
	var fadeLoops = 4;
	
	
	//add the mouse over method to the buttons
	function addMouseOver() {
		for(i = 0; i < clientCategories.length; i++) {
			var element = document.getElementById('i'+[i]+'-menu');
			element.onclick = highLight;
		}
	}
	
	//method to trigger the highlight of the elements
	function highLight() {
		/*var splitArea = this.id.split("i");
		var thisArea =  splitArea[1];
		*/
		var thisArea = this.id 
		deselectMenu(this.parentNode.parentNode);
		this.parentNode.className = "current";
		previousArea = currentArea;
		currentArea = thisArea.substring(1,(thisArea.length - 5));
		fadeLoop = 0;
		fade = setInterval(fadeArea, intervalSpeed);
		return false;
	}

	//method to deselect other menu items
	
	function deselectMenu(menu) {
		for(i=0; i<menu.childNodes.length; i++) {
			menu.childNodes[i].className = "";
		}
	}
	
	function fadeArea() {
		//if we are still fading
		if (fadeLoop < (fadeLoops+1)) {
		//go through clients and and see if they are in the area 
		for (var i in clientList)
			{
				var thisClient = document.getElementById('i'+i);
  				var areas = clientList[i].area;
				var inArea = false;
				var inOldArea = false;
				var startColor;
				var endColor;
				if  (currentArea != 0) {
					for (var j = 0; j<areas.length; j++) {
						if(currentArea == areas[j]) {
							var inArea = true;
						}
						if(previousArea == areas[j]) {
							var inOldArea = true;
						}
					}
				} else {
					inArea = true;
					inOldArea = false;
				}
				//get the end color
				if (inArea == true) {
					endColor = endHex;
				} else {
					endColor = startHex;
				}
				//get the start color
				if (inOldArea == true) {
					startColor = endHex;
				} else {
					startColor = startHex;
				}
				thisClient.style.color = colorChanger.newBg(startColor, endColor, fadeLoops, fadeLoop);
			}
		
			fadeLoop = fadeLoop+1;
		} else {
			
			clearInterval(fade);
		}
	}
	
	
	//end of class
}

/*------------bg color changer -------------------------*/

function colorTrans() {

		hexa = new Array(16);
	 	for(var i = 0; i < 10; i++) hexa[i] = i;
	 	hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
	 	hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
	

 		this.newBg = function(startColorHex, endColorHex, fadeLoops, fadeLoop) {
			//first get the start and end colors
			var startColor = getRGB(startColorHex);
			var endColor = getRGB(endColorHex);
			var finalRGB = getfinalRGB(startColor[0],
			 									startColor[1],
												startColor[2],
												endColor[0],
												endColor[1],
												endColor[2],
												fadeLoops,
												fadeLoop);
			var finalHex = getfinalHex(finalRGB[0], finalRGB[1], finalRGB[2]);
			return finalHex;
		}
		
		function makearray(n){
      		this.length = n;
      		for(var i = 1; i <= n; i++)
      		this[i] = 0;
      		return this;
    		}

		function hex(i){
  			if (i < 0) return "00";
  			else if (i >255) return "ff";
  			else return "" + hexa[Math.floor(i/16)] + hexa[i%16];
 		}
 
		function getRGB(hex) {
			var red = hex.substring(1,3)
			var green = hex.substring(3,5);
			var blue = hex.substring(5,7);
			red = parseInt(red,16);
			green = parseInt(green,16);
			blue = parseInt(blue,16)
			return [red, green, blue];
		}
		
		function getfinalHex(r, g, b){
      	var hr = hex(r); var hg = hex(g); var hb = hex(b);
      	var finalHex = "#"+hr+hg+hb;
			return finalHex;
    	}

   	function getfinalRGB(sr, sg, sb, er, eg, eb, fadeLoops, fadeLoop)
		{
			//get current background hex color
        	var red = Math.floor(sr * ((fadeLoops-fadeLoop)/fadeLoops) + er * (fadeLoop/fadeLoops));
        	var green = Math.floor(sg * ((fadeLoops-fadeLoop)/fadeLoops) + eg * (fadeLoop/fadeLoops));
        	var blue = Math.floor(sb * ((fadeLoops-fadeLoop)/fadeLoops) + eb * (fadeLoop/fadeLoops));
			return [red, green, blue];
    }
}