<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<style type="text/css">
/*.post img{background-color: transparent;*/

*{ margin: 0; padding: 0; }
html, body, #map_canvas
{
	width: 100%;
	height: 350px;
}
img
{
	border: 0;
}
.contentMap
{
	width: 430px;
	border: 1px solid #336699;
	max-height:465px;
	overflow:auto;
}
.contentImg
{
	float: left;
	width: 100px;
	margin-right: 10px;
	text-align: center;
}
.contentImg a
{
	color: #369;
	font-size: 10px;
}
.contentTxt
{
	float: left;
	width: 55%;
}
.clear{ clear: both; }

</style>
<script type="text/javascript">
  var initialLoc;
  var the_map = null;
  var markersArray=[];
  var currency = "<?php echo get_option('cp_curr_symbol'); ?>";
  var no_thumb = "<?php echo plugins_url('/geo-ads/img/no-thumb.jpg'); ?>";
  var geocoder = new google.maps.Geocoder();

function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

  function loadMap(geoloc)  {
  	var latlng = new google.maps.LatLng(-25.344918, 131.033587);
	initialLoc = latlng;
       var myOptions = {
		zoom: 2,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.TERRAIN
	};

		the_map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

		var map_cookie = getCookie("map_cookie");
		var loc = gup('loc');

		if (loc == "" && geoloc != true && map_cookie != null && map_cookie != "") {
			map_cookie = map_cookie.split(",");
			var bounds = new google.maps.LatLngBounds();
			bounds.extend(new google.maps.LatLng(map_cookie[0], map_cookie[1]));
			bounds.extend(new google.maps.LatLng(map_cookie[2], map_cookie[3]));
			the_map.fitBounds(bounds);
		} else if (loc != "" && loc != "current") {
			loc = decodeURIComponent(loc);
			geocoder.geocode( { 'address': loc}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        the_map.setCenter(results[0].geometry.location);
	 the_map.setZoom(13);
      }
    });
		} else {
			initGeolocation();
		}

	google.maps.event.addListener(the_map, 'bounds_changed', function() {
		rememberLoc();
		currentPlaceName();
		refreshAds();
	});
}

	function refreshAds() {

	jQuery('#block1').html('<img src="/wp-content/themes/classipress/images/ajax-loading.gif" style="margin-top: 30px; margin-left: 45%" />');	 var bounds = the_map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();

        var data = {
            action: 'query_geo_ads',
	     range: 'true',
            exclude_categories : '',
            term_id : '0',
            term_slug : '',
            taxonomy_name : '',
            northeast_lng : northEast.lng(),
            northeast_lat : northEast.lat(),
            southwest_lng : southWest.lng(),
            southwest_lat : southWest.lat()
        };

        var ajaxurl = '/wp-admin/admin-ajax.php';

        // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
        jQuery.get(ajaxurl, data, function(response) {
            jQuery('#block1').html(response);

            xOffset = 10;
            yOffset = 30;

            jQuery('a.preview').hover(function(e){
                adTitle = jQuery(this).find('img').attr('alt');
                jQuery('body').append("<div id='preview'><img src='"+ this.rel +"' alt='' /><p>"+ adTitle +"</p></div>");
                jQuery('#preview')
                .css('top', (e.pageY - xOffset) + 'px')
                .css('left', (e.pageX + yOffset) + 'px')
                .fadeIn('fast');
            },
            function(){
                jQuery('#preview').remove();
            });
            jQuery('a.preview').mousemove(function(e){
                jQuery('#preview')
                    .css('top', (e.pageY - xOffset) + 'px')
                    .css('left', (e.pageX + yOffset) + 'px');
            });
        });
	}

	function currentPlaceName() {
		var latlng = the_map.getCenter();
		geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
          jQuery('#l').val(results[1].formatted_address);
        } else if (results[0]) {
          jQuery('#l').val(results[0].formatted_address);
        }
	}
    });
	}

  function initGeolocation()
    {
	if( navigator.geolocation )
         {
              // Call getCurrentPosition with success and failure callbacks
              navigator.geolocation.getCurrentPosition( success, fail );
         }
         else
         {
              alert("Sorry, your browser does not support geolocation services.");
         }
    }

    function success(position)
    {
         var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
         the_map.setCenter(coords);
	  the_map.setZoom(13);
    }

	function rememberLoc() {
		var bounds = the_map.getBounds();
		var ne = bounds.getNorthEast();
		var sw = bounds.getSouthWest();
		var lat1 = sw.lat();
		var long1 = sw.lng();
		var lat2 = ne.lat();
		var long2 = ne.lng();
		setCookie('map_cookie', lat1 + ',' + long1 + ',' + lat2 + ',' + long2, 100);
	}

    function fail()
    {
         // Could not obtain location
    }

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

  // MAIN
  jQuery(document).ready(function(){
		loadMap();

		// get ads
  		var data = {
			action: 'query_geo_ads'
		};

		jQuery.get(ajaxurl, data, function(r){
  			var ads = jQuery.parseJSON(r);
			if (ads.length)
				process(ads);
  		});

		// end get ads
  		function process(ads)
		{
			var bounds = new google.maps.LatLngBounds();
			jQuery.each(ads, function(k, v){
				var coord = new google.maps.LatLng(parseFloat(v.lat) + (Math.random()-.5)/150000, parseFloat(v.lng) + (Math.random()-.5)/150000);
				var mark = new google.maps.Marker({	position: coord, map: the_map});
				// on click Marker
				google.maps.event.addListener(mark, 'click', function(){
					var infoW = new google.maps.InfoWindow();
					var data = {
						action: 'get_image_url',
						id: v.post_id
					};
					jQuery.post(ajaxurl, data, function(img){
					var nice_title =  (v.post_title.length >= 75) ? v.post_title.substring(0, 75)+'...' : v.post_title;
					if (v.price == null) v.price = '0';
					if (img)
							content = '<div id="contentInfoWindow class="contentMap">\
							<div class="contentImg">\
							<img src="'+img+'" />\
							</div>\
							<div class="contentTxt">\
							<a href="'+v.permalink+'"><h3>'+nice_title+'</h3></a>\
							<p>\
							Category: '+v.category+'\
							</p>\
							</div>\
							<div class="clear"></div>\
							</div>';
					else
							content = '<div id="contentInfoWindow class="contentMap">\
							<div class="contentImg">\
							<img src="'+no_thumb+'" />\
							</div>\
							<div class="contentTxt">\
							<a href="'+v.permalink+'"><h3>'+nice_title+'</h3></a>\
							<p>\
							Category: '+v.category+'\
							</p>\
							Price: '+currency+v.price+'\
							</div>\
							<div class="clear"></div>\
							</div>';

						infoW.setContent(content);
					}); // ens ajax post
					infoW.open(the_map, this);
				}); // end onclick marker event handler
				markersArray.push(mark);
				bounds.extend(coord);
			});// end each
			var cluster = new MarkerClusterer(the_map, markersArray, {maxZoom: 15, minimumClusterSize: 4});
			//the_map.fitBounds(bounds);
			//cluster.fitMapToMarkers();
		}// end process

		// Total count
		jQuery.post(ajaxurl, {action: 'query_total'}, function(r){
				jQuery('#total_count').fadeOut('fast').html("Total Geocoded Ads: "+r).fadeIn('fast');
  		});

	jQuery('a.geo-link').click(function() {
		initGeolocation();
		return false;
	});
  });// end document ready

</script>
<div id="map_canvas"></div>
<div id="total_count"></div>