$("#myImage").click ( function (evt) {

  var jThis               = $(this);
  var offsetFromParent    = jThis.position ();
  var topThickness        = (jThis.outerHeight(true) - jThis.height() ) / 2;
  var leftThickness       = (jThis.outerWidth (true) - jThis.width () ) / 2;

  //--- (x,y) coordinates of the mouse click relative to the image.
  var x                   = evt.pageX - offsetFromParent.left - leftThickness;
  var y                   = evt.pageY - offsetFromParent.top  - topThickness;

  ReportDims ();
  $('#rez').append ('<p>User clicked at: ' + x + ', ' + y + ' (x,y).</p>')
} );


function ReportDims () {
  w   = $("#myImage").width  ();
  h   = $("#myImage").height ();
  $('#rez').text ('The image is ' + w + ' by ' + h + ' (w by h).');
}

ReportDims ();

function updateVoltage(voltage)
{

  var voltage_min = 9.5;
  var voltage_max = 12.5;
  var voltage_range = voltage_max - voltage_min;

  var voltage_percentage = (voltage - voltage_min) / voltage_range * 100;

  var voltage_string = "";
  voltage_string = voltage_string.concat(voltage_percentage);
  voltage_string = voltage_string.substring(0,4);
  voltage_string = voltage_string.concat('%');

  document.getElementById("VoltageDisplay").style.width = voltage_string;
  document.getElementById("VoltageDisplay").innerHTML = voltage_string;

  if (voltage_percentage < 50 && voltage_percentage > 25 ) {
    document.getElementById("VoltageDisplay").className = "progress-bar progress-bar-warning"
  }
  else if ( voltage_percentage <= 25)
  {
    document.getElementById("VoltageDisplay").className = "progress-bar progress-bar-danger"
    var sound = document.getElementById("audio");
    sound.play()
    console.log("Pay Sound")
  }
  else
  {
    document.getElementById("VoltageDisplay").className = "progress-bar progress-bar-success"
  }
};

function updateTopicsGUI()
{

  ros.getTopics(function(result)
                {
                  ros.topics = result;
                });

  var topics = ros.topics;
  topics.sort()

  if(topics != null){
    var innerHTML = "";
    for (var i = 0; i < topics.length; i++ )
    {
      innerHTML = innerHTML.concat(topics[i]);
      innerHTML = innerHTML.concat("<br>");
    }
    document.getElementById("ROSTopics").innerHTML = innerHTML;
  }

};


function updateNodesGUI()
{

  ros.getNodes(function(result)
               {
                 ros.nodes = result;
               });

  var nodes = ros.nodes;

  nodes.sort()

  if(nodes != null){
    var innerHTML = "";
    for (var i = 0; i < nodes.length; i++ )
    {
      innerHTML = innerHTML.concat(nodes[i]);
      innerHTML = innerHTML.concat("<br>");
    }
    document.getElementById("ROSNodes").innerHTML = innerHTML;
  }

};

window.setInterval(function(){

  updateTopicsGUI();
  updateNodesGUI();

}, 5000);

function validateForm()
{
  ros.attemptConnection();
  return false;
};

function addInputsForConnection()
{

  var innerHTML = "";

  for (var i = 0; i < ros.connectioninfo.length; i ++)
  {

    console.log(ros.connectioninfo[i])
    el = document.getElementById("ConnectionInformation")

    innerHTML = innerHTML.concat("<span class=\"col-sm-1\">");
    innerHTML = innerHTML.concat("<input type=\"text\" class=\"form-control\" value=\"");
    innerHTML = innerHTML.concat(ros.connectioninfo[i])
    innerHTML = innerHTML.concat("\"/>")
    innerHTML = innerHTML.concat("</span>")
    if(i >0 && i < 4)
    {
      innerHTML = innerHTML.concat("<span class=\"col-sxm-1\">.</span>")
    }


  }
  el.innerHTML = innerHTML;

  console.log(innerHTML)


}

function mylog(input)
{
  console.log(input)
}