//////////////////
/// Connection
//////////////////

var socket = io.connect({
    // transports: ['websocket'],
    path: "/web/socket",
});

socket.on('connect', function() {
    console.log('Connected to server');

});

socket.on('disconnect', function() {
    console.log('Disconnected from server');
});

socket.on('error', function(e) {
    console.log(e);
});

socket.on('timestamp', function(server_unix_time) {
    //console.log(server_unix_time)
    var diff = difftime(server_unix_time)
    $('[data-status=timestamp-diff]').text(diff)
    // console.log(diff)
});

///////////////////////
/// Logfile stream
///////////////////////

var ansi_up = new AnsiUp;
socket.on("new-lines", function(lines) {
    //console.log(lines)
    lines.forEach(function(line){        
        $("#stream-output").prepend(
            '<div>'+ansi_up.ansi_to_html(line)+'</div>'
        );        
    })
});

//////////////////
/// RTC status
//////////////////

socket.on("rtc-status",function(d) {
    
    $('[data-status="ref_cx"]').text(d.cred.cx.toFixed(2))
    $('[data-status="ref_cy"]').text(d.cred.cy.toFixed(2))
    
    $('[data-status="current_cx"]').text(d.cloud.cx.toFixed(2))
    $('[data-status="current_cy"]').text(d.cloud.cy.toFixed(2))
    
        $("#image-skp_cmd-dm").text(d.dm.skp_cmd)
    $("#image-cloud_samples-cloud").text(d.cloud.cloud_samples)
    
    draw_image(d.cred, "cred") // cred image
    draw_image(d.gain, "cred", true ) // mask true
    draw_centroid(d.cred, "cred", "red") // red dot
    draw_circle(d.cloud, "cred", "red", 1) // red circle

    draw_dm(d.dm, "dm", false)
    draw_dm(d.dm, "dm2", true)
    
    draw_image(d.cloud, "cloud")
    
    /// Draw a circle corresponding to the center of rotation.
    /// "data" is a dummy array.
    /// "cx" and "cy" are the normalized coordinates
    
    //var center_of_rotation = {data:[1,2,3], cx:+0.28, cy:-0.11}
    var center_of_rotation = {data:[1,2,3], cx:+0.16, cy:+0.04}
    draw_circle(center_of_rotation, "cred", "white", 0.2) // red circle
    
});


////////////////////
/// JSON status
////////////////////

