$(function(){
    /* Server expect dimensions facets in the form ranges_width=min,max and ranges_height=min,max
     * but user is presented with a form with two inputs for min and max values, these needs to
     * be formated before sending.
     * Value is stored in two dynamic hidden field.
     *
     * TODO: remove hidden fields usage
     */
    $('.browse-by-dimensions form').each(function(){
        $(':input[name="width_max"]', $(this)).after('<input type="hidden" name="ranges_width" value="0" />');
        $(':input[name="height_max"]', $(this)).after('<input type="hidden" name="ranges_height" value="0" />');
    }).submit(function(e){
        $(':input[name="ranges_width"]', $(this))[0].value = [ $(':input[name="width_min"]', $(this))[0].value,
                                                               $(':input[name="width_max"]', $(this))[0].value ].join(',');
        $(':input[name="ranges_height"]', $(this))[0].value = [ $(':input[name="height_min"]', $(this))[0].value,
                                                                $(':input[name="height_max"]', $(this))[0].value ].join(',');
    });
});