var lStreamScroll = 0;
var bStreamScrollBusy = false;
var lStreamScrollTo = 0;
var lStreamScrollRightInterval;
var lStreamScrollAmount = 0;
var lStreamScrollMax = 0;
var bStreamScrollMaxDetermined = false;

function mapReload()
{
	sListString = '';
	
	if ($('ul.filter #btn-53j8-N8').attr('class') == 'btn-com active')
		sListString = sListString + ',53j8-N8';
	if ($('ul.filter #btn-53j8-mrx').attr('class') == 'btn-com active')
		sListString = sListString + ',53j8-mrx';
	if ($('ul.filter #btn-53j8-bewijs').attr('class') == 'btn-com active')
		sListString = sListString + ',53j8-bewijs';
		
	oMap.mapPosts = new Array();
	oMap.mapTweets = new Array();
	oMap.googleMap.clearOverlays();
	oMap.filters = sListString;
	oMap.sync();
}

$(document).ready(function()
{	

});

$('.content .arrow-right a').live('click', function()
{
	lStreamViewWidth = $('#nav-postings .content .wrapper').width();
	lStreamWidth = $('#nav-postings .content ul.posts').width();

	if (bStreamScrollBusy == true)
		return;
		
	bStreamScrollBusy = true;
	lStreamScrollAmount = $('#nav-postings .content .wrapper').width() - 30;
		
	lNewStreamScrollTo = $('.content .wrapper').scrollLeft() + lStreamScrollAmount;
	
	if ((lNewStreamScrollTo > 0) && ($('.content .arrow-left a').css('display') == 'none'))
		$('.content .arrow-left a').fadeIn(400);

	if ((bStreamScrollMaxDetermined == true) && (lNewStreamScrollTo >= lStreamScrollMax))
	{
		lNewStreamScrollTo = lStreamScrollMax
		$('.content .arrow-right a').hide();
	}
	else if (lNewStreamScrollTo > lStreamWidth - lStreamViewWidth)
	{
		// We're out of postings, let's try to get a few by doing an AJAX call
		$.getJSON('/ajax', {action: 'getStreamPostsGeo', maxPostId: lMinPostId}, function(oResponse)
		{
			if (oResponse.html.length == 0)
			{
				bStreamScrollMaxDetermined = true;
				lStreamScrollMax = lStreamWidth - lStreamViewWidth;
				$('.content .arrow-right a').hide();
			}
			else
			{
				$('#nav-postings .content ul.posts').append(oResponse.html);
				lMinPostId = oResponse.min_id;
			}
		});
	
		lNewStreamScrollTo = lStreamWidth - lStreamViewWidth
	}

	$('.content .wrapper').animate({
	    	scrollLeft: lNewStreamScrollTo
		}, 1200, function() 
		{
			bStreamScrollBusy = false;
		}
	);
	
	return false;
});


$('.content .arrow-left a').live('click', function()
{
	lStreamViewWidth = $('#nav-postings .content .wrapper').width();
	lStreamWidth = $('#nav-postings .content ul.posts').width();

	if (bStreamScrollBusy == true)
		return;
		
	bStreamScrollBusy = true;
	lStreamScrollAmount = $('#nav-postings .content .wrapper').width() - 30;
		
	lNewStreamScrollTo = $('.content .wrapper').scrollLeft() - lStreamScrollAmount;
	
	if ((lNewStreamScrollTo > 0) && ($('.content .arrow-right a').css('display') == 'none'))
		$('.content .arrow-right a').fadeIn(400);

	if (lNewStreamScrollTo < 1)
	{
		lNewStreamScrollTo = 0;
		$('.content .arrow-left a').hide();
	}

	$('.content .wrapper').animate({
	    	scrollLeft: lNewStreamScrollTo
		}, 1200, function() 
		{
			bStreamScrollBusy = false;
		}
	);
	
	return false;
});

