asterix-examples/src/main/resources/black-cherry/static/js/cherry.js

$(function() {	
	
	// Initialize connection to AsterixDB. Just one connection is needed and contains
	// logic for connecting to each API endpoint. This object A is reused throughout the
	// code but does not store information about any individual API call.  
	A = new AsterixDBConnection({
	
	    // We will be using the twitter dataverse, which we can configure either like this
	    // or by following our AsterixDBConnection with a dataverse call, like so:
	    // A = new AsterixDBConnection().dataverse("twitter");
	    "dataverse" : "twitter",
	    
	    // Due to the setup of this demo using the Bottle server, it is necessary to change the
	    // default endpoint of API calls. The proxy server handles the call to http://localhost:19002
	    // for us, and we reconfigure this connection to connect to the proxy server.
	    "endpoint_root" : "/",
	  
	    // Finally, we want to make our error function nicer so that we show errors with a call to the
	    // reportUserMessage function. Update the "error" property to do that.
	    "error" : function(data) {
	                // For an error, data will look like this:
	                // {
	                //     "error-code" : [error-number, error-text]
	                //     "stacktrace" : ...stack trace...
	                //     "summary"    : ...summary of error...
	                // }
	                // We will report this as an Asterix REST API Error, an error code, and a reason message.
	                // Note the method signature: reportUserMessage(message, isPositiveMessage, target). We will provide
	                // an error message to display, a positivity value (false in this case, errors are bad), and a 
	                // target html element in which to report the message.
	                var showErrorMessage = "Asterix Error #" + data["error-code"][0] + ": " + data["error-code"][1];
	                var isPositive = false;
	                var showReportAt = "report-message";
	        
	                reportUserMessage(showErrorMessage, isPositive, showReportAt);
	              }
	});
	
    // 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()
    );
    
    // Legend Container
    // Create a rainbow from a pretty color scheme. 
    // http://www.colourlovers.com/palette/292482/Terra
    rainbow = new Rainbow();
    rainbow.setSpectrum("#E8DDCB", "#CDB380", "#036564", "#033649", "#031634");
    buildLegend();
    
    // Initialization of UI Tabas
    initDemoPrepareTabs();

    // UI Elements - Creates Map, Location Auto-Complete, Selection Rectangle
    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);

    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(' ');
        }
    });
    
    // UI Elements - Selection Rectangle Drawing
    shouldDraw = false;
    selectionRect = null;
    var startLatLng;
    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;
        }
    });

    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;
                });
            } 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));
                }
            }
        }
    };

    // Open about tab to start user on a tutorial
    //$('#mode-tabs a:first').tab('show') // Select first tab

    // Initialize data structures
    APIqueryTracker = {};
    asyncQueryManager = {};
    map_cells = [];
    map_tweet_markers = [];
    map_info_windows = {};
    review_mode_tweetbooks = [];

    getAllDataverseTweetbooks();
    initDemoUIButtonControls();
});

