﻿var centerPoint = new google.maps.LatLng(41.900029, -87.623964);
var map = null;
var url = [];
var points = [];
var infoWin = new google.maps.InfoWindow();
var columns = 2;

function XML(){
	var obj = null;
	try{
		obj = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch(e){
		try{
			obj = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (e){
			try{
				obj = new XMLHttpRequest();
			}
			catch (e){
				try{
					obj = window.createRequest();
				}
				catch(e){
					obj = null;
				}
			}
		}
	}
	return obj;
};

function initMap(id, zoom){
	var node = document.getElementById(id);
	var opt = {
		zoom : zoom,
		center : centerPoint,
		mapTypeId : google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(node, opt);
	return map;
};

function setCategory(id){
	var setPoints = function(){
		var category = document.getElementById("category_"+id).name;
		var checked = document.getElementById("category_"+id).checked;
		var markers = points[category];
		for (var i=0; i<markers.length; i++){
			if (checked){
				if (markers[i].index == null){
					var gps = new google.maps.LatLng(markers[i].lat,markers[i].lng);
					markers[i].index = createMarker(gps,map,markers[i].icon,markers[i].name);
				}
				else markers[i].index.setMap(map);
				addToList(markers[i].id);
			}
			else{
				if (markers[i].index){
					markers[i].index.setMap(null);
					removeFromList(markers[i].id);
				};
			};
		};
		
	};
	if (points.length == 0)getMarkers(id,setPoints);
	else setPoints();
};

function setCategories(list){
	var array = list.split(",");
	for (var i=0; i<array.length; i++){
		document.getElementById("category_"+array[i]).checked = true;
		setCategory(array[i]);
	};
};

function getMarkers(category_id,callback){
	category_id = (category_id == null ? 0 : category_id);
	var target = "http://"+document.location.host+"/map/points.cfm?category_id="+category_id;
	var socket = new XML();
	var response = null;
	var data = "category_id="+category_id;
	if (socket != null){
		socket.open("get",target,true);
		socket.setRequestHeader("Method","GET "+target+" HTTP/1.1");
		socket.setRequestHeader("Cache-Control","no-cache");
		socket.onreadystatechange = function(){
			var STATE_UNSENT = 0;
			var STATE_OPENED = 1;
			var STATE_HEADERS = 2;
			var STATE_LOADING = 3;
			var STATE_DONE = 4;
			switch (socket.readyState){
				case STATE_OPENED:
					break;
				case STATE_HEADERS:
					break;
				case STATE_LOADING:
					break;
				case STATE_DONE:
					eval("response = "+socket.responseText);
					for (var i=0; i<response.COLUMNS.length; i++){
						if (response.COLUMNS[i])response[response.COLUMNS[i].toLowerCase()] = i;
					};
					for (var i=0; i<response.DATA.length; i++){
						var row = response.DATA[i];
						if (points[row[response.category]] == null)points[row[response.category]] = new Array();
						var pointer = {};
						pointer.index = null;
						for (var col=0; col<response.COLUMNS.length; col++)pointer[response.COLUMNS[col].toLowerCase()] = row[col];
						points[row[response.category]].push(pointer);
					};
					for (var key in points){
						var array = points[key];
						for (var i=0; i<array.length; i++)points[points.length] = array[i];
					};
					for (key in points){
						var collection = document.getElementsByName(key);
						for (var i=0; i<collection.length; i++)collection[i].checked = false;
					};
					if(callback)callback.call();
					break;
			};
		};
		socket.send(data);
	}
	else alert("Could not instantiate the XMLRequest object. Can not map points.");
};

function createMarker(point,map,icon,title){
	var imagePath = "http://"+document.location.host+"/images/";
	var icon = new google.maps.MarkerImage(imagePath+icon);
	var mark = new google.maps.Marker({
		flat: true,
		icon: icon,
		map: map,
		position: point,
		title: title
	});
	google.maps.event.addListener(mark,"click",function(){
		pointer = null;
		for (var i=0; i<points.length; i++)if (points[i].index == mark)pointer = points[i];
		var position = i;
		if (pointer){
			infoWin.setContent(getContent(pointer));
			infoWin.open(map,pointer.index);
		};
	});
	return mark;
};

function getContent(pointer,direction){
	direction = (direction == null ? "to" : direction);
	var content = "<div id=\"infoWindow\">"+
	"<a href=\"http://"+pointer.website+"\" target=\"blank\">"+pointer.name+"</a><br/><br/>"+
	"<div id=\"body\">"+pointer.address+"<br/>"+
	pointer.city+", "+pointer.state+" "+pointer.zip+"<br/>"+
	(pointer.phone != null ? pointer.phone.toString().replace(/(\d{3})(\d{3})(\d{4})/,"$1-$2-$3")+"<br/>" : "")+
	"<br/>"+
	"Directions: "+(direction == "to" ? "to" : "<a href=\"JavaScript:setDirections('to',"+pointer.id+")\">to</a>")+" | "+(direction == "from" ? "from" : "<a href=\"JavaScript:setDirections('from',"+pointer.id+")\">from</a>")+"<br/>"+
	"<form action=\"http://maps.google.com/maps\" target=\"_blank\"><input type=\"hidden\" name=\""+(direction == "from" ? "saddr" : "daddr")+"\" value=\""+pointer.address+" "+pointer.city+" "+pointer.state+"\"><input type=\"text\" class=\"text\" name=\""+(direction == "from" ? "daddr" : "saddr")+"\" style=\"width:60%;\"><input type=\"submit\" class=\"button\" value=\"GO\"></form><br/>"+
	"</div></div>";
	return content;
};

function setDirections(direction,id){
	for (var i=0; i<points.length; i++)if (points[i].id == id)pointer = points[i];
	if (pointer){
		infoWin.setContent(getContent(pointer,direction));
		infoWin.open(map,pointer.index);
	};
};

function showPoint(id){
	for (var i=0; i<points.length; i++){
		if (points[i].id == id){
			pointer = points[i];
			position = i;
		};
	};
	if (pointer != null){
		document.getElementById("header").scrollIntoView();
		google.maps.event.trigger(pointer.index,"click");
	};
};

function addToList(id){
	var pointer = null;
	var list = document.getElementById("list");
	var position = -1;
	for (var i=0; i<points.length; i++){
		if (points[i].id == id){
			pointer = points[i];
			position = i;
		};
	};
	if (pointer != null){
		var dupe = -1;
		for (var i=0; i<points.length; i++)if (points[i].name == pointer.name && points[i].id != pointer.id)dupe = i;
		var el = document.createElement("a");
		el.style.backgroundImage = "url('/images/"+pointer.icon+"')";
		el.id = pointer.id;
		el.href = "JavaScript:showPoint("+pointer.id+")";
		el.innerHTML = pointer.name;
		if (dupe > -1)el.innerHTML += " &ndash; "+pointer.address;
		var col = 0;
		for (var i=0; i<list.childNodes.length; i++){
			var children = list.childNodes[i].childNodes.length;
			if (children >= Math.ceil(points.length/columns))col = (i+1 || list.childNodes.length-1);
		};
		list.childNodes[col].appendChild(el);
	};
};

function removeFromList(id){
	var list = document.getElementById("list");
	var el = document.getElementById(id);
	el.parentNode.removeChild(el);
};

function initPage(){
	var query = document.location.search.replace(/\?/,"");
	var pairs = query.split("&");
	for (var i=0; i<pairs.length; i++){
		var pair = pairs[i].split("=");
		url[pair[0]] = pair[1];
	};
	for (var i=0; i<columns; i++){
		var col = document.createElement("div");
		col.style.width = 100/columns+"%";
		col.id = "column-"+i;
		var className = document.createAttribute("class");
		className.nodeValue = "column";
		col.setAttributeNode(className);
		document.getElementById("list").appendChild(col);
	};
	getMarkers(0,function(){
		map = initMap("map",16);
		var markers = points["Hotel"];
		for (var i=0; i<markers.length; i++){
			if (markers[i].index == null){
				var gps = new google.maps.LatLng(markers[i].lat,markers[i].lng);
				markers[i].index = createMarker(gps,map,markers[i].icon,markers[i].name);
			}
			else markers[i].index.setMap(map);
		};
		if (url["load"] != null){
			setCategories(url["load"]);
		};
	});
};

if (window.addEventListener)window.addEventListener("load",initPage,false);
if (window.attachEvent)window.attachEvent("onload",initPage);