socket.on("json-status",function(data) {
    
    /////////////////////////////
    /// General
    /////////////////////////////

    $.each(data, function(key,status){
        $('[data-status="'+key+'"]').text(status.value)
    });


    /////////////////////////////
    /// ICS PART
    /////////////////////////////

    $.each(data, function(key,status){

        // Authorized Instrument at LBT
        $('[data-status="'+key+'"]').text(status.value)

        /// In limit
        var in_limit = $('var[data-'+key+'-in_limit]')
        var named = $('var[data-'+key+'-named]')

        $.each(status, function(k,v){
            var elem = $('var[data-'+key+'-'+k+']');
            elem.text(v)

            if (status.is_moving) {
                elem.addClass("text-warning")
                named.text("moving...")
            } else {
                elem.removeClass("text-warning")
            }
            elem.data(key+'-'+k, v)

            if (status.encoder == 0) {
                elem.addClass("text-success")
            } else {
                elem.removeClass("text-success")
            }

        });

        /// In limit
        if (status.in_limit) {
            in_limit.addClass("text-danger")
            named.addClass("text-danger")
            named.text("in limit!")
        } else {
            in_limit.removeClass("text-danger")
            named.removeClass("text-danger")
        }

        /// Named position
        if (status.named == "not defined") {
            if (status.encoder == 0) {
                named.addClass("text-success")
                named.text("in home!")
            } else {
                named.addClass("text-warning")
            }
        } else {
            named.removeClass("text-success")
            named.removeClass("text-warning")
        }

    });
    

    /////////////////////////////
    /// SYNOPTIC PART
    /////////////////////////////

    var green   = "#198754"
    var yellow  = "#ffc107"
    var red     = "#dc3545"
    var gray    = "#efefef"//"#343a40"
    var success = green
    var warning = yellow
    var danger  = red
    var normal  = gray

    // Motors and Lamps

    $.each(data, function(key,status){

        // Positions and named positions

        var elem_encoder = $('#value-'+key)
        if (status["encoder"]) {
            elem_encoder.text(status["encoder"])
        } else if (status["value"]) { // for dm, rtc, sasha
            elem_encoder.text(status["value"])
        }

        var elem_named = $('#named-'+key)
        // elem_named.text(status["named"])

        if (status["in_limit"]) {
            elem_named.attr("fill", danger)
            elem_named.text("in limit!")
            elem_encoder.attr("fill", danger)
            elem_encoder.text(status["encoder"])
        } else {
            elem_named.attr("fill", normal)
            elem_encoder.text(status["encoder"])
        }

        if ((status["is_moving"]) | (status["named"] == "not defined")) {
            elem_named.attr("fill", warning)
            elem_encoder.attr("fill", warning)
            if (status["is_moving"])  {
                elem_named.text("moving...")
                elem_encoder.text(status["encoder"])
            } else {
                if (status["encoder"] == 0) {
                    elem_named.attr("fill", success)
                    elem_named.text("in home!")
                    elem_encoder.attr("fill", success)
                    elem_encoder.text(status["encoder"])
                } else {
                    elem_named.text("not defined")
                    elem_encoder.text(status["encoder"])
                }
            }
        } else {
            elem_named.attr("fill", normal)
            elem_named.text(status["named"])
            elem_encoder.attr("fill", normal)
            elem_encoder.text(status["encoder"])
        }


        // Icons

        if (data.INBEAM_DEP.named == "OUT" ) {
            $("#in-INBEAM_DEP-0").attr("style", "display:inline")
            $("#in-INBEAM_DEP-1").attr("style", "display:none")
        } else if (data.INBEAM_DEP.named == "IN" ) {
            $("#in-INBEAM_DEP-0").attr("style", "display:none")
            $("#in-INBEAM_DEP-1").attr("style", "display:inline")
        } else {
            $("#in-INBEAM_DEP-0").attr("style", "display:none")
            $("#in-INBEAM_DEP-1").attr("style", "display:inline")
        }

        if (data.SHUTTER.named == "OUT" ) {
            $("#in-SHUTTER-0").attr("style", "display:inline")
            $("#in-SHUTTER-1").attr("style", "display:none")
        } else if (data.SHUTTER.named == "IN" ) {
            $("#in-SHUTTER-0").attr("style", "display:none")
            $("#in-SHUTTER-1").attr("style", "display:inline")
        } else {
            $("#in-SHUTTER-0").attr("style", "display:none")
            $("#in-SHUTTER-1").attr("style", "display:inline")
        }

        if (data.CAL_MIRROR_DEP.named == "OUT" ) {
            $("#CAL_MIRROR_DEP-0").attr("style", "display:inline")
            $("#CAL_MIRROR_DEP-1").attr("style", "display:none")
        } else if (data.CAL_MIRROR_DEP.named == "IN" ) {
            $("#CAL_MIRROR_DEP-0").attr("style", "display:none")
            $("#CAL_MIRROR_DEP-1").attr("style", "display:inline")
        } else {
            $("#CAL_MIRROR_DEP-0").attr("style", "display:none")
            $("#CAL_MIRROR_DEP-1").attr("style", "display:none")
        }

        if (data.CAL_FIBER_DEP.named == "NO_FIBERS" ) {
            $("#CAL_FIBER_DEP-0").attr("style", "display:inline")
            $("#CAL_FIBER_DEP-1").attr("style", "display:none")
            $("#CAL_FIBER_DEP-2").attr("style", "display:none")
        } else if (data.CAL_FIBER_DEP.named == "FOCUS_IN" ) {
            $("#CAL_FIBER_DEP-0").attr("style", "display:none")
            $("#CAL_FIBER_DEP-1").attr("style", "display:inline")
            $("#CAL_FIBER_DEP-2").attr("style", "display:none")
        } else if (data.CAL_FIBER_DEP.named == "DEFOCUS_IN" ) {
            $("#CAL_FIBER_DEP-0").attr("style", "display:none")
            $("#CAL_FIBER_DEP-1").attr("style", "display:none")
            $("#CAL_FIBER_DEP-2").attr("style", "display:inline")
        } else {
            $("#CAL_FIBER_DEP-0").attr("style", "display:none")
            $("#CAL_FIBER_DEP-1").attr("style", "display:none")
            $("#CAL_FIBER_DEP-2").attr("style", "display:none")
        }

        if (data.CAL_FILTER_DEP.named == "OUT" ) {
            $("#CAL_FILTER_DEP-0").attr("style", "display:inline")
            $("#CAL_FILTER_DEP-1").attr("style", "display:none")
        } else if (data.CAL_FILTER_DEP.named == "IN" ) {
            $("#CAL_FILTER_DEP-0").attr("style", "display:none")
            $("#CAL_FILTER_DEP-1").attr("style", "display:inline")
        } else {
            $("#CAL_FILTER_DEP-0").attr("style", "display:none")
            $("#CAL_FILTER_DEP-1").attr("style", "display:none")
        }

        if (data.CAL_FIBER_FOCUS_LAMP.named == "OFF" ) {
            $("#CAL_FIBER_FOCUS_LAMP-0").attr("style", "display:inline")
            $("#CAL_FIBER_FOCUS_LAMP-1").attr("style", "display:none")
        } else if (data.CAL_FIBER_FOCUS_LAMP.named == "ON" ) {
            $("#CAL_FIBER_FOCUS_LAMP-0").attr("style", "display:none")
            $("#CAL_FIBER_FOCUS_LAMP-1").attr("style", "display:inline")
        } else {
            $("#CAL_FIBER_FOCUS_LAMP-0").attr("style", "display:none")
            $("#CAL_FIBER_FOCUS_LAMP-1").attr("style", "display:none")
        }

        if (data.CAL_FIBER_DEFOCUS_LAMP.named == "OFF" ) {
            $("#CAL_FIBER_DEFOCUS_LAMP-0").attr("style", "display:inline")
            $("#CAL_FIBER_DEFOCUS_LAMP-1").attr("style", "display:none")
        } else if (data.CAL_FIBER_DEFOCUS_LAMP.named == "ON" ) {
            $("#CAL_FIBER_DEFOCUS_LAMP-0").attr("style", "display:none")
            $("#CAL_FIBER_DEFOCUS_LAMP-1").attr("style", "display:inline")
        } else {
            $("#CAL_FIBER_DEFOCUS_LAMP-0").attr("style", "display:none")
            $("#CAL_FIBER_DEFOCUS_LAMP-1").attr("style", "display:none")
        }

        if (data.CAL_FF_LAMP.named == "OFF" ) {
            $("#CAL_FF_LAMP-0").attr("style", "display:inline")
            $("#CAL_FF_LAMP-1").attr("style", "display:none")
        } else if (data.CAL_FF_LAMP.named == "ON" ) {
            $("#CAL_FF_LAMP-0").attr("style", "display:none")
            $("#CAL_FF_LAMP-1").attr("style", "display:inline")
        } else {
            $("#CAL_FF_LAMP-0").attr("style", "display:none")
            $("#CAL_FF_LAMP-1").attr("style", "display:none")
        }

        if (data.PUPIL_LENS_DEP.named == "OUT" ) {
            $("#PUPIL_LENS_DEP-0").attr("style", "display:inline")
            $("#PUPIL_LENS_DEP-1").attr("style", "display:none")
        } else if (data.PUPIL_LENS_DEP.named == "IN" ) {
            $("#PUPIL_LENS_DEP-0").attr("style", "display:none")
            $("#PUPIL_LENS_DEP-1").attr("style", "display:inline")
        } else {
            $("#PUPIL_LENS_DEP-0").attr("style", "display:none")
            $("#PUPIL_LENS_DEP-1").attr("style", "display:none")
        }

        // Light path

        var light_on = "stroke:#ff6600;fill:none;stroke-width:5;"
        var light_off = "stroke:#cccccc;fill:none;stroke-width:5;"

        if (data.INBEAM_DEP.named == "OUT" ) {
            $("#light-ext").attr("style", light_on)
            $("#light-in").attr("style", light_off)
            $("#light-SHUTTER").attr("style", light_off)
            $("#light-general").attr("style", light_off)
            $("#light-bs").attr("style", light_off)
        } else {
            $("#light-ext").attr("style", light_off)
            $("#light-in").attr("style", light_on)

            if (data.SHUTTER.named == "OUT" ) {
                $("#light-SHUTTER").attr("style", light_on)

                if (data.CAL_MIRROR_DEP.named == "OUT" ) {
                    $("#light-general").attr("style", light_on)
                    $("#light-bs").attr("style", light_on)
                } else {
                    $("#light-general").attr("style", light_off)
                    $("#light-bs").attr("style", light_off)
                }

            } else if (data.SHUTTER.named == "IN" ) {
                $("#light-SHUTTER").attr("style", light_off)
                $("#light-general").attr("style", light_off)
                $("#light-bs").attr("style", light_off)
            }
        }

        if (data.CAL_FF_LAMP.named == "ON" ) {
            $("#light-CAL_FF_LAMP").attr("style", light_on)
            if (data.CAL_MIRROR_DEP.named == "IN" ) {
                $("#light-general").attr("style", light_on)
                $("#light-bs").attr("style", light_on)
            } else {
                $("#light-general").attr("style", light_off)
                $("#light-bs").attr("style", light_off)
            }
        } else {
            $("#light-CAL_FF_LAMP").attr("style", light_off)
        }

        if (data.CAL_FIBER_FOCUS_LAMP.named == "ON" ) {
            $("#light-CAL_FIBER_FOCUS_LAMP").attr("style", light_on)
            if (data.CAL_FIBER_DEP.named == "FOCUS_IN" ) {
                $("#light-general").attr("style", light_on)
                $("#light-bs").attr("style", light_on)
            } else {
                $("#light-general").attr("style", light_off)
                $("#light-bs").attr("style", light_off)
            }
        } else {
            $("#light-CAL_FIBER_FOCUS_LAMP").attr("style", light_off)
        }

        if (data.CAL_FIBER_DEFOCUS_LAMP.named == "ON" ) {
            $("#light-CAL_FIBER_DEFOCUS_LAMP").attr("style", light_on)
            if (data.CAL_FIBER_DEP.named == "DEFOCUS_IN" ) {
                $("#light-general").attr("style", light_on)
                $("#light-bs").attr("style", light_on)
            } else {
                $("#light-general").attr("style", light_off)
                $("#light-bs").attr("style", light_off)
            }
        } else {
            $("#light-CAL_FIBER_DEFOCUS_LAMP").attr("style", light_off)
        }

    });
       
});

///////////////////////
/// Pulse on changes
///////////////////////

function pulse(selector) {

    // var done = "bg-success"
    // var delay = 200

    selector.fadeTo('slow', 0.5, function() {
      selector.fadeTo('slow', 1.0) //.removeClass(done);
    });

    // setTimeout(function() {
    //   selector.removeClass(done);
    // }, delay);

}

$(document).ready(function(){
    // Select all elements with data-status attribute
    const elements = document.querySelectorAll('[data-status]');

    // Object to store previous text content of each element
    const previousTextContent = {};

    // Function to monitor text changes
    function observeChanges(element) {
        const observer = new MutationObserver(mutationsList => {
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    const previousText = previousTextContent[element.getAttribute('data-status')];
                    const currentText = element.textContent.trim();
                    if (previousText !== currentText) {
                        pulse($(element))
                        previousTextContent[element.getAttribute('data-status')] = currentText;
                    }
                }
    }
        });

        observer.observe(element, { subtree: true, childList: true });
    }

    // Apply observeChanges function to each element
    elements.forEach(element => {
        previousTextContent[element.getAttribute('data-status')] = element.textContent.trim();
        observeChanges(element);
    });

});