var links = [];
var curTime = 0;
var fullScreen = false;

var playing = false;
var v = 1000;
var slideInterval = setInterval(function() {}, v);
clearInterval(slideInterval);


jQuery(function($) {
    $(document).ready(function() {
        getDomenList();
    });

    $('input:radio[name=initTermSel]').change(function() {
        getTime();
    });

    $("#date").change(function() {
        var date = $("#date").val();
        $.ajax({
            type: "POST",
            url: "php/date/date.php",
            data: {date: date}
        }).done(function(result) {});
        getLink(0);
    });

    $( "#map" ).on("load", function() {
        $( "#not_find" ).hide();
        $( "#map" ).show();
    });

    $("#map").on("error", function() {
        $( "#map" ).hide();
        $( "#not_find" ).show();
    });

    $("#previous").click(function() {
        pause();
        curTime = previous();
    });

    $("#next").click(function() {
        pause();
        curTime = next();
    });

    $("input:radio[name=speed]").change(function() {
        pause();
        v = $('input:radio[name=speed]:checked').val();
    });

    $("#pause").click(function() {
        if(playing) pause ();
        else curTime = play(v);
    });

    var map = document.getElementById('map');
    map.addEventListener("wheel", function(e) {
        if(!($("#popup").length) && document.documentElement.clientWidth > 849) {
            if (e.deltaY < 0) {
                curTime = previous();
            }
            else if (e.deltaY > 0) {
                curTime = next();
            }
        }
    });

    let started = false;
    let x = 0, y = 0;
    let newX = 0, newY = 0;
    let deltaX = 0, deltaY = 0;
    let touch = null;

    map.addEventListener("touchstart", function(event) {
        if (event.touches.length != 1 || started) return;
        touch = event.changedTouches[0];
        x = touch.pageX;
        y = touch.pageY;
    });

    map.addEventListener("touchmove", function() {
        started = true;
    });

    map.addEventListener("touchend", function(event) {
        if (!started) return;
        newX = event.changedTouches[0].pageX;
        newY = event.changedTouches[0].pageY;
        deltaX = newX - x;
        deltaY = newY - y;
        event.preventDefault();
        if(Math.abs(deltaX) >= Math.abs(deltaY)) {
            if (deltaX < 0) next();
            else previous(); 
        }
        [x, y, newX, newY, deltaX, deltaY, started] = [0, 0, 0, 0, 0, 0, false];
    });


    $(document).keyup(function(e){
        if(!($("#popup").length)) {
            if (e.which == 37) {
                curTime = previous();
            }
        }
    });

    $(document).keyup(function(e){
        if(!($("#popup").length)) {
            if (e.which == 39) {
                curTime = next();
            }
        }
    });
});

function getDomenList() {
    $.ajax({
        type: "POST",
        url: "../assets/php/ensemble/domenhandler.php",
        beforeSend: function() {
            $("#map").hide();
            $("#plug").show();
        }
    }).done(function(result) {
        $("#domen_wrapper").empty();
        $("#domen_wrapper").html(result);
        getTypeList();
    });
}


function getTypeList(){
    var domen = $('input:radio[name=domenSel]:checked').val();

    pause();

    $.ajax({
        type: "POST",
        url: "../assets/php/ensemble/typehandler.php",
        data: {id_domen: domen},
        beforeSend: function() {
            $("#map").hide();
            $("#plug").show();
        }
    }).done(function(result) {
        $("#type_wrapper").empty();
        $("#type_wrapper").html(result);
        getElemList();
    });
}

function getElemList() {
    var domen = $('input:radio[name=domenSel]:checked').val();
    var type = $('input:radio[name=typeSel]:checked').val();

    pause();

    $.ajax({
        type: "POST",
        url: "../assets/php/ensemble/elemhandler.php",
        data: {id_domen: domen, id_type: type},
        beforeSend: function() {
            $("#map").hide();
            $("#plug").show();
        }
    }).done(function(result) {
        $("#elem_wrapper").empty();
        $("#elem_wrapper").html(result);
        getTime();
    });
}

