asterix-examples/src/main/resources/old/js/cherry.js

$(function() {	
	    
    APIqueryTracker = {};
    drilldown_data_map = {};
    drilldown_data_map_vals = {};
    asyncQueryManager = {};
    
    // Review Mode
    review_mode_tweetbooks = [];
    review_mode_handles = [];
    
    $('#drilldown_modal').modal({ show: false});
    $('#explore-mode').click( onLaunchExploreMode );
    $('#review-mode').click( onLaunchReviewMode );
    
    /** UI **/
    map_cells = [];
    map_tweet_markers = [];
    param_placeholder = {};
    
    $("#clear-button").button().click(function () {
        mapWidgetClearMap();
        param_placeholder = {};
        
        map.setZoom(4);
        map.setCenter(new google.maps.LatLng(38.89, -77.03));
        
        $('#query-preview-window').html('');
        $("#metatweetzone").html('');
    });
    
    $("#selection-button").button('toggle');
 
    var dialog = $("#dialog").dialog({
        width: "auto",
        title: "AQL Query"
    }).dialog("close");
    $("#show-query-button")
    	.button()
    	.attr("disabled", true)
    	.click(function (event) {
        	$("#dialog").dialog("open");
    	});
    
    // setup grid sliders
    var updateSliderDisplay = function(event, ui) {
        if (event.target.id == "grid-lat-slider") {
            $("#gridlat").text(""+ui.value);
        } else {
          $("#gridlng").text(""+ui.value);
        }
    };
    
    sliderOptions = {
        max: 20,
        min: .1,
        step: .1,
        value: 2.0,
        slidechange: updateSliderDisplay,
        slide: updateSliderDisplay,
        start: updateSliderDisplay,
        stop: updateSliderDisplay
    };

    $("#gridlat").text(""+sliderOptions.value);
    $("#gridlng").text(""+sliderOptions.value);
    $(".grid-slider").slider(sliderOptions);
    
    // setup datepickers
    var dateOptions = {
        dateFormat: "yy-mm-dd",
        defaultDate: "2012-01-02",
        navigationAsDateFormat: true,
        constrainInput: true
    };
    var start_dp = $("#start-date").datepicker(dateOptions);
    start_dp.val(dateOptions.defaultDate);
    dateOptions['defaultDate'] = "2012-12-31";
    var end_dp= $("#end-date").datepicker(dateOptions);
    end_dp.val(dateOptions.defaultDate);
    
    // This little bit of code manages period checks of the asynchronous query manager,
    // which holds onto handles asynchornously received. We can set the handle update
    // frequency using seconds, and it will let us know when it is ready.
    var intervalID = setInterval( 
        function() {
    		asynchronousQueryIntervalUpdate();
    	}, 
    	asynchronousQueryGetInterval()
    );
    
    // setup map
    onOpenExploreMap();
    var mapOptions = {
        center: new google.maps.LatLng(38.89, -77.03),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false,
        draggable : false
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    
    // setup location autocomplete
    var input = document.getElementById('location-text-box');
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Why 17? Because it looks good.
        }
        var address = '';
        if (place.address_components) {
            address = [(place.address_components[0] && place.address_components[0].short_name || ''),
              (place.address_components[1] && place.address_components[1].short_name || ''),
              (place.address_components[2] && place.address_components[2].short_name || '') ].join(' ');
        }
    });
    
    // handle selection rectangle drawing
    shouldDraw = false;
    var startLatLng;
    selectionRect = null;
    var selectionRadio = $("#selection-button");
    var firstClick = true;
    
    google.maps.event.addListener(map, 'mousedown', function (event) {
        // only allow drawing if selection is selected
        if (selectionRadio.hasClass("active")) {
            startLatLng = event.latLng;
            shouldDraw = true;
        }
    });
    
    triggerUIUpdateOnNewTweetBook({"title" : "Party"});

    google.maps.event.addListener(map, 'mousemove', drawRect);
    function drawRect (event) {
        if (shouldDraw) {
            if (!selectionRect) {
                var selectionRectOpts = {
                    bounds: new google.maps.LatLngBounds(startLatLng, event.latLng),
                    map: map,
                    strokeWeight: 1,
                    strokeColor: "2b3f8c",
                    fillColor: "2b3f8c"
                };
                selectionRect = new google.maps.Rectangle(selectionRectOpts);
                google.maps.event.addListener(selectionRect, 'mouseup', function () {
                    shouldDraw = false;
                    //submitQuery();
                });
            } else {
                if (startLatLng.lng() < event.latLng.lng()) {
                    selectionRect.setBounds(new google.maps.LatLngBounds(startLatLng, event.latLng));
                } else {
                    selectionRect.setBounds(new google.maps.LatLngBounds(event.latLng, startLatLng));
                }
            }
        }
    };
    
    // toggle location search style: by location or by map selection
    $('#selection-button').on('click', function (e) {
        $("#location-text-box").attr("disabled", "disabled");
        if (selectionRect) {
            selectionRect.setMap(map);
        }
    });
    $('#location-button').on('click', function (e) {
        $("#location-text-box").removeAttr("disabled");
        if (selectionRect) {
            selectionRect.setMap(null);
        }
    });
    
    $('.dropdown-menu a.holdmenu').click(function(e) {
        e.stopPropagation();
    });
    
    $('#new-tweetbook-button').on('click', function (e) {
        onCreateNewTweetBook($('#new-tweetbook-entry').val());
        
        $('#new-tweetbook-entry').val($('#new-tweetbook-entry').attr('placeholder'));
    });
    
    // handle ajax calls
    $("#submit-button").button().click(function () {
    	// Clear current map on trigger
    	mapWidgetClearMap();
    	
    	// gather all of the data from the inputs
        var kwterm = $("#keyword-textbox").val();
        var startdp = $("#start-date").datepicker("getDate");
        var enddp = $("#end-date").datepicker("getDate");
        var startdt = $.datepicker.formatDate("yy-mm-dd", startdp)+"T00:00:00Z";
        var enddt = $.datepicker.formatDate("yy-mm-dd", enddp)+"T23:59:59Z";

        var formData = {
            "keyword": kwterm,
            "startdt": startdt,
            "enddt": enddt,
            "gridlat": $("#grid-lat-slider").slider("value"),
            "gridlng": $("#grid-lng-slider").slider("value")
        };

    	// Get Map Bounds
    	var bounds;
        if ($('#selection-button').hasClass("active") && selectionRect) {
            bounds = selectionRect.getBounds();
        } else {
            bounds = map.getBounds();
        }
    	
    	formData["swLat"] = Math.abs(bounds.getSouthWest().lat());
        formData["swLng"] = Math.abs(bounds.getSouthWest().lng());
        formData["neLat"] = Math.abs(bounds.getNorthEast().lat());
        formData["neLng"] = Math.abs(bounds.getNorthEast().lng());
		
		var build_cherry_mode = "synchronous";
		if ($('#asbox').is(":checked")) {
		    build_cherry_mode = "asynchronous";
		}
		
		// You don't need to run a query to use the API!
		// It can also be used to generate queries, which can
		// then be passed into another API call or stored 
		// for a different application purpose. 
		var buildCherryQuery = new AsterixCoreAPI()
		    .aql_for({ "t" : "TwitterData"})
		    .aql_let({
		        "keyword"   : '"' + formData["keyword"] + '"',
		        "region"    : new AsterixCoreAPI()
		                        .api_helper_polygon_to_statement({
		                            "ne" : { "lat" : formData["neLat"], "lng" : formData["neLng"]}, 
		                            "sw" : { "lat" : formData["swLat"], "lng" : formData["swLng"]}  })    
		                        })
		    .aql_where([
		        'spatial-intersect($t.loc, $region)',
		        '$t.time > datetime("' + formData["startdt"] + '")',
		        '$t.time < datetime("' + formData["enddt"] + '")',
		        'contains($t.text, $keyword)'
		    ])
		    .aql_groupby({
		        "groupby" : "$c := spatial-cell($t.loc, create-point(24.5,-125.5), " + formData["gridlat"].toFixed(1) + ", " + formData["gridlng"].toFixed(1) + ")", 
		        "with" : "$t"
		    })
		    .aql_return({ "cell" : "$c", "count" : "count($t)" });
		    
		// Here is an actual API call.
		var asterixAPICall = new AsterixCoreAPI()
		    .dataverse("twitter")
		    .statements(buildCherryQuery.parameters["statements"])
		    .mode(build_cherry_mode)
		    .success(cherryQuerySyncCallback, true)
		    .success(cherryQueryAsyncCallback, false)
		    .add_extra("payload", formData) // Legacy
		    .add_extra("query_string", buildCherryQuery.parameters["statements"].join(" ")) // Legacy
		    .api_core_query(); 

		APIqueryTracker = {
		    "query" : buildCherryQuery.parameters["statements"].join("\n"),
		    "data" : formData
		};
		
		$('#dialog').html(APIqueryTracker["query"]);//.replace("\n", '<br />'));

        if (!$('#asbox').is(":checked")) {
		    $('#show-query-button').attr("disabled", false);
        } else {
            $('#show-query-button').attr("disabled", true);
        }
    });
    
});

