WINDOW_INNERWIDTH = 320;
/* Note: the value of AJAX_REQUEST is set in source HTML file:
 * "get_log" for normal operation
 * "test_log" for testing
 */
(function () {
/* Program Variables */
     var BUSY_TIMEOUT = 1000;
     var IDLE_TIMEOUT = 10000;
     // var MATCH_PATTERN = "9\\s*0123456";
     var MATCH_PATTERN = "";
     var MATCH_COLOR = "FFFF00";
     var ACTIVE_FLAG = true;
     var UPDATE_OBJECT_LIST = [];
     var SET_TIMEOUT_OBJ;
     var XDE = unescape('%de');
     var XEE = unescape('%ee');
     var PXDE = RegExp(XDE, "g");
     var PXEE = RegExp(XEE, "g");
/* Device Variables */
     var BODY_LANDSCAPE = 400;
     var BODY_PROFILE = 240;
     var CURRENTWIDTH = -1;
/* Setup Variables */
     var SETUP_BUSY_TIMEOUT="", SETUP_IDLE_TIMEOUT="";
     var SETUP_MATCH_PATTERN="text-to-match", SETUP_MATCH_COLOR="";
/* Helpers */
     var $ = function(id) { return document.getElementById(id); };
     window.ibtmon = {
       getInnerWidth: function() {
         return (navigator.userAgent.indexOf('iPhone')!=-1)
           ?
             window.innerWidth
           :
             WINDOW_INNERWIDTH;
       },
       loadHandlers: function() {
         addEventListener("click", function(event) {
           function turnOffButtons() {
             $('stopButton').style.display = "none";
             $('customBackButton').style.display = "none";
             $('setupButton').style.display = "none";
             $('setupChange').style.display = "none";
             $('setupCancel').style.display = "none";
           }
           if (event.target.id == "stopButton") {
             ibtmon.toggleStartStop(event.target)
           } else if (event.target.id == "setupButton") {
             turnOffButtons();
             clearTimeout(SET_TIMEOUT_OBJ);
             $('setupChange').style.display = "inline";
             $('setupCancel').style.display = "inline";
             ibtmon.updateVisibles();
             UPDATE_OBJECT_LIST = [];
           } else if (event.target.id == "setupChange") {
              var i, item;
              for (i in UPDATE_OBJECT_LIST) {
                item = UPDATE_OBJECT_LIST[i];
                item.action(item.arg)
              }
              turnOffButtons();
              ibtmon.prefer_setup_values();
              if (ACTIVE_FLAG) {
                setTimeout("ibtmon.getLog()", BUSY_TIMEOUT); 
              }
              $('stopButton').style.display = "inline";
              $('setupButton').style.display = "inline";
              history.back();
           } else if (event.target.id == "setupCancel") {
              turnOffButtons();
              if (ACTIVE_FLAG) {
                setTimeout("ibtmon.getLog()", BUSY_TIMEOUT);
              }
              $('stopButton').style.display = "inline";
              $('setupButton').style.display = "inline";
              history.back();
           }
           /* event.preventDefault(); */
         }, false);
         CURRENTWIDTH = ibtmon.getInnerWidth();
         var pgTitle = ((CURRENTWIDTH==320)?"BT":"Bluetooth")+" Monitor";
         $('properties').setAttribute("title", pgTitle);
         $('pageTitle').innerHTML = pgTitle;
         ibtmon.configure_initial_setup_values();
         ibtmon.updateVisibles();
         setInterval(ibtmon.checkOrientation, 300);
         ibtmon.fetchLogging();
       },
       configure_initial_setup_values: function() {
         if (BUSY_TIMEOUT != "") { SETUP_BUSY_TIMEOUT = BUSY_TIMEOUT; }
         if (IDLE_TIMEOUT != "") { SETUP_IDLE_TIMEOUT = IDLE_TIMEOUT; }
         if (MATCH_PATTERN != "") { SETUP_MATCH_PATTERN = MATCH_PATTERN; }
         if (MATCH_COLOR != "") { SETUP_MATCH_COLOR = MATCH_COLOR; }
       },
       prefer_setup_values: function() {
         if (SETUP_BUSY_TIMEOUT != "") { BUSY_TIMEOUT = SETUP_BUSY_TIMEOUT; }
         if (SETUP_IDLE_TIMEOUT != "") { IDLE_TIMEOUT = SETUP_IDLE_TIMEOUT; }
 
         if (SETUP_MATCH_PATTERN != "" && SETUP_MATCH_PATTERN != "text-to-match") {
           MATCH_PATTERN = SETUP_MATCH_PATTERN;
         }
         if (SETUP_MATCH_COLOR != "") { MATCH_COLOR = SETUP_MATCH_COLOR; }
       },
       updateVisibles: function() {
         $('busy_timeout_id').value = BUSY_TIMEOUT;
         $('idle_timeout_id').value = IDLE_TIMEOUT;
         if (MATCH_PATTERN == "" || MATCH_PATTERN == "text-to-match") { 
           $('match_pattern_id').value = "text-to-match";
         } else {
           $('match_pattern_id').value = MATCH_PATTERN;
         }
         $('match_color_id').value = MATCH_COLOR;
         $('toggle_active_flag_id').setAttribute("toggled", ACTIVE_FLAG);
       },
       checkOrientation: function() {
         if (ibtmon.getInnerWidth() != CURRENTWIDTH) {
           CURRENTWIDTH = ibtmon.getInnerWidth();
           var pgTitle = ((CURRENTWIDTH==320)?"BT":"Bluetooth")+" Monitor";
           $('properties').setAttribute("title", pgTitle);
           $('pageTitle').innerHTML = pgTitle;
           ibtmon.prefer_setup_values();
           ibtmon.updateVisibles();
         }
       },
       subspan: function(str, left) {
         var firstlp = str.indexOf(XDE);
         var firstrp = str.indexOf(XEE);
         var lastlp = str.lastIndexOf(XDE);
         var lastrp = str.lastIndexOf(XEE);
         var spanned_str = str;
         if (lastlp > lastrp) {
           spanned_str = spanned_str + XEE;
         }
         if (firstrp < firstlp) {
           spanned_str = XDE + spanned_str;
         }
         spanned_str = "<span style='left: "+left+"px; position: relative;'>"+
           spanned_str+"</span>";
         return spanned_str;
       },
       wrap: function(str) {
         function fltlen(s) {
           var l = s.length;
           var pct = 0, c;
           for (var i = 0; i< l; i++) {
             c = s.charAt(i);
             pct += (c == XDE || c == XEE) ? 1 : 0;
           }
           return l - pct;
         }
         function fltslice(str, start, stop) {
           var len = str.length;
           var fltstr = "";
           var c;
           var i=0, j=0;
           while (i < start && j < len) {
             c = s.charAt(j++);
             if (c != XDE && c != XEE) { i++; } 
           }
           while (i < stop && j < len) {
             c = s.charAt(j++);
             fltstr += c;
             if (c != XDE && c != XEE) { i++; } 
           }
           return fltstr;
         }
         var j, s, r;
         var b = "<br />";
         var body = document.getElementsByTagName('body')
         var m = (body[0].getAttribute("orient") == "landscape")? 40 : 25;
         if (MATCH_PATTERN.length > 0) {
           var re = RegExp(MATCH_PATTERN, "gi");
           str = str.replace( re, function(hit) {
             var expanded_str="", i;
             for(i=0; i<hit.length; i++) {
               expanded_str += XDE + hit.charAt(i) + XEE;
             }
             return expanded_str;
           } )
         }
         s = str;
         var left = 0, p;
         r = "";
         while (fltlen(s) > m) {
             result = (p = fltslice(s, 0, m + 1).match(/\S*(\s)?$/))[1] ?
               m : fltlen(p.input) - fltlen(p[0]);
             j = (result == 0) ? m : result;
             r += ibtmon.subspan(fltslice(s, 0, j) + 
               (fltlen(s = fltslice(s, j, s.length)) ? b : ""), left);
             left = 20;
         }
         r += ibtmon.subspan(s+b,left);
         if (MATCH_PATTERN.length > 0) {
           var t = r.replace(PXDE, "<span style='background-color: "+MATCH_COLOR+";'>");
           r = t.replace(PXEE, "</span>");
         }
         return r;
       },
       getLog: function() {
         var req = new XMLHttpRequest();
         req.onreadystatechange = function() {
           var fetch_interval;
           if (req.readyState == 4) {
             var logdiv = $('logs');
             var resp = req.responseText;
             if (resp.length > 0) {
               logdiv.innerHTML += "<span class='log_line'>"+ibtmon.wrap(resp)+"</span>"; 
               logdiv.scrollTop += logdiv.scrollHeight;
               fetch_interval = BUSY_TIMEOUT;
             } else {
               fetch_interval = IDLE_TIMEOUT;
             }
             if ($('stopButton').text == 'Stop') {
               SET_TIMEOUT_OBJ = setTimeout("ibtmon.getLog()", fetch_interval);
             }
             scrollTo(0, 1);
           }
         }; 
         req.open("GET", "/"+AJAX_REQUEST, true);
         req.send(null);
       }, 
       toggleStartStop: function(obj) {
         if (obj.text == 'Stop') {
           ibtmon.stopLogCollection(obj);
         } else { 
           ibtmon.startLogCollection(obj);
         }
       },
       startLogCollection: function(obj) {
         obj.innerHTML = 'Stop';
         ACTIVE_FLAG = true;
         setTimeout("ibtmon.getLog()", BUSY_TIMEOUT); 
         $('toggle_active_flag_id').setAttribute("toggled", ACTIVE_FLAG);
         $('logMonitorStatus').innerHTML = "Active"
         $('logMonitorStatus').style.color = "green"
       },
       stopLogCollection: function(obj) {
         clearTimeout(SET_TIMEOUT_OBJ);
         obj.innerHTML = 'Start';
         ACTIVE_FLAG = false;
         $('toggle_active_flag_id').setAttribute("toggled", ACTIVE_FLAG);
         $('logMonitorStatus').innerHTML = "Inactive"
         $('logMonitorStatus').style.color = "red"
       },
       fetchLogging: function() {
         setTimeout("scrollTo(0, 1)", 1000);
         setTimeout("ibtmon.getLog()", 200);
       }, 
       /* setup functions */
       scheduleSetupChange: function(act, obj) {
         var item = new Object();
         item.action = act;
         item.arg = obj;
         UPDATE_OBJECT_LIST.push(item);
       },
       setBusyTimeout: function(o) {
         SETUP_BUSY_TIMEOUT = o.value;
       },
       setIdleTimeout: function(o) {
         SETUP_IDLE_TIMEOUT = o.value;
       },
       setMatchPattern: function(o) {
         SETUP_MATCH_PATTERN = o.value;
       },
       setMatchColor: function(o) {
         SETUP_MATCH_COLOR = o.value;
       },
       toggleActiveFlag: function(o) {
         if (o.getAttribute("toggled") === "true") {
           ACTIVE_FLAG = true;
           $('stopButton').innerHTML = 'Stop';
           $('logMonitorStatus').innerHTML = "Active"
           $('logMonitorStatus').style.color = "green"
         } else {
           clearTimeout(SET_TIMEOUT_OBJ);
           ACTIVE_FLAG = false;
           $('stopButton').innerHTML = 'Start';
           $('logMonitorStatus').innerHTML = "Inactive"
           $('logMonitorStatus').style.color = "red"
         }
       }
     };
})();

