var map;
var mapInitZoom = 13;

$(document).ready(function(){
	// ---------------------------------------------------------------
	// CREATE TABS
	// ---------------------------------------------------------------
	$("#tabs").tabs();

	$('#tabs').bind('tabsshow', function(event, ui) {
		if (ui.panel.id == "tab-streaming") {
			if (videoMode != 'off') videoStart();					
		} else {
			if (videoMode != 'off') videoStop();
			
			// trigger map resize on tab load
			if (ui.panel.id == "tab-map") {
				resizeMap();
				if (!mapInitialised) {
					// because the map tab div is zero width initially,
					// we need to re-centre it when first viewed
					map.setCenter(camLocation, mapInitZoom);
					
					// If we add this when the map is initially constructed,
					// it ends up with the border in the wrong place and blocks
					// the entire map in Safari
					map.addControl(new GOverviewMapControl());
					
					mapInitialised = true;
				}
			}
		}
	});
	
	// ---------------------------------------------------------------
	// MAP
	// ---------------------------------------------------------------
	if (mapEnabled) {
		var mapInitialised = false;
		var marker;
	
		var iconApprox = new GIcon(G_DEFAULT_ICON);
		iconApprox.image = "/images/marker_red_circle.png";
		iconApprox.iconSize = new GSize(20,20);
		iconApprox.shadow = "/images/marker_red_circle_shadow.png";
		iconApprox.shadowSize = new GSize(37,34);
	
		var markerDragged = false;
		var marker;
		var markerNormal = new GMarker(camLocation, { draggable: mapEditable });
		var markerApprox = new GMarker(camLocation, { icon: iconApprox, draggable: mapEditable });
	
		if (camLocationAccuracy <= 1) {
			mapInitZoom = 12;
		}
		
		// initialise
		if (GBrowserIsCompatible()) {
			map = new GMap2(document.getElementById("map"));
			map.setUIToDefault();
			map.addControl(new GScaleControl());
			map.setCenter(camLocation, mapInitZoom);
			GEvent.addListener(map, "zoomend", function(oldzoom, newzoom) { setMarker(); });
			setMarker();
		}

		// trigger map resize on window resize
		$(window).resize(function(event, ui) { resizeMap(); });
	}

	// refresh and resize the map
	function resizeMap()
	{
		bodyHeight = $(document.body).height();
		tabHeight = $('#tabs').height();
		frameHeight = parent.$('#frame-camview').height();
		$('#map').height(frameHeight - (bodyHeight - tabHeight) - 70); // 70 = fudge factor
		map.checkResize();
	}

	// put a marker in the right place
	function setMarker()
	{
		var zoom = map.getZoom();
		if (typeof(marker) != 'undefined') {
			map.removeOverlay(marker);
		}
		
		marker = markerNormal;
		if (!markerDragged) {
			if (zoom >= 11 && camLocationAccuracy < 1) { // 1 = town level
				marker = markerApprox;
			} else if (zoom >= 13 && camLocationAccuracy < 2) { // 2 = 500m
				marker = markerApprox;
			} else if (zoom >= 15 && camLocationAccuracy < 3) { // 3 = 200m
				marker = markerApprox;
			} else if (zoom >= 17 && camLocationAccuracy < 4) { // 4 = 50m
				marker = markerApprox;
			} else if (zoom >= 19 && camLocationAccuracy < 5) { // 5 = 20m
				marker = markerApprox;
			}
		}
		map.addOverlay(marker);
		if (mapEditable) {
			GEvent.addListener(marker, "dragend", function(point) {
				markerDragged = true;
				markerNormal = new GMarker(point, { draggable: true });
				setMarker();
				$('#marker-save').css('display', 'block');
				$('#lat').attr('value', point.lat());
				$('#long').attr('value', point.lng());
			});
		}
	}
		

	// ---------------------------------------------------------------
	// IMAGE RESIZING AND LIGHTBOXING
	// ---------------------------------------------------------------
	function resizeImage()
	{
		var panelWidth = parent.$('#frame-camview').width();
		if ($('#webcam-image').width() > (panelWidth - 55)) {
			parent.$('#frame-camview').contents().find('#webcam-image').lightbox();
			parent.$('#frame-camview').contents().find('#enlarge-link').lightbox();
			$('#webcam-image').width('100%');
			$('#enlarge-button').css('display', 'inline');
		}
	}

	// Trigger image resize when the image has finished loading
	$('#webcam-image').load(function() {
		resizeImage();
	});
	
	// Although there is a trigger above for when the image load is
	// complete, a cached version may already be shown whilst a fresher
	// one is loaded, so do a resize on initial load too
	resizeImage();
	
	// ---------------------------------------------------------------
	// INITIALISE VIDEO (no static image tab)
	// ---------------------------------------------------------------
	if (videoKickstart) videoStart();
});

// ---------------------------------------------------------------
// STREAMING VIDEO FUNCTIONS
// ---------------------------------------------------------------
function videoStart()
{
	// Since JS is enabled, we don't need the manual link to the video.
	$("#webcam-video-link").attr('href', '#');
	if (videoMode == 'mjpeg_emulated') {
		mJpegEmulateStart();
	} else {
		$("#webcam-video").attr('src', videoStreamingURL);
	}
}
function videoStop()
{
	if (videoMode == 'mjpeg_emulated') {
		mJpegEmulateStop();
	} else {
		$("#webcam-video").attr('src', '');
	}
}