function getTime() {
    var domen = $('input:radio[name=domenSel]:checked').val();
    var type = $('input:radio[name=typeSel]:checked').val();
    var elem = $('input:radio[name=elemSel]:checked').val();
    var init_term = $('input:radio[name=initTermSel]:checked').val();

    pause();

    $.ajax({
        type: "POST",
        url: "../assets/php/ensemble/timehandler.php",
        data: {
            id_domen: domen,
            id_type: type,
            id_elem: elem,
            id_init_term: init_term
        },
        beforeSend: function() {
            $("#map").hide();
            $("#plug").show();
        }
    }). done(function(result) {
        $("#time_wrapper").empty();
        $("#time_wrapper").html(result);
        getLink();
    });
}

function getLink() {
    var domen = $('input:radio[name=domenSel]:checked').val();
    var type = $('input:radio[name=typeSel]:checked').val();
    var elem = $('input:radio[name=elemSel]:checked').val();
    var init_term = $('input:radio[name=initTermSel]:checked').val();
    var date = formDate($("#date").val());

    pause();

    $.ajax({
        type: "POST",
        url: "../assets/php/ensemble/linkhandler.php",
        data: {
            id_domen: domen,
            id_type: type,
            id_elem: elem,
            id_init_term: init_term,
            date: date
        },
        beforeSend: function() {
            $("#map").hide();
            $("#plug").show();
        }
    }). done(function(result) {
        window.links.length = 0;
        window.links = null;
        window.curTime = 0;
        window.links = JSON.parse(result);
        border(0);
        $("#map").attr("src", window.links[0]);
        $("#full-screen__map").attr("src", window.links[0]);
        $("#map").show();
        $("#plug").hide();
    });
}

function getImg(time) {
    pause();
    window.curTime = time;
    border(window.curTime);
    $("#map").attr("src", window.links[window.curTime]);
    $("#full-screen__map").attr("src", window.links[window.curTime]);
}

function previous() {
    pause();

    if(curTime == 0) curTime = window.links.length - 1
    else curTime--;

    border(curTime);
    $("#map").attr("src", window.links[curTime]);
    $("#full-screen__map").attr("src", window.links[curTime]);
    if(fullScreen) $("#popup_img").attr("src", window.links[curTime]);

    return curTime;
}

function next() {
    pause();

    if(curTime == window.links.length - 1) curTime = 0
    else curTime++;

    border(curTime);
    $("#map").attr("src", window.links[curTime]);
    $("#full-screen__map").attr("src", window.links[curTime]);
    if(fullScreen) $("#popup_img").attr("src", window.links[curTime]);

    return curTime;
}

function pause () {
    document.getElementById("pause").classList.remove("pause");
    document.getElementById("pause").classList.add("triangle");
    playing = false;
    clearInterval(slideInterval);
}

function play (v) {

    document.getElementById("pause").classList.add("pause");
    document.getElementById("pause").classList.remove("triangle");
    playing = true;

    slideInterval = setInterval(function() {
        if(window.curTime == window.links.length - 1) window.curTime = 0
        else window.curTime++;

        border(window.curTime);
        $("#map").attr("src", window.links[window.curTime]);
        $("#full-screen__map").attr("src", window.links[window.curTime]);
    }, v);
    return window.curTime;
}

function formDate(obj) {
    var year = obj.substring(0, 4);
    var month = obj.substring(5, 7);
    var day = obj.substring(8);

    var result = year + month + day;

    return result;
}

function border (obj) {

    var name;
    for(var i=0; i<links.length; i++) {
        name = "#but_" + i;
        $(name).css("border-bottom", "2px solid transparent");
    }
    name = "#but_" + obj;
    $(name).css("border-bottom", "2px solid #0606A3");

}