// JavaScript Document


var icon;
var waypointMarkers = new Array();
var firstLoad = true;
var selectedTrail = null;


var currentWaypoint = null;
var hoverOnStyle, hoverOffStyle;
var tooltipOverlay;

function myinit(){
	var mapOptions = {
    	zoom: 10,
    	navigationControl:true,
    	mapTypeControl:false,
    	streetViewControl:false,
    	rotateControl:false,
    	mapTypeControlOptions: {
    		mapTypeIds: ['coordinate', google.maps.MapTypeId.ROADMAP],
    		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		},
		zoomControl:true,
		zoomControlOptions: {
			style:google.maps.ZoomControlStyle.SMALL
		}
	};
	map = new google.maps.Map(document.getElementById("map"), mapOptions);
	
	
	var coordinateMapType = new CoordMapType();
	map.mapTypes.set('coordinate',coordinateMapType);
    map.setMapTypeId('coordinate');	 
	
	tooltipOverlay = new TooltipOverlay(map);
    
	hoverOnStyle = {
		color: hoverColor,
		weight: 3,
		opacity: 0.5
	};

	hoverOffStyle = {
		color:hoverColor,
		weight:2,
		opacity:0.0
	};
	
	if(startingWaypoint!=0){
		var firstPoint = new google.maps.LatLng(waypoints[0].startLat, waypoints[0].startLng);
		map.setCenter(firstPoint);
	}else{
		map.setCenter(new google.maps.LatLng(40.71916022743469, -73.81576538085938));
	}
	
	initWaypoints();
	firstLoad = false;	
	    
    if(startingWaypoint!=0){
    	highlightAndMove(startingWaypoint);
    }

}

function initWaypoints(){
	var i;
	
	var table = "<table style=width:100%>";
	for(i = 0; i < waypoints.length; i++){
		createHoverMarker(waypoints[i]);
		table = table + "<tr><td style='color:#094481;padding:5px;border-bottom:1px solid #cccccc;font-size:10pt' " +
			"onmouseover='this.style.cursor=\"pointer\";this.style.background=\"#dadada\";' " +
			"onmouseout='this.style.cursor=\"pointer\";this.style.background=\"\"' " +
			"onclick='highlightAndMove(" + (waypoints[i].id) + ")'>" + 
			waypoints[i].title + "<td></tr>";
	}
	table = table +"</table>";
	document.getElementById("waypointslist").innerHTML = table;
}

var currentHoverWaypointId = -1;
function highlightAndMove(waypointId){
	var waypoint = getWaypoint(waypointId);
	moveToLocation(waypoint.id, waypoint.startLat, waypoint.startLng);
	if(currentHoverWaypointId != -1){
		updateHover(currentHoverWaypointId, false, false);
	}
	currentHoverWaypointId = waypointId;
	updateHover(currentHoverWaypointId, true, false);
}

function createHoverMarker(waypoint){
	if(waypoint.shape != null && waypoint.shape.getPath().getLength() > 0){
		waypoint.tooltip = '<div><nobr>'+waypoint.title+'<\/nobr><\/div>';
		var options = {
			fillColor:hoverColor,
			fillOpacity:0.0,
			strokeColor:hoverColor,
			strokeWeight:2,
			strokeOpacity:0.0
		};
		waypoint.shape.setOptions(options);
		waypoint.shape.setMap(map);
		google.maps.event.addListener(waypoint.shape, "click", new Function("moveToLocation('" + waypoint.id + "'," + waypoint.startLat + "," + 
			waypoint.startLng + ")" ));
		google.maps.event.addListener(waypoint.shape, "mouseover", 
				new Function ("updateHover(" + waypoint.id + ", true, true)")); 
		google.maps.event.addListener(waypoint.shape, "mouseout", 
				new Function ("updateHover(" + waypoint.id + ", false, false)"));
	}
}

function getWaypoint(waypointid){
	var i;
	for(i = 0; i < waypoints.length; i++){
		if(waypoints[i].id == waypointid){
			return waypoints[i];
		}
	}
	return null;
}


function updateHover(waypointId, hoverOn, showTooltip){
	var waypoint = getWaypoint(waypointId);
	var options;
	
	if(waypoint.shape == null){
		return;
	}
	if(hoverOn){
		if(currentHoverWaypointId != -1 && currentHoverWaypointId != waypointId){
			updateHover(currentHoverWaypointId, false, false);
		}
		options = {
			fillOpacity:0.5,
			strokeWeight:3,
			strokeOpacity:0.5
		};
		waypoint.shape.setOptions(options);
	}else{
		options = {
			fillOpacity:0.0,
			strokeWeight:2,
			strokeOpacity:0.0
		};
	}
	waypoint.shape.setOptions(options);
	
	tooltip = document.getElementById("map_tooltip");
	if (showTooltip) {
		
		tooltip.innerHTML = waypoint.tooltip;
		var proj = tooltipOverlay.getProjection();
		var point = proj.fromLatLngToDivPixel(waypoint.bounds.getNorthEast());
		tooltip.style.left = (point.x) + "px";
		tooltip.style.border = "1px solid #ffffff";
		tooltip.style.top = (point.y) + "px";
		addClass(tooltip, "opaque");
	}else{
		removeClass(tooltip, "opaque");
	}
}

function moveToLocation(wpid, lat, lng){
	moveToPoint(lat, lng);
	updateCurrentWaypoint(wpid);
	updateDescription();
	updateMediaPanel();
}

