var icons = { 
	//'project': {src: "/share/images/site/elements/pins/projects-24x39.png", w:  24, h: 39, offset: 11}, 
	'member': {src: "/share/images/site/pins/members-09x09.png", w:  11, h: 11, offset: 11} 
};
              

var iconsClusters = [ 
	 {src: "/share/images/site/pins/members-09x09.png", w: 9, h: 9, offset: 9 }, 
	 {src: "/share/images/site/pins/members-11x11.png", w: 11, h: 11, offset: 10 }, 
	 {src: "/share/images/site/pins/members-15x15.png", w: 15, h: 15, offset: 12}, 
	 {src: "/share/images/site/pins/members-17x17.png", w: 17, h: 17, offset: 13},
	 {src: "/share/images/site/pins/members-19x19.png", w: 19, h: 19, offset: 14} 
 ];

var map = null;
var markers = [];
var activeMarker = 0;
var infoWindowLayer = null;
var gmarkers = [];
var mapImageBase = "/images/phpThumb.php/w=25;h=26;q=100;zc=C;fltr[]=bord|2|0|0|FFFFFF;f=png;";
function markerInfoBox( html, marker ){
	this.html = html;
	this.marker = marker;
}
$(document).ready(function(){ 
	markerInfoBox.prototype = new GOverlay();
	markerInfoBox.prototype.initialize = function() {
		
		this.div = document.createElement( 'div' );
		this.div.style.position = 'absolute';
		this.div.className = 'bubble';
		this.div.innerHTML = this.html;

		this.div.style.left = (map.fromLatLngToDivPixel(this.marker.getLatLng()).x - 190 ) + 'px';
		this.div.style.top 	= '-9000px';

		map.getPane( G_MAP_FLOAT_PANE ).appendChild( this.div );

		//alert(  );
		tmpHeight = parseFloat( $('.bubble').height() );
		this.div.style.top 	= (map.fromLatLngToDivPixel(this.marker.getLatLng()).y - ( 14 + tmpHeight ) ) + 'px';
	}
	
	markerInfoBox.prototype.remove = function() {
		this.div.parentNode.removeChild( this.div );
	}
	
	markerInfoBox.prototype.redraw = function() {
		this.div.style.left = (map.fromLatLngToDivPixel(this.marker.getLatLng()).x - 190 ) + 'px';
		//this.div.style.top 	= (map.fromLatLngToDivPixel(this.marker.getLatLng()).y - 110 ) + 'px';

		tmpHeight = parseFloat( $('.bubble').height() );
		this.div.style.top 	= (map.fromLatLngToDivPixel(this.marker.getLatLng()).y - ( 14 + tmpHeight ) ) + 'px';
	}
	
})
function closeInfoBox() {
	if( activeMarker )
		map.removeOverlay( activeMarker.overlay );
}

var offsetX = 112;
var offsetY = 90;

InfoBox = function( html ) {
	this.html = html;
}

var overlayDiv = null

$(window).load(function(){
	
	InfoBox.prototype = new GOverlay();

	InfoBox.prototype.initialize = function() {
		
		overlayDiv = document.createElement( 'div' );
		overlayDiv.style.position = 'absolute';
		overlayDiv.className = 'bubble';
		overlayDiv.innerHTML = this.html;
		overlayDiv.style.left = (map.fromLatLngToDivPixel(gmarkers[ activeMarker ].getPoint()).x - offsetX ) + 'px';
		overlayDiv.style.top 	= (map.fromLatLngToDivPixel(gmarkers[ activeMarker ].getPoint()).y - offsetY ) + 'px';

		map.getPane( G_MAP_FLOAT_PANE ).appendChild( overlayDiv );
	}
	InfoBox.prototype.remove = function() {
		overlayDiv.parentNode.removeChild( overlayDiv );
	}
	InfoBox.prototype.redraw = function() {
		overlayDiv.style.left = (map.fromLatLngToDivPixel(gmarkers[ activeMarker ].getPoint()).x - offsetX ) + 'px';
		overlayDiv.style.top 	= (map.fromLatLngToDivPixel(gmarkers[ activeMarker ].getPoint()).y - offsetY ) + 'px';
	}

	
	initMap('gmap');
});

function initMap(id) {
	map = new GMap2(document.getElementById( id ));
	map.setCenter(new GLatLng(defaultLat, defaultLon), 14);
	map.setUIToDefault(); 
	map.setMapType( G_NORMAL_MAP );
	map.setZoom( 14 );
	map.disableScrollWheelZoom();
	map.disableDragging();
	loadMarkers( map.getBounds()  );
}


