contrib-munin/templates/munstrap/static/js/dynazoom.js

function refreshZoom(query, form, image, divOverlay) {
    //INIT
    var qs = new Querystring(query);
    init();

    var scale = refreshImg();
    var start_epoch = (+qs.get("rst_start_epoch", form.start_epoch.value));
    var stop_epoch = (+qs.get("rst_stop_epoch", form.stop_epoch.value));
    var initial_left;
    var initial_top;

    //form.btnMaj.onclick = majDates;
    form.plugin_name.onblur = refreshImg;
    form.start_iso8601.onblur = majDates;
    form.stop_iso8601.onblur = majDates;
    form.start_epoch.onblur = refreshImg;
    form.stop_epoch.onblur = refreshImg;
    form.lower_limit.onblur = refreshImg;
    form.upper_limit.onblur = refreshImg;
    form.size_x.onblur = refreshImg;
    form.size_y.onblur = refreshImg;
    form.btnReset.onclick = reset;

    // Sets the onClick handler
    image.onclick = click;
    var clickCounter = 0;

    //FUNCTIONS
    function init() {
        form.plugin_name.value = qs.get("plugin_name", "localdomain/localhost.localdomain/if_eth0");
        form.start_epoch.value = qs.get("start_epoch", "1236561663");
        form.stop_epoch.value = qs.get("stop_epoch", "1237561663");
        form.lower_limit.value = qs.get("lower_limit", "");
        form.upper_limit.value = qs.get("upper_limit", "");
        form.size_x.value = qs.get("size_x", "");
        form.size_y.value = qs.get("size_y", "");

        updateStartStop();
    }

    function reset(event) {
        init();

        //Can be not the initial ones in case of manual refresh
        form.start_epoch.value = start_epoch;
        form.stop_epoch.value = stop_epoch;
        updateStartStop();

        //Redraw
        scale = refreshImg();

        //Reset gui
        clickCounter = 0;
        initial_left = 0;
        initial_top = 0;

        image.onmousemove = undefined;
        form.start_iso8601.disabled = false;
        form.stop_iso8601.disabled = false;
        form.start_epoch.disabled = false;
        form.stop_epoch.disabled = false;
    }

    function refreshImg(event) {
        image.src = qs.get("cgiurl_graph", "/munin-cgi/munin-cgi-graph") + "/"
            + form.plugin_name.value
            + "-pinpoint=" + parseInt(form.start_epoch.value) + "," + parseInt(form.stop_epoch.value)
            + ".png"
            + "?"
            + "&lower_limit=" + form.lower_limit.value
            + "&upper_limit=" + form.upper_limit.value
            + "&size_x=" + form.size_x.value
            + "&size_y=" + form.size_y.value
        ;

        return ((+form.stop_epoch.value) - (+form.start_epoch.value)) / (+form.size_x.value);
    }

    function updateStartStop() {
        form.start_iso8601.value = new Date(form.start_epoch.value * 1000).formatDate(Date.DATE_ISO8601);
        form.stop_iso8601.value = new Date(form.stop_epoch.value * 1000).formatDate(Date.DATE_ISO8601);
    }

    function divMouseMove(event) {
        var delta_x;
        var size_x;

        // Handling the borders (X1>X2 ou X1<X2)
        var posX = getCoordinatesOnImage(event)[0];
        var current_width = posX - initial_left;
        if (current_width < 0) {
            delta_x = posX - 63; // the Y Axis is 63px from the left border
            size_x = -current_width;
        } else {
            delta_x = initial_left - 63; // the Y Axis is 63px from the left border
            size_x = current_width;
        }

        // Compute the epochs UNIX (only for horizontal)
        form.start_epoch.value = start_epoch + scale * delta_x;
        form.stop_epoch.value = start_epoch + scale * ( delta_x + size_x );

        // update !
        updateStartStop();
    }

    function startZoom(event) {
        var pos = getCoordinatesOnImage(event);
        initial_left = pos[0];
        initial_top = pos[1];

        // Fix the handles
        form.start_iso8601.disabled = true;
        form.stop_iso8601.disabled = true;
        form.start_epoch.disabled = true;
        form.stop_epoch.disabled = true;
        image.onmousemove = divMouseMove;
    }

    function endZoom(event) {
        image.onmousemove = undefined;
        form.start_iso8601.disabled = false;
        form.stop_iso8601.disabled = false;
        form.start_epoch.disabled = false;
        form.stop_epoch.disabled = false;
    }

    function fillDate(date, default_date) {
        return date + default_date.substring(date.length, default_date.length);
    }

    function majDates(event) {
        var default_date = "2009-01-01T00:00:00+0100";

        var start_manual = fillDate(form.start_iso8601.value, default_date);
        var stop_manual = fillDate(form.stop_iso8601.value, default_date);

        var dateRegex = /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}).(\d{4})/;

        if (dateRegex.test(start_manual)) {
            var date_parsed = new Date(start_manual.replace(dateRegex, "$2 $3, $1 $4:$5:$6"));
            form.start_epoch.value = date_parsed.getTime() / 1000;
        }

        if (dateRegex.test(stop_manual)) {
            var date_parsed = new Date(stop_manual.replace(dateRegex, "$2 $3, $1 $4:$5:$6"));
            form.stop_epoch.value = date_parsed.getTime() / 1000;
        }

        //form.submit();
        refreshImg();
    }

    function click(event) {
        switch ((clickCounter++) % 2) {
            case 0:
                startZoom(event);
                break;
            case 1:
                endZoom(event);
                break;
        }
    }

    //Coordinates on image
    function findPosition(oElement) {
        if (typeof( oElement.offsetParent ) != "undefined") {
            for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
                posX += oElement.offsetLeft;
                posY += oElement.offsetTop;
            }
            return [posX, posY];
        }
        else {
            return [oElement.x, oElement.y];
        }
    }

    function getCoordinatesOnImage(event) {
        var posX = 0;
        var posY = 0;
        var imgPos;
        imgPos = findPosition(image);
        if (!event) var event = window.event;
        if (event.pageX || event.pageY) {
            posX = event.pageX;
            posY = event.pageY;
        }
        else if (event.clientX || event.clientY) {
            posX = event.clientX + document.body.scrollLeft
                + document.documentElement.scrollLeft;
            posY = event.clientY + document.body.scrollTop
                + document.documentElement.scrollTop;
        }
        posX = posX - imgPos[0];
        posY = posY - imgPos[1];
        return [posX, posY];
    }
};