/** Asynchronous Query Management - Handles & Such **/

/**
* Checks through each asynchronous query to see if they are ready yet
*/
function asynchronousQueryIntervalUpdate() {
    for (var handle_key in asyncQueryManager) {
        if (!asyncQueryManager[handle_key].hasOwnProperty("ready")) { 
            asynchronousQueryGetAPIQueryStatus( asyncQueryManager[handle_key]["handle"], handle_key ); 
        }
    }
}

/**
* Returns current time interval to check for asynchronous query readiness
* @returns  {number}    milliseconds between asychronous query checks
*/
function asynchronousQueryGetInterval() {
    var seconds = 10;
    return seconds * 1000;
}

/**
* Updates UI when an API Query's status is marked ready
* @param    {Object}    res, a result object from the Asterix API
* @param    {object}    extra_info, containing the asynchronous handle's id
*/
function asynchronousQueryAPIStatusReceived (res, extra_info) {
    var handle_outcome = $.parseJSON(res[0]);
    var handle_id = extra_info["handle_id"];
    if (handle_outcome["status"] == "SUCCESS") {
    
        // We don't need to check if this one is ready again, it's not going anywhere...
        // Unless the life cycle of handles has changed drastically
        asyncQueryManager[handle_id]["ready"] = true;
        
        // Make this handle's result look retrievable
        $('#handle_' + handle_id).addClass("label-success");
    }    
}