function initDemoUIButtonControls() {

    // Explore Mode - Update Sliders
    var updateSliderDisplay = function(event, ui) {
        if (event.target.id == "grid-lat-slider") {
            $("#gridlat").text(""+ui.value);
        } else {
          $("#gridlng").text(""+ui.value);
        }
    };
    sliderOptions = {
        max: 10,
        min: 2.0,
        step: .1,
        value: 3.0,
        slidechange: updateSliderDisplay,
        slide: updateSliderDisplay,
        start: updateSliderDisplay,
        stop: updateSliderDisplay
    };
    $("#gridlat").text(""+sliderOptions.value);
    $("#gridlng").text(""+sliderOptions.value);
    $(".grid-slider").slider(sliderOptions);

    // Explore Mode - Query Builder Date Pickers
    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);
    
    // Explore Mode: Toggle Selection/Location Search
    $('#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);
        }
    });
    $("#selection-button").trigger("click");

    // Review Mode: New Tweetbook
    $('#new-tweetbook-button').on('click', function (e) {
        onCreateNewTweetBook($('#new-tweetbook-entry').val());
        
        $('#new-tweetbook-entry').val("");
        $('#new-tweetbook-entry').attr("placeholder", "Name a new tweetbook");
    });

    // Explore Mode - Clear Button
    $("#clear-button").click(mapWidgetResetMap); 

    // Explore Mode: Query Submission
    $("#submit-button").on("click", function () {

        $("#report-message").html('');
        $("#submit-button").attr("disabled", true);
        
        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();
        }
        
        var swLat = Math.abs(bounds.getSouthWest().lat());
        var swLng = Math.abs(bounds.getSouthWest().lng());
        var neLat = Math.abs(bounds.getNorthEast().lat());
        var neLng = Math.abs(bounds.getNorthEast().lng());
        
        formData["swLat"] = Math.min(swLat, neLat);
        formData["swLng"] = Math.max(swLng, neLng);
        formData["neLat"] = Math.max(swLat, neLat);
        formData["neLng"] = Math.min(swLng, neLng);

        var build_cherry_mode = "synchronous";
        if ($('#asbox').is(":checked")) {
            build_cherry_mode = "asynchronous";
            //$('#show-query-button').attr("disabled", false);
        } else {
            //$('#show-query-button').attr("disabled", true);
        }
    
        var f = buildAQLQueryFromForm(formData);
        
        APIqueryTracker = {
            "query" : "use dataverse twitter;\n" + f.val(),
            "data" : formData
        };

        // TODO Make dialog work correctly.
        //$('#dialog').html(APIqueryTracker["query"]);
        
        if (build_cherry_mode == "synchronous") {
            A.query(f.val(), cherryQuerySyncCallback, build_cherry_mode);
        } else {
            A.query(f.val(), cherryQueryAsyncCallback, build_cherry_mode);
        }
    
        // Clears selection rectangle on query execution, rather than waiting for another clear call.
        if (selectionRect) {
            selectionRect.setMap(null);
            selectionRect = null;
        }
    });
}

/**
* Builds AsterixDB REST Query from explore mode form.
*/
function buildAQLQueryFromForm(parameters) {

    var bounds = {
        "ne" : { "lat" : parameters["neLat"], "lng" : -1*parameters["neLng"]}, 
		"sw" : { "lat" : parameters["swLat"], "lng" : -1*parameters["swLng"]}
    };
    
    var rectangle = 
        new FunctionExpression("create-rectangle",
            new FunctionExpression("create-point", bounds["sw"]["lat"], bounds["sw"]["lng"]),
            new FunctionExpression("create-point", bounds["ne"]["lat"], bounds["ne"]["lng"]));
        
    // You can chain these all together, but let's take them one at a time.
    // Let's start with a ForClause. Here we go through each tweet $t in the
    // dataset TweetMessageShifted.
    var aql = new FLWOGRExpression()
        .ForClause("$t", new AExpression("dataset TweetMessagesShifted"));

    // We know we have bounds for our region, so we can add that LetClause next.
    aql = aql.LetClause("$region", rectangle);

    // Now, let's change it up. The keyword term doesn't always show up, so it might be blank.
    // We'll attach a new let clause for it, and then a WhereClause.
    if (parameters["keyword"].length > 0) {
        aql = aql
                .LetClause("$keyword", new AExpression('"' + parameters["keyword"] + '"'))
                .WhereClause().and(
                    new FunctionExpression("spatial-intersect", "$t.sender-location", "$region"),
                    new AExpression('$t.send-time > datetime("' + parameters["startdt"] + '")'),
                    new AExpression('$t.send-time < datetime("' + parameters["enddt"] + '")'),
                    new FunctionExpression("contains", "$t.message-text", "$keyword")  
                );
    } else {
        aql = aql
                .WhereClause().and(
                    new FunctionExpression("spatial-intersect", "$t.sender-location", "$region"),
                    new AExpression('$t.send-time > datetime("' + parameters["startdt"] + '")'),
                    new AExpression('$t.send-time < datetime("' + parameters["enddt"] + '")')
                );
    }

    // Finally, we'll group our results into spatial cells.
    aql = aql.GroupClause(
                "$c",
                new FunctionExpression("spatial-cell", "$t.sender-location", 
                new FunctionExpression("create-point", "24.5", "-125.5"), 
                parameters["gridlat"].toFixed(1), parameters["gridlng"].toFixed(1)),
                "with", 
                "$t"
            );

    // ...and return a resulting cell and a count of results in that cell.
    aql = aql.ReturnClause({ "cell" : "$c", "count" : "count($t)" });

    return aql;
}

