﻿var uberMap;
var mapInited = false;
var restaurantFilters = new Array();
var shoppingFilters = new Array();
var thingsToDoFilters = new Array();
var restaurantIdFilters = new Array();
var shoppingIdFilters = new Array();
var thingsToDoIdFilters = new Array();
var hotelFilters = new Array();
var hotelIdFilters = new Array();
var parkingFilters = new Array();
var parkingIdFilters = new Array();
var uberMapData;
var bounds;
var infowindow;

$(function() {
	var mapTabContentContainer = $('div.mapTabContentContainer');

	$.each(
		$('div.mapTab'),
		function(idx, tab) {
			var tabContentContainer = $(mapTabContentContainer).clone();
			var header = $(tabContentContainer).find('div.mapTabFilterHeader');
			header.html($(this).attr('rel').replace('Restaurants', 'Restaurant').replace('Hotels', 'Hotel') + ' Filters');
			$(this).append($(tabContentContainer));
		}
	);

	$('div.mapTab').mouseover(function() {
		$(this).data('isOver', true);
		$(this).addClass('active');
		$('div.mapTabContentContainer').not($(this).find('div.mapTabContentContainer')).hide();
		$(this).find('div.mapTabContentContainer').show();
	});
	$('div.mapTab').mouseout(function() {
		$(this).data('isOver', false);
		var tabToClose = $(this);
		setTimeout(function() {
			if ($(tabToClose).data('isOver') == false) {
				$(tabToClose).removeClass('active');
				$(tabToClose).find('div.mapTabContentContainer').hide();
			}
		}, 100);
	});
	$('#mapLoadingTextComplete').click(function() {
		$('#mapLoading').fadeOut('fast');
	});
	//getMapData();
});

function getMapData() {

	if (!mapInited) {
		$.ajax({
			url: '/httphandlers/GoogleMapHandler.ashx?action=GetUberMap',
			dataType: 'json',
			success: function(data) {
				uberMapData = data;
				initMap();
			},
			error: function(x, y, z) {
				$('#ajaxLoading').hide();
				$('#errorMessage').show();
			}
		});
	}
}