function updateDescription(){	
	document.getElementById("descriptionText").innerHTML = "<div class=panel_h1>" +currentWaypoint.title + "</div>"  + currentWaypoint.fullMapDescription;
}

function updateMediaPanel(){
	createMediaIcon(PANORAMA_TYPE, "fullmap360", currentWaypoint==null?false:currentWaypoint.hasPanorama);
	createMediaIcon(PICTURE_TYPE, "fullmapphotos", currentWaypoint==null?false:currentWaypoint.hasPicture);
	createMediaIcon(VIDEO_TYPE, "fullmapvideo", currentWaypoint==null?false:currentWaypoint.hasVideo);
}

function createMediaIcon(type, iconname, enabled){
	var span = document.getElementById(iconname + "id");
	if(enabled){
		var obj = document.getElementById(iconname + "_Id");
		if(obj){
			setClickEvent(obj, 'showMediaPanel(' + createMediaInfoObject(type) + ')');
		}else{
			span.innerHTML ='<a id=' + iconname + '_Id align=center class=blanklink href="javascript:void(0)" onclick="showMediaPanel(' + createMediaInfoObject(type) + ")\">" + 
				  "<img src=/images/" + iconname + ".png border=0 onmouseover=\"this.src='/images/" + iconname +  "-on.png'\" onmouseout=\"this.src='/images/" + iconname + ".png'\"></a>";
		}
	}else{
		if(document.getElementById(iconname + "_off_Id")){
			return;
		}else{
			span.innerHTML ="<img id=" + iconname + "_off_Id src=/images/" + iconname + "-off.png" + " border=0></a>";
		}
	}
}

function createMediaInfoObject(type){
	return "new MediaInfo(" + type + ",'" + college + "'," + currentWaypoint.id + "," + currentWaypoint.hasVideo + "," + currentWaypoint.hasPanorama + "," + currentWaypoint.hasPicture + ",'" + currentWaypoint.title.replace("'", "\\'") + "')";
}


function updateCurrentWaypoint(id){
	currentWaypoint = null;
	
	var i;
	for(i = 0; i < waypoints.length; i++){
		if(waypoints[i].id == id){
			currentWaypoint = waypoints[i];
			break;
		}
	}
}


function trim(str){
   return str.replace(/^\s*|\s*$/g,"");
}


function moveToPoint(lat, lng){
	var p = new google.maps.LatLng(lat, lng);
	map.panTo(p);
}

function drawTrail(){
	if(selectedTrail != null){
		selectedTrail.line.setMap(map);
	}
	var index = document.getElementById("trailsDD").selectedIndex;
	if(index==0){
		selectedTrail = null;
	}else{
		selectedTrail = trails[index-1];
		selectedTrail.line.setMap(map);
		map.panTo(selectedTrail.line.getPath().getAt(0));
	}
}



function Description(title, description, leftHint, rightHint, avatar){
	this.title = title;
	this.description = description;
	this.leftHint = leftHint; 
	this.rightHint = rightHint;
	this.avatar = avatar;
}

function Waypoint(id, title, college, hasVideo, hasPanorama, hasPicture, shape, startLat, startLng, fullMapDescription){
	this.title = title;
	this.college = college;
	this.id = id;
	this.hasPanorama = hasPanorama;
	this.hasPicture = hasPicture;
	this.hasVideo = hasVideo;
	this.shape = shape;
	this.startLat = startLat;
	this.startLng = startLng;
	this.fullMapDescription = fullMapDescription;
	this.bounds = new google.maps.LatLngBounds();
	
	if(this.shape!= null){
	for (i = 0; i < this.shape.getPath().getLength(); i++) {
		this.bounds.extend(this.shape.getPath().getAt(i));
	}
	}

	
}

function iTrail(id, type, name, points){
	this.id = id;
	this.name = name;
	this.line = new GPolyline(points, "#FFFF00", 5, 0.8);
	this.type = type;
}

function CoordMapType() {
	CoordMapType.prototype.tileSize = new google.maps.Size(256,256);
	CoordMapType.prototype.maxZoom = 11;
	CoordMapType.prototype.minZoom = 9;

	var tileCache; 

    CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    	var id = "id" + coord.x + coord.y + zoom;
    	var div = ownerDocument.getElementById(id);
    	if(div){
    		return div;
    	}
    	div = ownerDocument.createElement("div");
    	var img = ownerDocument.createElement("img");
    	var url = CustomGetTileUrl(coord, zoom);
    	div.id = id;
    	img.src = url;
    	div.style.width = this.tileSize.width + 'px';
    	div.style.height = this.tileSize.height + 'px';
    	div.appendChild(img);
    	return div;
    };

    CoordMapType.prototype.name = "Tile #s";
    CoordMapType.prototype.alt = "Tile Coordinate Map Type";
}

function TooltipOverlay(map) {
	this.map_ = map;
	this.div_ = null;
	this.setMap(map);
}

TooltipOverlay.prototype = new google.maps.OverlayView();

TooltipOverlay.prototype.onAdd = function() {
	tooltip = document.createElement('DIV');
	tooltip.id = "map_tooltip";
	tooltip.className = "tooltip";
	this.div_ = tooltip;


	var panes = this.getPanes();
	panes.overlayLayer.appendChild(tooltip);
};

TooltipOverlay.prototype.draw = function() {
}