/**
* getAllDataverseTweetbooks
*  
* Returns all datasets of type TweetbookEntry, populates review_mode_tweetbooks
*/
function getAllDataverseTweetbooks(fn_tweetbooks) {

    // This creates a query to the Metadata for datasets of type
    // TweetBookEntry. Note that if we throw in a WhereClause (commented out below)
    // there is an odd error. This is being fixed and will be removed from this demo.
    var getTweetbooksQuery = new FLWOGRExpression()
        .ForClause("$ds", new AExpression("dataset Metadata.Dataset"))
        //.WhereClause(new AExpression('$ds.DataTypeName = "TweetbookEntry"'))
        .ReturnClause({
            "DataTypeName" : "$ds.DataTypeName",
            "DatasetName" : "$ds.DatasetName"
        });
    
    // Now create a function that will be called when tweetbooks succeed.
    // In this case, we want to parse out the results object from the Asterix
    // REST API response.
    var tweetbooksSuccess = function(r) {
        // Parse tweetbook metadata results
        $.each(r.results, function(i, data) {
            if ($.parseJSON(data)["DataTypeName"] == "TweetbookEntry") {
                review_mode_tweetbooks.push($.parseJSON(data)["DatasetName"]);
            }
        });
        
        // Now, if any tweetbooks already exist, opulate review screen.
        $('#review-tweetbook-titles').html('');
        $.each(review_mode_tweetbooks, function(i, tweetbook) {
            addTweetBookDropdownItem(tweetbook);
        });
    };
    
    // Now, we are ready to run a query. 
    A.meta(getTweetbooksQuery.val(), tweetbooksSuccess);
}

/**
* 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;
}

/**
* 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) {

    A.query_status( 
        {
            "handle" : JSON.stringify(handle)
        },
        function (res) {
            if (res["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;
            
                // Indicate success. 
                $('#handle_' + handle_id).removeClass("btn-disabled").prop('disabled', false).addClass("btn-success");
            }
        }    
     );
}

/**
* On-success callback after async API query
* @param    {object}    res, a result object containing an opaque result handle to Asterix
*/
function cherryQueryAsyncCallback(res) {
    
    // Parse handle, handle id and query from async call result
    var handle_query = APIqueryTracker["query"];
    var handle = res;
    var handle_id = res["handle"].toString().split(',')[0]; 
    
    // Add to stored map of existing handles
    asyncQueryManager[handle_id] = {
        "handle" : handle,
        "query" : handle_query,
        "data" : APIqueryTracker["data"]
    };
    
    // Create a container for this async query handle    
    $('<div/>')
        .css("margin-left", "1em")
        .css("margin-bottom", "1em")
        .css("display", "block")
        .attr({
            "class" : "btn-group",
            "id" : "async_container_" + handle_id
        })
        .appendTo("#async-handle-controls");
    
    // Adds the main button for this async handle
    var handle_action_button = '<button class="btn btn-disabled" id="handle_' + handle_id + '">Handle ' + handle_id + '</button>';
    $('#async_container_' + handle_id).append(handle_action_button);
    $('#handle_' + handle_id).prop('disabled', true);
    $('#handle_' + handle_id).on('click', function (e) {

        // make sure query is ready to be run
        if (asyncQueryManager[handle_id]["ready"]) {
        
            APIqueryTracker = {
                "query" : asyncQueryManager[handle_id]["query"],
                "data"  : asyncQueryManager[handle_id]["data"]
            };
            // TODO
            //$('#dialog').html(APIqueryTracker["query"]);
        
            if (!asyncQueryManager[handle_id].hasOwnProperty("result")) {
                // Generate new Asterix Core API Query
                A.query_result(
                    { "handle" : JSON.stringify(asyncQueryManager[handle_id]["handle"]) },
                    function(res) {
                        asyncQueryManager[handle_id]["result"] = res;
                        
                        var resultTransform = {
                            "results" : res.results[0]
                        };
                
                        cherryQuerySyncCallback(resultTransform);
                    }
                );
            } else {
                
                var resultTransform = {
                    "results" : asyncQueryManager[handle_id]["result"].results[0]
                };
                
                cherryQuerySyncCallback(resultTransform);
            }
        }
    });
    
    // Adds a removal button for this async handle
    var asyncDeleteButton = addDeleteButton(
        "trashhandle_" + handle_id,
        "async_container_" + handle_id,
        function (e) {
            $('#async_container_' + handle_id).remove();
            delete asyncQueryManager[handle_id];
        }
    );
    
    $('#async_container_' + handle_id).append('<br/>');
    
    $("#submit-button").attr("disabled", false);
}

