/* GOOGLE MAP
*************************************************************/
function setupMap() {
	var self = this;
	var infoCase = new Array();
	self.init = function(locations) {
		var myLatlng = new google.maps.LatLng(50.6, -124.1914720);
		var myOptions = {
		zoom: 6,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.HYBRID
		}
		var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		setMarkers(map,locations);
	}
			
	function setMarkers(map,locations) {
		// Add markers to the map
		
		// Marker sizes are expressed as a Size of X,Y
		// where the origin of the image (0,0) is located
		// in the top left of the image.
		
		// Origins, anchor positions and coordinates of the marker
		// increase in the X direction to the right and in
		// the Y direction down.
		var image = new google.maps.MarkerImage('/_img/map/map-icon-h2i.png',
			// This marker is 20 pixels wide by 32 pixels tall.
			new google.maps.Size(23, 29),
			// The origin for this image is 0,0.
			new google.maps.Point(0,0),
			// The anchor for this image is the base of the flagpole at 0,32.
			new google.maps.Point(0, 29)
		);
		var shape = {
			coord: [1, 1, 1, 20, 18, 20, 18 , 1],
			type: 'poly'
		};
		$.each(locations, function(i,locale){
			var myLatLng = new google.maps.LatLng(locale.long, locale.lat);
			var bubble_content = locale.address;
			bubble_content+=(bubble_content.length > 0) ? "<br />" + locale.city : locale.city;
			var marker = new google.maps.Marker({
				position: myLatLng,
				map: map,
				icon: image,
				image_tag: locale.image,
				shape: shape,
				title: locale.name,
				content: bubble_content,
				zIndex: i,
				url: locale.url
			});
			var j = i + 1;
			attachMessage(marker, i);
		});
		function attachMessage(marker, number) {
			var infowindowLevel = 0;
			if(marker.image_tag == "") {
				width = '265px';
			} else {
				width = '167px';
			}

			var contentString = '<div class="infoWindow" style="position: relative; width: 300px;">'+
			'<div class="image_corners" style="float: left; margin-right: 7px;">'+
			marker.image_tag +
			'<div class="img_tl"></div>'+
			'<div class="img_tr"></div>'+
			'<div class="img_bl"></div>'+
			'<div class="img_br"></div>'+
			'</div>'+
			'<div class="infoContent" style="width:'+
			width +
			'; float: left; position: relative; margin-right:15px;">'+
			'<span style="position: absolute;" class="corner_tl">&nbsp;</span>'+
			'<span style="position: absolute;" class="corner_tr">&nbsp;</span>'+
			'<span style="position: absolute; bottom:0; left: 0;" class="corner_bl">&nbsp;</span>'+
			'<span style="position: absolute; bottom:0; right: 0;" class="corner_br">&nbsp;</span>'+
			'<h2 style="background-color: #a0ce67; color: #fff; font-face: arial; font-size: 12px; line-height: 15px; font-weight: bold; padding: 5px 17px 5px 17px; margin: 0px;">' +         	
			marker.title +
			'</h2>'+
        	'<div class="infoDetails" style="padding: 7px 17px 7px 17px; line-height: 15px; background-color: #ededed; color: #828183; font-size: 11px; z-index:1000;">'+
			marker.content +
			'<br /><a href="/'+
			marker.url +
			'" style="display:block;">Learn more</a><br />'+
			'</div>'+
			'</div>'+
			'</div>';
			var infowindow = new google.maps.InfoWindow({
				content: contentString,
				zIndex: number,
				name: number
			});
			infoCase[number] = infowindow;
			google.maps.event.addListener(marker, 'click', function() {
				//$("#map_canvas .infoWindow").parent().parent().parent().parent().each(function() { $(this).css("display","none") });
				for(i=0; i<infoCase.length; i++) {
					infoCase[i].close();
				}
				//infowindow.close();
				infowindow.setZIndex(++infowindowLevel);
				infowindow.open(map,marker);
			});
		}
	}

	//self.init();
}