function MapControls(controlDiv, map) {


  $(controlDiv).attr('id','map_icon_container');


  var sizeControlUI = document.createElement('DIV');

  $(sizeControlUI).attr('id','map_size_icon');
  $(sizeControlUI).attr('title','resize map');
  controlDiv.appendChild(sizeControlUI);
  
  var closeControlUI = document.createElement('DIV');
  $(closeControlUI).attr('id','map_close_icon');
  $(closeControlUI).attr('title','close map');
  controlDiv.appendChild(closeControlUI);

  google.maps.event.addDomListener(sizeControlUI, 'click',size_map );
  google.maps.event.addDomListener(closeControlUI, 'click',close_map );
}


function load_map(lat,lng,zoom,centreLat,centreLng,mapType) {
    var latlng = new google.maps.LatLng(lat,lng);
	var centrelatlng = new google.maps.LatLng(centreLat,centreLng);
    var myOptions = {
      zoom: zoom,
      center: centrelatlng,
      mapTypeId: mapType,
	  navigationControl: true,
      navigationControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
      }
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
	
	var myControlDiv = document.createElement('DIV');
	var myControl = new MapControls(myControlDiv, map);

  	myControlDiv.index = -1;
	map.controls[google.maps.ControlPosition.LEFT_TOP].push(myControlDiv);



	
	var markerSize = new google.maps.Size(30,30);
	var markerOrigin = new google.maps.Point(0,0);
	var markerCentre = new google.maps.Point(15,15);
	var myMarkerImage = new google.maps.MarkerImage("/images/map_star.png",markerSize,markerOrigin,markerCentre);
	
	var myOptions = { 
		position: latlng,
		map: map,
		clickable: false,
		icon: myMarkerImage
	};
	
	var marker = new google.maps.Marker(myOptions);
	
	return map;
}

function show_map() {
	if(!map_large) {
		$('#map_underlay').css('left',($('#image_main').width()/2-268) + 'px');
		$('#map_underlay').css('top',($('#image_main').height()/2-228) + 'px');
	}
    $('#map_underlay').css('display','block');
	$('#map_underlay').fadeTo(500,1);
	theMap = load_map(gps_lat,gps_long,13,gps_lat,gps_long,google.maps.MapTypeId.HYBRID);
	$('#map_underlay').draggable({ cancel: "#map_canvas, #map_icon_container", containment: "document", opacity: 0.75, handle: "#map_container_outer" });
}

function close_map() {
	$('#map_underlay').fadeTo(500,0);
	$('#map_underlay').css('display','none');	
}

function size_map() {
	if(!map_large) {
		map_large = true;
		$('#map_underlay').draggable("destroy");
		$('#map_underlay').css('top','0');
		$('#map_underlay').css('left','0');
		$('#map_underlay').css('height',$('#image_main').height() + 'px');
		$('#map_underlay').css('width',$('#image_main').width() + 'px');
		$('#map_canvas').css('left','-7px');	
		$('#map_canvas').css('top','-7px');	
		$('#map_canvas').css('height',$('#image_main').height() + 'px');
		$('#map_canvas').css('width',$('#image_main').width() + 'px');
		var zoom = theMap.getZoom();
		var centreLat = theMap.getCenter().lat();
		var centreLng = theMap.getCenter().lng();
		var mapType = theMap.getMapTypeId();
		theMap = load_map(gps_lat,gps_long,zoom,centreLat,centreLng,mapType);
		$('#map_caption').hide();
	} else {
		map_large = false;
		$('#map_underlay').css('top','');
		$('#map_underlay').css('left','');
		$('#map_underlay').draggable({ cancel: "#map_canvas, #map_icon_container", containment: "document", opacity: 0.75, handle: "#map_container_outer" });
		$('#map_underlay').css('left',($('#image_main').width()/2-278) + 'px');
		$('#map_underlay').css('top',($('#image_main').height()/2-238) + 'px');
		$('#map_underlay').css('width','536px');
		$('#map_underlay').css('height','456px');
		$('#map_canvas').css('left','10px');	
		$('#map_canvas').css('top','10px');	
		$('#map_canvas').css('height','400px');
		$('#map_canvas').css('width','500px');
		var zoom = theMap.getZoom();
		var centreLat = theMap.getCenter().lat();
		var centreLng = theMap.getCenter().lng();
		var mapType = theMap.getMapTypeId();
		theMap = load_map(gps_lat,gps_long,zoom,centreLat,centreLng,mapType);
		$('#map_caption').show();
	}
	
}




var map_large;
var theMap;


$(function() {
    map_large = false;
	$('#map_underlay').css('opacity',0);
    $('#show_map').bind('click',show_map);
	$('#map_close a').bind('click',close_map);
});