//== Globals used by functions ==
	var markers = new Array();
	var htmls = new Array();
	var timeoutId;
	var cycleIndex = 0;

	var map;
	var baseIcon;
	var zoom = 9;


//======== For FM.com ======
function exposeControls() {
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
}


function setZoom( i ){
	zoom = i;
}

//================================================================
function showMap() {
	// init script
    map = new GMap(document.getElementById("map"));
    GEvent.addListener(map, "moveend", function() {
	var center = map.getCenterLatLng();
	var latLngStr = '(' + center.y + ', ' + center.x + ')';
	document.getElementById("message").innerHTML = latLngStr;
    });




	baseIcon = new GIcon();
//	baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	baseIcon.iconSize = new GSize(24, 24); // heart.png
//	baseIcon.iconSize = new GSize(20, 34); // Google Marker
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 24);
	baseIcon.infoWindowAnchor = new GPoint(10, 12);
	baseIcon.infoShadowAnchor = new GPoint(19, 35);

//    map.centerAndZoom(new GPoint(0.1249,52.2049), 9);
    map.centerAndZoom(new GPoint(0.1249,51.0), zoom);
}

//================================================================
function getMiniProfile( index, name, age, score, scoreColour, summary, imgUrl, linkUrl, place, distance, stars, cssClass ){
	var leftWidth = Math.round(score / 3);
	var rightWidth = 33 - leftWidth;

	if (distance == "") {
		dispDistance = ""; // Didn't have postcode to get distance
	}
	else if (distance < 3) {
		dispDistance = ": <3 miles";
	}
	else {
		dispDistance = " : " + distance + " miles";
	}
	
  	var starcells = "";
	for (var i = 0; i < stars; i++) {
    	starcells = starcells + "<td><img src=\"/images/star10full.gif\" alt=\"\"></td>";
	}

	var miniProfile = "\
    <table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" style=\"border: 1px solid gray;  border-bottom: 2px solid gray;\"> \
        <tr> \
            <td style=\"text-align:center; vertical-align: top; padding: 2px; font-size: 1pt;\"> \
                <a style=\"text-decoration: none; border:0; color: #293C29;\" href=\"" + linkUrl + "\"> \
		    		<img src=\"" + imgUrl + "\" /> \
                </a> \
            </td> \
            <td style=\"font-size: 9pt; border:0px;padding:0px; margin:0px; vertical-align:top\"> \
                \
		 		<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" style=\"display:block;padding:0px; margin:0px; width: 220px; \"> \
			 		<tr> \
			 			<td style=\"width:150px; height:19px; background-color: #d0d0d0; padding:0px; margin:0px;font-size: 9pt;\"> \
				 			<span style=\"padding-left: 5px; font-weight: bold;\" \
				 				>" + index + " : <a style=\"color: #406040;\" href=\"" + linkUrl + "\">" + name + "</a></span><span \
	                    	style=\"font-size: 9pt;\">, " + age + "</span> \
                    	</td> \
						\
			 			<td style=\"padding:0; margin:0; height: 19px; background: #d0d0d0; color: #404040;\"> \
                            <table cellpadding=\"0\" cellspacing=\"0\" border=\"1\" style=\"width: 35px; height: 9px; border: 1px solid gray; margin:5px 0px 5px 5px;\"> \
                                <tr> \
                                    <td style=\"padding:0; margin:0; background: " + scoreColour + ";font-size:1pt;\"> \
                                    	<img src=\"/images/1x1.gif\" height=\"7px\" width=\"" + leftWidth + "px\" /> \
                                    </td> \
                                    " + ( rightWidth <= 0 ? "" : "<td style=\"font-size:1pt;\"> \
                                    	<img src=\"/images/1x1.gif\" height=\"7px\" width=\"" + rightWidth + "px\" /> \
                                    </td>" ) + " \
                                </tr> \
                            </table>\
                        </td> \
                        <td style=\"background-color: #d0d0d0; width:35px; text-align:right; padding: 0 2px 0 0; margin: 2px 2px 0 0; font-size: 8pt;\"> \
                            " + Math.round(score) + "% \
                        </td> \
                    </tr> \
	                <tr> \
		                <td colspan=\"3\" style=\"padding-left: 5px; font-size:8pt; color: #404080;\" style=\"font-size: 8pt; padding-left: 5px; color: #404080; height: 30px;\"> \
                            <table title=\"Indicates profile quality in terms of completeness and clarity of photo\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" \
                            	   style=\"float: right; background: none; width: 0px; border: 0px solid gray; margin-right: 0px; margin-top: 2px;\"> \
                                <tr> \
                                " + starcells + " \
                    			</tr> \
                            </table>\
		                    " + summary + " \
	                    </td> \
                    </tr> \
	                <tr> \
		                <td colspan=\"3\" style=\"padding-left: 5px; font-size:8pt;\"> \
		                    " + place + dispDistance + " \
	                    </td> \
                    </tr> \
                </table> \
            </td> \
        </tr> \
    </table> \
  </div> \
</div>";
	return miniProfile;
}
// end getMiniProfile()



//=======================================================
// Add marker
//=======================================================
function addMarker( marker, html ){
	markers[markers.length] = marker;
	htmls[htmls.length] = html;
}

//=======================================================
// Cycle to next info box
//=======================================================

function cycle() {

	markers[cycleIndex].openInfoWindowHtml( htmls[cycleIndex] );

	cycleIndex++;
	if (cycleIndex >= markers.length) cycleIndex = 0;

	timeoutId = setTimeout("cycle()", 5000 ); // 5 secs
}



//=======================================================
// Creates a marker with an index, position, and content
//=======================================================
function createMarker(index, lat, lon, name, age, score, scoreColour, summary, imgUrl, profileUrl, place, distance, stars, markerImage, cssClass) {


  var point = new GPoint(lon, lat);

  // Create a lettered icon for this point using our icon class from above


  var letterIndex = (index - 1) % 10;
  var letter = String.fromCharCode("A".charCodeAt(0) + letterIndex);

  var icon = new GIcon(baseIcon);
  icon.image = markerImage;
  var marker = new GMarker(point, icon);

  var html = getMiniProfile( index, name, age, score, scoreColour, summary, imgUrl, profileUrl, place, distance, stars);
  // var html = name + summary + '<a href="' + profileUrl + '"><img src="' + imgUrl + '"/></a>';

  addMarker( marker, html );

  // document.write( html );  // unlikely to work in IE

  return marker;
}

//=======================================================
// Adds marker to map
//=======================================================
function _createMarker(marker, html) {
	  	// Show info window when this marker is clicked
	  	// NOTE: This must be as a function
	  	GEvent.addListener(marker, "click",
	  		function() {						// INLINE function definition
		  	  clearTimeout( timeoutId );
	  		  marker.openInfoWindowHtml(html);
		  	} );

		// Show bubble on map
 		map.addOverlay(marker);
}

//================================================================
// == showMarkers - creates instances for all markers that were added with addMarker()
function showMarkers() {

  	for( i=0; i < markers.length; i++ )
  	{
	  	_createMarker( markers[i], htmls[i] );
 	}
}