/**
* Retrieves status of an asynchronous query, using an opaque result handle from API
* @param    {Object}    handle, an object previously returned from an async call
* @param    {number}    handle_id, the integer ID parsed from the handle object
*/
function asynchronousQueryGetAPIQueryStatus (handle, handle_id) {
    var apiQueryStatus = new AsterixCoreAPI()
        .dataverse("twitter")
        .handle(handle)
        .success(asynchronousQueryAPIStatusReceived, true)
        .add_extra("handle_id", handle_id)
        .api_core_query_status();
}

/**
* On-success callback after async API query
* @param    {object}    res, a result object containing an opaque result handle to Asterix
* @param    {object}    extra, a result object containing a query string and query parameters
*/
function cherryQueryAsyncCallback(res, extra) {
    
    // Parse handle, handle id and query from async call result
    var handle = res[0];
    var handle_query = extra["query_string"];
    var handle_id = $.parseJSON(handle)["handle"].toString().split(',')[0];    
    
    // Add to stored map of existing handles
    asyncQueryManager[handle_id] = {
        "handle" : handle,
        "query" : handle_query,
        "data" : extra["payload"]
    };
    
    $('#review-handles-dropdown').append('<a href="#" class="holdmenu"><span class="label" id="handle_' + handle_id + '">Handle ' + handle_id + '</span></a>');
    
    $('#handle_' + handle_id).hover(
        function(){ 
            $('#query-preview-window').html('');
            $('#query-preview-window').html('<br/><br/>' + asyncQueryManager[handle_id]["query"]);
        },
        function() {
            $('#query-preview-window').html('');
        }
    ); 
    
    $('#handle_' + handle_id).on('click', function (e) {
        
        // make sure query is ready to be run
        if (asyncQueryManager[handle_id]["ready"]) {
        
            // Update API Query Tracker and view to reflect this query
            $('#query-preview-window').html('<br/><br/>' + asyncQueryManager[handle_id]["query"]);
            APIqueryTracker = {
                "query" : asyncQueryManager[handle_id]["query"],
                "data"  : asyncQueryManager[handle_id]["data"]
            };
            $('#dialog').html(APIqueryTracker["query"]);
        
            // Generate new Asterix Core API Query
            var asyncResultQuery = new AsterixCoreAPI()
                .dataverse("twitter")
                .handle(asyncQueryManager[handle_id]["handle"])
                .success(cherryQuerySyncCallback, true)
                .add_extra("payload", asyncQueryManager[handle_id]["data"]) // Legacy
		        .add_extra("query_string", asyncQueryManager[handle_id]["query"]) // Legacy
		        .api_core_query_result(); 
        }
    });
}


