window.onload = function () {
    var container = $('div.sliderGallery');
    var ul = $('ul.items', container);
           
    var itemsWidth = ul.innerWidth() - container.outerWidth();
    
    $('.slider', container).slider({
        min: 0,
        max: itemsWidth,
        handle: '.handle',
        animate: true,
        stop: function (event, ui) {
            ul.animate({'left' : ui.value * -1}, "fast");
        }
        //slide: function (event, ui) {
        //    ul.css('left', ui.value * -1);
        //}
    });
    ul.animate({'left' : -984}, "fast");
    $('.ui-slider-handle').animate({'left' : "50%"}, "fast");
    $('.wm').click(function() {
    	ul.animate({'left' : -984}, "fast");
    	$('.ui-slider-handle').animate({'left' : "50%"}, "fast");
    });
    $('.fm').click(function() {
    	ul.animate({'left' : 0}, "fast");
    	$('.ui-slider-handle').animate({'left' : "0%"}, "fast");
    });
    $('.port').click(function() {
    	ul.animate({'left' : -1937}, "fast");
    	$('.ui-slider-handle').animate({'left' : "100%"}, "fast");
    });
    $('.larrow').click(function() {
      if(parseFloat(ul.css("left")) <= itemsWidth/4 * -1) {
    	ul.animate({'left' : "+="+itemsWidth/4}, "fast");
    	$('.ui-slider-handle').animate({'left' : "-=25%"}, "fast");
      } else if (parseFloat(ul.css("left")) > itemsWidth/4 * -1) {
      	ul.animate({'left' : 0}, "fast");
    	$('.ui-slider-handle').animate({'left' : "0%"}, "fast");
      }
    });
    $('.rarrow').click(function() {
      if(parseFloat(ul.css("left")) >= itemsWidth * -1 + itemsWidth/4) {
    	ul.animate({'left' : "-="+itemsWidth/4}, "fast");
    	$('.ui-slider-handle').animate({'left' : "+=25%"}, "fast");
      } else if (parseFloat(ul.css("left")) < itemsWidth * -1 + itemsWidth/4) {
      	ul.animate({'left' : -1949}, "fast");
    	$('.ui-slider-handle').animate({'left' : "100%"}, "fast");
      }
    });
};