/**
* cleanJSON
* @param json, a JSON string that is not correctly formatted.
* Quick and dirty little function to clean up an Asterix JSON quirk.
*/
function cleanJSON(json) {
    return json
            .replace("rectangle", '"rectangle"')
            .replace("point:", '"point":')
            .replace("point:", '"point":')
            .replace("int64", '"int64"');
}

/**
* A spatial data cleaning and mapping call
* @param    {Object}    res, a result object from a cherry geospatial query
*/
function cherryQuerySyncCallback(res) {
    
    // Initialize coordinates and weights, to store
    // coordinates of map cells and their weights
    var coordinates = [];
    var maxWeight = 0;
    var minWeight = Number.MAX_VALUE;

    // Parse resulting JSON objects. Here is an example record:
    // { "cell": { rectangle: [{ point: [22.5, 64.5]}, { point: [24.5, 66.5]}]}, "count": { int64: 5 }}
    $.each(res.results, function(i, data) {
        
        // First, parse a JSON object from a cleaned up string.
        var record = $.parseJSON(cleanJSON(data));
        
        // Parse Coordinates and Weights into a record
        var sw = record.cell.rectangle[0].point;
        var ne = record.cell.rectangle[1].point;
                
        var coordinate = {
            "latSW"     : sw[0],
            "lngSW"     : sw[1],
            "latNE"     : ne[0],
            "lngNE"     : ne[1],
            "weight"    : record.count.int64
        }
        
        maxWeight = Math.max(coordinate["weight"], maxWeight);
        minWeight = Math.min(coordinate["weight"], minWeight);
        coordinates.push(coordinate);
    });
    
    triggerUIUpdate(coordinates, maxWeight, minWeight);
}

/**
* 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]     plotWeights, a list of weights of the spatial cells - e.g., number of tweets
*/
function triggerUIUpdate(mapPlotData, maxWeight, minWeight) {
    /** Clear anything currently on the map **/
    mapWidgetClearMap();
    
    // Initialize info windows.
    map_info_windows = {};
    
    $.each(mapPlotData, function (m) {
   
        var point_center = new google.maps.LatLng(
            (mapPlotData[m].latSW + mapPlotData[m].latNE)/2.0, 
            (mapPlotData[m].lngSW + mapPlotData[m].lngNE)/2.0);

        var map_circle_options = {
            center: point_center,
            anchorPoint: point_center,
            radius: mapWidgetComputeCircleRadius(mapPlotData[m], maxWeight),
            map: map,
            fillOpacity: 0.85,
            fillColor: rainbow.colourAt(Math.ceil(100 * (mapPlotData[m].weight / maxWeight))),
            clickable: true
        };
        var map_circle = new google.maps.Circle(map_circle_options);
        map_circle.val = mapPlotData[m];
            
        map_info_windows[m] = new google.maps.InfoWindow({
            content: mapPlotData[m].weight + " tweets",
            position: point_center
        });

        // Clicking on a circle drills down map to that value, hovering over it displays a count
        // of tweets at that location.
        google.maps.event.addListener(map_circle, 'click', function (event) {
            $.each(map_info_windows, function(i) {
                map_info_windows[i].close();
            });
            onMapPointDrillDown(map_circle.val);
        });
            
        google.maps.event.addListener(map_circle, 'mouseover', function(event) {
            if (!map_info_windows[m].getMap()) {
                map_info_windows[m].setPosition(map_circle.center);
                map_info_windows[m].open(map);
            }
        });
            
        // Add this marker to global marker cells
        map_cells.push(map_circle);
        
        // Show legend
        $("#legend-min").html(minWeight);
        $("#legend-max").html(maxWeight);
        $("#rainbow-legend-container").show();   
    });
}

