/*! @file

    @id $Id$

    This is the main application as it is fully run in the user's browser.

*/
//       1         2         3         4         5         6         7         8
// 45678901234567890123456789012345678901234567890123456789012345678901234567890

var socket = io.connect();
var focused = null;

function DockerContainers() {
    var Status = Object.freeze({
        Error:      {color: "red", action1: "start", action2: "remove"},
        Terminated: {color: "yellow", action1: "start", action2: "remove"},
        Restarting: {color: "lightblue", action1: "start", action2: "remove"},
        Paused:     {color: "lightgrey", action1: "unpause", action2: null},
        Running:    {color: "lightgreen", action1: "pause", action2: "stop"}
    });
    var containers = [];
    var nodes = [];
    function protocol(port) {
        if (port.toString().match("443")) return "https://";
        if (port.toString().match("3304")) return "mysql://";
        if (port.toString().match("22")) return "ssh://";
        return "http://";
    }
    this.exists = function(name) {
        if (nodes[name]) return true;
        return false;
    }
    this.contextmenu = function(selector) {
        $('a[xlink\\:href^=#]').click(function(e) {
            name = $(this).attr("xlink:href").replace(/^#/, "");
            var n = nodes[name];
            $(selector).prepend('<div id="popup"></div>')
            $("#popup").empty();
            if (n.status.action1) {
                $("#popup").append('<button id="popup1">'+n.status.action1+'</button>');
                $("#popup1").click(function() {
                    socket.emit(n.status.action1, name);
                });
            }
            $("#popup").append('<button id="popup2">'+(focused?"overview":"focus")+'</button>');
            $("#popup2").click(function() {
                if (focused) overview(); else details(name);
            });
            if (n.status.action2) {
                $("#popup").append('<button id="popup3">'+n.status.action2+'</button>');
                $("#popup3").click(function() {
                    socket.emit(n.status.action2, name);
            });
            }
            $("#popup").append('<br/>');
            $("#popup").append('<button id="popup4">download</button>');
            $("#popup").css("position", "fixed");
            $("#popup").css("top", e.pageY-$("#popup").height()/4);
            $("#popup").css("left", e.pageX-$("#popup").width()/2);
            $("#popup").mouseleave(function() {
                $("#popup").hide();
            }).click(function() {
                $("#popup").hide();
            });
            $("#popup").show();
        })
    }
    this.details = function(name) {
        var res = `
                <div id="tabs">
                  <ul>
                    <li><a href="#tabs-1">Overview</a></li>
                    <li><a href="#tabs-2">Logs</a></li>
                    <li><a href="#tabs-3">Dump</a></li>
                  </ul>
                  <div id="tabs-1">
                    <table class="details docker">
                      <thead>
                        <tr>
                          <th>Name</th>
                          <th>Ports</th>
                          <th>Volumes</th>
                          <th>Links</th>
                          <th>Environments</th>
                          <th>Image</th>
                          <th>Command</th>
                        </tr>
                      </thead>
                      <tbody>
            `;
        var n = nodes[name];
        res += `
                      </tbody>
                    </table>
                  </div>
                  <div id="tabs-2">
                  </div>
                  <div id="tabs-3">
                    <pre>`;
        res += JSON.stringify(containers[nodes[name].id], null, 4);
        res += `
                    </pre>
                  </div>
                </div>
                <script>
                  $(function() {$("#tabs").tabs();});
                </script>
            `;
        return res;
    }
    function getIps(n, ips) {
        n.ports.forEach(function(p) {
            if (!ips[p.ip]) ips[p.ip] = [];
            ips[p.ip].push(p);
        });
    }
    function graphIpClusters(ips) {
        var res = "newrank=true;\n";
        var i = 0;
        for (ip in ips) {
            res += "subgraph clusterIp"+(++i)+' {\nlabel="'+ip+'";\n';
            ips[ip].forEach(function(p) {
                res += '"'+p.ip+":"+p.external
                    +'" [label="'+p.external+'",URL="'
                    +protocol(p.internal)+p.ip+':'+p.external+'",shape=box];\n';
            });
            res+="}\n";
        }
        res += "{rank=same;\n";
        for (ip in ips) {
            ips[ip].forEach(function(p) {
                res += '"'+p.ip+":"+p.external+'";\n';
            });
        }
        res+="}\n";
        return res;
    }
    function graphNode(n) {
        var res = "";
        var label = n.name+'\\n'+n.image;
        res += '"'+n.name+'"'
            +' [label="'+label
            +'",URL="#'+n.name
            +'",style=filled,fillcolor='+n.status.color+"];\n";
        n.ports.forEach(function(p) {
            res += '"'+(p.ip?p.ip+":":"")+p.external+'" -> "'+n.name
                +'" [label="'+p.internal+'"];\n';
        });
        n.links.forEach(function(l) {
            res += '"'+n.name+'" -> "'+l.to+'" [label="link: '+l.link+'"];\n'
        });
        return res;
    }
    function graphVolumesInside(n) {
        var res = "";
        n.volumes.forEach(function(v) {
            res += '"'+v.id+'" [label="'+v.inside+'",shape=box];\n';
        });
        return res;
    }
    function graphVolumesOutside(n) {
        var res = "";
        n.volumes.forEach(function(v) {
            if (v.host)
                res += '"'+v.outside+'" [label="'+v.host+'",shape=box];\n';
        });
        return res;
    }
    function graphVolumesConnections(n) {
        var res = "";
        n.volumes.forEach(function(v) {
            if (v.host)
                res += '"'+v.id+'" -> "'+v.outside+'" [label="mounted from"]\n';
            res += '"'+n.name+'" -> "'+v.id+'" [label="volume/'+v.rw+'"]\n';
        });
        n.volumesfrom.forEach(function(o) {
            res += '"'+n.name+'" -> "'+nodes[o].name+'" [label="volumes from"]\n';
        });
        return res;
    }
    this.graph = function(n) {
        var res = "";
        var ips = [];
        n = n || nodes;
        for (name in n) getIps(n[name], ips);
        res += graphIpClusters(ips);
        for (name in n) res += graphNode(n[name]);        
        res += "{rank=same;\n";
        for (name in n) res += graphVolumesInside(n[name]);
        res+="}\n";
        res += "{rank=same;\n";
        for (name in n) res += graphVolumesOutside(n[name]);
        res+="}\n";
        for (name in n) res += graphVolumesConnections(n[name]);
        return res;
    }
    function addNodes(ns, name) {
        var n = nodes[name];
        ns[name] = n;
        n.links.forEach(function(peer) {
            if (!ns[peer.to]) addNodes(ns, peer.to);
        });
        n.usedby.forEach(function(peer) {
            if (!ns[peer]) addNodes(ns, peer);
        });
        n.volumesfrom.forEach(function(peer) {
            if (!ns[peer]) addNodes(ns, peer);
        });
        n.volumesto.forEach(function(peer) {
            if (!ns[peer]) addNodes(ns, peer);
        });
    }
    this.subgraph = function(name) {
        var ns = [];
        addNodes(ns, name);
        return this.graph(ns);
    }
    function setup() {
        delete nodes; nodes = [];
        containers.forEach(function(c, i) {
            var name = c.Name.replace(/^\//, "");
            if (!nodes[name]) nodes[name] = {};
            nodes[name].id = i;
            nodes[name].name = name;
            nodes[name].image = c.Config.Image;
            nodes[name].ports = [];
            var ports = c.NetworkSettings.Ports || c.NetworkSettings.PortBindings;
            if (ports)
                for (var port in ports)
                    if (ports[port])
                        for (var expose in ports[port]) {
                            var ip = ports[port][expose].HostIp;
                            if (!ip||ip==""||ip=="0.0.0.0"||ip==0) ip=window.location.hostname;
                            nodes[name].ports.push({
                                internal: port,
                                external: ports[port][expose].HostPort,
                                ip: ip
                            });
                        }
            if (c.State.Paused) nodes[name].status = Status.Paused;
            else if (c.State.Running) nodes[name].status = Status.Running;
            else if (c.State.Restarting) nodes[name].status = Status.Restarting;
            else if (c.State.ExitCode == 0) nodes[name].status = Status.Terminated;
            else nodes[name].status = Status.Error;
            console.log("STATUS", name, c.State, nodes[name].status);
            nodes[name].volumes = [];
            var volumes = c.Volumes || c.Config.Volumes;
            nodes[name].volumes = [];
            if (volumes)
                for (var volume in volumes) {
                    var rw = "rw";
                    var outside = (typeof volumes[volume]=="string")?volumes[volume]:null;
                    if (c.Mounts) c.Mounts.forEach(function(mnt) {
                        if (mnt.Destination==volume) {
                            outside = mnt.Source;
                            rw = mnt.RW ? "rw" : "ro";
                        }
                    });
                    nodes[name].volumes.push({
                        id: volume+':'+(outside?outside:name),
                        rw:rw,
                        inside: volume,
                        outside: outside,
                        host: outside && !outside.match(/^\/var\/lib\/docker/)
                            ? outside : null
                    });
                }
            nodes[name].volumesfrom = [];
            if (!nodes[name].volumesto) nodes[name].volumesto = [];
            if (c.HostConfig.VolumesFrom) c.HostConfig.VolumesFrom.forEach(function(id) {
                containers.forEach(function(c) {
                    if (c.Id == id || c.Name == "/"+id || c.Name == id) {
                        var src = c.Name.replace(/^\//, "");
                        nodes[name].volumesfrom.push(src);
                        if (!nodes[src]) nodes[src] = {};
                        if (!nodes[src].volumesto) nodes[src].volumesto = [];
                        nodes[src].volumesto.push(name);
                    }
                });
            });
            nodes[name].links = [];
            if (!nodes[name].usedby) nodes[name].usedby = [];
            if (c.HostConfig && c.HostConfig.Links)
                c.HostConfig.Links.forEach(function(l) {
                    var target = {
                        to:   l.replace(/^\/?([^:]*).*$/, "$1"),
                        link: l.replace(new RegExp("^.*:/?"+name+"/"), "")
                    };
                    nodes[name].links.push(target);
                    if (!nodes[target.to]) nodes[target.to] = {};
                    if (!nodes[target.to].usedby) nodes[target.to].usedby = [];
                    nodes[target.to].usedby.push(name);
                });
        });
        for (name in nodes) { // cleanup duplicate links to volumes when using volumes-from
            var n = nodes[name];
            n.volumesfrom.forEach(function(other) {
                var o = nodes[other];
                o.volumes.forEach(function(ovol) {
                    n.volumes.reduceRight(function(x, nvol, i, arr) {
                        if (nvol.id == ovol.id)
                            arr.splice(i, 1);
                    }, [])
                })
            })
        }
    }
    this.setContainers = function(c) {
        if (typeof c == "string") c = JSON.parse(c);
        if (typeof c != "object") throw "wrong format: "+(typeof c);
        containers = c;
        setup();
    }
}

var dc = new DockerContainers();

/// Show error messsage
/** Fades in an error message and logs to console.
    @param data (optional) The error can be a string or any structure.
                Strings are shown to the user, structures are logged only.
    @param stay (optional) If not given as @c true, reloads page after 5s. */
function error(data) {
    $("#status").fadeOut("slow", function() {
        $("#status").addClass("error")
        $("#status").removeClass("notice")
        $("#status").removeClass("success")
        if (data) {
            if (typeof data == 'string') {
                $("#status").html(data);
                console.log("error: "+data);
            } else {
                $("#status").html('unknown error: '+JSON.stringify(data));
                console.log("error: "+JSON.stringify(data));
            }
        } else {
            $("#status").html('error');
            console.log("error");
        }
        $("#status").fadeIn("slow");
    });
}

/// Show notice messsage
/** Fades in an notice message and logs to console.
    @param text (optional) The data is a string. */
function notice(text) {
    $("#status").fadeOut("slow", function() {
        $("#status").addClass("notice")
        $("#status").removeClass("error")
        $("#status").removeClass("success")
        if (text) {
            $("#status").html(text);
            console.log("notice: "+text);
        } else {
            $("#status").html('');
            console.log("notice");
        }
        $("#status").fadeIn("slow");
    });
}

/// Show notice messsage
/** Fades in an success message and logs to console.
    @param text (optional) The data is a string. */
function success(text) {
    $("#status").fadeOut("slow", function() {
        $("#status").addClass("success")
        $("#status").removeClass("error")
        $("#status").removeClass("notice")
        if (text) {
            $("#status").html(text);
            console.log("success: "+text);
        } else {
            $("#status").html('');
            console.log("success");
        }
        $("#status").fadeIn("slow");
    });
}

/// Show status message in the main screen area
/** @param text Text is a message or some complex HTML from the server.
    @param msg The success message text */
function status(text, msg) {
    $("#main").hide();
    $("#main").html(text);
    $("#popup").hide();
    if (msg) success(msg);
    else setTimeout("$('#status').fadeOut('slow')", 5000);
    $("#main").show();
    $("form input:first-child").focus();
    dc.contextmenu("#main");
}

function emit(signal, data) {
    console.log("<-snd "+signal);
    socket.emit(signal, data);
}

function connected() {
    console.log("server connected");
    $("#connectionstatus #bad").hide();
    $("#connectionstatus #good").show();
    success("server connected");
}

function disconnected() {
    console.log("server disconnected");
    $("#connectionstatus #good").hide();
    $("#connectionstatus #bad").show();
    error("server disconnected", true);
}

function connectionstatus() {
    if (socket.connected) connected(); else disconnected();
}

/// Toggle Menu Display
function togglemenu() {
    $("#menu").toggle();
}

function about(c) {
    $("#imagetools").hide();
    $.ajax({url: "about.php", success: function(res) {
        try {
            var a = JSON.parse(res);
            status("<h2>"+a.description+"</h2>"+
                   "<p>"+a.project+"-"+a.version+"</p>"+
                   "<p>"+a.docker+"</p>"+
                   "<h3>README</h3>"+
                   "<pre>"+a.readme+"</pre>");
        } catch(e) {
            status("<pre>"+res+"</pre>");
            error("Exception Caught: "+e);
        }
    }}).fail(function() {
        error("offline");
    });
}

var zoomlevel = 0;
function zoom(incr = 0) {
    zoomlevel = (zoomlevel+incr)%2;
    switch (zoomlevel) {
        case 0: {
            $("#main svg").css("width", "auto");
            $("#main svg").css("height", "auto");
            $("#main svg").css("max-width", "100%");
            $("#main svg").css("max-height", "100%");
        } break;
        case 1: {
            $("#main svg").css("width", "100%");
            $("#main svg").css("height", "auto");
            $("#main svg").css("max-width", "100%");
            $("#main svg").css("max-height", "none");
        } break;
        case 2: {
            $("#main.svg").css("width", "auto");
            $("#main.svg").css("height", "100%");
            $("#main.svg").css("max-width", "none");
            $("#main.svg").css("max-height", "100%");
        } break;
    }
}

var viz = null;
var vizmore = null;
var rankdir = "LR";
function rotateviz() {
    if (!viz) return;
    if (rankdir == "LR")
        rankdir = "TB";
    else
        rankdir = "LR";
    showviz();
}
function showviz(vizpath, more) {
    $("#imagetools").show();
    if (!vizpath) {
        vizpath = viz;
        more = vizmore;
    } else {
        viz = vizpath;
        vizmore = more;
    }
    res = "digraph {\n"+"  rankdir="+rankdir+";\n"+viz+"\n}";
    try {
        zoomlevel = 0;
        status(more?Viz(res)+more:Viz(res));
    } catch(e) {
        (res = res.split("\n")).forEach(function(v, i, a) {
            a[i] = ("000"+(i+1)).slice(-3)+": "+v;
        });
        status("<h2>Exception Caught:</h2><p>"+e+"<p><pre>"+res.join("\n")+"</pre>");
    }
}

function details(name) {
    if (name) focused = name;
    else if (!focused) return overview();
    showviz(dc.subgraph(focused));
}

function action(container, action) {
    $("#imagetools").hide();
    $.ajax({url: "action.php?container="+container+"&action="+action, success: function(res) {
        success(res);
        manage();
    }}).fail(function() {
        error("offline");
    });
}

/** Manage Docker Services */
function manage() {
    $("#imagetools").hide();
    $.ajax({url: "manage.php", success: function(res) {
        status(res);
    }}).fail(function() {
        error("offline");
    });
}

/** Show an Overview of all Docker Images */
function imgs() {
    $("#imagetools").hide();
    $.ajax({url: "images.php", success: function(res) {
        try {
            showviz(res);
        } catch(e) {
            (res = res.split("\n")).forEach(function(v, i, a) {
                a[i] = ("000"+(i+1)).slice(-3)+": "+v;
            });
            status("<h2>Exception Caught:</h2><p>"+e+"<p><pre>"+res.join("\n")+"</pre>");
        }
    }}).fail(function() {
        error("offline");
    });
}

function containers(c) {
    console.log("->rcv containers");
    dc.setContainers(c);
    if (focused && dc.exists(focused))
        details(focused);
    else
        overview();
}

function overview() {
    focused = null;
    showviz(dc.graph());
}

/// Initial Function: Startup
/** Decide whether to login or to create a new user */
function start() {
    $("#imagetools").hide();
    $("#menu").hide();
    $("#username").html(window.location.hostname)
    try {
        status("Starting up ...");
        emit("containers");
    } catch (m) {
        error(m);
    }
}

function init() {
    socket.io
        .on("connect", connected)
        .on("reconnect", connected)
        .on("disconnect", disconnected)
        .on("error", disconnected);
    socket
        .on("fail", error)
        .on("containers", containers);
    start();
}

/// On Load, Call @ref start
/*
 $(window.onbeforeunload = function() {
    return "Are you sure you want to navigate away?";
});
 */
$(init);