// A hastily thrown-together tool which replaces a field, with the class 'length-field' with a field that allows the user to choose their own units (mm, cm, m, km, in, ft, yd, mi), while saving the result in mm.
// The input group relies on Bootstrap for the layout at present.
// I'd really like to return to this at some point and neaten things up a bit.

$('.length-field').each(function(){
    var cur_unit = "mm";
    var cur_multiplier = 1;
    var original_units = {
        "mm": 1,
        "cm": 10,
        "m": 1000,
        "km": 1000000,
        "dvdr": 0,
        "in": 25.4,
        "ft": 304.8,
        "yd": 914.4,
        "mi": 1609344
    };

    var field_id = $(this).attr("id");
    var field_name = $(this).attr("name");
    $(this).parent().append("<input type=\"hidden\" name=\""+field_name+"\" id=\"hidden-length-field-"+$(this).attr("id")+"\">");
    var newfield = "<div class=\"input-group\"><input type=\"text\" class=\"form-control\" id=\"formatted-length\" /><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\" aria-expanded=\"false\" id=\"cur-unit-value\">mm <span class=\"caret\"></span></button><ul class=\"dropdown-menu dropdown-menu-left\" role=\"menu\">";
    if ($(this).data("units")) {
        var allowed_units = $('.length-field').data("units").split(" ");
        var units = {};
        $.each(allowed_units, function (key, value) {
            units[value] = original_units[value];
        });
    } else {
        var units = original_units;
    }
    $.each(units, function (key, value) {
        if (key === "dvdr") {
            newfield += "<li class=\"divider\"></li>";
        } else {
            newfield += "<li><a href=\"#\" class=\"length-unit-option\" data-multiplier=\"" + value + "\">" + key + "</a></li>";
        }
    });
    newfield += "</ul></div></div>";
    $(this).parent().append(newfield);
    $(this).remove();
    $('#formatted-length').keyup(function () {
        if ($(this).val() === "") {
            formatted_val = 0;
        } else {
            formatted_val = parseFloat($(this).val());
        }
        mmvalue = formatted_val * cur_multiplier;
        $("#hidden-length-field-"+field_id).val(Math.round(mmvalue));
        $("#hidden-length-field-"+field_id).trigger("change");
    });
    $('.length-unit-option').click(function () {
        event.preventDefault();
        $('#cur-unit-value').html($(this).html() + "<span class=\"caret\"></span>");
        cur_unit = $(this).html();
        cur_multiplier = parseFloat($(this).data("multiplier"));
        $('#formatted-length').trigger("keyup");
    });
});