var types = null;
var reqJson;
var mapData;
var targetList;
var imagePath;
var isIE = navigator.userAgent.substring("MSIE") != -1;
var types = null;
var listenerObj = {onSelectDynamicMap:function (data) {
	//alert(data.id + "@" + data.lat + "," + data.lon + "/" + data.level);
	hideObjById("mapView");
	showObjById("FlashMap_outer_div");
	showObjById("whatisthis");
	showObjById("controlView");
	showObjById("sponsorView");
	setTimeout("recenterMap('"+data.lat+"', '"+data.lon+"', '"+data.level+"'); map.weatherLayerSelect('"+data.id+"');",1000);

}, onSelectStaticMap:function (data) {
	hideObjById("legend_div");
	if (data.legendUrl.length > 0) {
		document.getElementById("legend").src = data.legendUrl;
		showObjById("legend_div");		
	}
	var imageDIV = document.getElementById("Image");
	imageDIV.src = imagePath + data.url;
	imageDIV.height = 405;
	imageDIV.width = 600;
	hideObjById("FlashMap_outer_div");
	hideObjById('whatisthis');
	hideObjById('sponsorView');
	document.getElementById('controlView').style.visibility='hidden';
	showObjById("mapView");
	// set the Ad Targets for the static map depending upon the geo params coming up in the object
    // note that for Sponsored pages, the Ads do NOT refresh, so no need to use the logic below
    // If a page is sponsored, the myMapGlue will be null.
	if(data.countryCode != undefined && myMapGlue != undefined) {
		var targetObj = {"country":data.countryCode};
		myMapGlue.setTargets(targetObj);
	}
}};

//initialize the XMLHttpRequest object
if (window.XMLHttpRequest) {
	reqJson = new XMLHttpRequest();
} else {
	if (window.ActiveXObject) {
		reqJson = new ActiveXObject("Microsoft.XMLHTTP");
	}
}
function getMaps(nodeId) {
	var url = serverURL + "/jsonCreator?key=" + nodeId;
	//send request to the server
	if (reqJson != null) {
		reqJson.open("GET", url, true);
		reqJson.onreadystatechange = processMapList;
		reqJson.send(null);
	}
}
function processMapList() {
	try{
		if (reqJson.readyState == 4) {
			//process only if OK
			if (reqJson.status == 200) {
	        	//alert(reqJson.responseText);
				var data = eval("(" + reqJson.responseText + ")");
				var imageData = data["Types"];
				imagePath = imageData[1];
				mapData = data["Maps"];
				mapData = sortNodes(mapData);
				targetList.setData(mapData);
			}
		}
	}catch(err){
		//TODO something
	}
}
function sortNodes(mapData) {
	var nodeArray = new Array();
	var mapArray = new Array();
	for (var index = 0; index < mapData.length; index++) {
		if (mapData[index].type != undefined) {
			nodeArray.push(mapData[index]);
		}else {
			mapArray.push(mapData[index]);
		}
	}
	nodeArray.sort(sortByName);
	mapArray.sort(sortByName);
	mapData = mapArray.concat(nodeArray);
	return mapData;
}

function sortByName(a, b) {
	if (a.name < b.name) {
		return -1;
	} else {
		if (a.name > b.name) {
			return 1;
		} else {
			return 0;
		}
	}
}

