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 ];
  }
};