// +-------------------------------------------------------------+
// | Zaplife AJAX map javascript file
// | All rights reserved. Copyright 2005-2008 Zaplife
// |
// +-------------------------------------------------------------+


window.addEvent('domready', function() {
	thumbs = new Fx.Slide('mapThumbContainer', {
		mode: 'vertical',
		onComplete: function() {
			if(this.wrapper.offsetHeight != 0)
			this.wrapper.setStyle('height', 'auto');
		}
	});
	thumbs.hide();
	
	//Build and populate thumb navigation
	var scroll = new zapScroller('mapThumbContainer', {area: 200, velocity: 0.2});

	// Mousemove
	$('mapThumbContainer').addEvent('mouseenter', scroll.start.bind(scroll));
	$('mapThumbContainer').addEvent('mouseleave', scroll.stop.bind(scroll));
	
});

var map = null;
var animateTimeout;

var iconGreen = new GIcon(); 
iconGreen.image = '/images/map_marker_green.png';
//iconGreen.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconGreen.iconSize = new GSize(12, 20);
//iconGreen.shadowSize = new GSize(22, 20);
iconGreen.iconAnchor = new GPoint(6, 20);
iconGreen.infoWindowAnchor = new GPoint(5, 1);

var iconRed = new GIcon(); 
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
//iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(12, 20);
//iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);

customIcons = [];
customIcons["green"] = iconGreen;
customIcons["red"] = iconRed;


function createMarker(type, latitude, longitude, channelPhotoId) {

	if (channelPhotoId == undefined || channelPhotoId == '') {
		var channelPhotoId = '';
	}
		
	var point = new GLatLng(parseFloat(latitude), parseFloat(longitude));
	if (type == 'userPhotos' || type == 'photos') {
		var icon = new GIcon(G_DEFAULT_ICON, 'showimage.php?mode=thumb-c&type=jpg&id=' + channelPhotoId); 
		icon.iconSize = new GSize(50, 50);
		icon.imageMap = [0,0, 50,0, 50,50, 0,50];
		//icon.iconAnchor = new GPoint(25, 50);
		var marker = new GMarker(point, icon);
	} else {
		var marker = new GMarker(point, customIcons['green']);
	}
	
	if (type != 'status_updates') {
		GEvent.addListener(marker, "click", function() {
			if (type == 'users') {
				pars = 'action=city_html&longitude=' + longitude + '&latitude=' + latitude;
			} else if (type == 'online') {
				pars = 'action=city_online_html&longitude=' + longitude + '&latitude=' + latitude;
			} else if (type == 'friends') {
				pars = 'action=friends_html&longitude=' + longitude + '&latitude=' + latitude;
			} else if (type == 'userPhotos') {
				pars = 'action=photos_html&longitude=' + longitude + '&latitude=' + latitude + '&user_id=' + userId;
			} else if (type == 'photos') {
				pars = 'action=photos_html&longitude=' + longitude + '&latitude=' + latitude;
			}
			var myAjax = new Ajax('ajax_maps.php', {method: 'post', data: pars, onComplete: function (response) {
				marker.openInfoWindowHtml(response);
				if (type == 'photos' || type == 'userPhotos') {
					startSlideshow.update();
				}
			}}).request();
		});
	}
	
	return marker;
}		
		
function getMarkers(type) {
	
	$('indicator').setStyle('display', '');
	thumbs.hide();
	clearTimeout(animateTimeout);
	markerManager.clearMarkers();
	map.clearOverlays();
	
	if (type == 'userPhotos') {
		var pars = "action=user_photos&user_id=" + userId;
	} else {
		var pars = "action=" + type;
	}

	var jSonRequest = new Request.JSON({url: 'ajax_maps.php', data: pars, onComplete: function(markersData) {
		markers = [];
		markersHTML = [];
		for (var i = 0; i < markersData.latitude.length; i++) {
			//var title = markersData.city[i];
			//map.addOverlay(new GMarker(point, customIcons['green']));
			//map.addOverlay(createMarker(markers.latitude[i], markers.longitude[i]));
			if (type == 'status_updates') {
				markersHTML[i] = '<div style="height: 95px; width: 220px;"><div class="mapPopupTitle">' + markersData.title[i] + '</div>';
				markersHTML[i] += '<a href="profile.php?id=' + markersData.userId[i] + '" title="' + markersData.username[i] + '">';
				if (markersData.active[i] == 1) {
					markersHTML[i] += '<img border="0" src="/showimage.php?mode=avatar-s&id=' + markersData.userId[i].trim() + '&type=jpg"></a></div>';
				} else {
					markersHTML[i] += '<img border="0" src="/images/avatar_blank_small.gif"></a></div>';
				}
			}
			if (type == 'userPhotos' || type == 'photos') {
				markers[i] = createMarker(type, markersData.latitude[i], markersData.longitude[i], markersData.channelPhotoId[i]);
			} else {
				markers[i] = createMarker(type, markersData.latitude[i], markersData.longitude[i]);
			}
		}
		if (type != 'status_updates') {
			markerManager.addMarkers(markers, 0);
			markerManager.refresh();
		} else {
			animateMarkers(type, 0);
		}
		$('indicator').setStyle('display', 'none');
	}}).send();
}

function animateMarkers(type, counter) {

	map.addOverlay(markers[counter]);
	markers[counter].openInfoWindowHtml(markersHTML[counter]);
	
	if (counter < 24) {
		animateTimeout = setTimeout( function () {
			map.closeInfoWindow();
			map.removeOverlay(markers[counter]);
			animateMarkers(type, counter + 1);
		}, 4000);	
	}
}