function loadMarkers( bounds ) {
	
	var mapSource = '/users/map/feed/community/';
	map.clearOverlays();
	GDownloadUrl( mapSource, function( data, responseCode ) {
		gmarkers = [];
		
		var xml = GXml.parse( data );
		var xmlMarkers = xml.documentElement.getElementsByTagName( 'marker' );
		if( xmlMarkers.length < 1 ) { 
			return; 
		}

		
		for (var i = 0; i < xmlMarkers.length; ++i) {
			var lat = parseFloat( nodeValue(xmlMarkers, i, 'lat' ) );
			var lng = parseFloat( nodeValue(xmlMarkers, i, 'lon' ) );
			var point = new GLatLng( lat, lng );
			var markBaseIcon =  new GIcon(); 
			markBaseIcon.image = mapImageBase + nodeValue(xmlMarkers, i, 'picture' );
			markBaseIcon.shadow = "/share/images/site/icon-shadow.png";
			markBaseIcon.iconSize = new GSize(25, 26);
			markBaseIcon.shadowSize = new GSize(29, 40);
			markBaseIcon.iconAnchor = new GPoint(25, 26);
			markBaseIcon.infoWindowAnchor = new GPoint(15, 20);
			var marker = new GMarker(point, { icon : markBaseIcon });
			marker._data = { 
								'name' : nodeValue(xmlMarkers, i, 'name' ), 
								"address" : nodeValue(xmlMarkers,  i, 'address' ), 
								'id':  nodeValue(xmlMarkers,  i, 'id' ), 
								'username': nodeValue(xmlMarkers,  i, 'username' )
							};
			GEvent.addListener( marker, "click", function( latlng ) {
				
				closeInfoBox();
				this.overlay = new InfoBox( 
				
					'<div class="bheader"></div>' +
						'<div class="bcontent">' + 
							'<div class="bclose"><a class="decorationNone" href="#" onclick="closeInfoBox();return false;">x</a></div>' + 
							'<h1><a href="/users/'+this._data.username+'" class="decorationNone">' + this._data.name  + '</a></h1>' +
							'<div class="baddress">' + this._data.address + '</div>' +
						'</div>' + 
					'<div class="bbottom"></div>'
				);
				/*
				this.overlay = new InfoBox( 
				
					'<div class="header"></div>' +
						'<div class="content">' + 
							'<!--<div class="close">[ <a href="#" onclick="closeInfoBox();return false;">X</a> ]</div>-->' + 
						'<h1>' + this._data.name  + '</h1>' +
						'<div class="address">' + this._data.address + '</div>' +
							'<ul>' +
								'<li class="view-profile"><a href="/users/'+this._data.username+'">view profile &#62;</a></li>' + 
							'</ul>' +
						'</div>' + 
					'<div class="bottom"></div>'
				);*/
				activeMarker = this;
				map.addOverlay( this.overlay );
				
			});
			gmarkers.push( marker );
			//bounds.extend( marker.getPoint() );
			//that.map.addOverlay( marker );
		}
		showMarker();
		
	});
}

function closeInfoBox() {
	if( gmarkers[ activeMarker ] )
		map.removeOverlay( gmarkers[ activeMarker ].overlay );
}
function showMarker() {
	map.clearOverlays();
//	console.log( gmarkers[ activeMarker ] );
	map.addOverlay( gmarkers[ activeMarker ] );
	var latlng = gmarkers[ activeMarker ].getLatLng();
	map.setCenter( new GLatLng( latlng.lat() /*+ 0.033*/, latlng.lng() /*- 0.107*/ ) );
				
	gmarkers[ activeMarker ].overlay = new InfoBox( 
	
					'<div class="bheader"></div>' +
						'<div class="bcontent">' + 
							'<h1><a href="/users/'+gmarkers[ activeMarker ]._data.username+'" class="decorationNone">' + gmarkers[ activeMarker ]._data.name  + '</a></h1>' +
							'<div class="baddress">' + gmarkers[ activeMarker ]._data.address + '</div>' +
						'</div>' + 
					'<div class="bbottom"></div>'
			
		);
		
		/*
			'<div class="header"></div>' +
				'<div class="content">' + 
					'<!--<div class="close">[ <a href="#" onclick="closeInfoBox();return false;">X</a> ]</div>-->' + 
				'<h1>' + gmarkers[ activeMarker ]._data.name  + '</h1>' +
				'<div class="address">' + gmarkers[ activeMarker ]._data.address + '</div>' +
					'<ul>' +
						'<li class="view-profile"><a href="/users/'+gmarkers[ activeMarker ]._data.username+'">view profile &#62;</a></li>' + 
					'</ul>' +
				'</div>' + 
			'<div class="bottom"></div>'*/
		
	map.addOverlay( gmarkers[ activeMarker ].overlay );
	activeMarker++;
	if( activeMarker == gmarkers.length ) activeMarker = 0;
	setTimeout ( showMarker, 15 * 1000 );
}



function nodeValue(array, index, nodeName ) {
	try {
			return array[ index ].getElementsByTagName( nodeName )[0].firstChild.nodeValue;
	} catch(e){
		//console.log(nodeName);
	}
}