.property_row_key { left: 6px; font-size: 12px; font-weight: bold; position: absolute; }
.property_row_value { left: 140px; font-size: 12px; position: absolute; }
ul.panel_util { padding: 0px; }
 
#logs { width:100%; overflow-y:auto; text-wrap: normal; }
body[orient="landscape"] #logs { height: 180px }
body[orient="profile"] #logs { height: 300px }
 
ul.panel_util > li {
  position: relative;
  margin: 0;
  padding: 8px 0 8px 10px;
  font-size: 20px;
  font-weight: normal;
  list-style: none;
} 
 
ul.panel_util > li:not(:first-child) {
  border-top: 1px solid #E0E0E0;
 
} 
 
ul.panel_util > li > a {
  display: block;
  margin: -8px 0 -8px -10px;
  padding: 8px 32px 8px 10px;
  text-decoration: none;
  text-align: left;
  color: inherit;
  background: url(/images/listArrow.png) no-repeat right center;
}
 
#customBackButton {
  display: none;
  left: 6px;
  right: auto;
  padding: 0;
  max-width: 55px;
  border-width: 0 8px 0 14px;
  -webkit-border-image: url(/images/backButton.png) 0 8 0 14;
} 
 
#stopButton {
  position: absolute;
  left: 6px;
  right: auto;
  margin: 0;
  border-width: 0 5px;
  padding: 0 3px;
  width: auto;
  -webkit-border-image: url(/images/toolButton.png) 0 5 0 5;
}
 
