// this function is to just make the inline js lighter
function makeProp(properties, id, lat, lon, address1, name_town, name_county, outcode, asking_price, name_type, bedrooms, bathrooms, receptions, name_outside, images) {
  var property = {
      id           : id
    , lat          : lat
    , lon          : lon
    , address1     : address1
    , name_town    : name_town
    , name_county  : name_county
    , outcode      : outcode
    , asking_price : asking_price
    , name_type    : name_type
    , bedrooms     : bedrooms
    , bathrooms    : bathrooms
    , receptions   : receptions
    , name_outside : name_outside
		, images       : $w(images)
  };
	properties.push(property);
}


activateGmap = function(map_div, property_html, properties, zoom, hidecontrols) {
	if (GBrowserIsCompatible()) {
    var property_temp = new Template(property_html);
		var image_template = new Template('<a href="#{property_url}" id="#{id}_#{images[0]}"><img src="http://assets.tepilo.com/assets/images/home/home#{id}/small/#{images[0]}?v='+client_v+'" id="gmap_image_file" width="186" height="140" alt="Image of property [Click to view property]" title="Image of property [Click to view property]" /></a>');
		var thumb_template = new Template('<li #{add_class}><a href="javascript:void(0)" id="#{id}_#{filename}" onclick="$(\'gmap_image_file\').src=\'http://assets.tepilo.com/assets/images/home/home#{id}/small/#{filename}?v='+client_v+'\'"><img src="http://assets.tepilo.com/assets/images/home/home#{id}/small/#{filename}?v='+client_v+'" width="50" height="32" alt="Click to enlarge" title="Click to enlarge" /></a></li>');

		// dont' cluster if there are only a few markers
		var use_clustering = (properties.size() > 10);
		use_clustering = true;

		var map = new GMap2(document.getElementById(map_div));
		map.setCenter(new GLatLng(0,0), zoom);
		
		// start with the default ui
		var mapUi=map.getDefaultUI();
		if (hidecontrols) {
			// hide all the controls
			mapUi.controls.maptypecontrol=false;
			mapUi.controls.menumaptypecontrol=false;
			mapUi.controls.scalecontrol=false;
			mapUi.controls.smallzoomcontrol3d=false;
			mapUi.controls.largemapcontrol3d =false;
		}
		map.setUI(mapUi);
		
		// setup the icon
		var baseIcon = new GIcon(G_DEFAULT_ICON);
		baseIcon.image = "/images/gmaps/marker_sml.png";
		baseIcon.iconSize = new GSize(21, 33);
		baseIcon.shadowSize = new GSize(30, 20);
		baseIcon.iconAnchor = new GPoint(10, 33);
		baseIcon.infoWindowAnchor = new GPoint(10, 20);
		var markerOptions = { icon:baseIcon };

    // called when someone clicks on a marker on the map
		function pointClicked(point) {
		  var property = point_map.get(point);
		  
      // html not been built yet?
      if (!$('gmap_overlay_' + property.id)) {
        // first we need to pre-process the data a little
        var prop = Object.clone(property);
        prop.bedrooms     = addLabel(prop.bedrooms, 'Bedroom');
        prop.bathrooms    = addLabel(prop.bathrooms, 'Bathroom');
        prop.receptions   = addLabel(prop.receptions, 'Reception');
        prop.name_type    = appendBR(prop.name_type);
        prop.bedrooms     = appendBR(prop.bedrooms);
        prop.bathrooms    = appendBR(prop.bathrooms);
        prop.receptions   = appendBR(prop.receptions);
        prop.property_url = makePropertyName(prop);
        
        // build the image html
				prop.image_html = '';
				if (prop.images.length > 0)
        	prop.image_html = image_template.evaluate(prop);

				// and the thumbs html
				prop.thumbs_html = '';
				var add_class = ' class="nopad"';
				prop.images.each(function(filename){
          prop.thumbs_html += thumb_template.evaluate({id:prop.id, filename:filename, add_class:add_class});
					add_class = '';
				});
				
        // now build the property html
        var prop_html = property_temp.evaluate(prop);
        
        // and add the new element to the page
        $('property_overlays').insert(prop_html);

				// finally, attach the image event stuff
      }
		  
      // show the popover
		  property.marker.openInfoWindow($('gmap_overlay_' + property.id));
		}

    // maps the gmap points to the property data
		var point_map = new Hash();
		
    function addToMap(property) {
      // create the map stuff
    	var point = new GLatLng(property.lat, property.lon);
			var marker = new GMarker(point, markerOptions);
			GEvent.addListener(marker, "click", pointClicked);
      markers.push(marker);

			// map the point to the property
			property.marker = marker;
			point_map.set(point, property);
			
			// add it to the map
			if (!use_clustering)
				map.addOverlay(marker);

      // extend the bounds to cover this point
    	bounds.extend(point);
    }
		
		// setup a default bounds
		var bounds = new GLatLngBounds();
		var markers = new Array();

		properties.each(function(property){
			addToMap(property);
		});

		// shuffle the map to fit the results
		map.setCenter(bounds.getCenter());
		if (zoom == 0)
			map.setZoom(map.getBoundsZoomLevel(bounds));

		if (use_clustering) {
			// cluster the markers
			var style_gen = { url:'/images/gmaps/cluster_marker3.png', height:29, width:29, opt_anchor:[4,0], opt_textColor:'white' };
			var markerCluster = new MarkerClusterer(map, markers, { gridSize:35, maxZoom:14, styles:[style_gen, style_gen, style_gen]});			
		}
		
		function appendBR(value) {
		  if (value.length > 0)
		    return value + '<br />';
		  return value;
	  }
	  
		function addLabel(num_of, label) {
		  switch(num_of)
      {
      case 0:
        return '';
      case 1:
        return num_of.toString() + ' ' + label;
      default:
        return num_of.toString() + ' ' + label;
      }
		}
		
		function makePropertyName(prop) {
			var address1 = '';
			var town = '';
			var outcode = '';

			if (prop.address1.length > 0)
				address1 = url_name(prop.address1) + '_';
			if (prop.name_town.length > 0)
				town = url_name(prop.name_town) + '_';
			if (prop.outcode.length > 0)
				outcode = url_name(prop.outcode) + '_';

			return '/property/' + prop.id.toString() + '/' + address1 + town + outcode + '/';
		}
		
		function url_name(str) {
			return str
				.gsub(/'/, '')
				.toLowerCase()
				.gsub(/[^0-9a-zA-Z]/, '_')
				.gsub(/_+/, '_')
				.gsub(/^_|_$/, '');
		}

	}
}