Ползунки jQuery устанавливают непрозрачность отдельных слоев OL, сохраняя при этом максимальную совокупную сумму

Есть много примеров использования ползунков jQuery и получения максимальной совокупной суммы. Однако мне не удалось разработать версию, которая будет работать с моим приложением. Мне нужно иметь возможность устанавливать отдельные непрозрачности 6 слоев openlayers, используя ползунки jQuery, при этом никогда не превышая в совокупности 100 единиц ползунка.

Обновлено

Вот как я сейчас это реализую. Я не могу понять, как провести рефакторинг кода, чтобы уменьшить дублирование кода...

var sliders = $("#sliders .slider");

sliders.each(function() {
var value = parseInt($(this).text()),
    availableTotal = 100;

$(function() {
    $("#one").slider({
        range: "min",
        min: 0,
        value: 20,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_1.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#two").slider({
        range: "min",
        min: 0,
        value: 20,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_2.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#three").slider({
        range: "min",
        min: 0,
        value: 20,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_3.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#four").slider({
        range: "min",
        min: 0,
        value: 16,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_4.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#five").slider({
        range: "min",
        min: 0,
        value: 16,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_5.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#six").slider({
        range: "min",
        min: 0,
        value: 8,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_6.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
});
});

Исходный

Наиболее знакомый мне пример размещен здесь и ниже http://jsfiddle.net/markieta/cWyQ3/

var sliders = $("#sliders .slider");
sliders.each(function() {
    var value = parseInt($(this).text()),
        availableTotal = 100;
    $(this).empty().slider({
        value: 0,
        min: 0,
        max: 100,
        range: "min",
        animate: true,
        slide: function(event, ui) {
            // Update display to current value
            $(this).siblings().text(ui.value);
            // Get current total
            var total = 0;
            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            // Need to do this because apparently jQ UI
            // does not update value until this event completes
            total += ui.value;
            var max = availableTotal - total;
            // Update each slider
            sliders.not(this).each(function() {
                var t = $(this),
                    value = t.slider("option", "value");
                t.slider("option", "max", max + value).siblings().text(value);
                t.slider('value', value);
            });
        }
    });
});

Первоначально я устанавливал непрозрачность слоя OpenLayers с помощью метода setOpacity во время события слайда каждого уникального ползунка. Однако я не мог понять, как сохранить промежуточный итог с помощью этого метода, чтобы мои ползунки не превышали 100 кумулятивных единиц.

$(function() {
    $( "#slider1" ).slider({
    range: "min",
    min: 0,
    value: opacities[0],
    slide: function(e, ui) {
        hii_1.setOpacity(ui.value / 100);
        $( "#amount1" ).val( ui.value );
        }
    });
    $("#amount1" ).val($( "#slider1" ).slider( "value" ) );
});

** ползунки x6 **

Любое понимание?