var forEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
        callback.call(scope, i, array[i]);
    }
};

var ChartLoader = function() {
    var charts = document.querySelectorAll('.chart-container');

    forEach(charts, function(i, chart) {
        var api = chart.getAttribute('data-api');
        var canvas = chart.querySelector('.chart-canvas');
        var height = chart.getAttribute('data-height');
        var data = {};
        var config = {
            type: chart.getAttribute('data-type'),
            data: data,
            options: {}
        };
        var instance = new Chart(canvas, config);

        chart.addEventListener('refresh', function() {
            fetch(api)
                .then(function(response) {
                    if(response.ok) {
                        response.json().then(function(json) {
                            if (json.hasOwnProperty('data')) {
                                instance.data = json.data;
                            }

                            if (json.hasOwnProperty('options')) {
                                instance.options = json.options;
                            }

                            if (json.hasOwnProperty('type')) {
                                instance.type = json.type;
                            }

                            instance.update();
                            instance.resize();
                        });
                    }

                    if (chart.hasAttribute('data-reload')) {
                        window.setTimeout(function() {
                            chart.dispatchEvent(new Event('refresh'));
                        }, chart.getAttribute('data-reload'))
                    }
                });
        });
        chart.dispatchEvent(new Event('refresh'));
    });
}

var CameraEvent = function() {
    var cameras = document.querySelectorAll('.camera');

    forEach(cameras, function(i, camera) {
        camera.addEventListener('click', function() {
            var isFullscreen = parseInt(camera.getAttribute('data-fullscreen'));

            if (isFullscreen) {
                camera.setAttribute('data-fullscreen', '0');
                camera.classList.add('box');

                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                }
            } else {
                camera.setAttribute('data-fullscreen', '1');
                camera.classList.remove('box');

                if (camera.requestFullscreen) {
                    camera.requestFullscreen();
                } else if (camera.webkitRequestFullscreen) {
                    camera.webkitRequestFullscreen();
                } else if (camera.mozRequestFullScreen) {
                    camera.mozRequestFullScreen();
                }
            }
        }, false);
    });
}

var SnapshotEvent = function() {
    var links = document.querySelectorAll('.snapshot-link');
    var view = document.querySelector('#snapshot-view');
    var body = document.querySelector('body');

    forEach(links, function(i, link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();

            var template = document.querySelector(link.getAttribute('data-template'));

            body.classList.add('modal-open');
            view.innerHTML = template.innerHTML
                .replace(/{src}/g, link.getAttribute('href'))
                .replace(/{title}/g, link.getAttribute('data-title'));

            view.querySelector('.modal').addEventListener('click', function() {
                e.preventDefault();
                view.innerHTML = '';
                body.classList.remove('modal-open');
            }, false);
        });
    });
}

var NavbarEvent = function() {
    var burger = document.querySelector('.navbar-burger');
    var menu = document.querySelector('.navbar-menu');

    if (burger && menu) {
        burger.addEventListener('click', function(e) {
            menu.classList.toggle('show');
        })
    }
}

window.addEventListener('load', function() {
    ChartLoader();
    CameraEvent();
    SnapshotEvent();
    NavbarEvent();
}, false)