var map = null;
	var geocoder = null;
	var markers = [];
	var counter = 0;
	
	var bounds = null;
	var currentInfoWindow = null;
	var isMapExpanded = false;
	
	// Create our "tiny" marker icon
	var tinyIcon = new GIcon();
	tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
	tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	tinyIcon.iconSize = new GSize(12, 20);
	tinyIcon.shadowSize = new GSize(22, 20);
	tinyIcon.iconAnchor = new GPoint(6, 20);
	tinyIcon.infoWindowAnchor = new GPoint(5, 1);
	// Set up our GMarkerOptions object literal
	var markerOptions = { icon:tinyIcon };
	
	var currentBubbleId = -1;
	var previousBubble = null;
	
	$(document).ready(function(){
	
		resizeHandler();
		$("#bubbleListSortSelect option[value='default']").attr('selected', 'selected');
	
		map = new GMap2(document.getElementById('bubblesmap'));
		geocoder = new GClientGeocoder();
	
		var VanDowntownCA = new GLatLng(49.280124466477595, -123.11588287353516);
		map.setCenter(VanDowntownCA, 10);
		// Add the self created control
		map.addControl(new MoreControl());
		map.addControl(new GSmallZoomControl3D());
		map.addControl(new GMenuMapTypeControl());
		map.setMapType(G_HYBRID_MAP); 
		 
		bounds = new GLatLngBounds();
	
		drawBubbles();
	
		$('#bubbleListSortSelect').change(function(){
			sortBubbleList($(this).val());
			resetPosition();
			scrollToPosition(false);
		});
	
		if(defaultBubble>0){
			$("#"+defaultBubble).trigger("click");
		}			
	
	});
	
	function MoreControl() {};
		MoreControl.prototype = new GControl();
		MoreControl.prototype.initialize = function(map) {
	
		 var more = document.getElementById("outer_more");
		 var buttonDiv = document.createElement("div");
		 buttonDiv.id = "morebutton";
		 buttonDiv.style.border = "1px solid black";
		
		 var textDiv = document.createElement("div");
		 textDiv.id = "more_inner";
		 textDiv.appendChild(document.createTextNode("Expand Map"));
		 buttonDiv.appendChild(textDiv);
	
		 // Register Event handlers
		 buttonDiv.onclick = toggleMap;
	
		 // Insert the button just after outer_more div
		 more.appendChild(buttonDiv);
		 // Remove the whole div from its location and reinsert it to the map
		 map.getContainer().appendChild(more);
		 return more;
	};


	MoreControl.prototype.getDefaultPosition = function() {
	 return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
	};
	
	GMenuMapTypeControl.prototype.getDefaultPosition = function() {
	 return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 30));
	};
	
	GSmallZoomControl3D.prototype.getDefaultPosition = function() {
		 return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 55));
	};
	
	function toggleMap(){
	
		showBubbleContainer();
		
		if (isMapExpanded) {
			$('#pframe').show();
			$('#bubblesmap_placeholder').hide();
			$('#bubblesmap-container').append($('#bubblesmap'));
			$('#more_inner').text('Expand Map');
			isMapExpanded = false;
		
		}else{
			$('#pframe').hide();
			$('#SWFBubbleContainer').append($('#bubblesmap'));
			showSmallSWF();
			$('#bubblesmap_placeholder').show();
			$('#more_inner').text('Minimize Map');
			isMapExpanded = true;
		}
		resizeMap();	
	}
	
	function showContentContainer(name){
		$('#SWFBubbleContainer').hide();
		$('.contentPage').hide();
		$('#'+name).show();
		$('#contentPageContainer').show();
		
		if(name=='sendToFriendPage'){
			tellafriend = $('#tframe').contents();
			if(currentBubbleId!=-1){
				tellafriend.find('#currentBubbleId').val(bubbles[currentBubbleId]['id']);
				tellafriend.find('#currentBubbleName').val(bubbles[currentBubbleId]['name']);
				tellafriend.find('#currentBubbleUrl').text('http://photobubbles.com/bubble/'+bubbles[currentBubbleId]['id']);
				tellafriend.find('#currentBubbleText').text(bubbles[currentBubbleId]['name']);
			}else{
				tellafriend.find('#currentBubbleId').val(-1);
			}
		}
	}
	
	function showBubbleContainer(){
		$('#contentPageContainer').hide();
		$('#SWFBubbleContainer').show();		
	}
	
	
	function showSmallSWF(){
		var swfbub = '';
		if(currentBubbleId == -1){
			$('#bubblesmap_placeholder').html('<img src="/images/logo.jpg"/>');
			return;
		}
	
		var swfName = bubbles[currentBubbleId]['swf'];
	
		if(swfName.length > 0 ){
			var swfFile = bubbles[currentBubbleId]['directory'] + '/' + swfName;
	
			if (DetectFlashVer(9,0,0)) {
				swfbub =  p2q_EmbedFlashReturn('/bubbles/'+swfFile+'?v4', '400', '250',
						'bgcolor', '#FFFFFF',
						'play', 'true',
						'cache','true',
						'allowFullscreen','true',
						'wmode','transparent',
						'autoplay','true');
	
			} else {  // flash is too old or we can't detect the
				// plugin
				swfbub = '<b>This content requires the Adobe Flash Player Version 9 or higher. <a href=http://www.adobe.com/go/getflash/>Get Flash</a></b>';
			}
			$('#bubblesmap_placeholder').html(swfbub);
	
			// NO SWF in DB
		}else{
	
			$('#bubblesmap_placeholder').html('<img src="/images/logo.jpg"/>');
		}
	}
	
	function showBubbleSWF(id){
		currentBubbleId = id;
		$('#pframe').attr('src', 'http://www.photobubbles.com/bubbles/'+bubbles[id]['directory']+'/');
	}
	
	function scrollToPosition(animate){
		id = $('#bubblesContainer li.selected').attr('id');
	
		var i=0;
		var found=0;
		// Determine position of li
		$("#bubblesContainer li").each(function() {
			var n = $(this).attr('id'); 
			if(n==id){
				found = i;
			}
			i = i + 1;
		});
		view = Math.floor(found/VIEWPORT) ;
		newPosition = view * VIEWPORT;
	
		if(animate){
			rotateToPosition(newPosition);
		}
		else{
			goToPosition(newPosition);
		}
	}
	
	function drawBubbles(){
		for (var i = 0; i < bubbles.length; i++) {
			point = new GLatLng(bubbles[i]['geo_lat'], bubbles[i]['geo_lng']);
			bubbles[i]['point'] = point;
			createMarker(point, i, bubbles[i]);
			bounds.extend(point);
		}
	}
	
	// A function to create the marker and set up the event window
	function createMarker(point,id,bubble) {
	
		var tempMarker = new GMarker(point, markerOptions);
	
		GEvent.addListener(tempMarker, "click", function() {
			map.panTo(point);
			if(previousBubble){
				previousBubble.setImage('http://labs.google.com/ridefinder/images/mm_20_blue.png');
			}
			tempMarker.setImage('http://labs.google.com/ridefinder/images/mm_20_red.png');
			previousBubble = tempMarker;
			$("#bubbleList li").removeClass("selected");
			$('#bubbleList li#'+id).addClass("selected");
			showBubbleSWF(id);
			scrollToPosition(true);
			
			showBubbleContainer();
			
			if(isMapExpanded){
				showSmallSWF();
			}
			
		});
	
		$("#"+id)
		.click(function(){
			if(id!=currentBubbleId){
				GEvent.trigger(tempMarker, "click");
				$("#bubbleList li").removeClass("selected");
				$(this).addClass("selected");
				showBubbleContainer();
				showBubbleSWF(id);
			}
		})
	
		map.addOverlay(tempMarker);
	}
	
	function zoomToBounds() {
		if(map){
			map.checkResize();
			if(currentBubbleId!=-1){
				map.setCenter(bubbles[currentBubbleId]['point']);
			}else{
				map.setZoom(map.getBoundsZoomLevel(bounds));
				map.setCenter(bounds.getCenter());
			}
		}
	}
	

	function removeMarkers(){
	
		for (var i = 0; i < markers.length; i++) {
			map.removeOverlay(markers[i]);
		}
		markers = [];
	
	}
	
	function sortBubbleList(type){
		selector = type;
		if(type=='ground'){
			type = 'air';
		}
		
		var rows = $('#bubbleList').find('li').get();
	
		rows.sort(function(a, b) {
			var keyA = $(a).children('div.'+type).text().toUpperCase();
			var keyB = $(b).children('div.'+type).text().toUpperCase();
			if(selector=='date' || selector=='air'){
				if (keyA < keyB) return 1;
				if (keyA > keyB) return -1;
			}else if(selector=='rating'){
				keyA = parseInt(keyA);
				keyB = parseInt(keyB);
				if (keyA < keyB) return 1;
				if (keyA > keyB) return -1;
			}else{
				if (keyA < keyB) return -1;
				if (keyA > keyB) return 1;
			}
			return 0;
		});
	
		$.each(rows, function(index, row) {
			$('#bubbleList').children('ul').append(row)
		}) 
	}
	
	
	/* Sliding Globals */
	var qPointer = 0;
	var rotateInProgress = false;
	
	/* Constants */
	var QHEIGHT = 95;
	var VIEWPORT = 1;
	var JUMP = 1;
	
	function resetPosition(){
		rotateInProgress = true;
		qPointer = 0;
	
	//	$("#bubbleList").animate({scrollTop:0},1000);
		$("#bubbleList").scrollTop(0);
	
		rotateInProgress = false;
	}
	
	function goToPosition(id) {
		qPointer = id;
		newTop = qPointer * QHEIGHT ;
		$("#bubbleList").scrollTop(newTop);
	}
	
	function rotateToPosition(id) {
	
		rotateInProgress = true;
		qPointer = id;
		newTop = qPointer * QHEIGHT ;
	
		$("#bubbleList").animate({scrollTop:newTop},1000);
		rotateInProgress = false;
	}
	
	
	// window resize event
	$(window).resize(function () {
		resizeHandler();
	});
	
	// resize handler
	function resizeHandler() {
	
		var heading = $("#headimg").height();			
		// alert('h:'+heading);
		var bubblesmap = 250;
		// blueborders (8+8) and bottom margin 5
		var border = 35;
		// alert('h:'+bubblesmap);
		var bubbleListSort = $("#bubbleListSort").height();			
		// alert('h:'+bubbleListSort);
		var total = (heading+bubblesmap+bubbleListSort+border);
		var windowHeight = $(window).height();
	
		space = windowHeight - total;
		
		$('#size').text('window:'+windowHeight+' total:'+total+' sp:'+space);
		
		var bubbleslist = $("#bubbleList").height();			
	
		var windowcontainer = $("#window-container").height();
		
	
		if(space>205){
	
			$("#bubbleList").css({height:space});
			var space2  = (windowcontainer-bubbleslist) + space;
			$("#window-container").css({height:space2});
			$("#pframe").attr('height', space2+'px');
			$("#tframe").attr('height', space2+'px');
			$("#nframe").attr('height', space2+'px');
	
			resizeMap();
		}else{
			
			$("#bubbleList").css({height:410});
			var space2 = $("#map-container").height();
			 $("#window-container").css({height:space2});
			$("#pframe").attr('height', space2+'px');
			$("#tframe").attr('height', space2+'px');
			$("#nframe").attr('height', space2+'px');
	
			resizeMap();
		}
	
	}
	
	function resizeMap(){
		if (isMapExpanded) {
			$("#bubblesmap").css('height', $("#window-container").height() + 'px');
			$("#bubblesmap").css('width', $("#window-container").width() + 'px');
		}else{
			$("#bubblesmap").css('height', '250px');
			$("#bubblesmap").css('width', '400px');
		}
		zoomToBounds();
	}