/** Core Query Management and Drilldown

/**
* A spatial data cleaning and mapping call
* @param    {Object}    res, a result object from a cherry geospatial query
* @param    {Object}    extra, extra data passed from the API call - legacy stuff
*/
function cherryQuerySyncCallback(res, extra) {
    
    var response = $.parseJSON(res[0])
    records = response["results"];
                
    var coordinates = [];
    var coordinate = [];
    var weights = [];
                
    for (var subr = 0; subr < records.length; subr++) {
        for (var record in records[subr]) {
                    
            var cell = records[subr][record].split(")")[0].split("(")[1];
            var count = records[subr][record].split("count")[1].split(":")[1].split(' ')[1];
            coordinate = {
                "weight" : parseInt(count),
                        
                 // x is actually up-down, y is left-right
                 "latSW" : parseFloat(cell.split("|")[0].split(",")[0].split('"')[1]),
                 "lngSW" : -1*parseFloat(cell.split("|")[0].split(",")[1]),
                 "latNE" : parseFloat(cell.split("|")[1].split(",")[0]),
                 "lngNE" : -1*parseFloat(cell.split("|")[1].split(",")[1].split('"')[0]), 
            };
            weights.push(parseInt(count));
            coordinates.push(coordinate);
        }
    }
    
    triggerUIUpdate(coordinates, extra["payload"], weights);
}

/**
* Triggers a map update based on a set of spatial query result cells
* @param    [Array]     mapPlotData, an array of coordinate and weight objects
* @param    [Array]     params, an object containing original query parameters [LEGACY]
* @param    [Array]     plotWeights, a list of weights of the spatial cells - e.g., number of tweets
*/
function triggerUIUpdate(mapPlotData, params, plotWeights) {
    /** Clear anything currently on the map **/
    mapWidgetClearMap();
    param_placeholder = params;
    
    // Compute data point spread
    var dataBreakpoints = mapWidgetLegendComputeNaturalBreaks(plotWeights);
     
    $.each(mapPlotData, function (m, val) {
    
        // Only map points in data range of top 4 natural breaks
        if (mapPlotData[m].weight > dataBreakpoints[0]) {
        
            // Get color value of legend 
            var mapColor = mapWidgetLegendGetHeatValue(mapPlotData[m].weight, dataBreakpoints);
            var markerRadius = mapWidgetComputeCircleRadius(mapPlotData[m], dataBreakpoints);
            var point_opacity = 1.0; // TODO
            
            var point_center = new google.maps.LatLng(
                (mapPlotData[m].latSW + mapPlotData[m].latNE)/2.0, 
                (mapPlotData[m].lngSW + mapPlotData[m].lngNE)/2.0);
            
            // Create and plot marker
            var map_circle_options = {
                center: point_center,
                radius: markerRadius,
                map: map,
                fillOpacity: point_opacity,
                fillColor: mapColor,
                clickable: true
            };
            var map_circle = new google.maps.Circle(map_circle_options);
            map_circle.val = mapPlotData[m];
            
            // Clicking on a circle drills down map to that value
            google.maps.event.addListener(map_circle, 'click', function (event) {
                onMapPointDrillDown(map_circle.val);     
            });
            
            // Add this marker to global marker cells
            map_cells.push(map_circle);
        }    
    });
    
    // Add a legend to the map
    mapControlWidgetAddLegend(dataBreakpoints);
}