/**
* 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"];
    
    var zswBounds = new google.maps.LatLng(marker_borders.latSW, marker_borders.lngSW);
    var zneBounds = new google.maps.LatLng(marker_borders.latNE, marker_borders.lngNE);
    
    var zoneBounds = new google.maps.LatLngBounds(zswBounds, zneBounds);
    zoneData["swLat"] = zoneBounds.getSouthWest().lat();
    zoneData["swLng"] = zoneBounds.getSouthWest().lng();
    zoneData["neLat"] = zoneBounds.getNorthEast().lat();
    zoneData["neLng"] = zoneBounds.getNorthEast().lng();
    var zB = {
        "sw" : {
            "lat" : zoneBounds.getSouthWest().lat(),
            "lng" : zoneBounds.getSouthWest().lng()
        },
        "ne" : {
            "lat" : zoneBounds.getNorthEast().lat(),
            "lng" : zoneBounds.getNorthEast().lng()
        }
    };
    
    mapWidgetClearMap();
    
    var customBounds = new google.maps.LatLngBounds();
    var zoomSWBounds = new google.maps.LatLng(zoneData["swLat"], zoneData["swLng"]);
    var zoomNEBounds = new google.maps.LatLng(zoneData["neLat"], zoneData["neLng"]); 
    customBounds.extend(zoomSWBounds);
    customBounds.extend(zoomNEBounds);
    map.fitBounds(customBounds);
  
    var df = getDrillDownQuery(zoneData, zB);

    APIqueryTracker = {
        "query_string" : "use dataverse twitter;\n" + df.val(),
        "marker_path" : "static/img/mobile2.png"
    };
        
    A.query(df.val(), onTweetbookQuerySuccessPlot);
}

function getDrillDownQuery(parameters, bounds) {

    var zoomRectangle = new FunctionExpression("create-rectangle",
        new FunctionExpression("create-point", bounds["sw"]["lat"], bounds["sw"]["lng"]),
        new FunctionExpression("create-point", bounds["ne"]["lat"], bounds["ne"]["lng"]));
        
    var drillDown = new FLWOGRExpression()
        .ForClause("$t", new AExpression("dataset TweetMessagesShifted"))
        .LetClause("$region", zoomRectangle);

    if (parameters["keyword"].length == 0) {
        drillDown = drillDown
                        .WhereClause().and(
                            new FunctionExpression('spatial-intersect', '$t.sender-location', '$region'),
                            new AExpression().set('$t.send-time > datetime("' + parameters["startdt"] + '")'),
                            new AExpression().set('$t.send-time < datetime("' + parameters["enddt"] + '")')
                        );
    } else {
        drillDown = drillDown
                        .LetClause("$keyword", new AExpression('"' + parameters["keyword"] + '"'))
                        .WhereClause().and(
                            new FunctionExpression('spatial-intersect', '$t.sender-location', '$region'),
                            new AExpression().set('$t.send-time > datetime("' + parameters["startdt"] + '")'),
                            new AExpression().set('$t.send-time < datetime("' + parameters["enddt"] + '")'),
                            new FunctionExpression('contains', '$t.message-text', '$keyword')
                        );  
    }

    drillDown = drillDown
                    .ReturnClause({
                        "tweetId" : "$t.tweetid", 
                        "tweetText" : "$t.message-text",
                        "tweetLoc" : "$t.sender-location"
                    });

    return drillDown;
}

function onDrillDownAtLocation(tO) {

    var tweetId = tO["tweetEntryId"];
    var tweetText = tO["tweetText"];
    
    // First, set tweet in drilldown modal to be this tweet's text
    $('#modal-body-tweet').html('Tweet #' + tweetId + ": " + tweetText);
    
    // Next, empty any leftover tweetbook comments or error/success messages
    $("#modal-body-add-to").val('');
    $("#modal-body-add-note").val('');
    $("#modal-body-message-holder").html("");
    
    // Next, if there is an existing tweetcomment reported, show it.
    if (tO.hasOwnProperty("tweetComment")) {
        
        // Show correct panel
        $("#modal-existing-note").show();
        $("#modal-save-tweet-panel").hide();
        
        // Fill in existing tweet comment
        $("#modal-body-tweet-note").val(tO["tweetComment"]);
        
        // Change Tweetbook Badge
        $("#modal-current-tweetbook").val(APIqueryTracker["active_tweetbook"]);
        
        // Add deletion functionality
        $("#modal-body-trash-icon").on('click', function () {
            // Send comment deletion to asterix 
            var deleteTweetCommentOnId = '"' + tweetId + '"';
            var toDelete = new DeleteStatement(
                "$mt",
                APIqueryTracker["active_tweetbook"],
                new AExpression("$mt.tweetid = " + deleteTweetCommentOnId.toString())
            );
            A.update(
                toDelete.val()
            );
                
            // Hide comment from map
            $('#drilldown_modal').modal('hide');
                
            // Replot tweetbook
            onPlotTweetbook(APIqueryTracker["active_tweetbook"]);
        });
        
    } else {
        // Show correct panel
        $("#modal-existing-note").hide();
        $("#modal-save-tweet-panel").show();
        
        // Now, when adding a comment on an available tweet to a tweetbook
        $('#save-comment-tweetbook-modal').unbind('click');
        $("#save-comment-tweetbook-modal").on('click', function(e) {
        
            // Stuff to save about new comment
            var save_metacomment_target_tweetbook = $("#modal-body-add-to").val();
            var save_metacomment_target_comment = '"' + $("#modal-body-add-note").val() + '"';
            var save_metacomment_target_tweet = '"' + tweetId + '"';
        
            // Make sure content is entered, and then save this comment.
            if ($("#modal-body-add-note").val() == "") {

                reportUserMessage("Please enter a comment about the tweet", false, "report-message");
            
            } else if ($("#modal-body-add-to").val() == "") {
            
                reportUserMessage("Please enter a tweetbook.", false, "report-message");
            
            } else {
        
                // Check if tweetbook exists. If not, create it.
                if (!(existsTweetbook(save_metacomment_target_tweetbook))) {
                    onCreateNewTweetBook(save_metacomment_target_tweetbook);
                }
            
                var toInsert = new InsertStatement(
                    save_metacomment_target_tweetbook,
                    { 
                        "tweetid" : save_metacomment_target_tweet.toString(), 
                        "comment-text" : save_metacomment_target_comment 
                    }
                );
                
                A.update(toInsert.val(), function () {
                    var successMessage = "Saved comment on <b>Tweet #" + tweetId + 
                        "</b> in dataset <b>" + save_metacomment_target_tweetbook + "</b>.";
                    reportUserMessage(successMessage, true, "report-message");
            
                    $("#modal-body-add-to").val('');
                    $("#modal-body-add-note").val('');
                    $('#save-comment-tweetbook-modal').unbind('click');
                    
                    // Close modal
                    $('#drilldown_modal').modal('hide');
                });
            }   
        });
    }
}

/**
* Adds a new tweetbook entry to the menu and creates a dataset of type TweetbookEntry.
*/
function onCreateNewTweetBook(tweetbook_title) {
    
    var tweetbook_title = tweetbook_title.split(' ').join('_');

    A.ddl(
        "create dataset " + tweetbook_title + "(TweetbookEntry) primary key tweetid;",
        function () {}
    );
    
    if (!(existsTweetbook(tweetbook_title))) {
        review_mode_tweetbooks.push(tweetbook_title);
        addTweetBookDropdownItem(tweetbook_title);
    }
}

