var req;
var mapResponseHandler;
var hotBoxArray = new Array();
var debugMode = false;
var mapLoaded = false;
var navigateSession = "";
var zoomLevel = -1;

function propertyIconOnClick(elem,event, hrefX, hrefY) {
	var mapPoint = new point( hrefX, hrefY);
	propertiesClicked = 0;
	for( i = 0; i < hotBoxArray.length; i++) {
		var show = hotBoxArray[i].contains(mapPoint);
		if (show) {
			document.getElementById("propertyDetail" + hotBoxArray[i].propertyID).style.display = "block";
			//currentClassName = document.getElementById("propIcon" + hotBoxArray[i].propertyID).className;
			//document.getElementById("propIcon" + hotBoxArray[i].propertyID).className = currentClassName + " selected";
			propertiesClicked++;
		} else {
			document.getElementById("propertyDetail" + hotBoxArray[i].propertyID).style.display = "none";
			//currentClassName = document.getElementById("propIcon" + hotBoxArray[i].propertyID).className;
			//document.getElementById("propIcon" + hotBoxArray[i].propertyID).className = currentClassName.replace(" selected", "");
		}
	}
	if (propertiesClicked > 2) {
		document.getElementById("details").className = "many";
	} else { 
		document.getElementById("details").className = "few";
	}
	document.getElementById("detailsPopup").style.display = "block";
	return false;
}
function toggleMap() {
	mapSectionDiv = document.getElementById("mapSection");
	if (mapSectionDiv.style.display == "block") {
		setShowMap(false);
		mapToggleLinkViewA = document.getElementById("mapToggleLinkView");
		mapToggleLinkHideA = document.getElementById("mapToggleLinkHide");
		mapSectionDiv.style.display = "none";
		mapToggleLinkViewA.style.display = "inline";
		mapToggleLinkHideA.style.display = "none";
	} else {
		showMap();
	}
}
function showMap() {
	if (!mapLoaded) {
		handleLoad();
	} else {
		setShowMap(true);
	}
	mapSectionDiv = document.getElementById("mapSection");
	mapToggleLinkViewA = document.getElementById("mapToggleLinkView");
	mapToggleLinkHideA = document.getElementById("mapToggleLinkHide");
	
	mapSectionDiv.style.display = "block";
	mapToggleLinkViewA.style.display = "none";
	mapToggleLinkHideA.style.display = "inline";
}
function point(x,y) {
	this.x = x;
	this.y = y;
	this.printAlert = function() {
		alert("POINT: " + this.x + ":" + this.y);
	}
}
function hotBox(x , y, propertyID) {
	x = x - 0;
	y = y - 0;
	this.propertyID = propertyID;
	this.upperLeft = new point(x -23,y - 23);
	this.lowerRight = new point(x + 23, y + 23);
	this.contains = function(point) {
		if (point.x > this.upperLeft.x && point.x < this.lowerRight.x) {
			if (point.y > this.upperLeft.y && point.y < this.lowerRight.y) {
			 	return true;
			}
		}
		return false;
	}
	this.printAlert = function() {
		alert("BOX: " + this.upperLeft.x + ":" + this.lowerRight.x + ":" + this.upperLeft.y + ":" + this.lowerRight.y);
	}
}
function pan(direction) {
	mapResponseHandler = displayHandler;
	url = "/ajax/search?searchType=panRequest&sessionId=" + navigateSession + "&startIndex=" + startIndex + "&endIndex=" + endIndex + "&direction=" + direction + "&userLocale=" + userLocale;
	loadSearchMapUrl(url);
}
function zoomIn_onClick() {
	mapResponseHandler = displayHandler;
	handleZoom(zoomLevel - 1);
}
function zoomOut_onClick() {
	mapResponseHandler = displayHandler;
	handleZoom(zoomLevel + 1);
}
function handleZoom(level) {
	if (level >0 && level <11){
		zoomLevel = level;
		mapResponseHandler = displayHandler;
		url = "/ajax/search?searchType=zoomRequest&sessionId=" + navigateSession + "&startIndex=" + startIndex + "&endIndex=" + endIndex + "&zoomLevel=" + level + "&userLocale=" + userLocale;
		loadSearchMapUrl(url);
	}
}