/**
* prepares an Asterix API query to drill down in a rectangular spatial zone
*
* @params {object} marker_borders [LEGACY] a set of bounds for a region from a previous api result
*/
function onMapPointDrillDown(marker_borders) {
    var zoneData = APIqueryTracker["data"]; // TODO: Change how this is managed
    
    var zswBounds = new google.maps.LatLng(marker_borders.latSW, marker_borders.lngNE);
    var zneBounds = new google.maps.LatLng(marker_borders.latNE, marker_borders.lngSW); 
    
    var zoneBounds = new google.maps.LatLngBounds(zswBounds, zneBounds);
    zoneData["swLat"] = zoneBounds.getSouthWest().lat();
    zoneData["swLng"] = -1*zoneBounds.getSouthWest().lng();
    zoneData["neLat"] = zoneBounds.getNorthEast().lat();
    zoneData["neLng"] = -1*zoneBounds.getNorthEast().lng();
    
    mapWidgetClearMap();
    
    var customBounds = new google.maps.LatLngBounds();
    var zoomSWBounds = new google.maps.LatLng(zoneData["swLat"], -1*zoneData["swLng"]);
    var zoomNEBounds = new google.maps.LatLng(zoneData["neLat"], -1*zoneData["neLng"]); 
    customBounds.extend(zoomSWBounds);
    customBounds.extend(zoomNEBounds);
    map.fitBounds(customBounds);
    
    var drilldown_string = ["use dataverse " + "twitter" + ";",
        "for $t in dataset('" + "TwitterData" + "')",
        "let $keyword := \"" +zoneData["keyword"] + "\"",
        "let $region := polygon(\"", 
           zoneData["neLat"] + "," + zoneData["swLng"] + " ",
           zoneData["swLat"] + "," + zoneData["swLng"] + " ",
           zoneData["swLat"] + "," + zoneData["neLng"] + " ",
           zoneData["neLat"] + "," + zoneData["neLng"] + "\")",
           "where spatial-intersect($t.loc, $region) and",
           "$t.time > datetime(\"" + zoneData["startdt"] + "\") and $t.time < datetime(\"" + zoneData["enddt"] + "\") and",
           "contains($t.text, $keyword)",
           "return { \"tweetId\": $t.tweetid, \"tweetText\": $t.text, \"tweetLoc\": $t.loc}"];
    
    var zQ = new AsterixCoreAPI()
        .dataverse("twitter")
        .statements(drilldown_string)
        .add_extra("payload", zoneData) // Legacy
        .mode("synchronous")
        .success(onTweetbookQuerySuccessPlot, true)
        .add_extra("query_string", drilldown_string.join(" "))
        .add_extra("marker_path", "../img/mobile2.png")
        .add_extra("on_click_marker", onClickTweetbookMapMarker)
        .add_extra("on_clean_result", onCleanTweetbookDrilldown)
        .api_core_query();
}

function triggerUIUpdateOnDropTweetBook(extra_info) {
    // TODO Remove menu entry
    // review-tweetbook-titles.html('')
    // Append each in review_mode_tweetbooks if not same as extra_info["title"]
    // $('#review-tweetbook-titles').append('<li><a href="#">' + extra_info["title"] + '</a></li>');
}

function onDrillDownAtLocation(tO) {

    $('#drilldown_modal_body').append('<div id="drilltweetobj' + tO["tweetEntryId"] + '"></div>');
    
    $('#drilltweetobj' + tO["tweetEntryId"]).append('<p>' + tO["tweetText"] + '</p>');
    
    $('#drilltweetobj' + tO["tweetEntryId"]).append('<input class="textbox" type="text" id="metacomment' + tO["tweetEntryId"] + '">');
    
    if (tO.hasOwnProperty("tweetbookComment")) {
        $('#metacomment' + tO["tweetEntryId"]).val(tO["tweetbookComment"]);
    }
    
    $('#drilltweetobj' + tO["tweetEntryId"]).append('<button title="' + tO["tweetEntryId"] + '" id="meta' + tO["tweetEntryId"] + '">Add Comment to...</button>');
    
    $('#drilltweetobj' + tO["tweetEntryId"]).append('<input class="textbox" type="text" id="tweetbooktarget' + tO["tweetEntryId"] + '">');

    $('#meta' + tO["tweetEntryId"])
        .button()
        .click( function () {
       
            var valid = $('#meta' + tO["tweetEntryId"]).attr('title');
            var valcomment = $("#metacomment" + valid).val();
            var valtext = drilldown_data_map_vals[valid.toString()]["tweetText"];
            var tweetbookname = $("#tweetbooktarget" + valid).val();
            
            //Try to add the tweetbook, if it does not already exist
            onCreateNewTweetBook(tweetbookname);
            
            var apiCall = new AsterixCoreAPI()
                .dataverse("twitter")
                .statements([
                    'delete $l from dataset ' + tweetbookname + ' where $l.id = "' + valid + '";',
                    'insert into dataset ' + tweetbookname + '({ "id" : "' + valid + '", "metacomment" : "' + valcomment + '"});'  
                ])
                .api_core_update();
        });
    
}

