var clients = new Array()
	var examples = new Array()
	var nav_array = new Array()
	var active_typ
	
	nav_array[0] = "web"
	nav_array[1] = "print"
	nav_array[2] = "3D"
	nav_array[3] = "identity"
	nav_array[4] = "animation"
	nav_array[5] = "consulting"

function toggle_type(id){
	
	active_typ = id
	
	for(i=0;i<nav_array.length;i++){
	
		obj = document.getElementById("nav_"+ nav_array[i])
	
		if(id=="all"){
			obj.src = "images/nav_type_active.gif"
		}else{
			if(id==nav_array[i]){
			obj.src = "images/nav_type_active.gif"
			}else{
			obj.src = "images/nav_type_inactive.gif"
			}
		}
	}
	//HIDE ALL DETAILS INFO - TYPE WAS CHANGED
	initialize_details(id)

}

function initialize_details(id){
	
	obj_details = document.getElementById("client_details")
	
	if(obj_details){
		obj_details.style.display = "none"		
	}
	
	//HIDE/SHOW THE APPROPRIATE CLIENTS BASE ON ACTIVE TYPE
	toggle_clients(id)
}
function toggle_clients(id){
	
	for(c=0;c<clients.length;c++){
		
		if(clients[c]){
			c_id = clients[c][0]
			typ_str = clients[c][6]
		
			obj = document.getElementById("client_"+ c)
			sel_obj = document.getElementById("client_selector_"+ c)
			
			if(obj&&sel_obj&&typ_str.length>0){
				
				if(typ_str.indexOf(id)>0||id=="all"){
					obj.style.display = "block"
					sel_obj.src = "images/spacer.gif"
				}else{
					obj.style.display = "none"
					sel_obj.src = "images/spacer.gif"
				}
			}else if(obj){
				obj.style.display = "none"
				sel_obj.src = "images/spacer.gif"
			}
		}
	}
}
function toggle_details(client_id, id){
	
	obj_title = document.getElementById("client_title")
	obj_description = document.getElementById("client_description")
	obj_date = document.getElementById("client_date")
	
	obj_selector = document.getElementById("client_selector_"+id)
	obj_details = document.getElementById("client_details")
	
	for(c=0;c<clients.length;c++){
		sel_obj = document.getElementById("client_selector_"+ c)
		if(sel_obj){
			sel_obj.src = "images/spacer.gif"
		}
	}
	
	if(obj_details&&obj_title&&obj_date&&obj_description&&obj_selector){

		//SET THE TITLE
		obj_title.innerHTML = clients[id][1] //+ "["+id+"]"
		//SET CLIENT DESCRIPTION
		obj_description.innerHTML = clients[id][2]
		//SET THE YEAR
		obj_date.innerHTML = clients[id][5]
		
		//TURN ON THE DISPLAY
		obj_selector.src = "images/menu_selector.gif"
		
		//SHOW THE DETAILS
		obj_details.style.display = "block"
		
		//HIDE ALL EXAMPLE INFO
		initialize_examples()

		//SET EXAMPLE THUMBNAILS
		render_examples(client_id, id)
		
	}
}