function onDropTweetBook(tweetbook_title) {

    // AQL Call
    A.ddl(
        "drop dataset " + tweetbook_title + " if exists;",
        function () {}
    );
    
    // Removes tweetbook from review_mode_tweetbooks
    var remove_position = $.inArray(tweetbook_title, review_mode_tweetbooks);
    if (remove_position >= 0) review_mode_tweetbooks.splice(remove_position, 1);
    
    // Clear UI with review tweetbook titles
    $('#review-tweetbook-titles').html('');
    for (r in review_mode_tweetbooks) {
        addTweetBookDropdownItem(review_mode_tweetbooks[r]);
    }
}

function addTweetBookDropdownItem(tweetbook) {
    // Add placeholder for this tweetbook
    $('<div/>')
        .attr({
            "class" : "btn-group",
            "id" : "rm_holder_" + tweetbook
        }).appendTo("#review-tweetbook-titles");
    
    // Add plotting button for this tweetbook
    var plot_button = '<button class="btn btn-default" id="rm_plotbook_' + tweetbook + '">' + tweetbook + '</button>';
    $("#rm_holder_" + tweetbook).append(plot_button);
    $("#rm_plotbook_" + tweetbook).width("200px");
    $("#rm_plotbook_" + tweetbook).on('click', function(e) {
        onPlotTweetbook(tweetbook);
    });
    
    // Add trash button for this tweetbook
    var onTrashTweetbookButton = addDeleteButton(
        "rm_trashbook_" + tweetbook,
        "rm_holder_" + tweetbook,
        function(e) {
            onDropTweetBook(tweetbook);
        }
    );
}