function compileFilters() {
	// hotels
	$('#mapTabHotels .cbShowOnMap').attr('checked', false);
	//$('#mapTabHotels div.allFiltersContainer').show();
	$.each(
		uberMapData.Hotels,
		function(idx, h) {
			//$(h).data('visible', false);
			if (jQuery.inArray(h.Id, hotelIdFilters) == -1) {
				hotelIdFilters.push(h.Id);
				hotelFilters.push(h);
			}
		}
	);
	hotelFilters.sort(compareNames);
	bindFilters(hotelFilters, $('#mapTabHotels div.mapTabContentContainer'), 'Hotel Types');

	// restaurants
	$('#mapTabRestaurants .cbShowOnMap').attr('checked', false);
	$.each(
		uberMapData.Restaurants,
		function(idx, r) {
			$(r).data('visible', false);
			$.each(
				r.CuisineTypes,
				function(cIdx, c) {
					if (jQuery.inArray(c.Id, restaurantIdFilters) == -1) {
						//$(c.Name).data('id', c.Id);
						restaurantIdFilters.push(c.Id);
						restaurantFilters.push(c);
					}
				}
			);
		}
	);
	restaurantFilters.sort(compareNames);
	bindFilters(restaurantFilters, $('#mapTabRestaurants div.mapTabContentContainer'), 'Cuisine Types');
	
	// shopping
	$('#mapTabShopping .cbShowOnMap').attr('checked', false);
	$.each(
		uberMapData.Shopping,
		function(idx, s) {
			$(s).data('visible', false);
			$.each(
				s.StoreTypes,
				function(sIdx, s) {
					if (jQuery.inArray(s.Id, shoppingIdFilters) == -1) {
						//$(s.Name).data('id', s.Id);
						shoppingIdFilters.push(s.Id);
						shoppingFilters.push(s);
					}
				}
			);
		}
	);
	shoppingFilters.sort(compareNames);
	bindFilters(shoppingFilters, $('#mapTabShopping div.mapTabContentContainer'), 'Store Types');

	// things to do
	$('#mapTabThingsToDo .cbShowOnMap').attr('checked', false);
	$.each(
		uberMapData.ThingsToDo,
		function(idx, t) {
			$(t).data('visible', false);
			$.each(
				t.Categories,
				function(tIdx, t) {
					if (jQuery.inArray(t.Id, thingsToDoIdFilters) == -1) {
						//$(t.Name).data('id', t.Id);
						thingsToDoIdFilters.push(t.Id);
						thingsToDoFilters.push(t);
					}
				}
			);
		}
	);
	thingsToDoFilters.sort(compareNames);
	bindFilters(thingsToDoFilters, $('#mapTabThingsToDo div.mapTabContentContainer'), 'Explore Things to Do');

	// parking
	$('#mapTabParking .cbShowOnMap').attr('checked', false);
	$('#mapTabParking .cbSelectAll').attr('checked', false);
	//$('#mapTabParking div.allFiltersContainer').hide();
	$.each(
		uberMapData.Parking,
		function(idx, p) {
			$(p).data('visible', false);
			if (jQuery.inArray(p.Id, parkingIdFilters) == -1) {
				parkingIdFilters.push(p.Id);
				parkingFilters.push(p);
			}
		}
	);
	parkingFilters.sort(compareNames);
	bindFilters(parkingFilters, $('#mapTabParking div.mapTabContentContainer'), 'Parking Options');

}
function bindAllResults(initialLoad) {
    //$('#mapResults').children().remove();
	
	bounds = new google.maps.LatLngBounds();
	bindResults(uberMapData.Hotels, "Hotels", initialLoad);
	bindResults(uberMapData.Restaurants, "Restaurants", initialLoad);
	bindResults(uberMapData.Shopping, "Shopping", initialLoad);
	bindResults(uberMapData.ThingsToDo, "Things To Do", initialLoad);
	bindResults(uberMapData.Parking, "Parking", initialLoad);
	bindResultClicks();
	
	if (bounds.getCenter().lat() != 0) {
	    uberMap.fitBounds(bounds);
	   
	}
	else { 
	    uberMap.setCenter(new google.maps.LatLng(34.07362, -118.400356), 13);
	}
	
	
	


	

	
	
}
function bindResults(merchantData, label, initialLoad) {
	var mapResults = $('#mapResults');
	var resultTemplate = $('div.mapResultTemplate');
	var result;
	var resultList;
	var labelId = xreplace(label, ' ', '');
	
	if (merchantData.length > 0) {
		if (initialLoad) {
			result = resultTemplate.clone();
			$(result).find('span.merchantTypeResult').html(label);
			$(result).addClass('merchantTypeResult' + labelId);
			$(result).removeClass('mapResultTemplate');
			//$(result).addClass(labelId);
			resultList = $(result).find('div.mapResultList');
		}
		else {
			result = $('#mapResults div.' + labelId);
		}
		var count = 0;
		$.each(
			merchantData,
			function(mIdx, m) {
				if (m.Latitude != 0 && m.Longitude != 0) {
					var detail;
					if (initialLoad) {
						detail = $('<div></div>');
						$(detail).addClass('mapResultListDetail');
						$(detail).addClass('m' + m.Id);
						$(detail).html(m.Name);
						
						var latLng = new google.maps.LatLng(m.Latitude, m.Longitude);
						var img = "";
						var catData = null;
						switch (m.MerchantType) {
							case "Hotel":
								img = "/images/map.icon.hotel.png";
								break;
							case "Restaurant":
								img = "/images/map.icon.dining.png";
								catData = m.CuisineTypes;
								break;
							case "Store":
								img = "/images/map.icon.shopping.png";
								catData = m.StoreTypes;
								break;
							case "ThingToDo":
							case "CalendarEvent":
								img = "/images/map.icon.event.png";
								catData = m.Categories;
								break;
							case "Parking":
								img = "/images/map.icon.parking.png";
								break;
						}
						var marker = new google.maps.Marker({
							position: latLng,
							title: m.Name,
							icon: img
						});
						google.maps.event.addListener(marker, 'click', function() {
							infowindow.setContent(buildInfoWindowString(m));
							infowindow.open(uberMap, marker);
						});
						$(detail).data('marker', marker);
						$(detail).data('geocode', latLng);
						
						if (catData != null) {
							$.each(
								catData,
								function(cIdx, cat) {
									$(detail).addClass('cat_' + cat.Id);
								}
							);
						}
						if ($(m).data('visible')) {
							$(detail).addClass('visible');
						}
						
						$(resultList).append($(detail));
					}
					else {
						detail = $(result).find('div.m' + m.Id);
					}
					
					var mkr = $(detail).data('marker');
					
					if (mkr != null) {
						if ($(m).data('visible') == true) {
							count++;
							mkr.setMap(uberMap);
							bounds.extend($(detail).data('geocode'));
							$(detail).show();
							$(detail).data('visible', true);
						}
						else {
							mkr.setMap(null);
							$(detail).hide();
							$(detail).data('visible', false);
						}	
					}
					else {
						$(detail).hide();
					}
					
					$(detail).click(function() {
						var thisMarker = $(this).data('marker');
						google.maps.event.trigger(thisMarker, 'click');
					});
				}
			}
		);
		if (initialLoad) {
			$(mapResults).append(result);
		}
		$(result).find('span.merchantTypeResultCount').html(count);
		if (count > 0) {
			$(result).show();
		}
		else {
			$(result).hide();
		}
	}
}
function buildInfoWindowString(merchant) {
	var hasPhoto = false;
	var photoClass = "";
	if (merchant.ListingPhoto != null && merchant.ListingPhoto.ImageUrl != '') {
		hasPhoto = true;
		photoClass = " photo";
	}
	var w = "<div class='infoWindow" + photoClass + "'>";
	
	if (hasPhoto) {
		w += "<div class='iwListingPhoto'>";
		w += "<img src='/umbraco/ImageGen.ashx?image=" + merchant.ListingPhoto.ImageUrl + "&width=160' />";
		w += "</div>";
	}
	
	w += "<div class='iwMerchantContainer" + photoClass + "'>";
	w += "<div class='iwMerchantName'>" + merchant.Name + "</div>";
	w += "<div class='iwAddress'>";
	if (merchant.Name != merchant.Address1) {
		w += merchant.Address1;
	}
	if (merchant.Phone != null && merchant.Phone != '') {
		w += "<br/>";
		w += "Tel: " + merchant.Phone;
	}
	w += "</div>";
	w += "<div class='iwShortDesc'>";
	if (merchant.ShortDescription != null) {
		w += merchant.ShortDescription;
	}
	w += "</div>";
	
	if (merchant.MerchantType == "Hotel" || merchant.MerchantType == "CalendarEvent") {
		w += "<div class='iwLink'>";
		w += "<a href='" + merchant.DetailUrl + "'>Details</a>";
		w += "</div>";
	}
	w += "</div>";
	w += "</div>";
	return w;
}
function bindFilters(data, parent, label) {
	$(parent).find('span.filtersHeaderLabel').html(label);
	var filterTemplate = $(parent).find('div.filter');
	var allFiltersContainer = $(parent).find('div.allFiltersContainer');
	$.each(
		data,
		function(fIdx, f) {
			var filterDiv = $(filterTemplate).clone();
			$(filterDiv).find('span.filterLabel').html(f.Name);
			$(filterDiv).find('.cbFilter').attr('value', f.Id);
//			if (label.indexOf('Hotel') > -1 || label.indexOf('Parking') > -1) {
//				$(filterDiv).find('.cbFilter').attr('checked', faslse);
//			}
			$(filterDiv).show();
			$(allFiltersContainer).append(filterDiv);
		}
	);
	$(filterTemplate).remove();
}

