var locations = null;
var lastLocationIndex = 0;
var map = null;
var options = null;
var mapShapeLayer = null;
var mapPhotoIndex = 0;
var mapPosDim = {};
    
function GetMap()
{
	var mi = jQuery('#map');
	mapPosDim = mi.offset();
	mapPosDim.width = mi.width();
	mapPosDim.height = mi.height();
			
	map = new VEMap('map');
	map.LoadMap(new VELatLong(30.287531589298712, -97.78793334960938), 12);
	loadMapLocations();
}

function preloadImagesAndAddPins()
{
	if(locations[mapPhotoIndex])
	{
		if(locations[mapPhotoIndex]['photo'])
			var img = jQuery('<img src="' + locations[mapPhotoIndex]['photo'] + '" />').appendTo('#mapPhotos');
		if (mapPhotoIndex == Math.min(5, locations.length))
			addPinsByCoords(); // start adding pins when having 3 images preloaded;*/
		mapPhotoIndex +=1;
		preloadImagesAndAddPins();
	}
}

function addPinsByCoords()
{ 	 
 	var LocationInfo = locations[lastLocationIndex];
	var newShape = new VEShape(VEShapeType.Pushpin, new VELatLong(LocationInfo['geolat'], LocationInfo['geolong']));
	/*var tmp = '';
	for (var i in LocationInfo)
		tmp += i + ': ' + LocationInfo[i] +  '<br />';
	newShape.SetDescription(tmp)*/;
	if(LocationInfo['isFeatured'] == true)
		 newShape.SetCustomIcon('<img src="img/icoMStacotruck.png" />');
	else
		 newShape.SetCustomIcon('<img src="img/mapMarker.gif" />');
		 
	newShape.Hide();
	map.AddShape(newShape);
	
	lastLocationIndex += 1;
	
	if(locations[lastLocationIndex])
	{
		addPinsByCoords();
	}
	else
	{
		lastLocationIndex = 0;
		mapShapeLayer = map.GetShapeLayerByIndex(0);
		rotateMapFocus();
	}
}

function rotateMapFocus()
{
	if(locations[lastLocationIndex])
	{
		var inactivePin = mapShapeLayer.GetShapeByIndex(lastLocationIndex - 1);
		if(inactivePin)
			if(lastLocationIndex != 1)
				inactivePin.Hide();
		var activePin = mapShapeLayer.GetShapeByIndex(lastLocationIndex);
		activePin.Show();
		displayMapInfoBox();
		//map.PanToLatLong(new VELatLong(activePin.Latitude, activePin.Longitude));
		
		lastLocationIndex += 1;
		setTimeout(rotateMapFocus, 1000);
	}
	else
	{
		loadMapLocations();
	}
}

function displayMapInfoBox()
{
	var activePin = mapShapeLayer.GetShapeByIndex(lastLocationIndex);
	activePin.Show();
		
	var photo = (locations[lastLocationIndex]['photo'])?locations[lastLocationIndex]['photo']:'img/nophoto.jpg';
	var pinPosInfo = map.LatLongToPixel(new VELatLong(locations[lastLocationIndex]['geolat'], locations[lastLocationIndex]['geolong']), map.GetZoomLevel());
	updateMapInfo('<img class="MayorPhoto" src="'+ photo  + '" />', pinPosInfo.x, pinPosInfo.y);
}

function loadMapLocations()
{
	jQuery
		.ajax({
                        url: 'locations',
			success: function(JSONResponse)
				{
					locations = JSON.parse(JSONResponse);
					lastLocationIndex = 0;
					mapPhotoIndex = 0;
					//updateFSList();
					if(jQuery('#mapPhotos').size() == 0)
						jQuery('body').append('<div id="mapPhotos" style="display:none"></div>');
					else
						jQuery('#mapPhotos').empty;
					preloadImagesAndAddPins();
				}
		      })
}

function InitMapCustomInfoZone()
{
	var infoBox = jQuery('<div id="MapInfo" style="visibility:hidden"></div>');
	infoBox.appendTo('body');
	infoBox.css({
			left: mapPosDim.left + mapPosDim.width/2 +  'px',
			top: mapPosDim.top + mapPosDim.height/2 + 'px',
			visibility: 'hidden'
		});
	
	infoBox.html('<div class="content"></div><div class="arrInfoBox"></div>');
}

function hideMapInfo()
{
	jQuery('#MapInfo').css('visibility', 'hidden');
}

function updateMapInfo(htmlContent, x, y)
{
	var map = jQuery('#map');
	var show = true;
	var left = mapPosDim.left + x;
	if((left < mapPosDim.left) || (left > (mapPosDim.left + mapPosDim.width)))
		show = false;
		
	var top = mapPosDim.top + y;
	if((top < mapPosDim.top) || (top > (mapPosDim.top + mapPosDim.height)))
		show = false;
	
	if(show == true)
	{
		jQuery('#MapInfo')
			.css({
				left: left + 'px', 
				top: top + 'px'
			     })
			.find('.content').html(htmlContent);
		showMapInfo();
	}
	else
		hideMapInfo();
}

function showMapInfo()
{
	jQuery('#MapInfo').css('visibility', 'visible');
}

jQuery(function(){
	GetMap();
	InitMapCustomInfoZone();
})
