jQuery(document).ready(function () {
    var cameraImages = [];
    var cameraPointer = 0;

    function changeImage(pointer) {
        $('#cameraImage').css(
            'background-image',
            'url(' + cameraImageBaseUrl + cameraImages[pointer].camera + '/' + cameraImages[pointer].imageName + ')'
        );
        $('#cameraText').text(cameraImages[pointer].text);
    }

    function refreshCameraImages() {
        jQuery.get(cameraImageApiUrl, function (data) {
            cameraImages = data;
        }).always(function () {
            window.setTimeout(refreshCameraImages, refreshInterval);
        });
    }

    // initial image load
    jQuery.get(cameraImageApiUrl, function (data) {
        cameraImages = data;

        changeImage(0);
        window.setTimeout(refreshCameraImages, refreshInterval);

        // change displayed image
        window.setInterval(function () {
            cameraPointer = cameraPointer >= cameraImages.length - 1
                ? 0
                : cameraPointer + 1;
            changeImage(cameraPointer);
        }, changeDelay);
    });

});