$(function () {

    var dates = $("#checkin, #checkout").datepicker({
        changeMonth: true,
        numberOfMonths: 1,
        showOn: "button",
        buttonImage: "images/cal.jpg",
        buttonImageOnly: true,
        onSelect: function (selectedDate) {
            $('#slider').data('nivoslider').stop();
            document.getElementById("ui-datepicker-div").style.zindex = 100;
            var option = this.id == "checkin" ? "minDate" : "maxDate",
					instance = $(this).data("datepicker"),
					date = $.datepicker.parseDate(
						instance.settings.dateFormat ||
						$.datepicker._defaults.dateFormat,
						selectedDate, instance.settings);
            dates.not(this).datepicker("option", option, date);
        },
        create: function (event, ui) {
            $('#slider').data('nivoslider').stop();
        },
        onClose: function (selectedDate, inst) {
            $('#slider').data('nivoslider').start();
        }
    });
});

$(window).load(function () {
    $('#slider').nivoSlider({
        effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: false, // Next & Prev navigation
        directionNavHide: false, // Only show on hover
        controlNav: false, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav: false, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        captionOpacity: 0.8
    });
    document.getElementById('mainPic').style.display = 'inline-block';
});