function onPlotTweetbook(tweetbook) {
    
    // Clear map for this one
    mapWidgetResetMap();

    var plotTweetQuery = new FLWOGRExpression()
        .ForClause("$t", new AExpression("dataset TweetMessagesShifted"))
        .ForClause("$m", new AExpression("dataset " + tweetbook))
        .WhereClause(new AExpression("$m.tweetid = $t.tweetid"))
        .ReturnClause({
            "tweetId" : "$m.tweetid",
            "tweetText" : "$t.message-text",
            "tweetLoc" : "$t.sender-location",
            "tweetCom" : "$m.comment-text"
        });
          
    APIqueryTracker = {
        "query_string" : "use dataverse twitter;\n" + plotTweetQuery.val(),
        "marker_path" : "static/img/mobile_green2.png",
        "active_tweetbook" : tweetbook
    };
        
    A.query(plotTweetQuery.val(), onTweetbookQuerySuccessPlot);     
}

function onTweetbookQuerySuccessPlot (res) {

    // Parse out tweet Ids, texts, and locations
    var tweets = [];
    al = 1;
    $.each(res.results, function(i, data) {

        var json = $.parseJSON(cleanJSON(data));

        var tweetData = {
            "tweetEntryId" : json["tweetId"],
            "tweetText" : json["tweetText"],
            "tweetLat" : json["tweetLoc"]["point"][0],
            "tweetLng" : json["tweetLoc"]["point"][1]
        };

        // If we are parsing out tweetbook data with comments, we need to check
        // for those here as well.
        if (json.hasOwnProperty("tweetCom")) {
            tweetData["tweetComment"] = json["tweetCom"];
        }

        tweets.push(tweetData)
    });

    // Prepare to map the tweets
    var micon = APIqueryTracker["marker_path"];
    APIqueryTracker["markers_data"] = [];

    // Create a marker for each tweet
    $.each(tweets, function(i, t) {
        // Create a phone marker at tweet's position
        var map_tweet_m = new google.maps.Marker({
            position: new google.maps.LatLng(tweets[i]["tweetLat"], tweets[i]["tweetLng"]),
            map: map,
            icon: micon,
            clickable: true,
        });
        map_tweet_m["test"] = t;

        // Open Tweet exploration window on click
        APIqueryTracker["markers_data"].push(tweets[i]);
        google.maps.event.addListener(map_tweet_m, 'click', function (event) {
            onClickTweetbookMapMarker(map_tweet_markers[i]["test"]);
        });

        // Add marker to index of tweets
        map_tweet_markers.push(map_tweet_m); 
    });
}

function existsTweetbook(tweetbook) {
    if (parseInt($.inArray(tweetbook, review_mode_tweetbooks)) == -1) {
        return false;
    } else {
        return true;
    }
}

/**
* When a marker is clicked on in the tweetbook, it will launch a modal
* view to examine or edit the appropriate tweet
*/
function onClickTweetbookMapMarker(t) {
    onDrillDownAtLocation(t)
    $('#drilldown_modal').modal();
}

/**
* Explore mode: Initial map creation and screen alignment
*/
function onOpenExploreMap () {
    var explore_column_height = $('#explore-well').height();
    var right_column_width = $('#right-col').width();  
    $('#map_canvas').height(explore_column_height + "px");
    $('#map_canvas').width(right_column_width + "px");
    
    $('#review-well').height(explore_column_height + "px");
    $('#review-well').css('max-height', explore_column_height + "px"); 
    $('#right-col').height(explore_column_height + "px");
}

