$(function() {

    var initialPercentsValue = 40;//Позиция линейки по умолчанию
    var snap = 10; //Величина смещения в процентах для стрелок вправо и влево

    var TimeLineWidth = 998;
    var ItemsWidth = 90;
    var pinkItems = $(".pinkLine").children(".dataBox").size();
    var blueItems = $(".blueLine").children(".dataBox").size();

    var pinkLineWidth = pinkItems * ItemsWidth;
    var blueLineWidth = blueItems * ItemsWidth;
    var scrollableWidth = pinkLineWidth + blueLineWidth+10;
    var different = scrollableWidth - TimeLineWidth;
    
    var backPosition = 100 - Math.round(pinkItems * 100 / (pinkItems+blueItems));


    $(".scrollBar").css("background-position", backPosition+"%");

    var handlerOffset;
    var MaxHandlerOffset = 829;
    var parrentOffset = $(".handlerContainment").offset();

    var persentOffset;

    $(".pinkLine").css("width", pinkLineWidth + "px");
    $(".blueLine").css("width", blueLineWidth + "px");
    $(".scrollable").css("width", scrollableWidth + "px");

    
    setAll(initialPercentsValue);

    var currentPercentsValue = initialPercentsValue;
    

    $( ".handler" ).draggable({ 
        axis: "x",
        containment: 'parent',
        drag: function(){
            handlerOffset=$(".handler").offset();
            persentOffset = Math.round((handlerOffset.left - parrentOffset.left) / MaxHandlerOffset * 100);
            $(".scrollable").css("margin-left", -(persentOffset * different / 100) + "px");
            currentPercentsValue = persentOffset;
            
        }

    });

    function setAll($valueInPercents){
        $(".scrollable").css("margin-left", -($valueInPercents * different / 100) + "px");//Устанавливаем позицию линейки
        $( ".handler" ).css("left", Math.round($valueInPercents * MaxHandlerOffset / 100));
    }

    $(".leftHandler").click(function(){
        currentPercentsValue-=snap;
        if (currentPercentsValue < 0)
            currentPercentsValue = 0;
        setAll(currentPercentsValue);
    });

    $(".rightHandler").click(function(){
        currentPercentsValue+=snap;
        if (currentPercentsValue > 100)
            currentPercentsValue = 100;
        setAll(currentPercentsValue);
    });

});