Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';// reference local blank image
Map={ loaded:false, y:53.45, x:-8.00 } // declare global map object
Map.hideMaskTimeout=null;

Ext.onReady(function(){
	Ext.QuickTips.init();
	togglerInit();
	Map.map = initializeMap();
	Map.markers=new Array();
	updateMap();
})

function togglerInit(){ // keeps toggled after browser refresh
	var inps=Ext.get('mapTogglers').query('.toggler input');
	for (var i=1; i<inps.length; i++){
		var tg=Ext.get(inps[i]).parent('.toggler'); 
		if (inps[i].checked) tg.radioClass('toggler-on');
	}		
}


function togglerClick(el){
	var toggler=Ext.get(el);
	toggler.radioClass('toggler-on');
	toggler.child('input').dom.checked=true;
	updateMap();
}


function initializeMap(){
	var mapContainer = Ext.get('map');
	maskMap('Initialising map...');
	var mapOptions = { 
		center: new google.maps.LatLng(Map.y, Map.x), // center on ireland
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		zoom: 7,	
		scrollwheel: false // scroll wheel zooming activation	
	};
	Map.tooltip = new google.maps.InfoWindow({ content: '<div id="map-tooltip">Loading...</div>' });
	//google.maps.event.addListener(Map.tooltip, 'domready', function(ev){ contentLoaded() });
	
	var map = new google.maps.Map(mapContainer.dom, mapOptions);
	// add map-on-load event listener, mark map as loaded.
	google.maps.event.addListener(map, 'tilesloaded', function(ev){ Map.loaded=true; maskMap(null, true) });
	return map
}


function maskMap(msg, hide){
	var mask=Ext.get('map-mask');
	var maskText=mask.child('.ext-el-mask-msg div');
	if (msg) maskText.update(msg);
	if (!Map.loaded) return ; // if map not ready leave - wait
	if (hide){ mask.fadeOut({duration:0.5 }); return ; }
	if (!mask.isVisible()) mask.fadeIn({ endOpacity: 0.8, duration: 0.2 })
}
	 
function clearMap(){ 
	for (var i=0; i<Map.markers.length; i++) { Map.markers[i].setMap(); }
	if (Map.tooltip) Map.tooltip.close(); // remove if exists
	Map.map.setZoom(7);
	Map.map.panTo(new google.maps.LatLng(Map.y, Map.x));
}
function updateMap(){ 
	if (Map.hideMaskTimeout) clearTimeout(Map.hideMaskTimeout);
	maskMap('Updating map...'); 
	setTimeout("updateMarkers()",300); 
}
function addTooltip(marker, id){	
	google.maps.event.addListener(marker, "click", function(e){ 
		try{
			Ext.get('map-tooltip').applyStyles('visibility:hidden');
			Map.tooltip.setContent('<div id="map-tooltip">Loading...</div>');
		}catch(e){}
		loadTooltipContent(id);
		Map.tooltip.open(Map.map,marker);
	}); 
}

function loadTooltipContent(id){
	Ext.Ajax.request({
		url:'requests/suppliers_map.php', params: { action: 'tooltip', id: id },
		success: function(resp){
			var cont=resp.responseText;
			var src=cont.substr(cont.indexOf('img src="')+9)
			src=src.substr(0,src.indexOf('"'));
			if (!src.length) Map.tooltip.setContent(cont)
			else try{ 
				var newImg=new Image(); newImg.src=src;
				if (!newImg.complete){
					newImg.onload=function(){ Map.tooltip.setContent(cont) }
					newImg.onerror=function(){ Map.tooltip.setContent(cont) }
				}
				else Map.tooltip.setContent(cont);
			}catch(e){Map.tooltip.setContent(cont)}
		}
	})
}

function contentLoaded(){}


function updateMarkers(){
	Ext.Ajax.request({
		url:'requests/suppliers_map.php',
		autoAbort: true,
		form :'mapTogglers',
		success: function(resp){
			clearMap();
			var iconMain = new google.maps.MarkerImage('images/markere.png', new google.maps.Size(32, 37), new google.maps.Point(0,0), new google.maps.Point(16, 37));				
			var iconReg = new google.maps.MarkerImage('images/marker.png', new google.maps.Size(32, 37), new google.maps.Point(0,0), new google.maps.Point(16, 37));				
			var shadow = new google.maps.MarkerImage('images/marker-shadow.png', new google.maps.Size(51, 37), new google.maps.Point(0,0), new google.maps.Point(16, 37));
			var markers = resp.responseXML.documentElement.getElementsByTagName("marker");
			for (var i = 0; i < markers.length; i++) {
				var id=markers[i].getAttribute('id'), icon={};
				if (id=='79' || id=='80') icon=iconMain; else icon=iconReg;
				var LatLng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
				var mrk = new google.maps.Marker({ position: LatLng, map: Map.map, icon: icon, shadow: shadow	});
				Map.markers.push(mrk);
				addTooltip(mrk, id);
			}
			Map.hideMaskTimeout = setTimeout("maskMap(null, true)",500);
		}		
	})
}