// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkID=397704
// To debug code on page load in cordova-simulate or on Android devices/emulators: launch your app, set breakpoints, 
// and then run "window.location.reload()" in the JavaScript Console.
(function () {
    "use strict";

    var _Root;
    var _RootAlt;
    var _ImageZero;
    var _JsonTimer;
    var _ImageTimer;
    var _DataDirectory;

    var _Pause = 0;
    var _Images = [];
    var _JsonInterval;
    var _ImageInterval;
    var _ImageIndex = 0;
    var _OpaqueIndex = 0;
    var _DeviceReadyDiv = $("#deviceReady div");

    $(document).ready(function () {

        console.log("onDeviceReady");

        // Handle the Cordova pause and resume events
        document.addEventListener('pause', onPause.bind(this), false);
        document.addEventListener('resume', onResume.bind(this), false);

        document.addEventListener('keyup', getInput, false);

        var url = '../slideshow/index.json';
        console.log(url);
        var _ = $.getJSON(url, function (data) {
            console.log(url + " downloaded successfully");
            _RootAlt = null;
            _Root = data.Root;
            _ImageZero = data.ImageZero;
            _JsonInterval = data.JsonInterval;
            _ImageInterval = data.ImageInterval;
            _DataDirectory = data.DataDirectory;
            console.log(url + " used successfully");
        })
            .done(function () {
                loadData();

                _JsonTimer = setInterval(onTickJSON, _JsonInterval);
                _ImageTimer = setInterval(onTickImage, _ImageInterval);
            })
            .fail(function (er) {
                console.log("error", er);
                _ImageInterval = 5000;
                _JsonInterval = 59000;
                _Root = "../pictures";
                _DataDirectory = "../random";
                // _ImageZero = "images/img_tree.gif";
                // _ImageZero = "images/output-onlinepngtools.png";
                _ImageZero = "images/1x1_00000000.png"; // https://shoonia.github.io/1x1/#00000000
            })
            .always(function () {
                console.log("complete");
            });
    });

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    }

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    }

    function goBack() {
        _Pause = 1;
        if (_Pause === 0) {
            _ImageIndex -= 1;
        }
        else {
            _ImageIndex -= 2;
        }
        if (_ImageIndex === 0) {
            _ImageIndex = _Images.length - 1;
        }
        var backgroundImage = GetBackgroundImage();
        _DeviceReadyDiv.attr('style', backgroundImage);
    }

    function goForward() {
        _Pause = 1;
        _ImageIndex += 1;
        if (_ImageIndex >= _Images.length) {
            _ImageIndex = 0;
        }
        var backgroundImage = GetBackgroundImage();
        _DeviceReadyDiv.attr('style', backgroundImage);
    }

    function changeImageTimer(imageInterval) {
        _ImageInterval = imageInterval;
        clearTimeout(_ImageTimer);
        _ImageTimer = setInterval(onTickImage, _ImageInterval);
    }

    function getInput(e) {
        var which = e.which;
        switch (which) {
            case 13: //Okay
                if (_Pause === 0) {
                    _Pause = 1;
                }
                else {
                    _Pause = 0;
                }
                break;
            case 37: //Left
                goBack();
                break;
            case 38: //Up
                goForward();
                break;
            case 39: //Right
                goForward();
                break;
            case 40: //Down
                goBack();
                break;
            case 173: //Fast Forward
                goForward();
                break;
            case 177: //Rewind
                goBack();
                break;
            case 8: //Delete
                console.log('Delete key was pressed!');
                break;
            case 48: //0
                changeImageTimer(10000);
                break;
            case 49: //1
                changeImageTimer(1000);
                break;
            case 50: //2
                changeImageTimer(2000);
                break;
            case 51: //3
                changeImageTimer(3000);
                break;
            case 52: //4
                changeImageTimer(4000);
                break;
            case 53: //5
                changeImageTimer(5000);
                break;
            case 54: //6
                changeImageTimer(6000);
                break;
            case 55: //7
                changeImageTimer(7000);
                break;
            case 56: //8
                changeImageTimer(8000);
                break;
            case 57: //9
                changeImageTimer(9000);
                break;
            default:
        }
    }

    function loadData() {
        var currentDate = new Date();
        var mm = (new Date().getMonth() + 1).toString().padStart(2, '0');
        var dd = currentDate.getDate().toString().padStart(2, '0');
        var url = _DataDirectory + '/' + mm + '-' + dd + '.json';
        console.log(url);
        var _ = $.getJSON(url, function (data) {
            console.log("success", data.length);
            _Images = [];
            $.each(data, function (index, value) {
                _Images.push(value.replaceAll("\\", "/"));
            });
        })
            .done(function () {
                console.log("second success");
            })
            .fail(function (er) {
                console.log("error", er);
                _Images = [_ImageZero];
            })
            .always(function () {
                console.log("complete");
            });
    }

    function onTickJSON() {
        var currentDate = new Date();
        var currentHours = currentDate.getHours();
        if (currentHours === 21) {
            var currentMinutes = currentDate.getMinutes();
            if (currentMinutes === 0) {
                loadData();
            }
        }
    }

    function GetBackgroundImage() {
        var result = "background-image: url('" + _Root + _Images[_ImageIndex] + "'), url('";
        if (_RootAlt !== null) {
            result = result + _RootAlt + _Images[_ImageIndex] + "'), url('";
        }
        result = result + _ImageZero + "');";
        return result;
    }

    function onTickImage() {
        if (_Images.length > 0 && _Pause === 0) {
            var currentDate = new Date();
            var currentHours = currentDate.getHours();
            if (currentHours >= 22 || currentHours <= 6) {
                _DeviceReadyDiv.attr('style', 'background-color: #191717;');
            }
            else {
                _DeviceReadyDiv.eq(_OpaqueIndex).removeClass("opaque");
                _ImageIndex += 1;
                if (_ImageIndex >= _Images.length) {
                    _ImageIndex = 0;
                }
                var loadIndex;
                switch (_OpaqueIndex) {
                    case 0:
                        loadIndex = 2;
                        _OpaqueIndex = 1;
                        break;
                    case 1:
                        loadIndex = 0;
                        _OpaqueIndex = 2;
                        break;
                    case 2:
                        loadIndex = 1;
                        _OpaqueIndex = 0;
                        break;
                    default:
                }
                var backgroundImage = GetBackgroundImage();
                _DeviceReadyDiv.eq(loadIndex).attr('style', backgroundImage);
                _DeviceReadyDiv.eq(_OpaqueIndex).addClass("opaque");
            }
        }
    }

    // Create the root video element
    var video = document.createElement('video');
    video.setAttribute('loop', '');
    // Add some styles if needed
    video.setAttribute('style', 'position: fixed;');

    // A helper to add sources to video
    function addSourceToVideo(element, type, dataURI) {
        var source = document.createElement('source');
        source.src = dataURI;
        source.type = 'video/' + type;
        element.appendChild(source);
    }

    // A helper to concat base64
    var base64 = function (mimeType, base64) {
        return 'data:' + mimeType + ';base64,' + base64;
    };

    if (window.location.href.indexOf('noSleep') > 0) {
        // Add Fake sourced
        addSourceToVideo(video, 'webm', base64('video/webm', 'GkXfo0AgQoaBAUL3gQFC8oEEQvOBCEKCQAR3ZWJtQoeBAkKFgQIYU4BnQI0VSalmQCgq17FAAw9CQE2AQAZ3aGFtbXlXQUAGd2hhbW15RIlACECPQAAAAAAAFlSua0AxrkAu14EBY8WBAZyBACK1nEADdW5khkAFVl9WUDglhohAA1ZQOIOBAeBABrCBCLqBCB9DtnVAIueBAKNAHIEAAIAwAQCdASoIAAgAAUAmJaQAA3AA/vz0AAA='));
        addSourceToVideo(video, 'mp4', base64('video/mp4', 'AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAAG21kYXQAAAGzABAHAAABthADAowdbb9/AAAC6W1vb3YAAABsbXZoZAAAAAB8JbCAfCWwgAAAA+gAAAAAAAEAAAEAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAIVdHJhawAAAFx0a2hkAAAAD3wlsIB8JbCAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAIAAAACAAAAAABsW1kaWEAAAAgbWRoZAAAAAB8JbCAfCWwgAAAA+gAAAAAVcQAAAAAAC1oZGxyAAAAAAAAAAB2aWRlAAAAAAAAAAAAAAAAVmlkZW9IYW5kbGVyAAAAAVxtaW5mAAAAFHZtaGQAAAABAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAAEcc3RibAAAALhzdHNkAAAAAAAAAAEAAACobXA0dgAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAIAAgASAAAAEgAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABj//wAAAFJlc2RzAAAAAANEAAEABDwgEQAAAAADDUAAAAAABS0AAAGwAQAAAbWJEwAAAQAAAAEgAMSNiB9FAEQBFGMAAAGyTGF2YzUyLjg3LjQGAQIAAAAYc3R0cwAAAAAAAAABAAAAAQAAAAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAEAAAABAAAAFHN0c3oAAAAAAAAAEwAAAAEAAAAUc3RjbwAAAAAAAAABAAAALAAAAGB1ZHRhAAAAWG1ldGEAAAAAAAAAIWhkbHIAAAAAAAAAAG1kaXJhcHBsAAAAAAAAAAAAAAAAK2lsc3QAAAAjqXRvbwAAABtkYXRhAAAAAQAAAABMYXZmNTIuNzguMw=='));

        // Append the video to where ever you need
        document.body.appendChild(video);

        // Start playing video after any user interaction.
        // NOTE: Running video.play() handler without a user action may be blocked by browser.
        var playFn = function () {
            video.play();
            document.body.removeEventListener('touchend', playFn);
        };
        document.body.addEventListener('touchend', playFn);
    }

})();