function handleClick(evt) {
	var e = evt ? evt : window.event ? window.event : null;
	var target = e.target ? e.target : e.srcElement ? e.srcElement : null;
	return target;
}
function setTitle(depth) {
	var header = document.getElementById("mapViewHdr");
	var titleToShow = "";
	for (var i = 0; i < depth && title[i] != undefined; i++) {
		titleToShow += title[i] + " > ";
	}
	lastIndex = titleToShow.lastIndexOf(" > ");
	titleToShow = titleToShow.substring(0, lastIndex);
	header.innerHTML = titleToShow;
}
function getValue(target) {
	if (target.textContent) {
		return target.textContent;
	} else {
		return target.innerText;
	}
	
}
function zoom(label, mapType) {
	if (label != "null") {
		document.getElementById("FlashMap_outer_div").style.visibility = "hidden";
		var imageDIV = document.getElementById("Image");
		imageDIV.src = label;
	}
}
var wxtools = {};
wxtools.multiListList = function (name, depth, parent) {
	with ({name:name, data:null, depth:depth, parent:parent, listNode:null, draw:function () {
		var nodes = ["<li><div ><ul id=\"" + name + "\" class=\"vScroll\">" + imageSrc];
		for (var datum in this.data) {
			nodes.push("<li><a href=\"\" class=\"subCategory\">" + datum + "</a></li>");
		}
		nodes.push("</ul></div></li>");
		document.write(nodes.join(""));
		this.listNode = document.getElementById(name);
	}, insert:function () {
		var selectNode = document.createElement("select");
		selectNode.id = name;
		selectNode.name = name;
		selectNode.multiple = true;
		selectNode.className = "wxtools_multiList";
		selectNode.style.display = "none";
		this.listNode = selectNode;
		this.fill();
		parent.appendChild(selectNode);
	}, fill:function () {
		ulNode = document.getElementById(this.name);
		if (this.data == null) {
			return;
		}
				//ulNode.parentNode.style="";
		this.listNode.innerHTML = "";
		var classArrow = "subCategory";
		for (var datum = 0; datum < this.data.length; datum++) {
			if (this.data[datum].type != undefined) {
				classArrow = "";
			}
			this.listNode.innerHTML += "<li><a href=\"javascript:void(0);\" onClick=\"return false;\" id=\"" + datum + "\" class=\"" + classArrow + "\">" + this.data[datum].name + "</a></li>";
		}
		if (this.listNode.innerHTML == "") {
			this.listNode.innerHTML = imageSrc;
		}
	}, showWaitMsg:function (messageString) {
		this.listNode.innerHTML = "";
		this.listNode.innerHTML = "<font color=red><i>"+messageString+"</i></font>";
		this.listNode.focus();
		if (this.depth >= 3 ) {
			document.getElementById("mapNav").scrollLeft = (this.depth - 2) * 198;
		}
	}, clear:function () {
		this.listNode.innerHTML = imageSrc;
	}}) {
		EventBroadcaster.initialize(this);
		if (!parent) {
			draw();
		} else {
			insert();
		}
		var ref = this;
		this.clear = function () {
			clear();
		};
		this.wait = function (fmtMessage) {
			showWaitMsg(fmtMessage);
		};
		this.setData = function (newData) {
			data = newData;
			fill();
			listNode.onclick = function (evt) {
				var targ = handleClick(evt);
				var lValue = getValue(targ);
				title[depth] = lValue;
					//var data1 = data['By Type'];
				changeStyle(targ, data);
				ref.broadcastMessage("onSelect", data[targ.id], depth);
			};
		};
	}
};
wxtools.multiList = function (name, numLists, message, parent) {
	with ({pname:name, parent:parent, numLists:numLists, lists:[], draw:function () {
		for (var i = 0; i < numLists; i++) {
			this.lists[i] = new wxtools.multiListList(name + "list" + i, i);
		}
	}, insert:function () {
		for (var i = 0; i < numLists; i++) {
			this.lists[i] = new wxtools.multiListList(name + "list" + i, i, parent);
		}
	}}) {
		EventBroadcaster.initialize(this);
		if (!parent) {
			draw();
		} else {
			insert();
		}
		this.onSelect = function (data, depth) {
			for (var i = depth + 1; i < lists.length; i++) {
					lists[i].clear();
			}
			if (data.type === undefined) {
				targetList = lists[depth + 1];
				lists[depth + 1].wait(message);
				getMaps(data.id);
			} else {
				if (data.type == 0) {
					setTitle(depth + 1);
					this.broadcastMessage("onSelectDynamicMap", data);
				} else {
					setTitle(depth + 1);
					this.broadcastMessage("onSelectStaticMap", data);
				}
			}
			/*for (var i = depth + 2; i < numLists; i++) {
				lists[i].setData(null);
			}*/
		};
		for (var i = 0; i < numLists; i++) {
			lists[i].addListener(this);
		}
		this.setData = function (data) {
			lists[0].setData(data);
			for (var i = 1; i < numLists; i++) {
				lists[i].setData(null);
			}
		};
		this.wait = function () {
			lists[0].wait(message);
		};
	}
};
function setRoot(rootNode) {
	targetList = myMultiList;
	targetList.wait();
	getMaps(rootNode);
}

function changeStyle(target,dataArray){
	var lis=target.parentNode.parentNode.childNodes;
	for(var i=0;i<lis.length;i++){
		if(dataArray[lis[i].firstChild.id].type === undefined){
			lis[i].firstChild.className = "subCategory";
		}else{
			lis[i].firstChild.className = "";
		}
	}
	if(dataArray[target.id].type === undefined){
			target.className = "selectedArrow";
	}else{
			target.className = "selected";
	}
}