function onCreateNewTweetBook(tweetbook_title) {
    
    var newTweetbookAPICall = new AsterixCoreAPI()
        .dataverse("twitter")
        .create_dataset({ 
            "dataset"       : tweetbook_title,
            "type"          : "MetaTweet",
            "primary_key"   : "id"
        })
        .add_extra("title", tweetbook_title)
        .success(triggerUIUpdateOnNewTweetBook, true)
        .api_core_update(); 
        // Possible bug...ERROR 1: Invalid statement: Non-DDL statement DATASET_DECL to the DDL API.
      
    /*var removeTest = new AsterixCoreAPI()
        .dataverse("twitter")
        .drop_dataset("blah")
        .api_core_update(); */
}

function onDropTweetBook(tweetbook_title) {
    var removeTest = new AsterixCoreAPI()
        .dataverse("twitter")
        .drop_dataset(tweetbook_title)
        .success(triggerUIUpdateOnDropTweetBook, true)
        .api_core_update(); 
}

function onTweetbookQuerySuccessPlot (res, extra) {
    var response = $.parseJSON(res[0]);
    var records = response["results"];
    var coordinates = [];
    map_tweet_markers = [];  
    map_tweet_overlays = [];
    drilldown_data_map = {};
    drilldown_data_map_vals = {};
    
    var micon = extra["marker_path"];
    var marker_click_function = extra["on_click_marker"];
    var clean_result_function = extra["on_clean_result"];
    
    coordinates = clean_result_function(records);

    for (var dm in coordinates) {
        var keyLat = coordinates[dm].tweetLat.toString();
        var keyLng = coordinates[dm].tweetLng.toString();
        if (!drilldown_data_map.hasOwnProperty(keyLat)) {
            drilldown_data_map[keyLat] = {}; 
        }
        if (!drilldown_data_map[keyLat].hasOwnProperty(keyLng)) {
            drilldown_data_map[keyLat][keyLng] = []; 
        }
        drilldown_data_map[keyLat][keyLng].push(coordinates[dm]);
        drilldown_data_map_vals[coordinates[dm].tweetEntryId.toString()] = coordinates[dm];  
    }
    
    $.each(drilldown_data_map, function(drillKeyLat, valuesAtLat) {
        $.each(drilldown_data_map[drillKeyLat], function (drillKeyLng, valueAtLng) {
            
            // Get subset of drilldown position on map
            var cposition =  new google.maps.LatLng(parseFloat(drillKeyLat), parseFloat(drillKeyLng));
            
            // Create a marker using the snazzy phone icon
            var map_tweet_m = new google.maps.Marker({
                position: cposition,
                map: map,
                icon: micon,
                clickable: true,
            });
            
            // Open Tweet exploration window on click
            google.maps.event.addListener(map_tweet_m, 'click', function (event) {
                marker_click_function(drilldown_data_map[drillKeyLat][drillKeyLng]);
            });
            
            // Add marker to index of tweets
            map_tweet_markers.push(map_tweet_m); 
            
        });
    });
}

function triggerUIUpdateOnNewTweetBook(extra_info) {
    // Add tweetbook to log
    if (parseInt($.inArray(extra_info["title"], review_mode_tweetbooks)) == -1) {
        review_mode_tweetbooks.push(extra_info["title"]);
        
        // Add menu entry
        $('#review-tweetbook-titles').append('<li><a href="#"><span id="tbook_' + extra_info["title"] + '">' + extra_info["title"] + '</span></a></li>');
    
        // Add on-click behavior
        $("#tbook_" + extra_info["title"]).on('click', function(e) {
            var plotTweetbookQuery = new AsterixCoreAPI()
                .dataverse("twitter")
                .success(onTweetbookQuerySuccessPlot, true)
                .aql_for({"mt": extra_info["title"]})
                .aql_where(["int64($mt.id)%1500 = 0"])
                .aql_return({ "id" : "$mt.id", "location" : "$mt.loc", "comment" : "$mt.metacomment", "tweet" : "$mt.tweet" }) 
                .add_extra("tweetbook_title", extra_info["title"])
                .add_extra("marker_path", "../img/mobile_green2.png")
                .add_extra("on_click_marker", onClickTweetbookMapMarker)
                .add_extra("on_clean_result", onCleanPlotTweetbook)
                .api_core_query();
                
        });
    }
}

