var map ;
var myOptions 
var  latlng ;
var marker;
var mapDiv;
var geocoder;  
var address = ' Clifton Hill, melbourne, australia';
//bed, bath, car
var utilities_container ;
var map_thumb;



// when the DOM is ready
$(document).ready (function() {
 
 address = $('#property_address').html();
 utilities_container=$('#utilities_container').html();
 map_thumb = $('#thumb0').html();

   $(showmap)
   
   .hover(function(){
		$(this).css({cursor:'hand', cursor:'pointer'});
	 })
   
   .click(function(){
				   
	   initializeMap() ;				
	})
   
	$('.thumbs')
	
	.each(function(){  
		
		loadFullImage($(this));		
		
	})
	
	.hover(function(){		
		$(this).css({cursor:'hand', cursor:'pointer'});
		swapImage($(this));
		//showImage($(this));
		//setImage($(this).attr('src'));
      })
	
	
	
});
function clearLoader(){
	removeImg();
	removeMap();

}
function removeImg(){
	$('#loader>img').remove();
}
function removeMap(){
	$('#loader>div').remove();
}

function swapImage(thumb){
	
	if($('#loader>img').attr('src') != thumb.attr('id')) showImage(thumb);
}
function showImage(thumb){
	
      $('#preloader').find('img').each(function(){
										
			if($(this).attr('src') ==thumb.attr('id')){
				
			//
		    //removeImg();
			clearLoader();
			 $('#loader')			  
		       // then insert our image
               .append(this);		
			   
		      $(this).fadeIn('slow');
			//  $(this).show();
			  
			  //reload the image
			   loadFullImage(thumb);
			}
         
		})	
}
function loadFullImage(thumb){
	 //alert(thumb);
	var img = new Image();
	 
	 
	/* if( this.onloadFunction ){
       Event.observe( img, 'load', this.onloadFunction, false);
}
img.src = this.src;
  */
	   // once the image has loaded, execute this code
	 $(img).load(function () {
		
	    $(img).css('width','338px');	
        $(img).css('height','257px');
          // set the image hidden by default    
        $(this).hide();
	 
		$('#preloader').append(this);
	
		 showFirstImage(thumb);		
	 })
	   
	  $(img).attr('src',thumb.attr('id'));
}
function showFirstImage(thumb){
	
	 if( ($('#loader').find('img')).length ==0 ) showImage(thumb);
	
}
function showMap(){
	  clearLoader();
	  
	map = new google.maps.Map(document.getElementById("loader"), myOptions);
	marker = new google.maps.Marker({
    position: latlng,
	color: "346667",
	shadow:"346667",
    map: map,
	title:""
   
});
contentString="this is  a test";
var infowindow = new google.maps.InfoWindow({
    content: contentString
});

google.maps.event.addListener(marker, 'click', function() {

  infowindow.open(map,marker,{maxWidth: '280'});
});
	  
}
//initialise the map
 function initializeMap() {
	
	  if (GBrowserIsCompatible()) {	    
	     
	  createMapCanvas();
	  clearLoader();
		  
	  //alert('mapDiv'.$(mapDiv));
		$('#loader').append(mapDiv);		
			
        map = new GMap2(document.getElementById("map_canvas"));
		$(map).attr('id','googleMap');
        
		//showAddress(address) ;
		geocoder = new GClientGeocoder();
  geocoder.getLatLng(
    address,
    function(point) {
      if (!point) {
        alert(address + " not found");
      } else {
       map.setCenter(point, 15);
        var marker = new GMarker(point);
        map.addOverlay(marker);
	   GEvent.addListener(marker, 'click', function() {
                        marker.openInfoWindowHtml(html,{maxWidth: '280'});
    });
		  
      }
    }
  );

<!--	var html=address+"<img src='simplemap_logo.jpg'" +->
        <!-- "width='128' height='41'/> <br/>" +-->
      <!--   "USC GamePipe Lab<br/>" +-->
        <!-- "3650 McClintock Ave, Los Angeles CA";--->
    var html=markerContent();

		
      }
     
  }
  function createMapCanvas(){
	   mapDiv = $("<div><div>");
	  $(mapDiv).css('width','338px');
     $(mapDiv).css('height','257px');
	 $(mapDiv).attr('id','map_canvas');
	
  }
  function markerContent(){
	  var htmlContent;
	  htmlContent ='<table border="0" class="google_marker" width="98%">';
	  htmlContent +='<tr><td class="gmarker_address"><br/>'+address+'</td><td rowspan="3">'+map_thumb+'</td> </tr>'
      htmlContent +='<tr><td>&nbsp;</td></tr>';
	  htmlContent +='<tr><td>'+utilities_container+'</td></tr>';
	  htmlContent +='</table>';
	  
	  return htmlContent;
  }