$('.posting').live('click', function()
{
	oMarker = oMap.mapPosts[$(this).attr('pid')];
	
	if (oMarker != undefined)
	{
		oMap.googleMap.closeExtInfoWindow();
		oMarker.openWindow();
	}
	else
	{
		oMap.googleMap.closeExtInfoWindow();
		
		oMap.openNextMarker = true;
		oMap.openNextMarkerId = $(this).attr('pid');
		
		var point = new GLatLng($(this).attr('latitude'), $(this).attr('longitude'));
		oMap.googleMap.setCenter(point);
		oMap.sync();
	}
	
	return false;
});


	/**
	 * MapHome class
	 */
	function MapHome(sContainerId, lCenterLat, lCenterLong, lZoomLevel, lDefaultPostId, sFilters)
	{
		this.googleMap = new google.maps.Map2(document.getElementById(sContainerId));
		
		this.googleMap.setCenter(new GLatLng(lCenterLat, lCenterLong), lZoomLevel);
		//this.googleMap.addControl(new GSmallMapControl());	
		this.googleMap.setMapType(G_SATELLITE_MAP);
		this.openNextMarker = true;
		this.openNextMarkerId = lDefaultPostId;
		
		me = this;
		
		var markerFans = new GIcon();
		markerFans.image			 = '/layout/marker_fans.png';
		markerFans.iconSize		 = new GSize(23,27);
		markerFans.iconAnchor		 = new GPoint(11,35);
		markerFans.infoWindowAnchor = new GPoint(12,10);
		markerFans.shadow = '/layout/markers/shadow.png';
		markerFans.transparent = '/layout/markers/transparent.png';
		markerFans.imageMap = [16,0,17,1,19,2,20,3,20,4,21,5,22,6,22,7,22,8,22,9,22,10,22,11,22,12,22,13,22,14,22,15,22,16,21,17,21,18,20,19,20,20,19,21,18,22,17,23,16,24,14,25,13,26,9,26,8,25,7,24,5,23,4,22,3,21,3,20,2,19,1,18,1,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,1,5,2,4,2,3,3,2,5,1,6,0];					
		markerOptionsFans = { 
			icon: markerFans 
		};
	
		this.mapPostMarkerOptions = new Array();
		this.mapPostMarkerOptions[113] = markerOptionsFans;
		
		this.mapPosts = new Array();
		this.mapTweets = new Array();
		this.filters = sFilters;
		
		document.onunload = "GUnload()";
		
		this.mapBoundsChanged = GEvent.addListener(this.googleMap, 'dragend', function() 
		{
			me.sync();
		});
		
		me.sync();
	}
	MapHome.prototype.addMarker = function(item)
	{
		me = this;
		
		if (item.type == 'post')
		{
			var markup = [
				'<div class="map-window-small">',
					'<div class="media">',
						'<a href="/user/', item.username,'/view/',item.pid,'"><img src="',item.media.url_media_square,'" width="90" height="90"></a>',
					'</div>',
					'<div class="content">',
						
						'<div class="user-info">',
							'<p class="username"><a href="/user/', item.username,'">',item.username,'</a></p>',
							'<p class="location">',item.geo_city,'</p>',
						'</div>',
						'<br class="clear" />',
						
						'<p class="title">',item.title,'</p>',
					'</div>',
					'<br class="clear" />',
					
					'<div class="info">',
						'<p class="footer">',
							item.created_on + ' | ',
							item.views + ' views | ',
							item.comment_count + ' comments',
						'</p>',
					'</div>',

				'</div>'
			];
			var html = markup.join('');
	
			var point = new GLatLng(item.geo_latitude, item.geo_longitude);
			var marker = new GMarker(point, this.mapPostMarkerOptions[item.sid]);
			marker.openWindow = function()
			{
				me.openWindow(marker, html)
			}
			
			this.mapPosts[item.pid] = marker;
		}
		else if (item.type == 'tweet')
		{
			var markup = [
				'<div class="map-window-small">',
					
						'<div class="image">',
							'<img src="', item.avatar ,'" width="48" height="48" />',
							'<div class="info-window-icon icon-',item.sid,'" ></div>',
						'</div>',
						'<div class="user-info">',
							'<p class="username"><a href="/user/', item.username,'">',item.username,'</a></p>',
							'<p class="title">',item.tweet,'</p>',
						'</div>',						
					
					'<br class="clear" />',
					
					'<div class="info">',
						'<p class="footer">',
							item.created_on ,
						'</p>',
					'</div>',
				'</div>'
			];
			var html = markup.join('');
	
			var point = new GLatLng(item.geo_latitude, item.geo_longitude);
			var marker = new GMarker(point, markerOptionsTweets);
			marker.openWindow = function()
			{
				me.openWindow(marker, html)
			}
			
			this.mapTweets[item.tid] = marker;
		}

		GEvent.addListener(marker, "click", function() 
		{
			me.openWindow(marker, html)
		});

		GEvent.addListener(marker, "infowindowclose", function() 
		{
			
		});
		
		me.googleMap.addOverlay(marker);
	}
	MapHome.prototype.openWindow = function(marker, html)
	{
		marker.openExtInfoWindow(me.googleMap, "custom_info_window_black_small", html, {beakOffset: 3});
	}
	MapHome.prototype.dataReceived = function(reponse)
	{
		me = this;
		
		if (reponse.posts !== undefined)
		{
			$.each(reponse.posts, function(i, item)
			{
				me.addMarker(item);

				if ((me.openNextMarker == true) && (item.pid == me.openNextMarkerId))
				{
					me.openNextMarker = false;
					me.mapPosts[item.pid].openWindow();
				}
			});
		}
		else if (reponse.tweets !== undefined)
		{
			$.each(reponse.tweets, function(i, item)
			{
				me.addMarker(item);
			});
		}
	}
	MapHome.prototype.sync = function() 
	{
		me = this;
		
		mapBounds = me.googleMap.getBounds();
		posNE = mapBounds.getNorthEast();
		posSW = mapBounds.getSouthWest();

		$.getJSON('/ajax', {action: 'getMapPosts', streams: this.filters, source: this.dataSource, user: this.dataSourceId, maxPostId: me.dataSourceMaxId, zoomLevel: me.googleMap.getZoom(), geoNorthEast: posNE.toUrlValue(8), geoSouthWest: posSW.toUrlValue(8)}, function(oResponse){me.dataReceived(oResponse)});
		$.getJSON('/ajax', {action: 'getMapTweets', streams: this.filters, zoomLevel: me.googleMap.getZoom(), geoNorthEast: posNE.toUrlValue(8), geoSouthWest: posSW.toUrlValue(8)}, function(oResponse){me.dataReceived(oResponse)});
	}
	MapHome.prototype.pollTweets = function()
	{
		
	}
	MapHome.prototype.setFilter = function(sFilter)
	{
		
	}