(function($){
	PipMap = function(options){
		var self = this;
		self.map = null;
		self.canvas = $(options['canvas'])[0];
		self.thumbnail_box = $(options['thumbnails'])[0];
		self.lat = parseFloat(options['lat']);
		self.lng = parseFloat(options['lng']);
		self.zoom = parseInt(options['zoom']);
		self.center = new google.maps.LatLng(self.lat, self.lng);
		self.bounds = new google.maps.LatLngBounds();
		self.info_window = new google.maps.InfoWindow();
		self.markers_url = options['markers'];
		self.create = function(){
			var opts = {
				zoom: self.zoom,
				center: self.center,
				navigationControl: true,
				mapTypeControl: false,
				scaleControl: false,
				mapTypeId: google.maps.MapTypeId.TERRAIN,
				navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
			}
			self.map = new google.maps.Map(self.canvas, opts);
			self.get_markers(self.markers_url);
		}
		self.get_markers = function(path){
			$.ajax({
				url: path,
				dataType: 'html',
				cache: true,
				success: function(xml){
					$(xml).find('marker').each(function(i){
						var title = $(this).find('site_title').text();
						var link = $(this).find('site_link').text();
						var thumbnail = $(this).find('site_thumbnail').html();
						var description = $(this).find('site_description').text();
						var lat = parseFloat($(this).find('latitude').text());
						var lng = parseFloat($(this).find('longitude').text());
						var point = new google.maps.LatLng(lat, lng);
						var marker = new google.maps.Marker({ position: point, map: self.map });
						self.bounds.extend(point);					
						$(self.thumbnail_box).append('<li class="map_thumbnail" id="thumb_'+i+'">'+thumbnail+'</li>');
						var window_content =	'<div class="info_window"><a href="'+link+'">'+thumbnail+'</a><h3>'+title+'</h3>'+
												'<p>'+description+'</p><p><a href="'+link+'">Learn More</a></p></div>';
						google.maps.event.addListener(marker, 'click', function(){
							pan_info_window(marker, point, window_content);
						});
						$('#thumb_'+i).live('click', function(){
							pan_info_window(marker, point, window_content);
						});
					});
					self.map.fitBounds(self.bounds);
				}
			});
		}
		pan_info_window = function(marker, point, html){
			self.info_window.close();
			self.info_window.setContent(html);
			self.info_window.open(self.map, marker);
			self.map.panTo(point);
			self.map.panBy(130, -150);
		}
	}
})(jQuery);