window.onload = function () {

    var container1 = $('div.sliderGallery1');
    var container2 = $('div.sliderGallery2');
    var container3 = $('div.sliderGallery3');    
    var container4 = $('div.sliderGallery4');
    var container5 = $('div.sliderGallery5');            

    var ul1 = $('ul', container1);
    var ul2 = $('ul', container2);    
    var ul3 = $('ul', container3);       
    var ul4 = $('ul', container4);
    var ul5 = $('ul', container5);               
    
    var itemsWidth1 = ul1.innerWidth() - container1.outerWidth();
    var itemsWidth2 = ul2.innerWidth() - container2.outerWidth();    
    var itemsWidth3 = ul3.innerWidth() - container3.outerWidth();        
    var itemsWidth4 = ul4.innerWidth() - container4.outerWidth(); 
    var itemsWidth5 = ul5.innerWidth() - container5.outerWidth();                
    
    $('.slider1', container1).slider({
        min: 0,
        max: itemsWidth1,
        handle: '.handle1',
        stop: function (event, ui) {
            ul1.animate({'left' : ui.value * -1}, 500);
        },
        slide: function (event, ui) {
            ul1.css('left', ui.value * -1);
        }
    });
    
    $('.slider2', container2).slider({
        min: 0,
        max: itemsWidth2,
        handle: '.handle2',
        stop: function (event, ui) {
            ul2.animate({'left' : ui.value * -1}, 500);
        },
        slide: function (event, ui) {
            ul2.css('left', ui.value * -1);
        }
    });

    $('.slider3', container3).slider({
        min: 0,
        max: itemsWidth3,
        handle: '.handle3',
        stop: function (event, ui) {
            ul3.animate({'left' : ui.value * -1}, 500);
        },
        slide: function (event, ui) {
            ul3.css('left', ui.value * -1);
        }
    }); 
    
    $('.slider4', container4).slider({
        min: 0,
        max: itemsWidth4,
        handle: '.handle4',
        stop: function (event, ui) {
            ul4.animate({'left' : ui.value * -1}, 500);
        },
        slide: function (event, ui) {
            ul4.css('left', ui.value * -1);
        }
    });  
    
    $('.slider5', container5).slider({
        min: 0,
        max: itemsWidth5,
        handle: '.handle5',
        stop: function (event, ui) {
            ul4.animate({'left' : ui.value * -1}, 500);
        },
        slide: function (event, ui) {
            ul5.css('left', ui.value * -1);
        }
    });            

        
};