//
// class.jcmsGMap.js
//

function jcmsGMap(pContainerId, pToggleId)
{
	this.containerNode = null;
	this.toggleNode = null;
	this.canvasNode = null;
	this.canvasBackgroundNode = null;
	this.map = null;
	this.mapLoaded = false;
	this.onMapLoadedListener = null;
	this.mapShown = false;
	this.marker = null;
	this.markerIcon = null;
	
	this.properties =
	{
		textShow: 'show map ▼',
		textLoading: 'loading map ►',
		textHide: 'hide map ▲',
		titleShow: 'Click to show map',
		titleLoading: 'Loading map may take some seconds ...',
		titleHide: 'Click to hide map',
		centerLatitude: 51.477338,
		centerLongitude: 0.0,
		zoom: 16,
		markerLatitude: null,
		markerLongitude: null,
		markerIconImage: null,
		markerIconImageWidth: null,
		markerIconImageHeight: null,
		markerIconShadow: null,
		markerIconShadowWidth: null,
		markerIconShadowHeight: null,
		onShowMap: null,
		onHideMap: null
	};
	
	if ((this.containerNode = jcmsNode(pContainerId)) === null)
	{
		throw 'jcmsGMap::constructor: invalid container id (' + pContainerId + ')';
	}
	this.toggleNode = jcmsNode(pToggleId);
}

jcmsGMap.prototype.showMap = function()
{
	if (typeof this.properties.onShowMap == 'function')
	{
		this.properties.onShowMap();
	}
	if (this.mapLoaded === true)
	{
		this.canvasBackgroundNode.style.visibility = 'visible';
		this.toggleNode.className
			= this.toggleNode.className.replace(/(\s?)(scShow|scLoading|$)/, '$1scHide');
		this.toggleNode.innerHTML = this.properties.textHide;
		this.toggleNode.title = this.properties.titleHide;
		this.mapShown = true;
	}
	else if (this.map === null)
	{
		this.toggleNode.className
			= this.toggleNode.className.replace(/(\s?)(scShow|scLoading|$)/, '$1scLoading');
		this.toggleNode.innerHTML = this.properties.textLoading;
		this.toggleNode.title = this.properties.titleLoading;
		this.initializeMap();
	}
}

jcmsGMap.prototype.hideMap = function()
{
	if (typeof this.properties.onHideMap == 'function')
	{
		this.properties.onHideMap();
	}
	this.canvasBackgroundNode.style.visibility = 'hidden';
	this.toggleNode.className
		= this.toggleNode.className.replace(/(\s?)(scHide|scLoading|$)/, '$1scShow');
	this.toggleNode.innerHTML = this.properties.textShow;
	this.toggleNode.title = this.properties.titleShow;
	this.mapShown = false;
}

jcmsGMap.prototype.onMapLoaded = function()
{
	google.maps.Event.removeListener(this.onMapLoadedListener);
	this.mapLoaded = true;
	this.showMap();
};

jcmsGMap.prototype.initializeMap = function()
{
	var ui = null
	
	this.map = new google.maps.Map2(this.canvasNode);
	ui = this.map.getDefaultUI();
	ui.maptypes.physical = false;
	ui.controls.overviewmapcontrol = true;
	
	this.map.setUI(ui);
	this.onMapLoadedListener
		= google.maps.Event.bind(this.map, 'tilesloaded', this, this.onMapLoaded);
	
	this.map.setCenter(
		new google.maps.LatLng(
			this.properties.centerLatitude,
			this.properties.centerLongitude),
		this.properties.zoom);
		
	if (typeof this.properties.markerLatitude == 'number'
		&& typeof this.properties.markerLongitude == 'number')
	{
		var markerOptions = {};
		
		if (typeof this.properties.markerIconImage == 'string')
		{
			this.markerIcon = new google.maps.Icon(G_DEFAULT_ICON);
			this.markerIcon.image = this.properties.markerIconImage;
			
			if (typeof this.properties.markerIconImageWidth == 'number'
				&& typeof this.properties.markerIconImageHeight == 'number')
			{
				this.markerIcon.iconSize =
					new google.maps.Size(
						this.properties.markerIconImageWidth,
						this.properties.markerIconImageHeight);
				this.markerIcon.iconAnchor =
					new google.maps.Point(
						this.properties.markerIconImageWidth / 2,
						this.properties.markerIconImageHeight / 2);
			}
			
			if (typeof this.properties.markerIconShadow == 'string')
			{
				this.markerIcon.shadow = this.properties.markerIconShadow;
				
				if (typeof this.properties.markerIconShadowWidth == 'number'
					&& typeof this.properties.markerIconShadowHeight == 'number')
				{
					this.markerIcon.shadowSize =
						new google.maps.Size(
							this.properties.markerIconShadowWidth,
							this.properties.markerIconShadowHeight);
				}
			}
			
			markerOptions.icon = this.markerIcon;
		}
		
		this.marker =
			new google.maps.Marker
			(
				new google.maps.LatLng
				(
					this.properties.markerLatitude,
					this.properties.markerLongitude
				),
				markerOptions
			);
		
		this.map.addOverlay(this.marker);
	}
}

