google.load("visualization", "1", {packages:["corechart"]});

var _htcmap;

var _gaq = _gaq || [];
_loadGA();

jQuery(function($) {
	_htcmap = new HTCMaps.Map({
		'map_id'	: "map_canvas",
		'desc_id'	: 'legdesc',
		'legs'		: _legs,
		'exchanges'	: _exchanges
	});
	leg_change(1);
	
	$("#databox").draggable({ containment: "parent" });
	
	$('#pickleg').change(pick_leg);
	
	$('#zoom_start').click(function() { return _htcmap.zoomTo(this) });
	$('#zoom_finish').click(function() { return _htcmap.zoomTo(this) });

//	drawChart()
});

function pick_leg() {
	var lnum = $(this).val();
	leg_change(parseInt(lnum));
}

function leg_change(lnum) {
	_htcmap.show_leg(lnum);
	var rnum = (lnum % 12) == 0 ? 1 : lnum % 12;
	$('#runner_num').html(rnum);

	var other;
    if (lnum < 13) {
        other = {a: lnum+12, b: lnum+24};
    } else if ( lnum < 25 ) {
        other = {a: lnum-12, b: lnum+12};
    } else {
        other = {a: lnum-24, b:lnum-12};
    }

	$('#pickleg').val(lnum);
	
	var html = '<a href="#" onclick="return leg_change(' + other.a + ')">Leg ' + other.a + '</a> | '
		+ '<a href="#" onclick="return leg_change(' + other.b + ')">Leg ' + other.b + '</a>';
	$('#other_legs').html(html);
	return false;
}

function drawChart() {
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Miles');
	data.addColumn('number', 'Feet');
	data.addRows(4);
	data.setValue(0, 0, '2004');
	data.setValue(0, 1, 1000);
	data.setValue(1, 0, '2005');
	data.setValue(1, 1, 1170);
	data.setValue(2, 0, '2006');
	data.setValue(2, 1, 860);
	data.setValue(3, 0, '2007');
	data.setValue(3, 1, 1030);

	var chart = new google.visualization.LineChart(document.getElementById('elevation_chart'));
	chart.draw(data, {width: 600, height: 240, title: 'Leg Elevation'});
}


