$(document).ready(function() {
    $("#slider").slider({
        min: 1,
        max: 8,
        value: 1,
        slide: function(event, ui) {
            sliderSlide(ui.value);
        },
        change: function(event, ui) {
//            alert('change');
            sliderSlide(ui.value);
        }
    });
    
    function sliderSlide(uiValue) {
        $( "#amount" ).val($('.cal2 td:eq(' + (uiValue - 1) + ') .day').text().trim());
        $( ".ui-slider .ui-slider-handle span" ).text($('.cal1 td:eq(' + (uiValue-1) + ') .day').text().trim());
        $('.cal1 td').each(function() {
            if($(this).hasClass('active'))
            {
                $(this).removeClass('active')
            }
        })
        $('.cal2 td').each(function() {
            if($(this).hasClass('active'))
            {
                $(this).removeClass('active')
            }
        })

        $('.cal1 td:eq(' + (uiValue-1) + ')').addClass('active')
        $('.cal2 td:eq(' + (uiValue-1) + ')').addClass('active')
    }
    
    var activeElement = $('#slider').slider('value') - 1;
    $('.cal1 td:eq(' + activeElement + ')').addClass('active');
    $('.cal2 td:eq(' + activeElement + ')').addClass('active');

    $(".ui-slider .ui-slider-handle").html(
        "<span>"
        +$( ".index_calendar td:nth(" + ($( "#slider" ).slider( "value" )-1) + ") .day" ).text().trim()
        +"</span>"
        + "<input type='text' readonly='readonly' id='amount' />"
        );
    $( "#amount" ).val($('.cal2 td:eq(' + ($( "#slider" ).slider( "value" )-1) + ') .day').text().trim());
});