.row > textarea {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin: 0;
  border: none;
  /*padding: 12px 10px 0 110px;*/
  height: 200px;
  font-size: 16px;
  width:100%;
  background-color:#FFFF00;
}
 
input.setupTextItem {
  padding: 12px 10px 0 170px;
}
 
.log_line {
  font-family: monospace;
}

require 'rubygems' 
require 'sinatra'
require 'dbus'
include DBus
require File.expand_path(File.dirname(__FILE__) + '/dbus-helper')
#require 'ruby-debug'
 
configure do
  # Sinatra's configure block is executed once when the application
  # is launched.
  $log_lines = Queue.new
  def log msg
    t = Time.now.strftime("%Y-%m-%d %H:%M:%S")
    $log_lines.enq "#{t} #{msg}"
  end
  # Include and execute the customized Bluetooth monitor in a separate
  # thread. This monitor references the log method above to enqueue
  # messages onto the Ruby queue instance $log_lines.
  #
  require File.expand_path(File.dirname(__FILE__) + '/monitor_bt_for_web')
  MonitorBluetooth::MonitorBluez.new.run
  #
  # Actually, any record oriented message producer can be used
  # as a data source. For example, replacing the
  # "require ...monitor_bt_for_web" lines above with
  # the following code, will monitor syslog. 
  # require 'file/tail'
  # Thread.new {
  #   File::Tail::Logfile.open("/var/log/syslog") do |logf|
  #     logf.backward(0).tail { |line| log line }
  #   end
  # }