function initialize_examples(){
	
	example_title = document.getElementById("example_title")
	example_description = document.getElementById("client_description")
	example_image = document.getElementById("example_image")
	
	if(example_title&&example_description&&example_image){
		
		example_title.innerHTML = ""
	//	example_description.innerHTML = ""
		
		//HIDE THE EXAMPLE IMAGE UNTIL AN IMAGE IS SELECTED
		example_image.src = "images/spacer.gif"
		example_image.style.width = "400px"
	}	
}
function render_examples(client_id, arr_id){
	
	obj_thumbs = document.getElementById("client_examples")
	
	if(obj_thumbs){
		
		str = "<table width='100%' cellpadding='0' cellspacing='0' border='0'>"
		str += "<tr>"
		str += "	<td rowspan='2' width='35'>&nbsp;</td>"
		str += "	<td align='center' id='examples_active_title'><img src='images/type_"+active_typ+".gif'></td>"
		str += "	<td rowspan='2' width='10'></td>"
		str += "	<td align='center' id='examples_other_title'><img src='images/type_other.gif'></td>"
		str += "	<td rowspan='2'></td>"
		str += "</tr>"
		
		a_count = 0
		o_count = 0
		initialized = false
		//client_id = clients[id][0]

		str += "<tr>"
		str += "	<td align='center' id='examples_active'>"
		str += "	<img src='images/example_end_bg.gif'>&nbsp;"
		
		//**** ACTIVE TYPE EXAMPLES ****//
		for(e=0;e<examples.length;e++){
			
			example_client_id = examples[e][1]
			typ = examples[e][4]
			typ_result = typ==active_typ
			id_result = example_client_id==client_id
			
			if(typ_result&&id_result){
				a_count++
				if(initialized==false){first_example = e;initialized=true}
				str += "<img src='images/example_inactive.gif' onclick='toggle_example("+client_id+", "+e+")' id='example_thumb_"+ e +"'>"//+e
			}
			
		}
		str += "	<img src='images/example_end_bg.gif'>"
		str += "	</td>"
		str += "	<td align='center' id='examples_other'>"
		str += "	<img src='images/example_end_bg.gif'>&nbsp;"
			
			
			
		//**** OTHER EXAMPLES ****//
		for(e=0;e<examples.length;e++){
			
			example_client_id = examples[e][1]
			typ = examples[e][4]
			typ_result = typ!=active_typ
			id_result = example_client_id==client_id
			
		//	str += "OTHER: "+ typ +" = "+ active_typ +" :: Client: "+ example_client_id +" = "+ client_id +" :: ("+ e +" our of "+ examples.length  +") ::: ["+typ_result+"] = ["+id_result+"]<br>"
			
			if(typ_result&&id_result){o_count++;str += "<img src='images/example_inactive.gif' onclick='toggle_example("+client_id+", "+e+")' id='example_thumb_"+ e +"'>"}
		}
	
		str += "	<img src='images/example_end_bg.gif'>"
		str += "	</td>"
		str += "</tr>"
		str += "</table>"
	}
	
	obj_thumbs.innerHTML = str
		
	document.getElementById("examples_active_title").style.width = 40*a_count
	document.getElementById("examples_active").style.width = 40*a_count
	
	document.getElementById("examples_other").style.width = 40*o_count
	document.getElementById("examples_other_title").style.width = 40*o_count
	
	if(o_count==0){
		document.getElementById("examples_other_title").style.display = "none"
		document.getElementById("examples_other").style.display = "none"
	}else{
		document.getElementById("examples_other_title").style.display = "block"
		document.getElementById("examples_other").style.display = "block"
	}
	
	toggle_example(client_id, first_example)
}

function toggle_example(client_id, item_id){
	
	obj_details = document.getElementById("client_details")
		
	example_title = document.getElementById("example_title")
	example_description = document.getElementById("client_description")
	example_img = document.getElementById("example_image")
	
	for(e=0;e<examples.length;e++){
	
		obj = document.getElementById("example_thumb_" + e)
	
		if(obj&&e==item_id){
			obj.src = "images/example_active.gif"
		}else if(obj){
			obj.src = "images/example_inactive.gif"
		}
	}
	if(example_title&&example_description&&example_img){
		
		//client_id = examples[id][1]
		descrip_txt = examples[item_id][3]
		
		if(descrip_txt.length==0){descrip_txt = clients[client_id][2] + "DEFAULT"}
		
		example_title.innerHTML = examples[item_id][2]
		example_title.style.display = "inline"
		
		example_description.innerHTML = " Client: ["+client_id+"]" + " Item: ["+item_id+"] <br> " + descrip_txt
		example_description.style.display = "inline"
		
		example_img.src = "clients/" + examples[item_id][5]
		example_img.style.display = "inline"
	}
}