/*
 * Bespoke tool-tips for CC
 */

//	globally available data
var data;
$.ajax({
	type: 'GET',
	url: '/cathedrals/scorelist/',
	dataType: 'xml',
	success: function(xml) {
		data = xml;
	}
});

var scorelist = '<h2>Scores</h2> \
	<ul> \
	<li class="category architectural-features"></li> \
	<li class="score"></li> \
	<li class="category cafe"></li> \
	<li class="score"></li> \
	<li class="category dead-people"></li> \
	<li class="score"></li> \
	<li class="category stories-trivia"></li> \
	<li class="score"></li> \
	<li class="category treasures"></li> \
	<li class="score"></li> \
	</ul>';

$('#details').html(scorelist);

function CustomMarkerToolTip(map, text) {

	this.map = map;
	this.tooltip = $('<div style="display: none; \
								position: absolute; \
								z-index:20000" \
								class="map-tooltip">' + text + '</div>');
	this.scorelist = scorelist;

	this.get_overlay = function(map) {

		/*
		 * creates and returns an overlay layer that
		 * we can use to help get an individual markers
		 * coordinates
		 */

		var overlay = new google.maps.OverlayView();
		overlay.draw = function(){}
		overlay.setMap(map);
		return overlay

	};

	//	only calculate this one time per request
	this.overlay = this.get_overlay(this.map);

	this.build_tooltip = function(marker)	{
		var self = this;

		$('#map_canvas').prepend(this.tooltip)
				
		//  Map world relative to map container
		var proj = this.overlay.getProjection();
		var pos = marker.getPosition();
		var p = proj.fromLatLngToContainerPixel(pos);

		var x = p.x - 70 + this.tooltip.width();
		var y = p.y - 30 + this.tooltip.height() / 2;

		//	tune CSS
		this.tooltip.css({ 
			top: y,
			left: x
		});

	};

	this.addMarker = function(marker) {

		var self = this;

		google.maps.event.addListener(marker, 'mouseover', function(event) {
			self.build_tooltip(marker)
			self.tooltip.animate({"opacity": "toggle"}, 300);
			if(self.scores)
				$('#details').html(self.scores);
			else
				$('#details').html(self.scorelist);
		});

		google.maps.event.addListener(marker, 'mouseout', function(event) {
			self.tooltip.fadeOut(0);
		});

	};

	this.getScores = function(features) {
		self = this;
		if (!self.scores) {
			self.scores = $(data).find('cathedral[id="'+self.id+'"] scores')
		}
		return self.scores;
	};

	this.buildScoreList = function() {
		self = this;

		if(!self.scores) {
			self.scores = self.getScores();
		}

		var scores = '';
		$(self.scores).find('category').each(function() {
			var category = $(this).text();
			var slug = $(this).attr('slug');
			var score = $(this).attr('score');
			scores += '<li class="category '+ slug + '"></li><li class="score">' + score + '</li>'
		});

		if (scores) {
			var title = '<h2>' + self.cathedral + '</h2>';
			var scorelist = '<ul>' + scores + '</ul>';
			var html = title += scorelist;
			return html;
		}

		return null
	};

	this.setCathedral = function(placemark) {
		var self = this;
		self.id = placemark.id;
		self.cathedral = placemark.name;
		self.scores = self.buildScoreList();
	}

};