function onCleanPlotTweetbook(records) {
    var toPlot = [];
    for (var subrecords = 0; subrecords < records.length; subrecords++) {
        for (var record in records[subrecords]) {
            var tweetbook_element = {
                "tweetEntryId" : parseInt(records[subrecords][record].split(",")[0].split(":")[1].split('"')[1]),
                "tweetLat"     : parseFloat(records[subrecords][record].split("location\": point(\"")[1].split(",")[0]),
                "tweetLng"     : -1*parseFloat(records[subrecords][record].split("location\": point(\"")[1].split(",")[1].split("\"")[0]),
                "tweetText"    : records[subrecords][record].split("tweet\": \"")[1].split("\"")[0],
                "tweetbookComment" : records[subrecords][record].split("comment\": \"")[1].split("\", \"tweet\":")[0]
            };
            toPlot.push(tweetbook_element);
        }
    }
    return toPlot;
}

function onCleanTweetbookDrilldown (rec) {
    var drilldown_cleaned = [];
    for (var subresult = 0; subresult < rec.length; subresult++) {
        for (var entry in rec[subresult]) {
            
            var drill_element = {
                "tweetEntryId" : parseInt(rec[subresult][entry].split(",")[0].split(":")[1].split('"')[1]),
                "tweetText" : rec[subresult][entry].split("tweetText\": \"")[1].split("\", \"tweetLoc\":")[0],
                "tweetLat" : parseFloat(rec[subresult][entry].split("tweetLoc\": point(\"")[1].split(",")[0]),
                "tweetLng" : -1*parseFloat(rec[subresult][entry].split("tweetLoc\": point(\"")[1].split(",")[1].split("\"")[0])
            };
            drilldown_cleaned.push(drill_element);
            
        } 
    }
    return drilldown_cleaned;
}

function onClickTweetbookMapMarker(tweet_arr) {
    $('#drilldown_modal_body').html('');

    // Clear existing display
    $.each(tweet_arr, function (t, valueT) {
        var tweet_obj = tweet_arr[t];
        onDrillDownAtLocation(tweet_obj);
    });
    
    $('#drilldown_modal').modal('show');
}

/** Toggling Review and Explore Modes **/

/**
* Explore mode: Initial map creation and screen alignment
*/
function onOpenExploreMap () {
    var explore_column_height = $('#explore-well').height();   
    $('#map_canvas').height(explore_column_height + "px");
    $('#review-well').height(explore_column_height + "px");
    $('#review-well').css('max-height', explore_column_height + "px");
    var pad = $('#review-well').innerHeight() - $('#review-well').height();
    var prev_window_target = $('#review-well').height() - 20 - $('#group-tweetbooks').innerHeight() - $('#group-background-query').innerHeight() - 2*pad;
    $('#query-preview-window').height(prev_window_target +'px');
}

/**
* Launching explore mode: clear windows/variables, show correct sidebar
*/
function onLaunchExploreMode() {
    $('#review-active').removeClass('active');
    $('#review-well').hide();
    
    $('#explore-active').addClass('active');    
    $('#explore-well').show();
    
    $("#clear-button").trigger("click");
}

/**
* Launching review mode: clear windows/variables, show correct sidebar
*/
function onLaunchReviewMode() {
    $('#explore-active').removeClass('active');
    $('#explore-well').hide();
    $('#review-active').addClass('active');
    $('#review-well').show();
    
    $("#clear-button").trigger("click");
}

/** Map Widget Utility Methods **/

/**
* Plots a legend onto the map, with values in progress bars
* @param    {number Array}  breakpoints, an array of numbers representing natural breakpoints
*/
function mapControlWidgetAddLegend(breakpoints) {
   
    // Retriever colors, lightest to darkest
    var colors = mapWidgetGetColorPalette();
    
    // Initial div structure
    $("#map_canvas_legend").html('<div id="legend-holder"><div id="legend-progress-bar" class="progress"></div><span id="legend-label"></span></div>');

    // Add color scale to legend
    $('#legend-progress-bar').css("width", "200px").html('');
    
    // Add a progress bar for each color
    for (var color in colors) {
        
        // Bar values
        var upperBound = breakpoints[parseInt(color) + 1];
        
        // Create Progress Bar
        $('<div/>')
            .attr("class", "bar")
            .attr("id", "pbar" + color)
            .css("width" , '25.0%')
            .html("< " + upperBound)
            .appendTo('#legend-progress-bar');
        
        $('#pbar' + color).css({
            "background-image" : 'none',
            "background-color" : colors[parseInt(color)]
        });
        
        // Attach a message showing minimum bounds     
        $('#legend-label').html('Regions with at least ' + breakpoints[0] + ' tweets');
        $('#legend-label').css({
            "color" : "black"
        });
    }
    
    // Add legend to map
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('legend-holder'));
    $('#map_canvas_legend').show(); 
}