function _loadGA() {
	if (/htcmaps\.com/.test(location.host)) return;
	_gaq.push(['_setAccount', 'UA-1382392-3']);
	_gaq.push(['_trackPageview']);

	(function() {
	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();
}



var HTCMaps = HTCMaps || {};

HTCMaps.Map = function(options) {
	this._map_id = options.map_id;
	this._map = null;
	this._legs = {};
	this._currleg = null;
	this._currlegnum = 0;

	this._exchanges = {};
	
	this._options = options;
	
	var mapoptions = {
		zoom: 14,
		center: new google.maps.LatLng(45.315, -121.72),
		mapTypeControl: true,
		mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		},		
		mapTypeId: google.maps.MapTypeId.HYBRID 
	};
	this._map = new google.maps.Map(document.getElementById(this._map_id), mapoptions);
	
	for (var leg in options.legs) {
		this._legs[leg] = new HTCMaps.Leg(this._map, options.legs[leg]);
	}

	for (var exchange in options.exchanges) {
		this._exchanges[exchange] = new HTCMaps.Exchange(this._map, options.exchanges[exchange]);
	}

}

HTCMaps.Map.prototype = {
	zoomTo: function(anchor) {
		var to = $(anchor).attr('id').replace('zoom_', '');

		var pt = this._currleg.getEnd(to);
		this._map.panTo(new google.maps.LatLng(pt.lat, pt.lng));
		this._map.setZoom(17);
		return false;
	},

	show_leg: function(legnum) {
		if (this._currlegnum == legnum) return;
		
		if (this._currleg != null) {
			this._currleg.hide();
			this._hideExchanges();
		}
		
		this._currleg = this._legs['leg'+legnum];
		this._currleg.show(this._map);
		this._currlegnum = legnum;

		$('#' + this._options.desc_id).html(this._currleg.getDesc());

		this._showExchanges();
	},
	
	_showExchanges: function() {
		var lnum = this._currlegnum;
		this._exchanges['ex' + (lnum-1)].show();
		this._exchanges['ex' + lnum].show();
	},

	_hideExchanges: function() {
		var lnum = this._currlegnum;
		this._exchanges['ex' + (lnum-1)].hide();
		this._exchanges['ex' + lnum].hide();
	}

}

HTCMaps.Exchange = function(map, data) {
	this._map 		= map;
	this._data 		= data;
	this._marker	= null;
	this._visible	= false;
};
HTCMaps.Exchange.prototype = {
	
	show: function() {
		if (this._visible) return;
		if (this._marker == null) {
			this.create();
		}

		this._marker.setMap(this._map);
		this._visible = true;
	},

	hide: function() {
		if (this._marker == null || !this._visible) return; 
		this._marker.setMap(null);
		this._visible = false;
	},

	create: function() {
		var data = this._data;

		var title	= data.name;
		var icon 	= "images/icons/iconb" + data.exchange + ".png"

		if (data.exchange == 0) {
			title	= "Start";
			icon 	= "images/icons/start.png";
		}
		if (data.exchange == 36) {
			title	= "Finish";
			icon 	= "images/icons/finish.png";
		}

		this._marker = new google.maps.Marker({
			'position'	: new google.maps.LatLng(data.lat, data.lng), 
			'title'		: title,
			'icon'		: icon
		});   			
	}
}


HTCMaps.Leg = function(map, data) {
	this._map = map;
	this._data = data;
	this._polypoints = [];
	this._polyline = null;
	this._bounds = null;
	this._visible = false;
	this._mileposts = null;
	this._distance = 0;
	
	this._options = {
		strokeColor: "#FF0000",
		strokeOpacity: 1.0,
		strokeWeight: 2
	}
}

HTCMaps.Leg.prototype = {

	show: function() {
		if (this._visible) return;
		this.showPolyline();
		this.showMileposts();
		
		$('#dist').html(this._distance);
		
		this._map.fitBounds(this.getBounds());
		this._visible = true;
	},
	
	hide: function() {
		if (!this._visible) return;
		this._polyline.setMap(null);
		this.hideMileposts();
		this._visible = false;
	},

	showPolyline: function() {
		if (this._polyline == null) {
			this.createPolyline();
		}
		this._polyline.setMap(this._map);
	},
	
	createPolyline: function() {
		if (this._polyline != null) return;
	
		var total = 0;
		for (var i=0; i<this._data.points.length; i++) {
			var pt = this._data.points[i];
			total += pt.dist;
			this._polypoints.push(new google.maps.LatLng(pt.lat, pt.lng));
		}
		var opts = this._options;
		opts.path = this._polypoints;
		
		this._distance = Math.round(total*1000)/1000;
		this._polyline = new google.maps.Polyline(opts);		
	},

	showMileposts: function() {
		if (this._mileposts == null) {
			this.createMileposts();
		}
		
		for(var i=0; i<this._mileposts.length; i++) {
			this._mileposts[i].setMap(this._map);
		}
	},
	
	hideMileposts: function() {
		if (this._mileposts == null) return;
		
		for(var i=0; i<this._mileposts.length; i++) {
			this._mileposts[i].setMap(null);
		}
	},
	
	createMileposts: function() {
		this._mileposts = [];
		for(var i=0; i<this._data.mileposts.length; i++) {
			var pt = this._data.mileposts[i];
			this._mileposts[i] = new google.maps.Marker({
				position: new google.maps.LatLng(pt.lat, pt.lng), 
				title: "Mile " + (i+1),
				icon: "images/icons/icong" + (i+1) + ".png"
			});   	
		}
	},
	
	getBounds: function() {
		if (this._bounds != null) return this._bounds;
		
		this._bounds = new google.maps.LatLngBounds();
		var path = this._polyline.getPath();
		
		for (var i=0; i<path.getLength(); i++) {
			var pt = path.getAt(i);
			this._bounds.extend(pt);
		}
		
		return this._bounds;
	},
	
	getEnd: function(which) {
		return this._data[which];
	},

	getDesc: function() {
		return this._data.desc;
	},
	getName: function() {
		return this._data.name;
	}
	
};