var maps_container = document.getElementById("maps_area");
var map_describe = document.getElementById("map_describe_text");
var small_map = new Array();
	small_map.push({title: "Cameroon", popul:"18 879 301 (2009)", area:"475 440 square kilometers", lang:"English / French"});
var points = new Array();
	points.push({x:328, y:125, name:"NSEH", title: "NSEH/Mbabu", popul:"-", pipel:"380 Pipes Needed", descr:"Incomplete."});
	points.push({x:261, y:139, name:"Mali", title: "TAKIJAH/Mali", popul:"CPS - 200 Pupils & Health Center", pipel:".28 km Donated", descr:"Project Completed: Standpipe."});
	points.push({x:297, y:146, name:"Tanyar", title: "MBIAME/Tanyar", popul:"2000", pipel:"3.8 km Donated", descr:"Project Completed: 4 permanent standpipes, 2 temporary storage tanks."});	
	points.push({x:353, y:151, name:"Kishiy", title: "KITIWUM/Kishiy", popul:"200 Pupils (CBC Primary School)", pipel:".94 km Donated", descr:"Project Completed: Standpipe, Valve chamber, (156 pipes)"});	
	points.push({x:265, y:183, name:"Koviy", title: "MBIAME/Kovity", popul:"?", pipel:".43 km Donated", descr:"Project Completed: Valve Chamber. "});
//	points.push({x:340, y:242, name:"Yaounde", title: "6", popul:"6", pipel:"6", descr:"6"});
	points.push({ title: "Kumbo, Cameroon", popul:"116,500 (2001 est.)", elevat:"5,906 ft (1,800 m)", lang:"English / French"});	

if(maps_container){
	var map_div = document.createElement("DIV");
	map_div.className = "small_map";
	map_div.onclick = function(){
		this.style.zIndex = "1";
		describeMapDott("big_map_desc");
	}
	maps_container.appendChild(map_div);
	describeMapDott("sm_map_desc");
	
	map_div = document.createElement("DIV");
	map_div.className = "big_map";
	map_div.onclick = function(){
		returnSmallMap();
		describeMapDott("sm_map_desc");		
	}	
	maps_container.appendChild(map_div);
	setFirstPoints(map_div);	
	
}
function describeMapDott(id){
	if(map_describe && id){
		var desc_string = "";
		if(id == "sm_map_desc" && small_map.length > 0){
			desc_string = "<h3>" + small_map[0].title + "</h3>";
			desc_string += "<div><span class='left'>Population: </span><span class='right'>" + small_map[0].popul + "</span><div class='clear_style'>&nbsp</div></div>";
			desc_string += "<div><span class='left'>Area: </span><span class='right'>" + small_map[0].area + "</span><div class='clear_style'>&nbsp</div></div>";			
			desc_string += "<div><span class='left'>Language: </span><span class='right'>" + small_map[0].lang + "</span><div class='clear_style'>&nbsp</div></div>";
			map_describe.innerHTML = desc_string;
		}
		if(id == "big_map_desc" && points.length - 1 > 0){
			desc_string = "<h3>" + points[points.length - 1].title + "</h3>";
			desc_string += "<div><span class='left'>Population: </span><span class='right'>" + points[points.length - 1].popul + "</span><div class='clear_style'>&nbsp</div></div>";
			desc_string += "<div><span class='left'>Elevation: </span><span class='right'>" + points[points.length - 1].elevat + "</span><div class='clear_style'>&nbsp</div></div>";			
			desc_string += "<div><span class='left'>Language: </span><span class='right'>" + points[points.length - 1].lang + "</span><div class='clear_style'>&nbsp</div></div>";
			map_describe.innerHTML = desc_string;			
		}
		if(!isNaN(parseInt(id)) && parseInt(id) < points.length - 1){
			desc_string = "<h3>" + points[parseInt(id)].title + "</h3>";
			desc_string += "<div><span class='left'>Population: </span><span class='right'>" + points[parseInt(id)].popul + "</span><div class='clear_style'>&nbsp</div></div>";
			desc_string += "<div><span class='left'>Pipelines: </span><span class='right'>" + points[parseInt(id)].pipel + "</span><div class='clear_style'>&nbsp</div></div>";			
			desc_string += "<div><span class='left'>Description: </span><span class='right'>" + points[parseInt(id)].descr + "</span><div class='clear_style'>&nbsp</div></div>";
			map_describe.innerHTML = desc_string;			
		}				
	}
}
function returnSmallMap(){
	var get_divs = maps_container.getElementsByTagName("DIV");
	if(get_divs.length > 0){
		for(i=0; i<get_divs.length; i++){
			if(get_divs[i].className == "small_map"){
				get_divs[i].style.zIndex = "100";
			}
		}
	}
}
function setFirstPoints(obj){
	if(obj && points.length - 1 > 0){
		var new_dott;
		for(i=0; i<points.length - 1; i++){
			new_dott = document.createElement("DIV");
			new_dott.className = "new_dott";
			new_dott.style.left = points[i].x + "px";
			new_dott.style.top = points[i].y + "px";
			new_dott.innerHTML = "<input type='hidden' value='" + i + "'>";
			new_dott.onmouseover = function(){
				dottMouseOver(this);
			}
			obj.appendChild(new_dott);			
		}
	}
}
function dottMouseOver(obj){
	if(obj){
		var get_id = obj.getElementsByTagName("INPUT");
		if(get_id.length === 1 && get_id[0].type == "hidden"){
			var hover_dott = document.createElement("DIV");
			hover_dott.className = "new_hover_dott";
			hover_dott.style.left = (obj.offsetLeft - 4) + "px";
			hover_dott.style.top = (obj.offsetTop - 4) + "px";			
			hover_dott.onmouseout = function(){
				clearAllHoverDotts(this);
				describeMapDott("big_map_desc");
			}
			obj.parentNode.appendChild(hover_dott);
			describeMapDott(get_id[0].value);	
		}
	}	
}
function clearAllHoverDotts(obj){
	if(obj){
		var get_dotts = obj.parentNode.getElementsByTagName("DIV");
		var found_objs = new Array();
		var parentObj = obj.parentNode;				
		if(get_dotts.length > 0){
			for(i=0; i<get_dotts.length; i++){
				if(get_dotts[i].className == "new_hover_dott"){
					found_objs.push(get_dotts[i]);
				}
			}
			if(found_objs.length > 0){
				for(i=0; i<found_objs.length; i++){
					parentObj.removeChild(found_objs[i]);					
				}
			}			
		}
	}
}