/**
* initializes demo - adds some extra events when review/explore
* mode are clicked, initializes tabs, aligns map box, moves
* active tab to about tab
*/
function initDemoPrepareTabs() {

    // Tab behavior for About, Explore, and Demo
    $('#mode-tabs a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    })

    // Explore mode should show explore-mode query-builder UI
    $('#explore-mode').click(function(e) {
        $('#review-well').hide();
        $('#explore-well').show();
        mapWidgetResetMap();
    });
        
    // Review mode should show review well and hide explore well
    $('#review-mode').click(function(e) {
        $('#explore-well').hide();
        $('#review-well').show();
        mapWidgetResetMap();
    });

    // Does some alignment necessary for the map canvas
    onOpenExploreMap();
}

/** 
* Creates a delete icon button using default trash icon
* @param    {String}    id, id for this element
* @param    {String}    attachTo, id string of an element to which I can attach this button.
* @param    {Function}  onClick, a function to fire when this icon is clicked
*/
function addDeleteButton(iconId, attachTo, onClick) {
    
    var trashIcon = '<button class="btn btn-default" id="' + iconId + '"><span class="glyphicon glyphicon-trash"></span></button>';
    $('#' + attachTo).append(trashIcon);
    
    // When this trash button is clicked, the function is called.
    $('#' + iconId).on('click', onClick);
}

/**
* Creates a message and attaches it to data management area.
* @param    {String}    message, a message to post
* @param    {Boolean}   isPositiveMessage, whether or not this is a positive message.
* @param    {String}    target, the target div to attach this message.
*/
function reportUserMessage(message, isPositiveMessage, target) {
    // Clear out any existing messages
    $('#' + target).html('');
    
    // Select appropriate alert-type
    var alertType = "alert-success";
    if (!isPositiveMessage) {
        alertType = "alert-danger";
    }
    
    // Append the appropriate message
    $('<div/>')
        .attr("class", "alert " + alertType)
        .html('<button type="button" class="close" data-dismiss="alert">&times;</button>' + message)
        .appendTo('#' + target);
}

/**
* mapWidgetResetMap
*
* [No Parameters]
*
* Clears ALL map elements - plotted items, overlays, then resets position
*/
function mapWidgetResetMap() {

    if (selectionRect) {
        selectionRect.setMap(null);
        selectionRect = null;
    }
    
    mapWidgetClearMap();
    
    // Reset map center and zoom
    map.setCenter(new google.maps.LatLng(38.89, -77.03));
    map.setZoom(4);
}

/**
* mapWidgetClearMap
* Removes data/markers
*/
function mapWidgetClearMap() {

    // Remove previously plotted data/markers
    for (c in map_cells) {
        map_cells[c].setMap(null);
    }
    map_cells = [];
    
    $.each(map_info_windows, function(i) {
        map_info_windows[i].close();
    });
    map_info_windows = {};
    
    for (m in map_tweet_markers) {
        map_tweet_markers[m].setMap(null);
    }
    map_tweet_markers = [];
    
    $("#rainbow-legend-container").hide();
    
    $("#submit-button").attr("disabled", false);
}

/**
* buildLegend
*
* Generates gradient, button action for legend bar
*/
function buildLegend() {
    
    // Fill in legend area with colors
    var gradientColor;
    
    for (i = 0; i<100; i++) {
        //$("#rainbow-legend-container").append("" + rainbow.colourAt(i));
        $("#legend-gradient").append('<div style="display:inline-block; max-width:2px; background-color:#' + rainbow.colourAt(i) +';">&nbsp;</div>');
    }
    
    // Window clear button closes all info count windows
    $("#windows-off-btn").on("click", function(e) {
        $.each(map_info_windows, function(i) {
            map_info_windows[i].close();
        });
    });
}   

/**
* 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, wLimit) {

    // 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);
    
    // Circle scale modifier = 
    var scale = 500 + 500*(spatialCell.weight / wLimit);
    
    // Return proportionate value so that circles mostly line up.
    return scale * Math.min(distanceBetweenPoints_(point_center, point_left), distanceBetweenPoints_(point_center, point_top));
}

/**
 * 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;
};