/**
* Clears map elements - legend, plotted items, overlays
*/
function mapWidgetClearMap() {

    if (selectionRect) {
        selectionRect.setMap(null);
        selectionRect = null;
    }
    for (c in map_cells) {
        map_cells[c].setMap(null);
    }
    map_cells = [];
    for (m in map_tweet_markers) {
        map_tweet_markers[m].setMap(null);
    }
    map_tweet_markers = [];
    
    // Remove legend from map
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].clear();
}

/**
* Uses jenks algorithm in geostats library to find natural breaks in numeric data
* @param    {number Array} weights of points to plot
* @returns  {number Array} array of natural breakpoints, of which the top 4 subsets will be plotted
*/ 
function mapWidgetLegendComputeNaturalBreaks(weights) {
    var plotDataWeights = new geostats(weights.sort());
    return plotDataWeights.getJenks(6).slice(2, 7);
}

/**
* Computes values for map legend given a value and an array of jenks breakpoints
* @param    {number}        weight of point to plot on map
* @param    {number Array}  breakpoints, an array of 5 points corresponding to bounds of 4 natural ranges
* @returns  {String}        an RGB value corresponding to a subset of data
*/
function mapWidgetLegendGetHeatValue(weight, breakpoints) {

    // Determine into which range the weight falls
    var weightColor = 0;
    if (weight >= breakpoints[3]) {
        weightColor = 3;
    } else if (weight >= breakpoints[2]) {
        weightColor = 2;
    } else if (weight >= breakpoints[1]) {
        weightColor = 1;
    }

    // Get default map color palette
    var colorValues = mapWidgetGetColorPalette();
    return colorValues[weightColor];
}

/**
* Returns an array containing a 4-color palette, lightest to darkest
* External palette source: http://www.colourlovers.com/palette/2763366/s_i_l_e_n_c_e_r
* @returns  {Array}    [colors]
*/
function mapWidgetGetColorPalette() {
    return [ 
        "rgb(115,189,158)", 
        "rgb(74,142,145)", 
        "rgb(19,93,96)", 
        "rgb(7,51,46)"
    ];  
}

/**
* Computes radius for a given data point from a spatial cell
* @param    {Object}    keys => ["latSW" "lngSW" "latNE" "lngNE" "weight"]
* @returns  {number}    radius between 2 points in metres
*/
function mapWidgetComputeCircleRadius(spatialCell, breakpoints) {
    
    var weight = spatialCell.weight;
    // Compute weight color
    var weightColor = 0.25;
    if (weight >= breakpoints[3]) {
        weightColor = 1.0;
    } else if (weight >= breakpoints[2]) {
        weightColor = 0.75;
    } else if (weight >= breakpoints[1]) {
        weightColor = 0.5;
    }

    // Define Boundary Points
    var point_center = new google.maps.LatLng((spatialCell.latSW + spatialCell.latNE)/2.0, (spatialCell.lngSW + spatialCell.lngNE)/2.0);
    var point_left = new google.maps.LatLng((spatialCell.latSW + spatialCell.latNE)/2.0, spatialCell.lngSW);
    var point_top = new google.maps.LatLng(spatialCell.latNE, (spatialCell.lngSW + spatialCell.lngNE)/2.0);
    
    // TODO not actually a weight color :)
    return weightColor * 1000 * Math.min(distanceBetweenPoints_(point_center, point_left), distanceBetweenPoints_(point_center, point_top));
}

/** External Utility Methods **/

/**
 * Calculates the distance between two latlng locations in km.
 * @see http://www.movable-type.co.uk/scripts/latlong.html
 *
 * @param {google.maps.LatLng} p1 The first lat lng point.
 * @param {google.maps.LatLng} p2 The second lat lng point.
 * @return {number} The distance between the two points in km.
 * @private
*/
function distanceBetweenPoints_(p1, p2) {
  if (!p1 || !p2) {
    return 0;
  }

  var R = 6371; // Radius of the Earth in km
  var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
  var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
  var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *
    Math.sin(dLon / 2) * Math.sin(dLon / 2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  var d = R * c;
  return d;
};