function getThumbs(type) {

	$('mapThumbCore').setHTML('');
	thumbs.show();

	if (type == 'friends') {
		var pars = 'action=friend_thumbs';
	} else if(type == 'users') {
		var pars = 'action=user_thumbs';
	} else if(type == 'userPhotos') {
		var pars = 'action=user_photos_thumbs&user_id=' + userId;
	} else if(type == 'photos') {
		var pars = 'action=photo_thumbs';
	}

	var jSonRequest = new Request.JSON({url: 'ajax_maps.php', data: pars, onComplete: function(thumbsData) {
		for (var i = 0; i < thumbsData.latitude.length; i++) {
			a = new Element('a');
			a.setProperty('name', thumbsData.name[i]);
			a.setProperty('title', thumbsData.name[i]);
			a.onclick = function(i) {
				showMarker(type, thumbsData.latitude[i], thumbsData.longitude[i]);
			}.pass(i, this);
			if (type == 'photos' || type == 'userPhotos') {
				src = '/showimage.php?mode=thumb-c&id=' + thumbsData.id[i].trim() + '&type=jpg';
			} else {
				if (thumbsData.active[i] == 1) {
					src = '/showimage.php?mode=avatar-s&id=' + thumbsData.id[i].trim() + '&type=jpg';
				} else {
					src = '/images/avatar_blank_small.gif';
				}
			}
			t = new Element('img');
			t.setProperty('border', '0');
			t.setProperty('alt', thumbsData.name[i]);
			if (!window.webkit) {
				t.addClass('thumbopacity');
			}
			t.setProperty('src', src);
			t.injectInside(a);
			a.injectInside($('mapThumbCore'));
		}
	}}).send();
}

function showMarker(type, latitude, longitude) {
	if (type == 'users') {
		pars = 'action=city_html&longitude=' + longitude + '&latitude=' + latitude;
	} else if (type == 'online') {
		pars = 'action=city_online_html&longitude=' + longitude + '&latitude=' + latitude;
	} else if (type == 'friends') {
		pars = 'action=friends_html&longitude=' + longitude + '&latitude=' + latitude;
	} else if (type == 'userPhotos') {
		pars = 'action=photos_html&longitude=' + longitude + '&latitude=' + latitude + '&user_id=' + userId;
	} else if (type == 'photos') {
		pars = 'action=photos_html&longitude=' + longitude + '&latitude=' + latitude;
	}
	
	var point = new GLatLng(parseFloat(latitude), parseFloat(longitude));
	
	//Find marker to show
	for (m = 0; m < markers.length; m++) {
		if (markers[m].getPoint().equals(point)) {
			break;
		}
	}
	var myAjax = new Ajax('ajax_maps.php', {method: 'post', data: pars, onComplete: function (response) {
		eval("var markerId = latitude + '-' + longitude");
		markers[m].openInfoWindowHtml(response);
		if (type == 'photos' || type == 'userPhotos') {
			startSlideshow.update();
		}
	}}).request();
}


function initializeMap(type) {

	if (type == undefined || type == '') {
		var type = 'users';
	}

	if (GBrowserIsCompatible()) {
	
		map = new GMap2(document.getElementById("mapCanvas"));
		if (userLatitude != '') {
			map.setCenter(new GLatLng(userLatitude, userLongitude), 2, G_NORMAL_MAP);
		} else {
			map.setCenter(new GLatLng(userLatitude, userLongitude), 1, G_NORMAL_MAP);
		}
		map.addControl(new GSmallZoomControl());
		//map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GOverviewMapControl());
		//map.addControl(new GScaleControl());
		map.enableDoubleClickZoom();
		map.enableContinuousZoom();
		//map.enableScrollWheelZoom();
		new GKeyboardHandler(map);
		markerManager = new MarkerManager(map);
		getMarkers(type);
		getThumbs(type);
	}
}

function clickTab(show) {
	selectTab(show);
	getMarkers((show)); 
	if (show == 'users' || show == 'friends' || show == 'photos') {
		getThumbs((show));
	}
}

function selectTab(id) {
	
	$(id).getParent('ul').getElements('li').each(function(el) {
		el.removeClass('tabMainSelected');
	});
	$(id).addClass('tabMainSelected');
	
}


window.addEvent('unload', GUnload);



/*

var map;
var geoxml;


function initializeMap() {

	if (GBrowserIsCompatible()) {
	
		map = new GMap2(document.getElementById("mapCanvas"));
		if (userLatitude != '') {
			map.setCenter(new GLatLng(userLatitude, userLongitude), 3, G_NORMAL_MAP);
		} else {
			map.setCenter(new GLatLng(userLatitude, userLongitude), 1, G_NORMAL_MAP);
		}
		map.addControl(new GSmallZoomControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GOverviewMapControl());
		map.enableDoubleClickZoom();
		map.enableContinuousZoom();
		new GKeyboardHandler(map);
		loadPhotos();
	}
}


 
function loadPhotos() {

	map.clearOverlays();
  	var userKML = webPath + "ajax_maps.php?action=user_photos_kml&user_id=" + userId;
  	var userKML ="http://picasaweb.google.com/data/feed/base/user/kevin.smilak/albumid/4974033316286300177?kind=photo&alt=kml";
  	var userKML = "http://www.zaplife.com/ajax_maps.php?action=user_photos_kml&user_id=1";
  	geoxml = new GGeoXml(userKML);
  	geoxml.hidden = false;
  	map.addOverlay(geoxml);

  	// strip ?alt=kml
  	//getJSON(albumKML.split("&")[0]);
} 

window.addEvent('domready', initializeMap);
window.addEvent('unload', GUnload);

*/