var GarageSales = {
	map: null,
	info_window: null,
	
	markers: [],

	last_response: null,
	
	sidebar_item: null,
	infowindow_item: null,
	
	salepin: null,
	salepin_shadow: null,
	
	init: function() {
		var latlng = new google.maps.LatLng(53.639902, -113.62421); 
		var myOptions = {
			zoom: 13,
			center: latlng,
			scrollwheel: false,
			navigationControl: true,
			mapTypeControl: true,
			mapTypeControlOptions: {
				style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
			},
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		this.info_window = new google.maps.InfoWindow();
		
		this.initMarkers();
	},
	
	reset: function() {
		for (var i in this.markers) {
			this.markers[i].setMap(null);
		}
		
		this.markers = [];
		
		
		$('#results_list').empty();
	},
	
	initMarkers: function() {
		this.salepin = new google.maps.MarkerImage('/images/salepin.png',
												   new google.maps.Size(24, 32),
												   new google.maps.Point(0, 0),
												   new google.maps.Point(12, 30));
		
		this.salepin_shadow = new google.maps.MarkerImage('/images/salepin_shadow.png',
														  new google.maps.Size(40, 32),
														  new google.maps.Point(0, 0),
														  new google.maps.Point(12, 28));
	},
	
	addMarker: function(options, sale_id) {
		var marker = new google.maps.Marker(options);
	
		this.markers[sale_id] = marker;
		
		return marker;
	},
	
	bindInfoWindow: function(marker, map, infoWindow, html, sale_id) {
		google.maps.event.addListener(marker, 'click', function() {
			infoWindow.setContent(html);
			infoWindow.open(map, marker);

			$('#results_list li').removeClass('selected');
			$('#sidebar_sale_' + sale_id).addClass('selected');
		});
	},
	
	loadSalesData: function(sales) {
		for (var i = 0; i < sales.length; i++) {
			var marker = this.addMarker({
				position: new google.maps.LatLng(parseFloat(sales[i].getElementsByTagName("Latitude")[0].childNodes[0].nodeValue), parseFloat(sales[i].getElementsByTagName("Longitude")[0].childNodes[0].nodeValue)),
				map: this.map,
				shadow: this.salepin_shadow,
				icon: this.salepin,
				title: sales[i].getElementsByTagName("Address")[0].childNodes[0].nodeValue
			}, sales[i].getElementsByTagName("Id")[0].childNodes[0].nodeValue);
			
			this.buildSidebarItem(sales[i]);
			
			this.bindInfoWindow(marker, this.map, this.info_window, this.buildInfoWindowItem(sales[i]), sales[i].getElementsByTagName("Id")[0].childNodes[0].nodeValue);
		}
	},
	
	buildSidebarItem: function(sale) {
		var sidebar = $('<li>', {
			id: 'sidebar_sale_' + sale.getElementsByTagName("Id")[0].childNodes[0].nodeValue
		});
	
		$('<a>', {
			'class': 'sale_list_link',
			href: '#result_detail',
			text: sale.getElementsByTagName("Description")[0].childNodes[0].nodeValue ? sale.getElementsByTagName("Description")[0].childNodes[0].nodeValue : sale.getElementsByTagName("Address")[0].childNodes[0].nodeValue,
			id: 'fullsale_' + sale.getElementsByTagName("Id")[0].childNodes[0].nodeValue,
			click: function(e) {
				e.preventDefault();
				$('#results_list li').removeClass('selected');
				$(this).parents('li').addClass('selected');
				GarageSales.info_window.setContent(GarageSales.buildInfoWindowItem(sale));
				GarageSales.info_window.open(GarageSales.map, GarageSales.markers[sale.getElementsByTagName("Id")[0].childNodes[0].nodeValue]);
			}
		}).appendTo(sidebar);
		/*
		$('<span>', {
			'class': 'sale_list_address',
			text: sale.getElementsByTagName("Address")[0].childNodes[0].nodeValue
		}).appendTo(sidebar);
		*/
		if (sale.getElementsByTagName("Description")[0].childNodes[0].nodeValue){
			$('<span>', {
			'class': 'sale_list_dates',
			html: sale.getElementsByTagName("Address")[0].childNodes[0].nodeValue
		}).appendTo(sidebar);
		}
		
		$('<span>', {
			'class': 'sale_list_dates',
			html: sale.getElementsByTagName("DatesAndTimes")[0].childNodes[0].nodeValue
		}).appendTo(sidebar);
		
		$('#results_list').append(sidebar);
	},
	
	buildInfoWindowItem: function(sale) {
		var popupClass = 'popup_container';
		
		var wrapper = $('<div>');
		var container = $('<dl>');
		
		$('<h3>', {
			text: sale.getElementsByTagName("Description")[0].childNodes[0].nodeValue
		}).appendTo(container);
	
		$('<dt>', {
			text: 'Where:'
		}).appendTo(container);
		$('<dd>', {
			'class': 'popup_address',
			text: sale.getElementsByTagName("Address")[0].childNodes[0].nodeValue
		}).appendTo(container);
		
		$('<dt>', {
			text: 'When:'
		}).appendTo(container);
		$('<dd>', {
			'class': 'popup_dates',
			html: sale.getElementsByTagName("DatesAndTimes")[0].childNodes[0].nodeValue
		}).appendTo(container);
		
		if (sale.getElementsByTagName("IsUnbounded")[0].childNodes[0].nodeValue == 'True')
		{
			$('<dt>', {
				'style': 'color: red;',
				text: 'Note:'
			}).appendTo(container);
			
			$('<dd>', {
				'style': 'color: red;',
				html: 'Pin location may be incorrect!'
			}).appendTo(container);
		}
		wrapper.append(container);
		
		return '<div class="' + popupClass + '">' + wrapper.html() + '</div>';
	}
}