// TODO: call initMap on map button click
function initMap() {
	if (!mapInited) {
		var latlng = new google.maps.LatLng(34.0736204, -118.4003563);
		var opts = {
			zoom: 14,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		uberMap = new google.maps.Map(document.getElementById("map"), opts);
		
		infowindow = new google.maps.InfoWindow();
		
		compileFilters();
		bindAllResults(true);

		mapInited = true;
		
		$('#mapLoadingText').fadeOut('fast', function() {
			$('#mapLoadingTextComplete').fadeIn('fast');
		});
	}
}
function filterResults(merchantType) {
	merchantTypeId = xreplace(merchantType, ' ', '');
	var merchantTypeResult = $('div.merchantTypeResult' + merchantTypeId);
	var detailRows = $(merchantTypeResult).find('div.mapResultListDetail');
	
	var mapTab = $('#mapTab' + merchantTypeId);
	var allSame = false;
	var allSameVal = 'hidden';
	
	// first see if we're showing on the map at all
	var showOnMap = $(mapTab).find('.cbShowOnMap').is(':checked');
	
	if (!showOnMap) {
		allSame = true;
	}
	else {
		// showing on the map. Is the 'select all' box checked?
		var selectAll = $(mapTab).find('.cbSelectAll').is(':checked');
		if (selectAll) {
			allSame = true;
			allSameVal = 'visible';
		}
		else {
			// ok, "show on map" is checked but "select all" isn't. If all of the sub cats are not checked
			// we can still generalize here
			if ($(mapTab).find('.cbFilter:checked').length == 0) {
				allSame = true;
				allSameVal = 'hidden';
			}
		}
	}
	
	// are they all the same?
	if (allSame) {
		if (allSameVal == 'visible') {
			$(detailRows).removeClass('hidden');
			$(detailRows).addClass('visible');
		}
		else {
			$(detailRows).addClass('hidden');
			$(detailRows).removeClass('visible');
		}
	}
	else {
		// nope. OK, let's see which categories were selected
		var checkedFilters = $(mapTab).find('.cbFilter:checked');
		$(detailRows).removeClass('visible');
		$(detailRows).addClass('hidden');
		$.each(
			checkedFilters,
			function(idx, c) {
				var matches;
				if (merchantTypeId == "Hotels" || merchantTypeId == "Parking") {
					matches = $(merchantTypeResult).find('div.mapResultListDetail.m' + $(c).val());
				}
				else {
					matches = $(merchantTypeResult).find('div.mapResultListDetail.cat_' + $(c).val());
				}
				$(matches).removeClass('hidden');
				$(matches).addClass('visible');
			}
		);
	}
	
	updateResults(merchantTypeId);
}
function updateResults(merchantTypeId) {
	var merchantTypeResult = $('div.merchantTypeResult' + merchantTypeId);
	var results = $(merchantTypeResult).find('div.mapResultListDetail');
	var visibleResults = $(merchantTypeResult).find('div.mapResultListDetail.visible');
	var hiddenResults = $(merchantTypeResult).find('div.mapResultListDetail.hidden');
	$(visibleResults).show();
	$(hiddenResults).hide();
	
	$.each(
		results,
		function(idx, r) {
			var marker = $(r).data('marker');
			if ($(r).hasClass('visible') && $(r).data('visible') === false) {
				marker.setMap(uberMap);
			}
			else if ($(r).hasClass('hidden')) {
				marker.setMap(null);
			}
		}
	);
	
	$(visibleResults).data('visible', true);
	$(hiddenResults).data('visible', false);
	
	var count = visibleResults.length;
	$(merchantTypeResult).find('span.merchantTypeResultCount').html(count);
	
	if (count > 0) {
		$(merchantTypeResult).show();	
	}
	else {
		$(merchantTypeResult).hide();
	}
	
	// re-zoom and center the map
	bounds = new google.maps.LatLngBounds();
	$.each(
		$('div.mapResultListDetail'),
		function(idx, r) {
			if ($(r).hasClass('visible')) {
				bounds.extend($(r).data('geocode'));
			}
		}
	);
		if (bounds.getCenter().lat() != 0) {
		    uberMap.fitBounds(bounds);
		}
		
	reInitResultsScrollbars();
}
function bindResultClicks() {
	$('span.merchantTypeResult').unbind('click');
	$('span.mapResultPlusMinus').unbind('click');
	
	$('span.merchantTypeResult').click(function() {
		$(this).siblings('span.mapResultPlusMinus').click();
	});
	$('span.mapResultPlusMinus').click(function() {
		var results = $(this).parent().find('div.mapResultList');

		if ($(results).is(':visible')) {
			$(results).slideUp('fast', function() {
				reInitResultsScrollbars();
			});
			$(this).html('+');
		}
		else {
			$(results).slideDown('fast', function() {
				reInitResultsScrollbars();
			});
			$(this).html('-');
		}
	});

	$('.cbShowOnMap').click(function() {
		if ($(this).is(':checked')) {
			var container = $(this).parents('.mapFilterContainer');
			var filtersChecked = $(container).find('.cbFilter:checked').length;
			
			if (filtersChecked == 0) {
				// nothing checked, so check 'em all
				$(container).find('.cbSelectAll').attr('checked', true);
				$(container).find('.cbFilter').attr('checked', true);
			}
		}
		var merchantType = $(this).parents('.mapTab').attr('rel');
		filterResults(merchantType);
	});
	$('.cbSelectAll').click(function() {
		$(this).parents('.allFiltersContainer').find('.cbFilter').attr('checked', $(this).is(':checked'));
		if ($(this).parents('.mapFilterContainer').find('.cbShowOnMap').is(':checked')) {
			var merchantType = $(this).parents('.mapTab').attr('rel');
			filterResults(merchantType);
		}
	});
	$('.cbFilter').click(function() {
		if ($(this).is(':checked') && $(this).parents('.mapFilterContainer').find('.cbShowOnMap').is(':checked') == false) {
			$(this).parents('.mapFilterContainer').find('.cbShowOnMap').trigger('click');
		}
		//if ($(this).parents('.mapFilterContainer').find('.cbShowOnMap').is(':checked')) {
		if ($(this).is(':checked') == false) {
			// single filter is unchecked so be sure to uncheck "select all"
			$(this).parents('.allFiltersContainer').find('.cbSelectAll').attr('checked', false);
		}
		var merchantType = $(this).parents('.mapTab').attr('rel');
		filterResults(merchantType);
		//}
	});
}
function reInitResultsScrollbars() {
	var api = $('#mapResults').data('jsp');
	if (api == null) {
		$('#mapResults').jScrollPane({ hideFocus: true, verticalDragMinHeight: 20, verticalDragMaxHeight:100 });
	}
	else {
		setTimeout(function() {
			api.reinitialise();
		}, 200);
	}
}
function compareNames(a, b) {
	var nameA = a.Name.toLowerCase();
	var nameB = b.Name.toLowerCase();
	if (nameA < nameB) { return -1; }
	if (nameA > nameB) { return 1; }
	return 0;
}