end
 
get "/" do
  # For normal operation, put "http://your.server.location:4567/"
  # into the URL bar of the iPhone. This Sinatra route displays
  # the main HTML page configured for normal message display, in our
  # case, Bluetooth monitoring. See 'get "/get_log"' block below.
  @which_callback = "get_log"
  erb :index
end
 
get "/test" do
  # For testing, put "http://your.server.location:4567/test"
  # into the URL bar of the iPhone. This Sinatra route displays
  # the main HTML page configured for requesting test
  # messages (see the 'get "/test_log"' block below).
  # Note that Bluetooth or any other monitoring continues in
  # the background. Any accumulated monitoring messages can be
  # retrieved by requesting the normal non-test HTML page
  # (see 'get "/"' above).
  @which_callback = "test_log"
  erb :index
end
 
get "/get_log" do
  # Ajax request callback route configured by issuing
  # "http://your.server.location:4567/" from the web client.
  # The iPhone client should display Bluetooth D-BUS messages
  # collected by the Bluez Bluetooth monitor thread running
  # in the configure block above.
  #
  read_last_log
end
 
get "/test_log" do
  # Ajax request callback route configured by issuing
  # "http://your.server.location:4567/test" from the web client.
  # The iPhone client should repeatedly display the complete
  # message returned by this block (AAA...<words>...ZZZ), including
  # proper word wrap. A custom Javascript wordwrap utility (with
  # highlighting) is imported from monitor_bt.js. This utility
  # formats a whole number of words per display line based upon
  # device orientation. It will cut words in the middle when they
  # are longer than the current screen width. In portrait orientation
  # (320px width), you should see the following pattern displayed in
  # monospaced font:
  #
  # AAA 0123456789
  # abcdefghijklmnopqrstuvwxy
  # z 0123456789 0123456789
  # 0123456789 0123456789
  # 0123456789 0123456789
  # 0123456789
  # ABCDEFGHIJKLMNOPQRSTUVWXY
  # Z_ABCDEFGHIJKLMNOPQRSTUVW
  # XYZ 0123456789 0123456789
  # 0123456789 0123456789
  # 0123456789 012345678 ZZZ
  #
  # In landscape orientation (480px width), the iPhone should
  # display:
  #
 
 
  # AAA 0123456789
  # abcdefghijklmnopqrstuvwxyz 0123456789
  # 0123456789 0123456789 0123456789
  # 0123456789 0123456789 0123456789
  # ABCDEFGHIJKLMNOPQRSTUVWXYZ_ABCDEFGHIJKLM
  # NOPQRSTUVWXYZ 0123456789 0123456789
  # 0123456789 0123456789 0123456789
  # 012345678 ZZZ
  # 
  "AAA 0123456789 abcdefghijklmnopqrstuvwxyz 0123456789 "+
  "0123456789 0123456789 0123456789 0123456789 0123456789 "+
  "0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ_ABCDEFG"+
   "HIJKLMNOPQRSTUVWXYZ 0123456789 0123456789 "+
   "0123456789 0123456789 0123456789 012345678 ZZZ"
