// from v2-client/www/js/widgets.js

Location = {};
Location.setup = function($containerdiv, changefunc, options) {

    $containerdiv.empty();

    var W = {};
    var myvalue = null;

    W.get = function() {
        return myvalue;
    };

    W.set = function(addr) {
        myvalue = addr;
        $searchinput.val(addr ? addr.address : '');
    };

    if (!options) options = {};
    // FIXME? only one location widget allowed per screen due to element ids
    // probably fine

    var $searchinput = $('<input/>', {name: 'address', id: 'location_search', class: 'forminputfield', placeholder: "Address"});
    if (options.address) {
        W.set(options.address);
    }
    $containerdiv.append($searchinput);
    $containerdiv.append('<p>');

    var btntext = 'Search For Locations';
    if(options.buttontext)
        btntext = options.buttontext;

    var $searchbutton = $('<button/>', {id: 'location_searchbutton', class: 'formbutton'}).text(btntext);
    $containerdiv.append($searchbutton);

    var $resultsdiv = $('<div/>', {id: 'location_resultsdiv'});
    $containerdiv.append($resultsdiv);

    var $iframe = null;

    function updateResults(list) {
        $resultsdiv.empty();

        for (var i = 0; i < list.length; i++) {
            var addr = list[i];
            var $result = $('<div/>');
            $result.text((i + 1) + ': ' + addr.address);
            $result.click(function(i) {
                return function() {
                    updateLocation(list[i]);
                };
            }(i));
            $resultsdiv.append($result);
        }

        $iframe = $('<iframe/>', {id: 'location_map', src: 'about:blank'});
        $resultsdiv.append($iframe);

        updateLocation(list[0]);
    }

    function updateLocation(addr) {
        $searchinput.val(addr.address);
        $iframe.attr('src', 'https://www.google.com/maps/embed/v1/place?key=' + apikey.google_maps_embed + '&q=' + encodeURIComponent(addr.address));  // encodeURIComponent(addr.lat + ',' + addr.lon)
        $('#location_map').addClass('searched');
        myvalue = addr;
        changefunc(addr);
    }

    $searchbutton.click(function() {
        $resultsdiv.html('Querying Google...');

        sendCommand('geo/address', {'query': $searchinput.val()}, function(data) {
            updateResults(data.results);
        }, function(data) {
            if(data.error == 'network'){
                $resultsdiv.html("Failed, no connection.");
            }else{
                $resultsdiv.html('Geocode failed: ' + data.msg);
            }
        });

        return false;
    });

    return W;
};


Lengths = {};

Lengths.setup = function($container, changefunc, value) {
    // value = [{amount: number, units: 'km', 'mi', or 'hr'}]

    $container.empty();

    var W = {};

    var $inner = $('<div/>');
    $container.append($inner);

    var defaultUnit = 'mi';
    var secondUnit = (defaultUnit == 'km' ? 'mi' : 'km');

    if (!value) {
        value = [{amount: '', units: defaultUnit}];
    }

    function addLength(i) {
        if (i == null) {
            i = value.length;
            value[i] = {amount: '', units: defaultUnit};
        }

        // have to keep a reference here because the index can change if elements are removed
        var entry = value[i];

        var $div = $('<div/>', {'class': 'lengths'});
        var $input = $('<input/>', {'class': 'lengthinput forminputfield', value: entry.amount});
        var $dropdown = $('<select/>');

        var unitnames = [defaultUnit, secondUnit, 'hr'];
        for (var k = 0; k < unitnames.length; k++) {
            var opts = {text: unitnames[k]};
            if (unitnames[k] == entry.units)
                opts.selected = 'selected';
            $dropdown.append($('<option/>', opts));
        }

        var $remove = $('<button/>', {text: 'X', 'class': 'removebutton'});

        $div.append($input);
        $div.append($dropdown);
        $div.append($remove);
        $inner.append($div);

        var changed = function() {
            entry.amount = parseFloat($input.val()) || '';
            entry.units = $dropdown.val();
            changefunc(value);
        };

        $input.change(changed);
        $dropdown.change(changed);

        $remove.click(function() {
            $div.remove();
            removeValue(value, entry);
            changefunc(value);
        });
    }

    for (var i = 0; i < value.length; i++) {
        addLength(i);
    }

    var $add = $('<button/>', {text: 'Add Length', class:'formbutton addlength'});
    $add.click(function() {
        addLength(null);
        return false;
    });
    $container.append($add);

    W.get = function() {
        return value;
    };

    W.set = function(list) {
        Lengths.setup($container, changefunc, list);
    };

    return W;
};