Packaged Product

Also has i18n prototype.

by secretgspot

HTML

<span style="display:inline-block;">
<form>
    <fieldset>
        <legend><span data-i18n="preferences"></span></legend>
        <label for="language"><span data-i18n="language"></span></label><br/>
        <select id="language"></select>
    </fieldset>
    <fieldset>
        <legend><span data-i18n="area"></span></legend>
        <label for="area_value"><span data-i18n="total"></span></label><br/>
        <input type="number" id="area_value" min="0"/><br/>
        <label for="area_unit"><span data-i18n="unit"></span></label><br/>
        <select id="area_unit">
            <option value="acre" selected="selected">ac</option>
            <option value="square_meter">sq. m</option>
        </select>
    </fieldset>
    <fieldset>
        <legend><span data-i18n="rate"></span></legend>
        <div style="float:left;">
            <label for="rate_value"><span data-i18n="value"></span></label><br/>
            <input type="number" id="rate_value" min="0"/>
        </div>
        <div style="float:left;white-space:nowrap;">
            <br/>
            <label data-i18n="per" style="margin-left:0.5em"></label>
            <span id="rate_per_area_unit"></span>
        </div>
        <div style="clear:both;">
        <div style="float:left;">
            <label for="rate_unit_pkg_value"><span data-i18n="size"></span></label><br/>
            <input type="number" id="rate_unit_pkg_value" min="0"/>
        </div>
        <div style="float:left;">
            <label for="rate_unit"><span data-i18n="unit"></span></label><br/>
            <select id="rate_unit">
                <option value="fluid_ounce">fl. oz.</option>
                <option value="gallon">gal.</option>
                <option value="pint">pint</option>
                <option value="plant" selected="selected">plant</option>
                <option value="seed">seed</option>
            </select>
        </div>
        <div style="float:left;">
            <label for="rate_unit_pkg_unit"><span...

CSS

body
{
    background-color:white;
    color:#444;
    font-family:"Segoe UI",Frutiger,"Frutiger Linotype","Dejavu Sans","Helvetica Neue",Arial,sans-serif;
    font-weight:bold;
}
label,legend
{
    text-transform:lowercase;
    white-space:nowrap;
}
fieldset,input,legend,select,textarea
{
    border:1px solid clear;
    border-radius:5px;
    -moz-border-radius:5px;
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
}
fieldset,legend
{
    background-color:#66B050;
    background-image:linear-gradient(left, #66B050 46%, #76C060 73%);
    background-image:-moz-linear-gradient(left, #66B050 46%, #76C060 73%);
    background-image:-ms-linear-gradient(left, #66B050 46%, #76C060 73%);
    background-image:-o-linear-gradient(left, #66B050 46%, #76C060 73%);
    background-image:-webkit-linear-gradient(left, #66B050 46%, #76C060 73%);
    background-image:-webkit-gradient(linear, left top, right top, color-stop(0.46, #66B050), color-stop(0.73, #76C060));
}
fieldset
{
    margin:1em 0.5em 0.5em;
    padding:0 0.5em 0.5em;
}
legend
{
    position:relative;bottom:0.5em;left:0.5em;
    padding:0.1em 0.5em;
    min-width:8em;
}

JavaScript

var DataI18n =
{
    'options':
    {
        'default':'es',
    },
    'en':
    {
        'area':"Area",
        'label':"English",
        'language':"Language",
        'on':"on",
        'package':"Package",
        'per':"per",
        'preferences':"Preferences",
        'rate':"Rate",
        'size':"Size",
        'total':"Total",
        'unit':"Unit",
        'value':"Value",
    },
    'es':
    {
        'area':"&Aacute;rea",
        'label':"Espa&ntilde;ol",
        'language':"Idioma",
        'on':"en",
        'package':"Paquete",
        'per':"por",
        'preferences':"Preferencias",
        'rate':"Tasa",
        'size':"Tama&ntilde;o",
        'total':"Total",
        'unit':"Unidad",
        'value':"Valor",
    },
};
$(document).ready( function()
{
    $('#language').empty();
    for( var lang in DataI18n )
    {
        if( lang === 'options' ){continue;}
        $('#language').append( $('<option>').attr( 'value', lang )
            .html( DataI18n[ lang ]['label'])
            .prop( 'selected', (lang === DataI18n.options.default)));
    }
    $('#language').change( function()
    {
        for( var key in DataI18n[ $(this).val()])
        {
            $('[data-i18n="' + key + '"]').html( DataI18n[ $(this).val()][ key ]);
        }
    }).trigger( 'change' );
});
$(document).ready( function()
{
    var pkgUnits =
    {
        'bag':{'seed':"seed",},
        'barrel':{'gallon':"gal.",'fluid_ounce':"fl. oz.",'pint':"pint",},
        'jug':{'gallon':"gal.",'fluid_ounce':"fl. oz.",'pint':"pint",},
        'tray':{'plant':"plant",},
    };
    $('#area_value').val( 7 );
    $('#rate_value').val( 3 );
    $('#rate_unit_pkg_value').val( 1 );
    $('#total_unit_pkg_value').val( 1 );
    $('#area_unit,#area_value'
        + ',#rate_unit,#rate_value,#rate_unit_pkg_unit,#rate_unit_pkg_value'
        + ',#total_unit,#total_unit_pkg_unit,#total_unit_pkg_value').change( function()
    {
        var total_value = $('#rate_value').val() *...