end
 
helpers do 
  def read_last_log
    result = ""
    unless $log_lines.empty? # avoid blocking
      result = $log_lines.deq
    end
    result
  end
end
 
use_in_file_templates!
 
__END__
 
@@ index

<html>
  <head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0;
       maximum-scale=1.0; user-scalable=0;"/>
    <style type="text/css" media="screen">@import "/stylesheets/iui.css";</style>
    <script type="application/x-javascript" src="/javascripts/iui.js"></script>
    <style type="text/css" media="screen">@import "/stylesheets/monitor_bt.css";</style>
    <script>AJAX_REQUEST = <%= "'#{@which_callback}'" %></script>
    <script src="/javascripts/monitor_bt.js"></script>
  </head> 
  <body onLoad="ibtmon.loadHandlers();">
 
    <div class="toolbar">
      <h1 id="pageTitle">Bluetooth Monitor</h1>
      <a id="stopButton" class="button" href="#dummy" style="display: inline;" 
         target="_self">Stop</a>
      <a id="customBackButton" class="button" href="/" target="_self" 
         onClick="history.go((navigator.userAgent.indexOf('iPhone') > -1) ? 
         -2 : -1);return false;">Back</a>
      <a id="setupButton" class="button" href="#setup" style="display: inline;" 
        target="_self">Setup</a> 
      <div>
        <a id="setupChange" class="button" href="#dummy" 
          style="display: none; right: 72px;">Change</a> 
        <a id="setupCancel" class="button" href="#dummy" 
          style="display: none;">Cancel</a> 
      </div>
    </div>
 
    <div id="properties" class="panel" title="Bluetooth Monitor" selected="true">
      <h2 class="setupItem">Log Monitor: 
      <span id="logMonitorStatus" style="color: green;">Active</span></h2> 
      <fieldset>
        <div class="row" style="text-align: left;">
          <div id="logs"></div>
        </div>
      </fieldset>
    </div> 
 
    <div id="setup" class="panel" title="Setup&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
      <h2 class="setupItem">Log Fetch Intervals</h2>
      <fieldset>
        <div class="row" style="text-align: left;">
          <label class="setupItem">Busy Timeout (ms.)</label>
          <input type='text' name='busy_timeout' id='busy_timeout_id' 
            class="setupTextItem" 
            onChange="ibtmon.scheduleSetupChange(ibtmon.setBusyTimeout,this)" 
            value="1000" tabindex="1" /><br />
          <label class="setupItem">Idle Timeout (ms.)</label>
          <input type='text' name='idle_timeout' id='idle_timeout_id' 
            class="setupTextItem" 
            onChange="ibtmon.scheduleSetupChange(ibtmon.setIdleTimeout,this)" 
            value="10000" /><br />
 
        </div>
      </fieldset> 
      <h2 class="setupItem">Highlight Pattern in Log</h2>
      <fieldset>
        <div class="row" style="text-align: left;">
          <label class="setupItem">Match Pattern</label>
          <input type='text' name='match_pattern' id='match_pattern_id' 
            class="setupTextItem" 
            onChange="ibtmon.scheduleSetupChange(ibtmon.setMatchPattern,this);" 
            onFocus="this.value='';" value="text-to-match" /><br />
          <label class="setupItem">Match Color</label>
          <input type='text' name='match_color' id='match_color_id' 
            class="setupTextItem" 
            onChange="ibtmon.scheduleSetupChange(ibtmon.setMatchColor,this);" 
 
            value="FF0000" /><br />
        </div>
      </fieldset> 
      <div class="row" style="text-align: left;">
       <label class="setupItem">Collect Logs</label>
       <div class="toggle" 
         onclick="ibtmon.scheduleSetupChange(ibtmon.toggleActiveFlag,this);" 
         id="toggle_active_flag_id"><span class="thumb"></span>
         <span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
      </div>
    </div>       
 
  </