jcmsGMap.prototype.Initialize = function(pProperties)
{
	this.SetProperties(pProperties);
	
	// Initialize nodes
	// toggleNode
	this.toggleNode.className = 'jcmsGMap_Toggle scShow';
	this.toggleNode.onclick = this.onToogleNodeClick;
	this.toggleNode.jcmsGMap = this;
	this.toggleNode.innerHTML = this.properties.textShow;
	this.toggleNode.title = this.properties.titleShow;
	this.toggleNode.onmouseover = function()
	{
		if (this.className.search(/scLoading/) == -1)
		{
			this.className
				= this.className.replace(/(\s?scMouseHover|$)/, ' scMouseHover');
		}
	};
	this.toggleNode.onmouseout = function()
	{
		this.className
			= this.className.replace(/(\s?scMouseHover)/, '');
	};
	// canvasNode
	this.canvasNode = document.createElement('div');
	this.canvasNode.id = this.containerNode.id + '_Canvas';
	this.canvasNode.className = 'jcmsGMap_Canvas';
	// canvasBackgroundNode
	this.canvasBackgroundNode = document.createElement('div');
	this.canvasBackgroundNode.id = this.containerNode.id + '_CanvasBackground';
	this.canvasBackgroundNode.className = 'jcmsGMap_CanvasBackground';
	this.canvasBackgroundNode.style.visibility = 'hidden';
	
	// Append nodes
	//this.containerNode.appendChild(this.toggleNode);
	this.containerNode.appendChild(this.canvasBackgroundNode);
	this.canvasBackgroundNode.appendChild(this.canvasNode);
}

jcmsGMap.prototype.SetProperties = function(pProperties)
{
	if (typeof pProperties == 'object')
	{
		// toogle
		if (typeof pProperties.textShow == 'string')
		{ this.properties.textShow = pProperties.textShow; }
		if (typeof pProperties.textLoading == 'string')
		{ this.properties.textLoading = pProperties.textLoading; }
		if (typeof pProperties.textHide == 'string')
		{ this.properties.textHide = pProperties.textHide; }
		if (typeof pProperties.titleShow == 'string')
		{ this.properties.titleShow = pProperties.titleShow; }
		if (typeof pProperties.titleLoading == 'string')
		{ this.properties.titleLoading = pProperties.titleLoading; }
		if (typeof pProperties.titleHide == 'string')
		{ this.properties.titleHide = pProperties.titleHide; }
		// center
		if (typeof pProperties.centerLatitude == 'number')
		{ this.properties.centerLatitude = pProperties.centerLatitude; }
		if (typeof pProperties.centerLongitude == 'number')
		{ this.properties.centerLongitude = pProperties.centerLongitude; }
		if (typeof pProperties.zoom == 'number')
		{ this.properties.zoom = pProperties.zoom; }
		// marker
		if (typeof pProperties.markerLatitude == 'number')
		{ this.properties.markerLatitude = pProperties.markerLatitude; }
		if (typeof pProperties.markerLongitude == 'number')
		{ this.properties.markerLongitude = pProperties.markerLongitude; }
		if (typeof pProperties.markerIconImage == 'string')
		{ this.properties.markerIconImage = pProperties.markerIconImage; }
		
		if (typeof pProperties.markerIconImageWidth == 'number')
		{ this.properties.markerIconImageWidth = pProperties.markerIconImageWidth; }
		if (typeof pProperties.markerIconImageHeight == 'number')
		{ this.properties.markerIconImageHeight = pProperties.markerIconImageHeight; }
		
		if (typeof pProperties.markerIconShadow == 'string')
		{ this.properties.markerIconShadow = pProperties.markerIconShadow; }
		
		if (typeof pProperties.markerIconShadowWidth == 'number')
		{ this.properties.markerIconShadowWidth = pProperties.markerIconShadowWidth; }
		if (typeof pProperties.markerIconShadowHeight == 'number')
		{ this.properties.markerIconShadowHeight = pProperties.markerIconShadowHeight; }
		
		// events
		if (typeof pProperties.onShowMap == 'function')
		{ this.properties.onShowMap = pProperties.onShowMap; }
		if (typeof pProperties.onHideMap == 'function')
		{ this.properties.onHideMap = pProperties.onHideMap; }		
	}
}

jcmsGMap.prototype.onToogleNodeClick = function()
{
	if (this.jcmsGMap.mapLoaded === true 
		&& this.jcmsGMap.mapShown === true)
	{
		this.jcmsGMap.hideMap();
	}
	else
	{
		this.jcmsGMap.showMap();
	}
}