var map = null;
var center;
var loaded_markers = new Array();

window.onload = GetMap;

window.onunload = function () {
	if ( map ) {
		GUnload ();
	}
}

function LoadNewMarkers ()
{
	var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();

    var data = {
    	xl: southWest.lat (),
    	yl: southWest.lng (),
    	xr: northEast.lat (),
    	yr: northEast.lng ()
    };

    client_request ( 'hotels', 'get_points', '', 'GET', data, 'AfterMoveMap' );
}

function CreateMarker ( point, cloud, markerOptions )
{
	var marker = new GMarker ( point, markerOptions );

	var dist = center.distanceFrom ( point );

	GEvent.addListener ( marker, 'click', function () {
		marker.openInfoWindowHtml ( cloud );
	} );

	return marker;
}


function AfterMoveMap ( data )
{
	var baseIcon = new GIcon ();
	baseIcon.image = "http://otelrent.ru/images/hotel.png";
	baseIcon.iconSize = new GSize ( 20, 23 );
	baseIcon.iconAnchor = new GPoint ( 10, 23 );
	baseIcon.infoWindowAnchor = new GPoint ( 9, 2 );
	baseIcon.infoShadowAnchor = new GPoint ( 18, 25 );

	markerOptions = {
		icon: baseIcon
	};

	for ( var i = 0; i < data.points.length; i++ )
	{
		if ( loaded_markers[data.points[i].id] != 1 )
		{
			var point = new GLatLng ( data.points[i].lat, data.points[i].lng );
			var marker = CreateMarker ( point, data.points[i].cloud, markerOptions );

			map.addOverlay ( marker );

			loaded_markers[data.points[i].id] = 1;
		}
	}
}

function GetMap ()
{
	if ( GBrowserIsCompatible () )
	{
		function MyZoomControl () {}

		MyZoomControl.prototype = new GControl();

		MyZoomControl.prototype.initialize = function ( map )
		{
			var container = document.createElement ( 'div' );

			var zoomInDiv = document.createElement ( 'div' );
			this.setButtonStyle_ ( zoomInDiv, 'plus' );
			container.appendChild ( zoomInDiv );
			GEvent.addDomListener ( zoomInDiv, 'click', function()
			{
				map.zoomIn ();
			} );

			var zoomOutDiv = document.createElement ( 'div' );
			this.setButtonStyle_ ( zoomOutDiv, 'minus' );
			container.appendChild ( zoomOutDiv );
			GEvent.addDomListener ( zoomOutDiv, 'click', function ()
			{
				map.zoomOut ();
			} );

			map.getContainer().appendChild ( container );
			return container;
		}

		MyZoomControl.prototype.getDefaultPosition = function ()
		{
			return new GControlPosition ( G_ANCHOR_TOP_LEFT, new GSize ( 7, 7 ) );
		}

		MyZoomControl.prototype.setButtonStyle_ = function ( button, type )
		{
			button.style.backgroundImage = 'url(/images/' + type + '.png)';
			button.style.marginBottom    = '3px';
			button.style.width 			 = '40px';
			button.style.height 		 = '40px';
			button.style.cursor 		 = 'pointer';
		}

		map = new GMap2 ( document.getElementById( 'google_map' ) );

		map.addControl ( new MyZoomControl () );
		map.addControl ( new GScaleControl );
		map.addControl ( new GMapTypeControl () );
		center = new GLatLng ( 59.933774, 30.335827 );

		GEvent.addListener ( map, 'moveend', function () {
			LoadNewMarkers ();
		} );

		GEvent.addListener ( map, 'zoomend', function () {
			LoadNewMarkers ();
		} );

		map.setCenter ( center, 13 );
	}
}