function handleLoad() {
	document.getElementById("detailsPopup").style.display = "none";
	mapResponseHandler = displayHandler;
	url = "/ajax/search?searchType=propertyID&showMap=true&startIndex=" + startIndex + "&endIndex=" + endIndex + "&mapWidth=" + mapWidth + "&mapHeight=" + mapHeight + "&userLocale=" + userLocale;
	loadSearchMapUrl(url);
}
function setShowMap(b) {
	mapResponseHandler = emptyFunction;
	url = "/ajax/search?searchType=setShowMap&showMap=" + b + "&userLocale=" + userLocale;
	loadSearchMapUrl(url);
}
function emptyFunction() {
}
function loadSearchMapUrl(url) {
	// add unique timestamp to ensure XML file isn't cached by the browser
	url = url + "&timestamp=" + new Date().getTime();
	if (debugMode) {
		window.alert(url);
	}
	// branch for native XMLHttpRequest object
	if (window.XMLHttpRequest) {
		req = new XMLHttpRequest();
		req.onreadystatechange = processMapReqChange;
		req.open("GET", url, true);
		req.send(null);
	// branch for IE/Windows ActiveX version
	} else if (window.ActiveXObject) {
		req = new ActiveXObject("Microsoft.XMLHTTP");
		if (req) {
			req.onreadystatechange = processMapReqChange;
			req.open("GET", url, true);
			req.send();
		}
	// The browser cannot support dynamic loading - say so
	} else {
		window.alert('Feature Not Supported By Your Browser');
	}			
}
function processMapReqChange() {
	// only if req shows "loaded"
	if (req.readyState == 4) {
		// only if "OK"
		if (req.status == 200) {
			if (getSubNodeValue(req.responseXML, "errorCode") == "") {
				mapResponseHandler(req);
			} else {
				window.alert(getSubNodeValue(req.responseXML, "errorDesctiption"));
			}
		} else {
			window.alert(req.statusText);
		}
	}
}
function displayHandler(req) {
	document.getElementById("mqmap").setAttribute('src',"/common/images/shim.gif");
	clearResults();
	setMapUri(req);
	setNavigateSession(req);
	setZoomLevel(req);
	setIcons(req);
	mapLoaded = true;
}
function setMapUri(req) {
	document.getElementById("mqmap").setAttribute('src',  getSubNodeValue(req.responseXML, "MapUri"));
}
function setZoomLevel(req) {
	zoomLevel =  getSubNodeValue(req.responseXML, "ZoomLevel") * 1;
	for (i = 1; i < 11; i ++) {
		if ( ( i > (zoomLevel - .5)) && ( i < ((zoomLevel)+ .499)) ) {
			document.getElementById("zoomLevel" + i).className = "zoomLevelLocked";
		} else {
			document.getElementById("zoomLevel" + i).className = "zoomLevelOff";
		}
	}
}
function setNavigateSession(req) {
	if (debugMode) {
		alert("Setting SessionId: " + getSubNodeValue(req.responseXML, "SessionID"));
	}
	navigateSession = getSubNodeValue(req.responseXML, "SessionID");
}
function setIcons(req) {
	var items = req.responseXML.getElementsByTagName("property");
	iconsDiv = document.getElementById("icons");
	detailsDiv = document.getElementById("details");
	hotBoxArray = new Array();
	for (var i= items.length - 1; i >= 0 ; i--) {
		propertyNode = items[i];
		onMapNode = propertyNode.getElementsByTagName("onMap");
		onMap = (onMapNode[0].firstChild != null)? onMapNode[0].firstChild.nodeValue : "false";
		if (onMap == "true") {  
			propertyID = getSubNodeValue(propertyNode, "propertyID");
			x = getSubNodeValue(propertyNode, "X");
			y = getSubNodeValue(propertyNode, "Y");
			displayIndex = getSubNodeValue(propertyNode, "displayIndex");
			brandCode = getSubNodeValue(propertyNode, "brand");
			
			hotBoxArray[hotBoxArray.length] = new hotBox(x,y,propertyID);
			textToAppend = "<a class='icon_" + brandCode + "' href='' id='propIcon" + propertyID + "' onclick='return propertyIconOnClick(this, event, " + x + ", " + y + ")' style='position:absolute; top:" + (y - 10) + "px; left: " + (x - 12) + "px;'>" + displayIndex + "</a>";
			iconsDiv.innerHTML = iconsDiv.innerHTML + textToAppend;
			//
			var contentItems = propertyNode.getElementsByTagName("content");
			contentInnerText = contentItems[0];
			if (contentInnerText != null) {
				var textToAppend = "";
				if (contentInnerText.textContent) {
					textToAppend = contentInnerText.textContent;
				} else {
					textToAppend = contentInnerText.firstChild.nodeValue;
				}
				detailsDiv.innerHTML = textToAppend + detailsDiv.innerHTML;
			}
		}
	}
}

function clearResults() {
	elem = document.getElementById("icons");
	while (elem.childNodes.length > 0) {
		elem.removeChild(elem.firstChild);
	}
	elem = document.getElementById("details");
	while (elem.childNodes.length > 0) {
		elem.removeChild(elem.firstChild);
	}
}
function closeDetails() {
	//for( i = 0; i < hotBoxArray.length; i++) {
	//	currentClassName = document.getElementById("propIcon" + hotBoxArray[i].propertyID).className;
	//	document.getElementById("propIcon" + hotBoxArray[i].propertyID).className = currentClassName.replace(" selected", "");
	//}
	document.getElementById("detailsPopup").style.display = "none";
	return false;
}

// onmouseover action for images
//  takes Array var wich holds the objects to change
function panOver(arr) {
	for (i = 0; i < eval(arr).length; i++) {
	    var img = eval(arr)[i];
	    document[img].src = eval(img + '_' + arr + '.src');
	}
	hoverOn(arr);
}

// onmouseout action for images
//  takes Array var wich holds the objects to change
function panOff(arr) {
	for (i = 0; i < eval(arr).length; i++) {
	    var img = eval(arr)[i];
	    document[img].src = eval(img);
	}
	hoverOff(arr);
}

// change the hover classes for <td> cells
function hoverOff(hoverElement) {
	var element = document.getElementById(hoverElement);
	if (element != null){
		element.className = "hoverOff";
	}
}

function hoverOn(hoverElement) {
	var element = document.getElementById(hoverElement);
	if (element != null){
		element.className = "hoverOn";
	}
}

function swapZoomClass(element) {
	var elementRef = document.getElementById(element);
	if (elementRef.className != "zoomLevelLocked"){
		if(elementRef.className == "zoomLevelOn"){
			elementRef.className = "zoomLevelOff";
		} else {
			elementRef.className = "zoomLevelOn";
		}
	}
}

function getSubNodeValue(node, tagname) {
	subNode = node.getElementsByTagName(tagname);
	if (subNode[0] != null) {
		if(subNode[0].firstChild != null) {
			return subNode[0].firstChild.nodeValue;
		}
	}
	return "";
}