/*jshint
  undef:true,
  browser:true,
  devel: true,
  jquery:true,
  strict:false,
  curly:false,
  indent:2
*/

(function() {
  var $ = jQuery;

  var exports = window.Shiny = window.Shiny || {};

  var browser = {};
  browser.isQt = false;
  // For easy handling of Qt quirks using CSS
  if (/\bQt\//.test(window.navigator.userAgent)) {
    $(document.documentElement).addClass('qt');
    browser.isQt = true;
  }

  // Enable special treatment for Qt 5 quirks on Linux
  if (/\bQt\/5/.test(window.navigator.userAgent) &&
      /Linux/.test(window.navigator.userAgent)) {
    $(document.documentElement).addClass('qt5');
  }

  // Detect IE information
  browser.isIE = (navigator.appName === 'Microsoft Internet Explorer');
  browser.IEVersion = getIEVersion();

  function getIEVersion() {
    var rv = -1;
    if (browser.isIE) {
      var ua = navigator.userAgent;
      var re  = new RegExp("MSIE ([0-9]{1,}[\\.0-9]{0,})");
      if (re.exec(ua) !== null)
        rv = parseFloat(RegExp.$1);
    }
    return rv;
  }

  $(document).on('submit', 'form:not([action])', function(e) {
    e.preventDefault();
  });
  $(document).on('click', 'a.action-button', function(e) {
    e.preventDefault();
  });

  // Escape jQuery selector metacharacters: !"#$%&'()*+,./:;<=>?@[\]^`{|}~
  var $escape = exports.$escape = function(val) {
    return val.replace(/([!"#$%&'()*+,.\/:;<=>?@\[\\\]^`{|}~])/g, '\\$1');
  };

  function escapeHTML(str) {
    return str.replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;")
              .replace(/"/g, "&quot;")
              .replace(/'/g, "&#039;")
              .replace(/\//g,"&#x2F;");
  }

  function randomId() {
    return Math.floor(0x100000000 + (Math.random() * 0xF00000000)).toString(16);
  }

  function strToBool(str) {
    if (!str || !str.toLowerCase)
      return undefined;

    switch(str.toLowerCase()) {
      case 'true':
        return true;
      case 'false':
        return false;
      default:
        return undefined;
    }
  }

  // A wrapper for getComputedStyle that is compatible with older browsers.
  // This is significantly faster than jQuery's .css() function.
  function getStyle(el, styleProp) {
    var x;
    if (el.currentStyle)
      x = el.currentStyle[styleProp];
    else if (window.getComputedStyle) {
      // getComputedStyle can return null when we're inside a hidden iframe on
      // Firefox; don't attempt to retrieve style props in this case.
      // https://bugzilla.mozilla.org/show_bug.cgi?id=548397
      var style = document.defaultView.getComputedStyle(el, null);
      if (style)
        x = style.getPropertyValue(styleProp);
    }
    return x;
  }

  // Convert a number to a string with leading zeros
  function padZeros(n, digits) {
    var str = n.toString();
    while (str.length < digits)
      str = "0" + str;
    return str;
  }

  // Take a string with format "YYYY-MM-DD" and return a Date object.
  // IE8 and QTWebKit don't support YYYY-MM-DD, but they support YYYY/MM/DD
  function parseDate(dateString) {
    var date = new Date(dateString);
    if (isNaN(date))
      date = new Date(dateString.replace(/-/g, "/"));
    return date;
  }

  function slice(blob, start, end) {
    if (blob.slice)
      return blob.slice(start, end);
    if (blob.mozSlice)
      return blob.mozSlice(start, end);
    if (blob.webkitSlice)
      return blob.webkitSlice(start, end);
    throw "Blob doesn't support slice";
  }

  // Given an element and a function(width, height), returns a function(). When
  // the output function is called, it calls the input function with the offset
  // width and height of the input element--but only if the size of the element
  // is non-zero and the size is different than the last time the output
  // function was called.
  //
  // Basically we are trying to filter out extraneous calls to func, so that
  // when the window size changes or whatever, we don't run resize logic for
  // elements that haven't actually changed size or aren't visible anyway.
  function makeResizeFilter(el, func) {
    var lastSize = {};
    return function() {
      var size = { w: el.offsetWidth, h: el.offsetHeight };
      if (size.w === 0 && size.h === 0)
        return;
      if (size.w === lastSize.w && size.h === lastSize.h)
        return;
      lastSize = size;
      func(size.w, size.h);
    };
  }

  var _BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
      window.MozBlobBuilder || window.MSBlobBuilder;

  function makeBlob(parts) {

    // Browser compatibility is a mess right now. The code as written works in
    // a variety of modern browsers, but sadly gives a deprecation warning
    // message on the console in current versions (as of this writing) of
    // Chrome.

    // Safari 6.0 (8536.25) on Mac OS X 10.8.1:
    // Has Blob constructor but it doesn't work with ArrayBufferView args

    // Google Chrome 21.0.1180.81 on Xubuntu 12.04:
    // Has Blob constructor, accepts ArrayBufferView args, accepts ArrayBuffer
    // but with a deprecation warning message

    // Firefox 15.0 on Xubuntu 12.04:
    // Has Blob constructor, accepts both ArrayBuffer and ArrayBufferView args

    // Chromium 18.0.1025.168 (Developer Build 134367 Linux) on Xubuntu 12.04:
    // No Blob constructor. Has WebKitBlobBuilder.

    try {
      return new Blob(parts);
    }
    catch (e) {
      var blobBuilder = new _BlobBuilder();
      $.each(parts, function(i, part) {
        blobBuilder.append(part);
      });
      return blobBuilder.getBlob();
    }
  }

  function pixelRatio() {
    if (window.devicePixelRatio) {
      return window.devicePixelRatio;
    } else {
      return 1;
    }
  }

  // Takes a string expression and returns a function that takes an argument.
  //
  // When the function is executed, it will evaluate that expression using
  // "with" on the argument value, and return the result.
  function scopeExprToFunc(expr) {
    /*jshint evil: true */
    var func = new Function("with (this) {return (" + expr + ");}");
    return function(scope) {
      return func.call(scope);
    };
  }


  // =========================================================================
  // Input rate stuff
  // =========================================================================

  var Invoker = function(target, func) {
    this.target = target;
    this.func = func;
  };

  (function() {
    this.normalCall =
    this.immediateCall = function() {
      this.func.apply(this.target, arguments);
    };
  }).call(Invoker.prototype);

  var Debouncer = function(target, func, delayMs) {
    this.target = target;
    this.func = func;
    this.delayMs = delayMs;

    this.timerId = null;
    this.args = null;
  };

  (function() {
    this.normalCall = function() {
      var self = this;

      this.$clearTimer();
      this.args = arguments;

      this.timerId = setTimeout(function() {
        // IE8 doesn't reliably clear timeout, so this additional
        // check is needed
        if (self.timerId === null)
          return;
        self.$clearTimer();
        self.$invoke();
      }, this.delayMs);
    };
    this.immediateCall = function() {
      this.$clearTimer();
      this.args = arguments;
      this.$invoke();
    };
    this.isPending = function() {
      return this.timerId !== null;
    };
    this.$clearTimer = function() {
      if (this.timerId !== null) {
        clearTimeout(this.timerId);
        this.timerId = null;
      }
    };
    this.$invoke = function() {
      this.func.apply(this.target, this.args);
      this.args = null;
    };
  }).call(Debouncer.prototype);

  var Throttler = function(target, func, delayMs) {
    this.target = target;
    this.func = func;
    this.delayMs = delayMs;

    this.timerId = null;
    this.args = null;
  };

  (function() {
    this.normalCall = function() {
      var self = this;

      this.args = arguments;
      if (this.timerId === null) {
        this.$invoke();
        this.timerId = setTimeout(function() {
          // IE8 doesn't reliably clear timeout, so this additional
          // check is needed
          if (self.timerId === null)
            return;
          self.$clearTimer();
          if (self.args)
            self.normalCall.apply(self, self.args);
        }, this.delayMs);
      }
    };
    this.immediateCall = function() {
      this.$clearTimer();
      this.args = arguments;
      this.$invoke();
    };
    this.isPending = function() {
      return this.timerId !== null;
    };
    this.$clearTimer = function() {
      if (this.timerId !== null) {
        clearTimeout(this.timerId);
        this.timerId = null;
      }
    };
    this.$invoke = function() {
      this.func.apply(this.target, this.args);
      this.args = null;
    };
  }).call(Throttler.prototype);

  // Returns a debounced version of the given function.
  // Debouncing means that when the function is invoked,
  // there is a delay of `threshold` milliseconds before
  // it is actually executed, and if the function is
  // invoked again before that threshold has elapsed then
  // the clock starts over.
  //
  // For example, if a function is debounced with a
  // threshold of 1000ms, then calling it 17 times at
  // 900ms intervals will result in a single execution
  // of the underlying function, 1000ms after the 17th
  // call.
  function debounce(threshold, func) {
    var timerId = null;
    var self, args;
    return function() {
      self = this;
      args = arguments;
      if (timerId !== null) {
        clearTimeout(timerId);
        timerId = null;
      }
      timerId = setTimeout(function() {
        // IE8 doesn't reliably clear timeout, so this additional
        // check is needed
        if (timerId === null)
          return;
        timerId = null;
        func.apply(self, args);
      }, threshold);
    };
  }

  // Returns a throttled version of the given function.
  // Throttling means that the underlying function will
  // be executed no more than once every `threshold`
  // milliseconds.
  //
  // For example, if a function is throttled with a
  // threshold of 1000ms, then calling it 17 times at
  // 900ms intervals will result in something like 15
  // or 16 executions of the underlying function.
  function throttle(threshold, func) {
    var executionPending = false;
    var timerId = null;
    var self, args;

    function throttled() {
      self = null;
      args = null;
      if (timerId === null) {
        // Haven't seen a call recently. Execute now and
        // start a timer to buffer any subsequent calls.
        timerId = setTimeout(function() {
          // When time expires, clear the timer; and if
          // there has been a call in the meantime, repeat.
          timerId = null;
          if (executionPending) {
            executionPending = false;
            throttled.apply(self, args);
          }
        }, threshold);
        func.apply(this, arguments);
      }
      else {
        // Something executed recently. Don't do anything
        // except set up target/arguments to be called later
        executionPending = true;
        self = this;
        args = arguments;
      }
    }
    return throttled;
  }

  // Schedules data to be sent to shinyapp at the next setTimeout(0).
  // Batches multiple input calls into one websocket message.
  var InputBatchSender = function(shinyapp) {
    this.shinyapp = shinyapp;
    this.timerId = null;
    this.pendingData = {};
    this.reentrant = false;
    this.lastChanceCallback = [];
  };
  (function() {
    this.setInput = function(name, value) {
      var self = this;

      this.pendingData[name] = value;
      if (!this.timerId && !this.reentrant) {
        this.timerId = setTimeout(function() {
          self.reentrant = true;
          try {
            $.each(self.lastChanceCallback, function(i, callback) {
              callback();
            });
            self.timerId = null;
            var currentData = self.pendingData;
            self.pendingData = {};
            self.shinyapp.sendInput(currentData);
          } finally {
            self.reentrant = false;
          }
        }, 0);
      }
    };
  }).call(InputBatchSender.prototype);

  var InputNoResendDecorator = function(target, initialValues) {
    this.target = target;
    this.lastSentValues = initialValues || {};
  };
  (function() {
    this.setInput = function(name, value) {
      var jsonValue = JSON.stringify(value);
      if (this.lastSentValues[name] === jsonValue)
        return;
      this.lastSentValues[name] = jsonValue;
      this.target.setInput(name, value);
    };
    this.reset = function(values) {
      values = values || {};
      var strValues = {};
      $.each(values, function(key, value) {
        strValues[key] = JSON.stringify(value);
      });
      this.lastSentValues = strValues;
    };
  }).call(InputNoResendDecorator.prototype);

  var InputDeferDecorator = function(target) {
    this.target = target;
    this.pendingInput = {};
  };
  (function() {
    this.setInput = function(name, value) {
      if (/^\./.test(name))
        this.target.setInput(name, value);
      else
        this.pendingInput[name] = value;
    };
    this.submit = function() {
      for (var name in this.pendingInput) {
        if (this.pendingInput.hasOwnProperty(name))
          this.target.setInput(name, this.pendingInput[name]);
      }
    };
  }).call(InputDeferDecorator.prototype);

  var InputRateDecorator = function(target) {
    this.target = target;
    this.inputRatePolicies = {};
  };
  (function() {
    this.setInput = function(name, value, immediate) {
      this.$ensureInit(name);
      if (immediate)
        this.inputRatePolicies[name].immediateCall(name, value, immediate);
      else
        this.inputRatePolicies[name].normalCall(name, value, immediate);
    };
    this.setRatePolicy = function(name, mode, millis) {
      if (mode === 'direct') {
        this.inputRatePolicies[name] = new Invoker(this, this.$doSetInput);
      }
      else if (mode === 'debounce') {
        this.inputRatePolicies[name] = new Debouncer(this, this.$doSetInput, millis);
      }
      else if (mode === 'throttle') {
        this.inputRatePolicies[name] = new Throttler(this, this.$doSetInput, millis);
      }
    };
    this.$ensureInit = function(name) {
      if (!(name in this.inputRatePolicies))
        this.setRatePolicy(name, 'direct');
    };
    this.$doSetInput = function(name, value) {
      this.target.setInput(name, value);
    };
  }).call(InputRateDecorator.prototype);


  // We need a stable sorting algorithm for ordering
  // bindings by priority and insertion order.
  function mergeSort(list, sortfunc) {
    function merge(sortfunc, a, b) {
      var ia = 0;
      var ib = 0;
      var sorted = [];
      while (ia < a.length && ib < b.length) {
        if (sortfunc(a[ia], b[ib]) <= 0) {
          sorted.push(a[ia++]);
        }
        else {
          sorted.push(b[ib++]);
        }
      }
      while (ia < a.length)
        sorted.push(a[ia++]);
      while (ib < b.length)
        sorted.push(b[ib++]);
      return sorted;
    }

    // Don't mutate list argument
    list = list.slice(0);

    for (var chunkSize = 1; chunkSize < list.length; chunkSize *= 2) {
      for (var i = 0; i < list.length; i += chunkSize * 2) {
        var listA = list.slice(i, i + chunkSize);
        var listB = list.slice(i + chunkSize, i + chunkSize * 2);
        var merged = merge(sortfunc, listA, listB);
        var args = [i, merged.length];
        Array.prototype.push.apply(args, merged);
        Array.prototype.splice.apply(list, args);
      }
    }

    return list;
  }


  // =========================================================================
  // ShinyApp
  // =========================================================================
  var ShinyApp = function() {
    this.$socket = null;

    // Cached input values
    this.$inputValues = {};

    // Output bindings
    this.$bindings = {};

    // Cached values/errors
    this.$values = {};
    this.$errors = {};

    // Conditional bindings (show/hide element based on expression)
    this.$conditionals = {};

    this.$pendingMessages = [];
    this.$activeRequests = {};
    this.$nextRequestId = 0;
  };

  (function() {

    this.connect = function(initialInput) {
      if (this.$socket)
        throw "Connect was already called on this application object";

      $.extend(initialInput, {
        // IE8 and IE9 have some limitations with data URIs
        ".clientdata_allowDataUriScheme": typeof WebSocket !== 'undefined'
      });

      this.$socket = this.createSocket();
      this.$initialInput = initialInput;
      $.extend(this.$inputValues, initialInput);

      this.$updateConditionals();
    };

    this.isConnected = function() {
      return !!this.$socket;
    };

    this.createSocket = function () {
      var self = this;

      var createSocketFunc = exports.createSocket || function() {
        var protocol = 'ws:';
        if (window.location.protocol === 'https:')
          protocol = 'wss:';

        var defaultPath = window.location.pathname;
        // some older WebKit browsers return the pathname already decoded;
        // if we find invalid URL characters in the path, encode them
        if (!/^([$#!&-;=?-[\]_a-z~]|%[0-9a-fA-F]{2})+$/.test(defaultPath)) {
          defaultPath = encodeURI(defaultPath);
          // Bizarrely, QtWebKit requires us to encode these characters *twice*
          if (browser.isQt) {
            defaultPath = encodeURI(defaultPath);
          }
        }
        if (!/\/$/.test(defaultPath))
          defaultPath += '/';
        defaultPath += 'websocket/';

        var ws = new WebSocket(protocol + '//' + window.location.host + defaultPath);
        ws.binaryType = 'arraybuffer';
        return ws;
      };

      var socket = createSocketFunc();
      socket.onopen = function() {
        socket.send(JSON.stringify({
          method: 'init',
          data: self.$initialInput
        }));

        while (self.$pendingMessages.length) {
          var msg = self.$pendingMessages.shift();
          socket.send(msg);
        }
      };
      socket.onmessage = function(e) {
        self.dispatchMessage(e.data);
      };
      socket.onclose = function() {
        $(document.body).addClass('disconnected');
        self.$notifyDisconnected();
      };
      return socket;
    };

    this.sendInput = function(values) {
      var msg = JSON.stringify({
        method: 'update',
        data: values
      });

      this.$sendMsg(msg);

      $.extend(this.$inputValues, values);
      this.$updateConditionals();
    };

    this.$notifyDisconnected = function() {

      // function to normalize hostnames
      var normalize = function(hostname) {
        if (hostname == "127.0.0.1")
          return "localhost";
        else
          return hostname;
      };

      // Send a 'disconnected' message to parent if we are on the same domin
      var parentUrl = (parent !== window) ? document.referrer : null;
      if (parentUrl) {
        // parse the parent href
        var a = document.createElement('a');
        a.href = parentUrl;

        // post the disconnected message if the hostnames are the same
        if (normalize(a.hostname) == normalize(window.location.hostname)) {
          var protocol = a.protocol.replace(':',''); // browser compatability
          var origin = protocol + '://' + a.hostname;
          if (a.port)
            origin = origin + ':' + a.port;
          parent.postMessage('disconnected', origin);
        }
      }
    };

    // NB: Including blobs will cause IE to break!
    // TODO: Make blobs work with Internet Explorer
    //
    // Websocket messages are normally one-way--i.e. the client passes a
    // message to the server but there is no way for the server to provide
    // a response to that specific message. makeRequest provides a way to
    // do asynchronous RPC over websocket. Each request has a method name
    // and arguments, plus optionally one or more binary blobs can be
    // included as well. The request is tagged with a unique number that
    // the server will use to label the corresponding response.
    //
    // @param method A string that tells the server what logic to run.
    // @param args An array of objects that should also be passed to the
    //   server in JSON-ified form.
    // @param onSuccess A function that will be called back if the server
    //   responds with success. If the server provides a value in the
    //   response, the function will be called with it as the only argument.
    // @param onError A function that will be called back if the server
    //   responds with error, or if the request fails for any other reason.
    //   The parameter to onError will be a string describing the error.
    // @param blobs Optionally, an array of Blob, ArrayBuffer, or string
    //   objects that will be made available to the server as part of the
    //   request. Strings will be encoded using UTF-8.
    this.makeRequest = function(method, args, onSuccess, onError, blobs) {
      var requestId = this.$nextRequestId;
      while (this.$activeRequests[requestId]) {
        requestId = (requestId + 1) % 1000000000;
      }
      this.$nextRequestId = requestId + 1;

      this.$activeRequests[requestId] = {
        onSuccess: onSuccess,
        onError: onError
      };

      var msg = JSON.stringify({
        method: method,
        args: args,
        tag: requestId
      });

      if (blobs) {
        // We have binary data to transfer; form a different kind of packet.
        // Start with a 4-byte signature, then for each blob, emit 4 bytes for
        // the length followed by the blob. The json payload is UTF-8 encoded
        // and used as the first blob.

        var uint32_to_buf = function(val) {
          var buffer = new ArrayBuffer(4);
          var view = new DataView(buffer);
          view.setUint32(0, val, true); // little-endian
          return buffer;
        };

        var payload = [];
        payload.push(uint32_to_buf(0x01020202)); // signature

        var jsonBuf = makeBlob([msg]);
        payload.push(uint32_to_buf(jsonBuf.size));
        payload.push(jsonBuf);

        for (var i = 0; i < blobs.length; i++) {
          payload.push(uint32_to_buf(blobs[i].byteLength || blobs[i].size || 0));
          payload.push(blobs[i]);
        }

        msg = makeBlob(payload);
      }

      this.$sendMsg(msg);
    };

    this.$sendMsg = function(msg) {
      if (!this.$socket.readyState) {
        this.$pendingMessages.push(msg);
      }
      else {
        this.$socket.send(msg);
      }
    };

    this.receiveError = function(name, error) {
      if (this.$errors[name] === error)
        return;

      this.$errors[name] = error;
      delete this.$values[name];

      var binding = this.$bindings[name];
      if (binding && binding.onValueError) {
        binding.onValueError(error);
      }
    };

    this.receiveOutput = function(name, value) {
      if (this.$values[name] === value)
        return;

      this.$values[name] = value;
      delete this.$errors[name];

      var binding = this.$bindings[name];
      if (binding) {
        binding.onValueChange(value);
      }

      return value;
    };

    this.bindOutput = function(id, binding) {
      if (!id)
        throw "Can't bind an element with no ID";
      if (this.$bindings[id])
        throw "Duplicate binding for ID " + id;
      this.$bindings[id] = binding;

      if (this.$values[id] !== undefined)
        binding.onValueChange(this.$values[id]);
      else if (this.$errors[id] !== undefined)
        binding.onValueError(this.$errors[id]);

      return binding;
    };

    this.unbindOutput = function(id, binding) {
      if (this.$bindings[id] === binding) {
        delete this.$bindings[id];
        return true;
      }
      else {
        return false;
      }
    };

    this.$updateConditionals = function() {
      var inputs = {};

      // Input keys use "name:type" format; we don't want the user to
      // have to know about the type suffix when referring to inputs.
      for (var name in this.$inputValues) {
        if (this.$inputValues.hasOwnProperty(name)) {
          var shortName = name.replace(/:.*/, '');
          inputs[shortName] = this.$inputValues[name];
        }
      }

      var scope = {input: inputs, output: this.$values};

      var conditionals = $(document).find('[data-display-if]');
      for (var i = 0; i < conditionals.length; i++) {
        var el = $(conditionals[i]);
        var condFunc = el.data('data-display-if-func');

        if (!condFunc) {
          var condExpr = el.attr('data-display-if');
          condFunc = scopeExprToFunc(condExpr);
          el.data('data-display-if-func', condFunc);
        }

        var show = condFunc(scope);
        var showing = el.css("display") !== "none";
        if (show !== showing) {
          if (show) {
            el.trigger('show');
            el.show();
            el.trigger('shown');
          }
          else {
            el.trigger('hide');
            el.hide();
            el.trigger('hidden');
          }
        }
      }
    };

    // Message handler management functions =================================

    // Records insertion order of handlers. Maps number to name. This is so
    // we can dispatch messages to handlers in the order that handlers were
    // added.
    var messageHandlerOrder = [];
    // Keep track of handlers by name. Maps name to handler function.
    var messageHandlers = {};

    // Two categories of message handlers: those that are from Shiny, and those
    // that are added by the user. The Shiny ones handle messages in
    // msgObj.values, msgObj.errors, and so on. The user ones handle messages
    // in msgObj.custom.foo and msgObj.custom.bar.
    var customMessageHandlerOrder = [];
    var customMessageHandlers = {};

    // Adds Shiny (internal) message handler
    function addMessageHandler(type, handler) {
      if (messageHandlers[type]) {
        throw('handler for message of type "' + type + '" already added.');
      }
      if (typeof(handler) !== 'function') {
        throw('handler must be a function.');
      }
      if (handler.length !== 1) {
        throw('handler must be a function that takes one argument.');
      }

      messageHandlerOrder.push(type);
      messageHandlers[type] = handler;
    }

    // Adds custom message handler - this one is exposed to the user
    function addCustomMessageHandler(type, handler) {
      if (customMessageHandlers[type]) {
        throw('handler for message of type "' + type + '" already added.');
      }
      if (typeof(handler) !== 'function') {
        throw('handler must be a function.');
      }
      if (handler.length !== 1) {
        throw('handler must be a function that takes one argument.');
      }

      customMessageHandlerOrder.push(type);
      customMessageHandlers[type] = handler;
    }

    exports.addCustomMessageHandler = addCustomMessageHandler;

    this.dispatchMessage = function(msg) {
      var msgObj = JSON.parse(msg);

      // Send msgObj.foo and msgObj.bar to appropriate handlers
      this._sendMessagesToHandlers(msgObj, messageHandlers, messageHandlerOrder);

      this.$updateConditionals();
    };


    // A function for sending messages to the appropriate handlers.
    // - msgObj: the object containing messages, with format {msgObj.foo, msObj.bar
    this._sendMessagesToHandlers = function(msgObj, handlers, handlerOrder) {
      // Dispatch messages to handlers, if handler is present
      for (var i = 0; i < handlerOrder.length; i++) {
        var msgType = handlerOrder[i];

        if (msgObj[msgType]) {
          // Execute each handler with 'this' referring to the present value of
          // 'this'
          handlers[msgType].call(this, msgObj[msgType]);
        }
      }
    };

    // Message handlers =====================================================

    addMessageHandler('values', function(message) {
      $(document.documentElement).removeClass('shiny-busy');
      for (var name in this.$bindings) {
        if (this.$bindings.hasOwnProperty(name))
          this.$bindings[name].showProgress(false);
      }

      for (var key in message) {
        if (message.hasOwnProperty(key))
          this.receiveOutput(key, message[key]);
      }
    });

    addMessageHandler('errors', function(message) {
      for (var key in message) {
        if (message.hasOwnProperty(key))
          this.receiveError(key, message[key]);
      }
    });

    addMessageHandler('inputMessages', function(message) {
      // inputMessages should be an array
      for (var i = 0; i < message.length; i++) {
        var $obj = $('.shiny-bound-input#' + $escape(message[i].id));
        var inputBinding = $obj.data('shiny-input-binding');

        // Dispatch the message to the appropriate input object
        if ($obj.length > 0) {
          inputBinding.receiveMessage($obj[0], message[i].message);
        }
      }
    });

    addMessageHandler('javascript', function(message) {
      /*jshint evil: true */
      eval(message);
    });

    addMessageHandler('console', function(message) {
      for (var i = 0; i < message.length; i++) {
        if (console.log)
          console.log(message[i]);
      }
    });

    addMessageHandler('progress', function(message) {
      if (message.type && message.message) {
        var handler = progressHandlers[message.type];
        if (handler)
          handler.call(this, message.message);
      }
    });

    addMessageHandler('response', function(message) {
      var requestId = message.tag;
      var request = this.$activeRequests[requestId];
      if (request) {
        delete this.$activeRequests[requestId];
        if ('value' in message)
          request.onSuccess(message.value);
        else
          request.onError(message.error);
      }
    });

    addMessageHandler('custom', function(message) {
      // For old-style custom messages - should deprecate and migrate to new
      // method
      if (exports.oncustommessage) {
        exports.oncustommessage(message);
      }

      // Send messages.foo and messages.bar to appropriate handlers
      this._sendMessagesToHandlers(message, customMessageHandlers,
                                   customMessageHandlerOrder);
    });

    addMessageHandler('config', function(message) {
      this.config = message;
    });


    // Progress reporting ====================================================

    var progressHandlers = {
      // Progress for a particular object
      binding: function(message) {
        $(document.documentElement).addClass('shiny-busy');
        var key = message.id;
        var binding = this.$bindings[key];
        if (binding && binding.showProgress) {
          binding.showProgress(true);
        }
      },
      // Open a page-level progress bar
      open: function(message) {
        // Add progress container (for all progress items) if not already present
        var $container = $('.shiny-progress-container');
        if ($container.length === 0) {
          $container = $('<div class="shiny-progress-container"></div>');
          $('body').append($container);
        }

        // Add div for just this progress ID
        var depth = $('.shiny-progress.open').length;
        var $progress = $(progressHandlers.progressHTML);
        $progress.attr('id', message.id);
        $container.append($progress);

        // Stack bars
        var $progressBar = $progress.find('.progress');
        $progressBar.css('top', depth * $progressBar.height() + 'px');

        // Stack text objects
        var $progressText = $progress.find('.progress-text');
        $progressText.css('top', 3 * $progressBar.height() +
          depth * $progressText.outerHeight() + 'px');

        $progress.hide();
      },

      // Update page-level progress bar
      update: function(message) {
        var $progress = $('#' + message.id + '.shiny-progress');
        if (typeof(message.message) !== 'undefined') {
          $progress.find('.progress-message').text(message.message);
        }
        if (typeof(message.detail) !== 'undefined') {
          $progress.find('.progress-detail').text(message.detail);
        }
        if (typeof(message.value) !== 'undefined') {
          if (message.value !== null) {
            $progress.find('.progress').show();
            $progress.find('.bar').width((message.value*100) + '%');
          }
          else {
            $progress.find('.progress').hide();
          }
        }

        $progress.fadeIn();
      },

      // Close page-level progress bar
      close: function(message) {
        var $progress = $('#' + message.id + '.shiny-progress');
        $progress.removeClass('open');

        $progress.fadeOut({
          complete: function() {
            $progress.remove();

            // If this was the last shiny-progress, remove container
            if ($('.shiny-progress').length === 0)
              $('.shiny-progress-container').remove();
          }
        });
      },

      // The 'bar' class is needed for backward compatibility with Bootstrap 2.
      progressHTML: '<div class="shiny-progress open">' +
        '<div class="progress progress-striped active"><div class="progress-bar bar"></div></div>' +
        '<div class="progress-text">' +
          '<span class="progress-message">message</span>' +
          '<span class="progress-detail"></span>' +
        '</div>' +
      '</div>'
    };

    exports.progressHandlers = progressHandlers;


  }).call(ShinyApp.prototype);


  // =========================================================================
  // File Processor
  // =========================================================================

  // Generic driver class for doing chunk-wise asynchronous processing of a
  // FileList object. Subclass/clone it and override the `on*` functions to
  // make it do something useful.
  var FileProcessor = function(files) {
    this.files = files;
    this.fileIndex = -1;
    // Currently need to use small chunk size because R-Websockets can't
    // handle continuation frames
    this.aborted = false;
    this.completed = false;

    // TODO: Register error/abort callbacks

    this.$run();
  };
  (function() {
    // Begin callbacks. Subclassers/cloners may override any or all of these.
    this.onBegin = function(files, cont) {
      setTimeout(cont, 0);
    };
    this.onFile = function(file, cont) {
      setTimeout(cont, 0);
    };
    this.onComplete = function() {
    };
    this.onAbort = function() {
    };
    // End callbacks

    // Aborts processing, unless it's already completed
    this.abort = function() {
      if (this.completed || this.aborted)
        return;

      this.aborted = true;
      this.onAbort();
    };

    // Returns a bound function that will call this.$run one time.
    this.$getRun = function() {
      var self = this;
      var called = false;
      return function() {
        if (called)
          return;
        called = true;
        self.$run();
      };
    };

    // This function will be called multiple times to advance the process.
    // It relies on the state of the object's fields to know what to do next.
    this.$run = function() {

      var self = this;

      if (this.aborted || this.completed)
        return;

      if (this.fileIndex < 0) {
        // Haven't started yet--begin
        this.fileIndex = 0;
        this.onBegin(this.files, this.$getRun());
        return;
      }

      if (this.fileIndex === this.files.length) {
        // Just ended
        this.completed = true;
        this.onComplete();
        return;
      }

      // If we got here, then we have a file to process, or we are
      // in the middle of processing a file, or have just finished
      // processing a file.

      var file = this.files[this.fileIndex++];
      this.onFile(file, this.$getRun());
    };
  }).call(FileProcessor.prototype);


  // =========================================================================
  // Binding registry
  // =========================================================================
  var BindingRegistry = function() {
    this.bindings = [];
    this.bindingNames = {};
  };
  (function() {
    this.register = function(binding, bindingName, priority) {
      var bindingObj = {binding: binding, priority: priority || 0};
      this.bindings.unshift(bindingObj);
      if (bindingName) {
        this.bindingNames[bindingName] = bindingObj;
        binding.name = bindingName;
      }
    };
    this.setPriority = function(bindingName, priority) {
      var bindingObj = this.bindingNames[bindingName];
      if (!bindingObj)
        throw "Tried to set priority on unknown binding " + bindingName;
      bindingObj.priority = priority || 0;
    };
    this.getPriority = function(bindingName) {
      var bindingObj = this.bindingNames[bindingName];
      if (!bindingObj)
        return false;
      return bindingObj.priority;
    };
    this.getBindings = function() {
      // Sort the bindings. The ones with higher priority are consulted
      // first; ties are broken by most-recently-registered.
      return mergeSort(this.bindings, function(a, b) {
        return b.priority - a.priority;
      });
    };
  }).call(BindingRegistry.prototype);


  var inputBindings = exports.inputBindings = new BindingRegistry();
  var outputBindings = exports.outputBindings = new BindingRegistry();

  // =========================================================================
  // Output bindings
  // =========================================================================

  var OutputBinding = exports.OutputBinding = function() {};
  (function() {
    // Returns a jQuery object or element array that contains the
    // descendants of scope that match this binding
    this.find = function(scope) { throw "Not implemented"; };

    this.getId = function(el) {
      return el['data-input-id'] || el.id;
    };

    this.onValueChange = function(el, data) {
      this.clearError(el);
      this.renderValue(el, data);
    };
    this.onValueError = function(el, err) {
      this.renderError(el, err);
    };
    this.renderError = function(el, err) {
      this.clearError(el);
      if (err.message === '') {
        // not really error, but we just need to wait (e.g. action buttons)
        $(el).empty();
        return;
      }
      var errClass = 'shiny-output-error';
      if (err.type !== null) {
        // use the classes of the error condition as CSS class names
        errClass = errClass + ' ' + $.map(asArray(err.type), function(type) {
          return errClass + '-' + type;
        }).join(' ');
      }
      $(el).addClass(errClass).text(err.message);
    };
    this.clearError = function(el) {
      $(el).attr('class', function(i, c) {
        return c.replace(/(^|\s)shiny-output-error\S*/g, '');
      });
    };
    this.showProgress = function(el, show) {
      var RECALC_CLASS = 'recalculating';
      if (show)
        $(el).addClass(RECALC_CLASS);
      else
        $(el).removeClass(RECALC_CLASS);
    };
  }).call(OutputBinding.prototype);


  var textOutputBinding = new OutputBinding();
  $.extend(textOutputBinding, {
    find: function(scope) {
      return $(scope).find('.shiny-text-output');
    },
    renderValue: function(el, data) {
      $(el).text(data);
    }
  });
  outputBindings.register(textOutputBinding, 'shiny.textOutput');

  var imageOutputBinding = new OutputBinding();
  $.extend(imageOutputBinding, {
    find: function(scope) {
      return $(scope).find('.shiny-image-output, .shiny-plot-output');
    },
    renderValue: function(el, data) {
      // The overall strategy:
      // * Clear out existing image and event handlers.
      // * Create new image.
      // * Create various event handlers.
      // * Bind those event handlers to events.
      // * Insert the new image.

      var $el = $(el);
      // Load the image before emptying, to minimize flicker
      var img = null;

      // Remove event handlers that were added in previous renderValue()
      $el.off('.image_output');
      // Trigger custom 'remove' event for any existing images in the div
      $el.find('img').trigger('remove');

      if (!data) {
        $el.empty();
        return;
      }

      var opts = {
        clickId: $el.data('click-id'),
        clickClip: strToBool($el.data('click-clip')) || true,

        dblclickId: $el.data('dblclick-id'),
        dblclickClip: strToBool($el.data('dblclick-clip')) || true,
        dblclickDelay: $el.data('dblclick-delay') || 400,

        hoverId: $el.data('hover-id'),
        hoverClip: $el.data('hover-clip') || true,
        hoverDelayType: $el.data('hover-delay-type') || 'debounce',
        hoverDelay: $el.data('hover-delay') || 300,

        brushId: $el.data('brush-id'),
        brushClip: strToBool($el.data('brush-clip')) || true,
        brushDelayType: $el.data('brush-delay-type') || 'debounce',
        brushDelay: $el.data('brush-delay') || 300,
        brushFill: $el.data('brush-fill') || '#666',
        brushStroke: $el.data('brush-stroke') || '#000',
        brushOpacity: $el.data('brush-opacity') || 0.3,
        brushDirection: $el.data('brush-direction') || 'xy',
        brushResetOnNew: strToBool($el.data('brush-reset-on-new')) || false,

        coordmap: data.coordmap
      };

      img = document.createElement('img');
      // Copy items from data to img. This should include 'src'
      $.each(data, function(key, value) {
        if (value !== null)
          img[key] = value;
      });

      var $img = $(img);

      // Firefox doesn't have offsetX/Y, so we need to use an alternate
      // method of calculation for it. Even though other browsers do have
      // offsetX/Y, we need to calculate relative to $el, because sometimes the
      // mouse event can come with offset relative to other elements on the
      // page. This happens when the event listener is bound to, say, window.
      function mouseOffset(mouseEvent) {
        var offset = $el.offset();
        return {
          x: mouseEvent.pageX - offset.left,
          y: mouseEvent.pageY - offset.top
        };
      }

      // Transform offset coordinates to data space coordinates
      function offsetToScaledCoords(offset, clip) {
        // By default, clip to plotting region
        clip = clip || true;

        var coordmap = opts.coordmap;
        if (!coordmap) return offset;

        function devToUsrX(deviceX) {
          var x = deviceX - coordmap.bounds.left;
          var factor = (coordmap.usr.right - coordmap.usr.left) /
                       (coordmap.bounds.right - coordmap.bounds.left);
          var newx = (x * factor) + coordmap.usr.left;

          if (clip) {
            var max = Math.max(coordmap.usr.right, coordmap.usr.left);
            var min = Math.min(coordmap.usr.right, coordmap.usr.left);
            if (newx > max)
              newx = max;
            else if (newx < min)
              newx = min;
          }

          return newx;
        }
        function devToUsrY(deviceY) {
          var y = deviceY - coordmap.bounds.bottom;
          var factor = (coordmap.usr.top - coordmap.usr.bottom) /
                       (coordmap.bounds.top - coordmap.bounds.bottom);
          var newy = (y * factor) + coordmap.usr.bottom;

          if (clip) {
            var max = Math.max(coordmap.usr.top, coordmap.usr.bottom);
            var min = Math.min(coordmap.usr.top, coordmap.usr.bottom);
            if (newy > max)
              newy = max;
            else if (newy < min)
              newy = min;
          }

          return newy;
        }

        var userX = devToUsrX(offset.x);
        if (coordmap.log.x)
          userX = Math.pow(10, userX);

        var userY = devToUsrY(offset.y);
        if (coordmap.log.y)
          userY = Math.pow(10, userY);

        return {
          x: userX,
          y: userY
        };
      }

      // Get the pixel bounds of the coordmap; if there's no coordmap, return
      // the bounds of the image.
      function getPlotBounds() {
        if (opts.coordmap) {
          return opts.coordmap.bounds;
        } else {
          return {
            top: 0,
            left: 0,
            right: img.clientWidth - 1,
            bottom: img.clientHeight - 1
          };
        }
      }

      // Is an offset in the plotting region? If supplied, `expand` tells us to
      // expand the region by that many pixels in all directions.
      function isInPlottingRegion(offset, expand) {
        expand = expand || 0;
        var bounds = getPlotBounds();
        return offset.x < bounds.right + expand &&
               offset.x > bounds.left - expand &&
               offset.y < bounds.bottom + expand &&
               offset.y > bounds.top - expand;
      }

      // Given an offset, clip it to the plotting region as specified by
      // coordmap. If there is no coordmap, clip it to bounds of the DOM
      // element.
      function clipToPlottingRegion(offset) {
        var bounds = getPlotBounds();

        var newOffset = {
          x: offset.x,
          y: offset.y
        };

        if (offset.x > bounds.right)
          newOffset.x = bounds.right;
        else if (offset.x < bounds.left)
          newOffset.x = bounds.left;

        if (offset.y > bounds.bottom)
          newOffset.y = bounds.bottom;
        else if (offset.y < bounds.top)
          newOffset.y = bounds.top;

        return newOffset;
      }

      // Returns a function that sends mouse coordinates, scaled to data space.
      // If that function is passed a null event, it will send null.
      function mouseCoordinateSender(inputId, clip) {
        clip = clip || true;

        return function(e) {
          if (e === null) {
            exports.onInputChange(inputId, null);
            return;
          }

          var offset = mouseOffset(e);
          // Ignore events outside of plotting region
          if (clip && !isInPlottingRegion(offset)) return;

          var coords = offsetToScaledCoords(offset);
          coords[".nonce"] = Math.random();
          exports.onInputChange(inputId, coords);
        };
      }

      // ----------------------------------------------------------
      // Handler creators for click, hover, brush.
      // Each of these returns an object with a few public members. These public
      // members are callbacks that are meant to be bound to events on $el with
      // the same name (like 'mousedown').
      // ----------------------------------------------------------

      function createClickHandler(inputId) {
        var clickInfoSender =  mouseCoordinateSender(inputId, opts.clickClip);

        return {
          mousedown: function(e) {
            // Listen for left mouse button only
            if (e.which !== 1) return;
            clickInfoSender(e);
          },
          onRemoveImg: function() { clickInfoSender(null); }
        };
      }

      function createHoverHandler(inputId) {
        var sendHoverInfo = mouseCoordinateSender(inputId, opts.hoverClip);

        var hoverInfoSender;
        if (opts.hoverDelayType === 'throttle')
          hoverInfoSender = new Throttler(null, sendHoverInfo, opts.hoverDelay);
        else
          hoverInfoSender = new Debouncer(null, sendHoverInfo, opts.hoverDelay);

        return {
          mousemove:   function(e) { hoverInfoSender.normalCall(e); },
          onRemoveImg: function()  { hoverInfoSender.immediateCall(null); }
        };
      }

      // Returns a brush handler object. This has three public functions:
      // mousedown, mousemove, and onRemoveImg.
      function createBrushHandler(inputId) {
        // Parameter: expand the area in which a brush can be started, by this
        // many pixels in all directions.
        var expandPixels = 20;

        // Object that encapsulates brush state
        var brush = {
          // Current brushing and dragging state
          brushing: false,
          dragging: false,

          // Offset of last mouse down and up events
          down: { x: NaN, y: NaN },
          up: { x: NaN, y: NaN },

          // Bounding rectangle of the brush
          bounds: {
            xmin: NaN,
            xmax: NaN,
            ymin: NaN,
            ymax: NaN
          },

          // The bounds at the start of a drag
          dragStartBounds: {
            xmin: NaN,
            xmax: NaN,
            ymin: NaN,
            ymax: NaN
          },

          // div that displays the brush
          $div: null,

          reset: function() {
            this.brushing = false;
            this.dragging = false;
            this.down = { x: NaN, y: NaN };
            this.up   = { x: NaN, y: NaN };
            this.bounds = {
              xmin: NaN,
              xmax: NaN,
              ymin: NaN,
              ymax: NaN
            };
            this.dragStartBounds = {
              xmin: NaN,
              xmax: NaN,
              ymin: NaN,
              ymax: NaN
            };

            if (this.$div)
              this.$div.remove();

            return this;
          },

          // If there's an existing brush div, use that div to set the new
          // brush's settings.
          importOldBrush: function() {
            var oldDiv = $el.find('#' + el.id + '_brush');
            if (oldDiv.length === 0)
              return;

            var elOffset = $el.offset();
            var divOffset = oldDiv.offset();
            this.bounds = {
              xmin: divOffset.left - elOffset.left,
              xmax: divOffset.left - elOffset.left + oldDiv.width(),
              ymin: divOffset.top - elOffset.top,
              ymax: divOffset.top - elOffset.top + oldDiv.height()
            };

            this.$div = oldDiv;
          },

          // Return true if the offset is inside min/max coords
          isInsideBrush: function(offset) {
            var bounds = this.bounds;
            return offset.x <= bounds.xmax && offset.x >= bounds.xmin &&
                   offset.y <= bounds.ymax && offset.y >= bounds.ymin;
          },

          // Sets the bounds of the brush, given a bounding box. This knows
          // whether we're brushing in the x, y, or xy directions and sets
          // bounds accordingly.
          setBounds: function(box) {
            var plotBounds = getPlotBounds();

            var min = { x: box.xmin, y: box.ymin };
            var max = { x: box.xmax, y: box.ymax };

            if (opts.brushClip) {
              min = clipToPlottingRegion(min);
              max = clipToPlottingRegion(max);
            }

            if (opts.brushDirection === 'xy') {
              // No change

            } else if (opts.brushDirection === 'x') {
              // Extend top and bottom of plotting area
              min.y = plotBounds.top;
              max.y = plotBounds.bottom;

            } else if (opts.brushDirection === 'y') {
              min.x = plotBounds.left;
              max.x = plotBounds.right;
            }

            this.bounds = {
              xmin: min.x,
              xmax: max.x,
              ymin: min.y,
              ymax: max.y
            };
          },

          // Add a new div representing the brush.
          addDiv: function() {
            if (this.$div) this.$div.remove();

            this.$div = $(document.createElement('div'))
              .attr('id', el.id + '_brush')
              .css({
                'background-color': opts.brushFill,
                'opacity': opts.brushOpacity,
                'pointer-events': 'none',
                'position': 'absolute'
              });

            var borderStyle = '1px solid ' + opts.brushStroke;
            if (opts.brushDirection === 'xy') {
              this.$div.css({
                'border': borderStyle
              });
            } else if (opts.brushDirection === 'x') {
              this.$div.css({
                'border-left': borderStyle,
                'border-right': borderStyle
              });
            } else if (opts.brushDirection === 'y') {
              this.$div.css({
                'border-top': borderStyle,
                'border-bottom': borderStyle
              });
            }


            $el.append(this.$div);
            this.$div.offset({x:0, y:0}).width(0).height(0).show();
          },

          // Update the brush div to reflect the current brush bounds.
          updateDiv: function() {
            // Need parent offset relative to page to calculate mouse offset
            // relative to page.
            var imgOffset = $el.offset();
            var b = this.bounds;
            this.$div.offset({
                top: imgOffset.top + b.ymin,
                left: imgOffset.left + b.xmin
              })
              .width(b.xmax - b.xmin)
              .height(b.ymax - b.ymin)
              .show();
          },

          startBrushing: function() {
            this.brushing = true;
            this.addDiv();

            this.setBounds(findBox(this.down, this.down));
            this.updateDiv();
          },

          brushTo: function(offset) {
            this.setBounds(findBox(this.down, offset));
            this.updateDiv();
          },

          stopBrushing: function() {
            this.brushing = false;

            // Save the final bounding box of the brush
            this.setBounds(findBox(this.down, this.up));
          },

          startDragging: function() {
            this.dragging = true;
            this.dragStartBounds = $.extend({}, this.bounds);
          },

          dragTo: function(offset) {
            // How far the brush was dragged
            var dx = offset.x - this.down.x;
            var dy = offset.y - this.down.y;

            // Calculate what new start/end positions would be, before clipping.
            var start = this.dragStartBounds;
            var newBounds = {
              xmin: start.xmin + dx,
              xmax: start.xmax + dx,
              ymin: start.ymin + dy,
              ymax: start.ymax + dy
            };

            // Clip to the plotting area
            if (opts.brushClip) {
              var plotBounds = getPlotBounds();

              // Convert to format for shiftToRange
              var xvals = [ newBounds.xmin, newBounds.xmax ];
              var yvals = [ newBounds.ymin, newBounds.ymax ];

              xvals = shiftToRange(xvals, plotBounds.left, plotBounds.right); 
              yvals = shiftToRange(yvals, plotBounds.top, plotBounds.bottom);

              // Convert back to bounds format
              newBounds = {
                xmin: xvals[0],
                xmax: xvals[1],
                ymin: yvals[0],
                ymax: yvals[1]
              };
            }

            this.setBounds(newBounds);
            this.updateDiv();
          },

          stopDragging: function() {
            this.dragging = false;
          }
        };


        // Given two sets of x/y coordinates, return an object representing the
        // min and max x and y values. (This could be generalized to any number
        // of points).
        function findBox(offset1, offset2) {
          return {
            xmin: Math.min(offset1.x, offset2.x),
            xmax: Math.max(offset1.x, offset2.x),
            ymin: Math.min(offset1.y, offset2.y),
            ymax: Math.max(offset1.y, offset2.y)
          };
        }

        // Shift an array of values so that they are within a min and max.
        // The vals will be shifted so that they maintain the same spacing
        // internally. If the range in vals is larger than the range of
        // min and max, the result might not make sense.
        function shiftToRange(vals, min, max) {
          if (!(vals instanceof Array))
            vals = [vals];

          var maxval = Math.max.apply(null, vals);
          var minval = Math.min.apply(null, vals);
          var shiftAmount = 0;
          if (maxval > max) {
            shiftAmount = max - maxval;
          } else if (minval < min) {
            shiftAmount = min - minval;
          }

          var newvals = [];
          for (var i=0; i<vals.length; i++) {
            newvals[i] = vals[i] + shiftAmount;
          }
          return newvals;
        }

        // Set cursor to one of 3 styles. We need to set the cursor on the whole
        // el instead of the brush div, because the brush div has
        // 'pointer-events:none' so that it won't intercept pointer events.
        // If `style` is null, don't add a cursor style.
        function setCursorStyle(style) {
          $el.removeClass('crosshair');
          $el.removeClass('grabbable');
          $el.removeClass('grabbing');

          if (style) $el.addClass(style);
        }

        function sendBrushInfo() {
          var bounds = brush.bounds;

          // We're in a new or reset state
          if (isNaN(bounds.xmin)) {
            exports.onInputChange(inputId, null);
            return;
          }

          // Transform coordinates of brush to data space
          var min = offsetToScaledCoords({ x: bounds.xmin, y: bounds.ymin }, opts.brushClip);
          var max = offsetToScaledCoords({ x: bounds.xmax, y: bounds.ymax }, opts.brushClip);

          // Because the x and y directions of the pixel space may differ from
          // the x and y directions of the data space, we need to recalculate
          // the min and max.
          var coords = {
            xmin: Math.min(min.x, max.x),
            xmax: Math.max(min.x, max.x),
            ymin: Math.min(min.y, max.y),
            ymax: Math.max(min.y, max.y)
          };

          // Send data to server
          exports.onInputChange(inputId, coords);
        }

        var brushInfoSender;
        if (opts.brushDelayType === 'throttle') {
          brushInfoSender = new Throttler(null, sendBrushInfo, opts.brushDelay);
        } else {
          brushInfoSender = new Debouncer(null, sendBrushInfo, opts.brushDelay);
        }

        function mousedown(e) {
          // This can happen when mousedown inside the graphic, then mouseup
          // outside, then mousedown inside. Just ignore the second
          // mousedown.
          if (brush.brushing || brush.dragging) return;

          // Listen for left mouse button only
          if (e.which !== 1) return;

          var offset = mouseOffset(e);

          // Ignore mousedown events outside of plotting region, expanded by
          // a number of pixels specified in expandPixels.
          if (opts.brushClip && !isInPlottingRegion(offset, expandPixels))
            return;

          brush.up = { x: NaN, y: NaN };
          brush.down = offset;

          if (brush.isInsideBrush(offset)) {
            brush.startDragging(offset);
            setCursorStyle('grabbing');

            // Attach the move and up handlers to the window so that they respond
            // even when the mouse is moved outside of the image.
            $(document)
              .on('mousemove.image_brush', mousemoveDragging)
              .on('mouseup.image_brush', mouseupDragging );

          } else {
            brush.startBrushing(clipToPlottingRegion(offset));

            // Attach the move and up handlers to the window so that they respond
            // even when the mouse is moved outside of the image.
            $(document)
              .on('mousemove.image_brush', mousemoveBrushing)
              .on('mouseup.image_brush', mouseupBrushing);
          }
        }

        // This sets the cursor style when it's in the el
        function mousemove(e) {
          var offset = mouseOffset(e);

          if (!(brush.brushing || brush.dragging)) {
            // Set the cursor depending on where it is
            if (brush.isInsideBrush(offset)) {
              setCursorStyle('grabbable');
            } else if (isInPlottingRegion(offset, expandPixels)) {
              setCursorStyle('crosshair');
            } else {
              setCursorStyle(null);
            }
          }
        }

        // mousemove handlers while brushing or dragging
        function mousemoveBrushing(e) {
          brush.brushTo(mouseOffset(e));
          brushInfoSender.normalCall();
        }

        function mousemoveDragging(e) {
          brush.dragTo(mouseOffset(e));
          brushInfoSender.normalCall();
        }

        // mouseup handlers while brushing or dragging
        function mouseupBrushing(e) {
          // Listen for left mouse button only
          if (e.which !== 1) return;

          $(document)
            .off('mousemove.image_brush')
            .off('mouseup.image_brush');

          brush.up = mouseOffset(e);

          brush.stopBrushing();
          setCursorStyle('crosshair');

          // If the brush didn't go anywhere, hide the brush, clear value,
          // and return.
          if (brush.down.x === brush.up.x && brush.down.y === brush.up.y) {
            brush.reset();
            brushInfoSender.immediateCall();
            return;
          }

          // Send info immediately on mouseup, but only if needed. If we don't
          // do the pending check, we might send the same data twice (with
          // with difference nonce).
          if (brushInfoSender.isPending())
            brushInfoSender.immediateCall();
        }

        function mouseupDragging(e) {
          // Listen for left mouse button only
          if (e.which !== 1) return;

          $(document)
            .off('mousemove.image_brush')
            .off('mouseup.image_brush');

          brush.up = mouseOffset(e);

          brush.stopDragging();
          setCursorStyle('grabbable');

          if (brushInfoSender.isPending())
            brushInfoSender.immediateCall();
        }

        // This should be called when the img (not the el) is removed
        function onRemoveImg() {
          if (opts.brushResetOnNew) {
            brush.reset();
            brushInfoSender.immediateCall();
          }
        }

        if (!opts.brushResetOnNew) {
          brush.importOldBrush();
        }

        return {
          mousedown: mousedown,
          mousemove: mousemove,
          onRemoveImg: onRemoveImg
        };
      }


      // This object provides two public event listeners: mousedown, and
      // dblclickIE8.
      // We need to make sure that, when the image is listening for double-
      // clicks, that a double-click doesn't trigger two click events. We'll
      // trigger custom mousedown2 and dblclick2 events with this mousedown
      // listener.
      var clickInfo = {
        clickCount: 0,
        clickTimer: null,
        pending_e: null,    // A pending mousedown2 event

        // Create a new event of type eventType (like 'mousedown2'), and trigger
        // it with the information stored in this.e.
        triggerEvent: function(newEventType, e) {
          // Extract important info from e and construct a new event with type
          // eventType.
          var e2 = $.Event(newEventType, {
            which:   e.which,
            pageX:   e.pageX,
            pageY:   e.pageY,
            offsetX: e.offsetX,
            offsetY: e.offsetY
          });

          $el.trigger(e2);
        },

        triggerPendingMousedown2: function() {
          // It's possible that between the scheduling of a mousedown2 and the
          // time this callback is executed, someone else triggers a
          // mousedown2, so check for that.
          if (this.pending_e) {
            this.triggerEvent('mousedown2', this.pending_e);
            this.pending_e = null;
          }
        },

        // Set a timer to trigger a mousedown2 event, using information from the
        // last recorded mousdown event.
        scheduleMousedown2: function(e) {
          this.pending_e = e;

          var self = this;
          this.clickTimer = setTimeout(function() {
            self.triggerPendingMousedown2();
          }, opts.dblclickDelay);
        },

        mousedown: function(e) {
          // Listen for left mouse button only
          if (e.which !== 1) return;

          // If no dblclick listener, immediately trigger a mousedown2 event.
          if (!opts.dblclickId) {
            this.triggerEvent('mousedown2', e);
            return;
          }

          // If there's a dblclick listener, make sure not to count this as a
          // click on the first mousedown; we need to wait for the dblclick
          // delay before we can be sure this click was a single-click.
          if (this.pending_e === null) {
            this.scheduleMousedown2(e);

          } else {
            clearTimeout(this.clickTimer);

            // If second click is too far away, it doesn't count as a double
            // click. Instead, immediately trigger a mousedown2 for the previous
            // click, and set this click as a new first click.
            if (this.pending_e &&
                Math.abs(this.pending_e.offsetX - e.offsetX) > 2 ||
                Math.abs(this.pending_e.offsetY - e.offsetY) > 2) {

              this.triggerPendingMousedown2();
              this.scheduleMousedown2(e);

            } else {
              // The second click was close to the first one. If it happened
              // within specified delay, trigger our custom 'dblclick2' event.
              this.pending_e = null;
              this.triggerEvent('dblclick2', e);
            }
          }
        },

        // IE8 needs a special hack because when you do a double-click it doesn't
        // trigger the click event twice - it directly triggers dblclick.
        dblclickIE8: function(e) {
          e.which = 1;   // In IE8, e.which is 0 instead of 1. ???
          this.triggerEvent('dblclick2', e);
        }
      };

      $el.on('mousedown.image_output', function(e) { clickInfo.mousedown(e); });

      if (browser.isIE && browser.IEVersion === 8) {
        $el.on('dblclick.image_output', function(e) { clickInfo.dblclickIE8(e); });
      }

      // ----------------------------------------------------------
      // Register the various event handlers
      // ----------------------------------------------------------
      if (opts.clickId) {
        var clickHandler = createClickHandler(opts.clickId);
        $el.on('mousedown2.image_output', clickHandler.mousedown);

        // When img is removed, do housekeeping: clear $el's mouse listener and
        // call the handler's onRemoveImg callback.
        $img.on('remove', clickHandler.onRemoveImg);
      }

      if (opts.dblclickId) {
        // We'll use the clickHandler's mousedown function, but register it to
        // our custom 'dblclick2' event.
        var dblclickHandler = createClickHandler(opts.dblclickId);
        $el.on('dblclick2.image_output', dblclickHandler.mousedown);

        $img.on('remove', dblclickHandler.onRemoveImg);
      }

      if (opts.hoverId) {
        var hoverHandler = createHoverHandler(opts.hoverId);
        $el.on('mousemove.image_output', hoverHandler.mousemove);

        $img.on('remove', hoverHandler.onRemoveImg);
      }

      if (opts.brushId) {
        // Make image non-draggable (Chrome, Safari)
        $img.css('-webkit-user-drag', 'none');
        // Firefox, IE<=10
        $img.on('dragstart', function() { return false; });

        // Disable selection of image and text when dragging in IE<=10
        $el.on('selectstart.image_output', function() { return false; });

        var brushHandler = createBrushHandler(opts.brushId);
        $el.on('mousedown.image_output', brushHandler.mousedown);
        $el.on('mousemove.image_output', brushHandler.mousemove);

        $img.on('remove', brushHandler.onRemoveImg);
      }

      if (opts.clickId || opts.dblclickId || opts.hoverId || opts.brushId) {
        $el.addClass('crosshair');
      }

      $el.find('img').remove();
      if (img)
        $el.append(img);
    }
  });
  outputBindings.register(imageOutputBinding, 'shiny.imageOutput');

  var htmlOutputBinding = new OutputBinding();
  $.extend(htmlOutputBinding, {
    find: function(scope) {
      return $(scope).find('.shiny-html-output');
    },
    onValueError: function(el, err) {
      exports.unbindAll(el);
      this.renderError(el, err);
    },
    renderValue: function(el, data) {
      exports.unbindAll(el);

      var html;
      var dependencies = [];
      if (data === null) {
        html = '';
      } else if (typeof(data) === 'string') {
        html = data;
      } else if (typeof(data) === 'object') {
        html = data.html;
        dependencies = data.deps;
      }

      exports.renderHtml(html, el, dependencies);
      exports.initializeInputs(el);
      exports.bindAll(el);
    }
  });
  outputBindings.register(htmlOutputBinding, 'shiny.htmlOutput');

  var renderDependencies = exports.renderDependencies = function(dependencies) {
    if (dependencies) {
      $.each(dependencies, function(i, dep) {
        renderDependency(dep);
      });
    }
  };

  // Render HTML in a DOM element, inserting singletons into head as needed
  exports.renderHtml = function(html, el, dependencies) {
    renderDependencies(dependencies);
    return singletons.renderHtml(html, el);
  };

  function asArray(value) {
    if (value === null)
      return [];
    if ($.isArray(value))
      return value;
    return [value];
  }

  var htmlDependencies = {};
  function registerDependency(name, version) {
    htmlDependencies[name] = version;
  }

  // Client-side dependency resolution and rendering
  function renderDependency(dep) {
    if (htmlDependencies.hasOwnProperty(dep.name))
      return false;

    registerDependency(dep.name, dep.version);

    var href = dep.src.href;

    var $head = $("head").first();

    if (dep.meta) {
      var metas = $.map(asArray(dep.meta), function(content, name) {
        return $("<meta>").attr("name", name).attr("content", content);
      });
      $head.append(metas);
    }

    if (dep.stylesheet) {
      var stylesheets = $.map(asArray(dep.stylesheet), function(stylesheet) {
        return $("<link rel='stylesheet' type='text/css'>")
          .attr("href", href + "/" + encodeURI(stylesheet));
      });
      $head.append(stylesheets);
    }

    if (dep.script) {
      var scripts = $.map(asArray(dep.script), function(scriptName) {
        return $("<script>").attr("src", href + "/" + encodeURI(scriptName));
      });
      $head.append(scripts);
    }

    if (dep.attachment) {
      // dep.attachment might be a single string, an array, or an object.
      var attachments = dep.attachment;
      if (typeof(attachments) === "string")
        attachments = [attachments];
      if ($.isArray(attachments)) {
        // The contract for attachments is that arrays of attachments are
        // addressed using 1-based indexes. Convert this array to an object.
        var tmp = {};
        $.each(attachments, function(index, attachment) {
          tmp[(index + 1) + ""] = attachment;
        });
        attachments = tmp;
      }

      var attach = $.map(attachments, function(attachment, key) {
        return $("<link rel='attachment'>")
          .attr("id", dep.name + "-" + key + "-attachment")
          .attr("href", href + "/" + encodeURI(attachment));
      });
      $head.append(attach);
    }

    if (dep.head) {
      var $newHead = $("<head></head>");
      $newHead.html(dep.head);
      $head.append($newHead.children());
    }
    return true;
  }

  var singletons = {
    knownSingletons: {},
    renderHtml: function(html, el) {
      var processed = this._processHtml(html);
      this._addToHead(processed.head);
      this.register(processed.singletons);
      $(el).html(processed.html);
      return processed;
    },
    // Take an object where keys are names of singletons, and merges it into
    // knownSingletons
    register: function(s) {
      $.extend(this.knownSingletons, s);
    },
    // Takes a string or array of strings and adds them to knownSingletons
    registerNames: function(s) {
      if (typeof s === 'string') {
        this.knownSingletons[s] = true;
      } else if (s instanceof Array) {
        for (var i = 0; i < s.length; i++) {
          this.knownSingletons[s[i]] = true;
        }
      }
    },
    // Inserts new content into document head
    _addToHead: function(head) {
      if (head.length > 0) {
        var tempDiv = $("<div>" + head + "</div>")[0];
        var $head = $('head');
        while (tempDiv.hasChildNodes()) {
          $head.append(tempDiv.firstChild);
        }
      }
    },
    // Reads HTML and returns an object with info about singletons
    _processHtml: function(val) {
      var self = this;
      var newSingletons = {};
      var newVal;

      var findNewPayload = function(match, p1, sig, payload) {
        if (self.knownSingletons[sig] || newSingletons[sig])
          return "";
        newSingletons[sig] = true;
        return payload;
      };
      while (true) {
        newVal = val.replace(self._reSingleton, findNewPayload);
        if (val.length === newVal.length)
          break;
        val = newVal;
      }

      var heads = [];
      var headAddPayload = function(match, payload) {
        heads.push(payload);
        return "";
      };
      while (true) {
        newVal = val.replace(self._reHead, headAddPayload);
        if (val.length === newVal.length)
          break;
        val = newVal;
      }

      return {
        html: val,
        head: heads.join("\n"),
        singletons: newSingletons
      };
    },
    _reSingleton: /<!--(SHINY.SINGLETON\[([\w]+)\])-->([\s\S]*?)<!--\/\1-->/,
    _reHead: /<head(?:\s[^>]*)?>([\s\S]*?)<\/head>/
  };

  var downloadLinkOutputBinding = new OutputBinding();
  $.extend(downloadLinkOutputBinding, {
    find: function(scope) {
      return $(scope).find('a.shiny-download-link');
    },
    renderValue: function(el, data) {
      $(el).attr('href', data);
    }
  });
  outputBindings.register(downloadLinkOutputBinding, 'shiny.downloadLink');

  var datatableOutputBinding = new OutputBinding();
  $.extend(datatableOutputBinding, {
    find: function(scope) {
      return $(scope).find('.shiny-datatable-output');
    },
    onValueError: function(el, err) {
      exports.unbindAll(el);
      this.renderError(el, err);
    },
    renderValue: function(el, data) {
      var $el = $(el).empty();
      if (!data || !data.colnames) return;

      var colnames = $.makeArray(data.colnames);
      var header = $.map(colnames, function(x) {
        return '<th>' + x + '</th>';
      }).join('');
      header = '<thead><tr>' + header + '</tr></thead>';
      var footer = '';
      if (data.options === null || data.options.searching !== false) {
        footer = $.map(colnames, function(x) {
          // placeholder needs to be escaped (and HTML tags are stripped off)
          return '<th><input type="text" placeholder="' +
                 escapeHTML(x.replace(/(<([^>]+)>)/ig, '')) +
                 '" /></th>';
        }).join('');
        footer = '<tfoot>' + footer + '</tfoot>';
      }
      var content = '<table class="table table-striped table-hover">' +
                    header + footer + '</table>';
      $el.append(content);

      // options that should be eval()ed
      if (data.evalOptions)
        $.each(data.evalOptions, function(i, x) {
          /*jshint evil: true */
          data.options[x] = eval('(' + data.options[x] + ')');
        });

      // caseInsensitive searching? default true
      var searchCI = data.options === null || typeof(data.options.search) === 'undefined' ||
                     data.options.search.caseInsensitive !== false;
      var oTable = $(el).children("table").DataTable($.extend({
        "processing": true,
        "serverSide": true,
        "order": [],
        "orderClasses": false,
        "pageLength": 25,
        "ajax": {
          "url": data.action,
          "type": "POST",
          "data": function(d) {
            d.search.caseInsensitive = searchCI;
            d.escape = data.escape;
          }
        }
      }, data.options));
      // the table object may need post-processing
      if (typeof data.callback === 'string') {
        /*jshint evil: true */
        var callback = eval('(' + data.callback + ')');
        if (typeof callback === 'function') callback(oTable);
      }

      // use debouncing for searching boxes
      $el.find('label input').first().unbind('keyup')
           .keyup(debounce(data.searchDelay, function() {
              oTable.search(this.value).draw();
            }));
      var searchInputs = $el.find("tfoot input");
      if (searchInputs.length > 0) {
        // this is a little weird: aoColumns/bSearchable are still in DT 1.10
        // https://github.com/DataTables/DataTables/issues/388
        $.each(oTable.settings()[0].aoColumns, function(i, x) {
          // hide the text box if not searchable
          if (!x.bSearchable) searchInputs.eq(i).hide();
        });
        searchInputs.keyup(debounce(data.searchDelay, function() {
          oTable.column(searchInputs.index(this)).search(this.value).draw();
        }));
      }
      // FIXME: ugly scrollbars in tab panels b/c Bootstrap uses 'visible: auto'
      $el.parents('.tab-content').css('overflow', 'visible');
    }
  });
  outputBindings.register(datatableOutputBinding, 'shiny.datatableOutput');

  // =========================================================================
  // Input bindings
  // =========================================================================

  var InputBinding = exports.InputBinding = function() {
  };

  (function() {

    // Returns a jQuery object or element array that contains the
    // descendants of scope that match this binding
    this.find = function(scope) { throw "Not implemented"; };

    this.getId = function(el) {
      return el['data-input-id'] || el.id;
    };

    // Gives the input a type in case the server needs to know it
    // to deserialize the JSON correctly
    this.getType = function() { return false; };
    this.getValue = function(el) { throw "Not implemented"; };
    this.subscribe = function(el, callback) { };
    this.unsubscribe = function(el) { };

    // This is used for receiving messages that tell the input object to do
    // things, such as setting values (including min, max, and others).
    // 'data' should be an object with elements corresponding to value, min,
    // max, etc., as appropriate for the type of input object. It also should
    // trigger a change event.
    this.receiveMessage = function(el, data) { throw "Not implemented"; };
    this.getState = function(el, data) { throw "Not implemented"; };

    this.getRatePolicy = function() { return null; };

    // Some input objects need initialization before being bound. This is
    // called when the document is ready (for statically-added input objects),
    // and when new input objects are added to the document with
    // htmlOutputBinding.renderValue() (for dynamically-added input objects).
    // This is called before the input is bound.
    this.initialize = function(el) { };

    // This is called after unbinding the output.
    this.dispose = function(el) { };

  }).call(InputBinding.prototype);



  // Text input
  var textInputBinding = new InputBinding();
  $.extend(textInputBinding, {
    find: function(scope) {
      return $(scope).find('input[type="text"], input[type="password"], input[type="search"], input[type="url"], input[type="email"]');
    },
    getId: function(el) {
      return InputBinding.prototype.getId.call(this, el) || el.name;
    },
    getValue: function(el) {
      return el.value;
    },
    setValue: function(el, value) {
      el.value = value;
    },
    subscribe: function(el, callback) {
      $(el).on('keyup.textInputBinding input.textInputBinding', function(event) {
        callback(true);
      });
      $(el).on('change.textInputBinding', function(event) {
        callback(false);
      });
    },
    unsubscribe: function(el) {
      $(el).off('.textInputBinding');
    },
    receiveMessage: function(el, data) {
      if (data.hasOwnProperty('value'))
        this.setValue(el, data.value);

      if (data.hasOwnProperty('label'))
        $(el).parent().find('label[for="' + $escape(el.id) + '"]').text(data.label);

      $(el).trigger('change');
    },
    getState: function(el) {
      return {
        label: $(el).parent().find('label[for="' + $escape(el.id) + '"]').text(),
        value: el.value
      };
    },
    getRatePolicy: function() {
      return {
        policy: 'debounce',
        delay: 250
      };
    }
  });
  inputBindings.register(textInputBinding, 'shiny.textInput');


  var textareaInputBinding = {};
  $.extend(textareaInputBinding, textInputBinding, {
    find: function(scope) {
      return $(scope).find('textarea');
    }
  });
  inputBindings.register(textareaInputBinding, 'shiny.textareaInput');


  var numberInputBinding = {};
  $.extend(numberInputBinding, textInputBinding, {
    find: function(scope) {
      return $(scope).find('input[type="number"]');
    },
    getValue: function(el) {
      var numberVal = $(el).val();
      if (/^\s*$/.test(numberVal))  // Return null if all whitespace
        return null;
      else if (!isNaN(numberVal))   // If valid Javascript number string, coerce to number
        return +numberVal;
      else
        return numberVal;           // If other string like "1e6", send it unchanged
    },
    setValue: function(el, value) {
      el.value = value;
    },
    getType: function(el) {
      return "shiny.number";
    },
    receiveMessage: function(el, data) {
      if (data.hasOwnProperty('value'))  el.value = data.value;
      if (data.hasOwnProperty('min'))    el.min   = data.min;
      if (data.hasOwnProperty('max'))    el.max   = data.max;
      if (data.hasOwnProperty('step'))   el.step  = data.step;

      if (data.hasOwnProperty('label'))
        $(el).parent().find('label[for="' + $escape(el.id) + '"]').text(data.label);

      $(el).trigger('change');
    },
    getState: function(el) {
      return { label: $(el).parent().find('label[for="' + $escape(el.id) + '"]').text(),
               value: this.getValue(el),
               min:   Number(el.min),
               max:   Number(el.max),
               step:  Number(el.step) };
    }
  });
  inputBindings.register(numberInputBinding, 'shiny.numberInput');


  var checkboxInputBinding = new InputBinding();
  $.extend(checkboxInputBinding, {
    find: function(scope) {
      return $(scope).find('input[type="checkbox"]');
    },
    getValue: function(el) {
      return el.checked;
    },
    setValue: function(el, value) {
      el.checked = value;
    },
    subscribe: function(el, callback) {
      $(el).on('change.checkboxInputBinding', function(event) {
        callback(true);
      });
    },
    unsubscribe: function(el) {
      $(el).off('.checkboxInputBinding');
    },
    getState: function(el) {
      return {
        label: $(el).parent().find('span').text(),
        value: el.checked
      };
    },
    receiveMessage: function(el, data) {
      if (data.hasOwnProperty('value'))
        el.checked = data.value;

      if (data.hasOwnProperty('label'))
        $(el).parent().find('span').text(data.label);

      $(el).trigger('change');
    }
  });
  inputBindings.register(checkboxInputBinding, 'shiny.checkboxInput');


  var sliderInputBinding = {};
  $.extend(sliderInputBinding, textInputBinding, {
    find: function(scope) {
      // Check if ionRangeSlider plugin is loaded
      if (!$.fn.ionRangeSlider)
        return [];

      return $(scope).find('input.js-range-slider');
    },
    getValue: function(el) {
      var result = $(el).data('ionRangeSlider').result;
      if (this._numValues(el) == 2) {
        return [+result.from, +result.to];
      }
      else {
        return +result.from;
      }
    },
    setValue: function(el, value) {
      var slider = $(el).data('ionRangeSlider');

      if (this._numValues(el) == 2 && value instanceof Array) {
        slider.update({ from: value[0], to: value[1] });
      } else {
        slider.update({ from: value });
      }
    },
    subscribe: function(el, callback) {
      $(el).on('change.sliderInputBinding', function(event) {
        callback(!$(el).data('updating') && !$(el).data('animating'));
      });
    },
    unsubscribe: function(el) {
      $(el).off('.sliderInputBinding');
    },
    receiveMessage: function(el, data) {
      var slider = $(el).data('ionRangeSlider');
      var msg = {};

      if (data.hasOwnProperty('value')) {
        if (this._numValues(el) == 2 && data.value instanceof Array) {
          msg.from = data.value[0];
          msg.to = data.value[1];
        } else {
          msg.from = data.value;
          // Workaround for ionRangeSlider issue #143
          msg.to = data.value;
        }
      }
      if (data.hasOwnProperty('min'))  msg.min   = data.min;
      if (data.hasOwnProperty('max'))  msg.max   = data.max;
      if (data.hasOwnProperty('step')) msg.step  = data.step;

      if (data.hasOwnProperty('label'))
        $(el).parent().find('label[for="' + $escape(el.id) + '"]').text(data.label);

      $(el).data('updating', true);
      try {
        slider.update(msg);
      } finally {
        $(el).data('updating', false);
      }
    },
    getRatePolicy: function() {
      return {
        policy: 'debounce',
        delay: 250
      };
    },
    getState: function(el) {
    },
    initialize: function(el) {
      $(el).ionRangeSlider();
    },

    // Number of values; 1 for single slider, 2 for range slider
    _numValues: function(el) {
      if ($(el).data('ionRangeSlider').options.type === 'double')
        return 2;
      else
        return 1;
    }
  });
  inputBindings.register(sliderInputBinding, 'shiny.sliderInput');


  var dateInputBinding = new InputBinding();
  $.extend(dateInputBinding, {
    find: function(scope) {
      return $(scope).find('.shiny-date-input');
    },
    getType: function(el) {
      return "shiny.date";
    },
    // Return the date in an unambiguous format, yyyy-mm-dd (as opposed to a
    // format like mm/dd/yyyy)
    getValue: function(el) {
      var date = $(el).find('input').data('datepicker').getUTCDate();
      return this._formatDate(date);
    },
    // value must be an unambiguous string like '2001-01-01', or a Date object.
    setValue: function(el, value) {
      var date = this._newDate(value);
      // If date is invalid, do nothing
      if (isNaN(date))
        return;

      $(el).find('input').datepicker('update', date);
    },
    getState: function(el) {
      var $el = $(el);
      var $input = $el.find('input');

      var min = $input.data('datepicker').startDate;
      var max = $input.data('datepicker').endDate;

      // Stringify min and max. If min and max aren't set, they will be
      // -Infinity and Infinity; replace these with null.
      min = (min === -Infinity) ? null : this._formatDate(min);
      max = (max ===  Infinity) ? null : this._formatDate(max);

      // startViewMode is stored as a number; convert to string
      var startview = $input.data('datepicker').startViewMode;
      if      (startview === 2)  startview = 'decade';
      else if (startview === 1)  startview = 'year';
      else if (startview === 0)  startview = 'month';

      return {
        label:       $el.find('label[for="' + $escape(el.id) + '"]').text(),
        value:       this.getValue(el),
        valueString: $input.val(),
        min:         min,
        max:         max,
        language:    $input.data('datepicker').language,
        weekstart:   $input.data('datepicker').weekStart,
        format:      this._formatToString($input.data('datepicker').format),
        startview:   startview
      };
    },
    receiveMessage: function(el, data) {
      var $input = $(el).find('input');

      if (data.hasOwnProperty('value'))
        this.setValue(el, data.value);

      if (data.hasOwnProperty('label'))
        $(el).find('label[for="' + $escape(el.id) + '"]').text(data.label);

      if (data.hasOwnProperty('min'))
        this._setMin($input[0], data.min);

      if (data.hasOwnProperty('max'))
        this._setMax($input[0], data.max);

      $(el).trigger('change');
    },
    subscribe: function(el, callback) {
      $(el).on('keyup.dateInputBinding input.dateInputBinding', function(event) {
        // Use normal debouncing policy when typing
        callback(true);
      });
      $(el).on('changeDate.dateInputBinding change.dateInputBinding', function(event) {
        // Send immediately when clicked
        callback(false);
      });
    },
    unsubscribe: function(el) {
      $(el).off('.dateInputBinding');
    },
    getRatePolicy: function() {
      return {
        policy: 'debounce',
        delay: 250
      };
    },
    initialize: function(el) {
      var $input = $(el).find('input');

      var date = $input.data('initial-date');
      // If initial_date is null, set to current date
      if (date === undefined || date === null) {
        // Get local date, but as UTC
        date = this._dateAsUTC(new Date());
      }

      this.setValue(el, date);

      // Set the start and end dates, from min-date and max-date. These always
      // use yyyy-mm-dd format, instead of bootstrap-datepicker's built-in
      // support for date-startdate and data-enddate, which use the current
      // date format.
      this._setMin($input[0], $input.data('min-date'));
      this._setMax($input[0], $input.data('max-date'));
    },
    // Given a Date object, return a string in yyyy-mm-dd format, using the
    // UTC date. This may be a day off from the date in the local time zone.
    _formatDate: function(date) {
      if (date instanceof Date) {
        return date.getUTCFullYear() + '-' +
               padZeros(date.getUTCMonth()+1, 2) + '-' +
               padZeros(date.getUTCDate(), 2);

      } else {
        return null;
      }
    },
    // Given a format object from a date picker, return a string
    _formatToString: function(format) {
      // Format object has structure like:
      // { parts: ['mm', 'dd', 'yy'], separators: ['', '/', '/' ,''] }
      var str = '';
      for (var i = 0; i < format.parts.length; i++) {
        str += format.separators[i] + format.parts[i];
      }
      str += format.separators[i];
      return str;
    },
    // Given an unambiguous date string or a Date object, set the min (start) date.
    // null will unset.
    _setMin: function(el, date) {
      if (date === null) {
        $(el).datepicker('setStartDate', null);

      } else {
        date = this._newDate(date);
        if (!isNaN(date))
          $(el).datepicker('setStartDate', date);
      }
    },
    // Given an unambiguous date string or a Date object, set the max (end) date
    // null will unset.
    _setMax: function(el, date) {
      if (date === null) {
        $(el).datepicker('setEndDate', null);

      } else {
        date = this._newDate(date);
        if (!isNaN(date))
          $(el).datepicker('setEndDate', date);
      }
    },
    // Given a date string of format yyyy-mm-dd, return a Date object with
    // that date at 12AM UTC.
    // If date is a Date object, return it unchanged.
    _newDate: function(date) {
      if (date instanceof Date)
        return date;
      if (!date)
        return null;

      // Get Date object - this will be at 12AM in UTC, but may print
      // differently at the Javascript console.
      var d = parseDate(date);

      // If invalid date, return null
      if (isNaN(d))
        return null;

      return new Date(d.getTime());
    },
    // Given a Date object, return a Date object which has the same "clock time"
    // in UTC. For example, if input date is 2013-02-01 23:00:00 GMT-0600 (CST),
    // output will be 2013-02-01 23:00:00 UTC. Note that the JS console may
    // print this in local time, as "Sat Feb 02 2013 05:00:00 GMT-0600 (CST)".
    _dateAsUTC: function(date) {
      return new Date(date.getTime() - date.getTimezoneOffset() * 60000);
    }
  });
  inputBindings.register(dateInputBinding, 'shiny.dateInput');


  var dateRangeInputBinding = {};
  $.extend(dateRangeInputBinding, dateInputBinding, {
    find: function(scope) {
      return $(scope).find('.shiny-date-range-input');
    },
    // Return the date in an unambiguous format, yyyy-mm-dd (as opposed to a
    // format like mm/dd/yyyy)
    getValue: function(el) {
      var $inputs = $(el).find('input');
      var start = $inputs.eq(0).data('datepicker').getUTCDate();
      var end   = $inputs.eq(1).data('datepicker').getUTCDate();

      return [this._formatDate(start), this._formatDate(end)];
    },
    // value must be an array of unambiguous strings like '2001-01-01', or
    // Date objects.
    setValue: function(el, value) {
      if (!(value instanceof Array)) {
        return;
      }

      // Get the start and end input objects
      var $inputs = $(el).find('input');

      // If value is undefined, don't try to set
      if (value[0] !== undefined) {
        var start = this._newDate(value[0]);
        $inputs.eq(0).datepicker('update', start);
      }
      if (value[1] !== undefined) {
        var end = this._newDate(value[1]);
        $inputs.eq(1).datepicker('update', end);
      }
    },
    getState: function(el) {
      var $el = $(el);
      var $inputs     = $el.find('input');
      var $startinput = $inputs.eq(0);
      var $endinput   = $inputs.eq(1);

      // For many of the properties, assume start and end have the same values
      var min = $startinput.data('datepicker').startDate;
      var max = $startinput.data('datepicker').endDate;

      // Stringify min and max. If min and max aren't set, they will be
      // -Infinity and Infinity; replace these with null.
      min = (min === -Infinity) ? null : this._formatDate(min);
      max = (max ===  Infinity) ? null : this._formatDate(max);

      // startViewMode is stored as a number; convert to string
      var startview = $startinput.data('datepicker').startViewMode;
      if      (startview === 2)  startview = 'decade';
      else if (startview === 1)  startview = 'year';
      else if (startview === 0)  startview = 'month';

      return {
        label:       $el.find('label[for="' + $escape(el.id) + '"]').text(),
        value:       this.getValue(el),
        valueString: [ $startinput.val(), $endinput.val() ],
        min:         min,
        max:         max,
        weekstart:   $startinput.data('datepicker').weekStart,
        format:      this._formatToString($startinput.data('datepicker').format),
        language:    $startinput.data('datepicker').language,
        startview:   startview
      };
    },
    receiveMessage: function(el, data) {
      var $el = $(el);
      var $inputs     = $el.find('input');
      var $startinput = $inputs.eq(0);
      var $endinput   = $inputs.eq(1);

      if (data.hasOwnProperty('value'))
        this.setValue(el, data.value);

      if (data.hasOwnProperty('label'))
        $el.find('label[for="' + $escape(el.id) + '"]').text(data.label);

      if (data.hasOwnProperty('min')) {
        this._setMin($startinput[0], data.min);
        this._setMin($endinput[0],   data.min);
      }

      if (data.hasOwnProperty('max')) {
        this._setMax($startinput[0], data.max);
        this._setMax($endinput[0],   data.max);
      }

      $el.trigger('change');
    },
    initialize: function(el) {
      var $el = $(el);
      var $inputs     = $el.find('input');
      var $startinput = $inputs.eq(0);
      var $endinput   = $inputs.eq(1);

      var start = $startinput.data('initial-date');
      var end   = $endinput.data('initial-date');

      // If empty/null, use local date, but as UTC
      if (start === undefined || start === null)
        start = this._dateAsUTC(new Date());

      if (end === undefined || end === null)
        end = this._dateAsUTC(new Date());

      this.setValue(el, [start, end]);

      // // Set the start and end dates, from min-date and max-date. These always
      // // use yyyy-mm-dd format, instead of bootstrap-datepicker's built-in
      // // support for date-startdate and data-enddate, which use the current
      // // date format.
      this._setMin($startinput[0], $startinput.data('min-date'));
      this._setMin($endinput[0],   $startinput.data('min-date'));
      this._setMax($startinput[0], $endinput.data('max-date'));
      this._setMax($endinput[0],   $endinput.data('max-date'));
    },
    subscribe: function(el, callback) {
      $(el).on('keyup.dateRangeInputBinding input.dateRangeInputBinding', function(event) {
        // Use normal debouncing policy when typing
        callback(true);
      });
      $(el).on('changeDate.dateRangeInputBinding change.dateRangeInputBinding', function(event) {
        // Send immediately when clicked
        callback(false);
      });
    },
    unsubscribe: function(el) {
      $(el).off('.dateRangeInputBinding');
    }
  });
  inputBindings.register(dateRangeInputBinding, 'shiny.dateRangeInput');


  // Select input
  var selectInputBinding = new InputBinding();
  $.extend(selectInputBinding, {
    find: function(scope) {
      return $(scope).find('select');
    },
    getId: function(el) {
      return InputBinding.prototype.getId.call(this, el) || el.name;
    },
    getValue: function(el) {
      return $(el).val();
    },
    setValue: function(el, value) {
      var selectize = this._selectize(el);
      if (typeof(selectize) !== 'undefined') {
        selectize.setValue(value);
      } else $(el).val(value);
    },
    getState: function(el) {
      // Store options in an array of objects, each with with value and label
      var options = new Array(el.length);
      for (var i = 0; i < el.length; i++) {
        options[i] = { value:    el[i].value,
                       label:    el[i].label };
      }

      return {
        label: $(el).parent().find('label[for="' + $escape(el.id) + '"]').text(),
        value:    this.getValue(el),
        options:  options
      };
    },
    receiveMessage: function(el, data) {
      var $el = $(el), selectize;

      // This will replace all the options
      if (data.hasOwnProperty('options')) {
        selectize = this._selectize(el);
        // Must destroy selectize before appending new options, otherwise
        // selectize will restore the original select
        if (selectize) selectize.destroy();
        // Clear existing options and add each new one
        $el.empty().append(data.options);
        this._selectize(el);
      }

      // re-initialize selectize
      if (data.hasOwnProperty('config')) {
        $el.parent()
           .find('script[data-for="' + $escape(el.id) + '"]')
           .replaceWith(data.config);
        this._selectize(el, true);
      }

      // use server-side processing for selectize
      if (data.hasOwnProperty('url')) {
        selectize = this._selectize(el);
        selectize.clearOptions();
        selectize.settings.load = function(query, callback) {
          if (!query.length) return callback();
          var settings = selectize.settings;
          $.ajax({
            url: data.url,
            data: {
              query: query,
              field: JSON.stringify([settings.searchField]),
              conju: settings.searchConjunction,
              maxop: settings.maxOptions
            },
            type: 'GET',
            error: function() {
              callback();
            },
            success: function(res) {
              callback(res);
            }
          });
        };
        if (data.hasOwnProperty('selected'))
          selectize.addOption(data.selected);
      }

      if (data.hasOwnProperty('value'))
        this.setValue(el, data.value);

      if (data.hasOwnProperty('label'))
        $(el).parent().parent().find('label[for="' + $escape(el.id) + '"]').text(data.label);

      $(el).trigger('change');
    },
    subscribe: function(el, callback) {
      $(el).on('change.selectInputBinding', function(event) {
        callback();
      });
    },
    unsubscribe: function(el) {
      $(el).off('.selectInputBinding');
    },
    initialize: function(el) {
      this._selectize(el);
    },
    _selectize: function(el, update) {
      if (!$.fn.selectize) return;
      var $el = $(el);
      var config = $el.parent().find('script[data-for="' + $escape(el.id) + '"]');
      if (config.length === 0) return;
      var options = $.extend({
        labelField: 'label',
        valueField: 'value',
        searchField: ['label']
      }, JSON.parse(config.html()));
      // selectize created from selectInput()
      if (typeof(config.data('nonempty')) !== 'undefined') {
        options = $.extend(options, {
          onItemRemove: function(value) {
            if (this.getValue() === "")
              $("select#" + $escape(el.id)).empty().append($("<option/>", {
                "value": value,
                "selected": true
              })).trigger("change");
          },
          onDropdownClose: function($dropdown) {
            if (this.getValue() === "")
              this.setValue($("select#" + $escape(el.id)).val());
          }
        });
      }
      // options that should be eval()ed
      if (config.data('eval') instanceof Array)
        $.each(config.data('eval'), function(i, x) {
          /*jshint evil: true*/
          options[x] = eval('(' + options[x] + ')');
        });
      var control = $el.selectize(options)[0].selectize;
      // .selectize() does not really update settings; must destroy and rebuild
      if (update) {
        var settings = $.extend(control.settings, options);
        control.destroy();
        control = $el.selectize(settings)[0].selectize;
      }
      return control;
    }
  });
  inputBindings.register(selectInputBinding, 'shiny.selectInput');


  // Radio input groups
  var radioInputBinding = new InputBinding();
  $.extend(radioInputBinding, {
    find: function(scope) {
      return $(scope).find('.shiny-input-radiogroup');
    },
    getValue: function(el) {
      // Select the radio objects that have name equal to the grouping div's id
      return $('input:radio[name="' + $escape(el.id) + '"]:checked').val();
    },
    setValue: function(el, value) {
      $('input:radio[name="' + $escape(el.id) + '"][value="' + $escape(value) + '"]').prop('checked', true);
    },
    getState: function(el) {
      var $objs = $('input:radio[name="' + $escape(el.id) + '"]');

      // Store options in an array of objects, each with with value and label
      var options = new Array($objs.length);
      for (var i = 0; i < options.length; i++) {
        options[i] = { value:   $objs[i].value,
                       label:   this._getLabel($objs[i]) };
      }

      return {
        label:    $(el).parent().find('label[for="' + $escape(el.id) + '"]').text(),
        value:    this.getValue(el),
        options:  options
      };
    },
    receiveMessage: function(el, data) {
      var $el = $(el);

      // This will replace all the options
      if (data.hasOwnProperty('options')) {
        // Clear existing options and add each new one
        $el.find('div.shiny-options-group').remove();
        // Backward compatibility: for HTML generated by shinybootstrap2 package
        $el.find('label.radio').remove();
        $el.append(data.options);
      }

      if (data.hasOwnProperty('value'))
        this.setValue(el, data.value);

      if (data.hasOwnProperty('label'))
        $(el).parent().find('label[for="' + $escape(el.id) + '"]').text(data.label);

      $(el).trigger('change');
    },
    subscribe: function(el, callback) {
      $(el).on('change.radioInputBinding', function(event) {
        callback();
      });
    },
    unsubscribe: function(el) {
      $(el).off('.radioInputBinding');
    },
    // Given an input DOM object, get the associated label. Handles labels
    // that wrap the input as well as labels associated with 'for' attribute.
    _getLabel: function(obj) {
      // If <label><input /><span>label text</span></label>
      if (obj.parentNode.tagName === "LABEL") {
        return $.trim($(obj.parentNode).find('span').text());
      }

      return null;
    },
    // Given an input DOM object, set the associated label. Handles labels
    // that wrap the input as well as labels associated with 'for' attribute.
    _setLabel: function(obj, value) {
      // If <label><input /><span>label text</span></label>
      if (obj.parentNode.tagName === "LABEL") {
        $(obj.parentNode).find('span').text(value);
      }

      return null;
    }

  });
  inputBindings.register(radioInputBinding, 'shiny.radioInput');


  // Checkbox input groups
  var checkboxGroupInputBinding = new InputBinding();
  $.extend(checkboxGroupInputBinding, {
    find: function(scope) {
      return $(scope).find('.shiny-input-checkboxgroup');
    },
    getValue: function(el) {
      // Select the checkbox objects that have name equal to the grouping div's id
      var $objs = $('input:checkbox[name="' + $escape(el.id) + '"]:checked');
      var values = new Array($objs.length);
      for (var i = 0; i < $objs.length; i ++) {
        values[i] = $objs[i].value;
      }
      return values;
    },
    setValue: function(el, value) {
      // Clear all checkboxes
      $('input:checkbox[name="' + $escape(el.id) + '"]').prop('checked', false);

      // Accept array
      if (value instanceof Array) {
        for (var i = 0; i < value.length; i++) {
          $('input:checkbox[name="' + $escape(el.id) + '"][value="' + $escape(value[i]) + '"]')
            .prop('checked', true);
        }
      // Else assume it's a single value
      } else {
        $('input:checkbox[name="' + $escape(el.id) + '"][value="' + $escape(value) + '"]')
          .prop('checked', true);
      }

    },
    getState: function(el) {
      var $objs = $('input:checkbox[name="' + $escape(el.id) + '"]');

      // Store options in an array of objects, each with with value and label
      var options = new Array($objs.length);
      for (var i = 0; i < options.length; i++) {
        options[i] = { value:   $objs[i].value,
                       label:   this._getLabel($objs[i]) };
      }

      return { label:    $(el).find('label[for="' + $escape(el.id) + '"]').text(),
               value:    this.getValue(el),
               options:  options
             };
    },
    receiveMessage: function(el, data) {
      var $el = $(el);

      // This will replace all the options
      if (data.hasOwnProperty('options')) {
        // Clear existing options and add each new one
        $el.find('div.shiny-options-group').remove();
        // Backward compatibility: for HTML generated by shinybootstrap2 package
        $el.find('label.checkbox').remove();
        $el.append(data.options);
      }

      if (data.hasOwnProperty('value'))
        this.setValue(el, data.value);

      if (data.hasOwnProperty('label'))
        $el.find('label[for="' + $escape(el.id) + '"]').text(data.label);

      $(el).trigger('change');
    },
    subscribe: function(el, callback) {
      $(el).on('change.checkboxGroupInputBinding', function(event) {
        callback();
      });
    },
    unsubscribe: function(el) {
      $(el).off('.checkboxGroupInputBinding');
    },
    // Given an input DOM object, get the associated label. Handles labels
    // that wrap the input as well as labels associated with 'for' attribute.
    _getLabel: function(obj) {
      // If <label><input /><span>label text</span></label>
      if (obj.parentNode.tagName === "LABEL") {
        return $.trim($(obj.parentNode).find('span').text());
      }

      return null;
    },
    // Given an input DOM object, set the associated label. Handles labels
    // that wrap the input as well as labels associated with 'for' attribute.
    _setLabel: function(obj, value) {
      // If <label><input /><span>label text</span></label>
      if (obj.parentNode.tagName === "LABEL") {
        $(obj.parentNode).find('span').text(value);
      }

      return null;
    }

  });
  inputBindings.register(checkboxGroupInputBinding, 'shiny.checkboxGroupInput');


  var actionButtonInputBinding = new InputBinding();
  $.extend(actionButtonInputBinding, {
    find: function(scope) {
      return $(scope).find(".action-button");
    },
    getValue: function(el) {
      return $(el).data('val') || 0;
    },
    setValue: function(el, value) {
      $(el).data('val', value);
    },
    getType: function(el) {
      return 'shiny.action';
    },
    subscribe: function(el, callback) {
      $(el).on("click.actionButtonInputBinding", function(e) {
        var $el = $(this);
        var val = $el.data('val') || 0;
        $el.data('val', val + 1);

        callback();
      });
    },
    getState: function(el) {
      return { value: this.getValue(el) };
    },
    receiveMessage: function(el, data) {
    },
    unsubscribe: function(el) {
      $(el).off(".actionButtonInputBinding");
    }
  });
  inputBindings.register(actionButtonInputBinding, 'shiny.actionButtonInput');


  var bootstrapTabInputBinding = new InputBinding();
  $.extend(bootstrapTabInputBinding, {
    find: function(scope) {
      return $(scope).find('ul.nav.shiny-tab-input');
    },
    getValue: function(el) {
      var anchor = $(el).find('li:not(.dropdown).active').children('a');
      if (anchor.length === 1)
        return this._getTabName(anchor);

      return null;
    },
    setValue: function(el, value) {
      var self = this;
      var anchors = $(el).find('li:not(.dropdown)').children('a');
      anchors.each(function() {
        if (self._getTabName($(this)) === value) {
          $(this).tab('show');
          return false;
        }
      });
    },
    getState: function(el) {
      return { value: this.getValue(el) };
    },
    receiveMessage: function(el, data) {
      if (data.hasOwnProperty('value'))
        this.setValue(el, data.value);
    },
    subscribe: function(el, callback) {
      $(el).on('shown.bootstrapTabInputBinding shown.bs.tab.bootstrapTabInputBinding', function(event) {
        callback();
      });
    },
    unsubscribe: function(el) {
      $(el).off('.bootstrapTabInputBinding');
    },
    _getTabName: function(anchor) {
      return anchor.attr('data-value') || anchor.text();
    }
  });
  inputBindings.register(bootstrapTabInputBinding, 'shiny.bootstrapTabInput');

  var IE8FileUploader = function(shinyapp, id, fileEl) {
    this.shinyapp = shinyapp;
    this.id = id;
    this.fileEl = fileEl;
    this.beginUpload();
  };
  (function() {
    this.beginUpload = function() {
      var self = this;
      // Create invisible frame
      var iframeId = 'shinyupload_iframe_' + this.id;
      this.iframe = document.createElement('iframe');
      this.iframe.id = iframeId;
      this.iframe.name = iframeId;
      this.iframe.setAttribute('style', 'position: fixed; top: 0; left: 0; width: 0; height: 0; border: none');
      $('body').append(this.iframe);
      var iframeDestroy = function() {
        // Forces Shiny to flushReact, flush outputs, etc. Without this we get
        // invalidated reactives, but observers don't actually execute.
        self.shinyapp.makeRequest('uploadieFinish', [], function(){}, function(){});
        $(self.iframe).remove();
      };
      if (this.iframe.attachEvent) {
        this.iframe.attachEvent('onload', iframeDestroy);
      } else {
        this.iframe.onload = iframeDestroy;
      }

      this.form = document.createElement('form');
      this.form.method = 'POST';
      this.form.setAttribute('enctype', 'multipart/form-data');
      this.form.action = "session/" + encodeURI(this.shinyapp.config.sessionId) +
                         "/uploadie/" + encodeURI(this.id);
      this.form.id = 'shinyupload_form_' + this.id;
      this.form.target = iframeId;
      $(this.form).insertAfter(this.fileEl).append(this.fileEl);
      this.form.submit();
    };
  }).call(IE8FileUploader.prototype);

  var FileUploader = function(shinyapp, id, files) {
    this.shinyapp = shinyapp;
    this.id = id;
    FileProcessor.call(this, files);
  };
  $.extend(FileUploader.prototype, FileProcessor.prototype);
  (function() {
    this.makeRequest = function(method, args, onSuccess, onFailure, blobs) {
      this.shinyapp.makeRequest(method, args, onSuccess, onFailure, blobs);
    };
    this.onBegin = function(files, cont) {
      var self = this;

      // Reset progress bar
      this.$setError(null);
      this.$setActive(true);
      this.$setVisible(true);
      this.onProgress(null, 0);

      this.totalBytes = 0;
      this.progressBytes = 0;
      $.each(files, function(i, file) {
        self.totalBytes += file.size;
      });

      var fileInfo = $.map(files, function(file, i) {
        return {
          name: file.name,
          size: file.size,
          type: file.type
        };
      });

      this.makeRequest(
        'uploadInit', [fileInfo],
        function(response) {
          self.jobId = response.jobId;
          self.uploadUrl = response.uploadUrl;
          cont();
        },
        function(error) {
          self.onError(error);
        });
    };
    this.onFile = function(file, cont) {
      var self = this;
      this.onProgress(file, 0);

      $.ajax(this.uploadUrl, {
        type: 'POST',
        cache: false,
        xhr: function() {
          var xhrVal = $.ajaxSettings.xhr();
          if (xhrVal.upload) {
            xhrVal.upload.onprogress = function(e) {
              if (e.lengthComputable) {
                self.onProgress(
                  file,
                  (self.progressBytes + e.loaded) / self.totalBytes);
              }
            };
          }
          return xhrVal;
        },
        data: file,
        processData: false,
        success: function() {
          self.progressBytes += file.size;
          cont();
        },
        error: function(jqXHR, textStatus, errorThrown) {
          self.onError(jqXHR.responseText || textStatus);
        }
      });
    };
    this.onComplete = function() {
      var self = this;
      this.makeRequest(
        'uploadEnd', [this.jobId, this.id],
        function(response) {
          self.$setActive(false);
          self.onProgress(null, 1);
          self.$bar().text('Upload complete');
        },
        function(error) {
          self.onError(error);
        });
      this.$bar().text('Finishing upload');
    };
    this.onError = function(message) {
      this.$setError(message || '');
      this.$setActive(false);
    };
    this.onAbort = function() {
      this.$setVisible(false);
    };
    this.onProgress = function(file, completed) {
      this.$bar().width(Math.round(completed*100) + '%');
      this.$bar().text(file ? file.name : '');
    };
    this.$container = function() {
      return $('#' + $escape(this.id) + '_progress.shiny-file-input-progress');
    };
    this.$bar = function() {
      return $('#' + $escape(this.id) + '_progress.shiny-file-input-progress .progress-bar');
    };
    this.$setVisible = function(visible) {
      this.$container().css('visibility', visible ? 'visible' : 'hidden');
    };
    this.$setError = function(error) {
      this.$bar().toggleClass('bar-danger', (error !== null));
      if (error !== null) {
        this.onProgress(null, 1);
        this.$bar().text(error);
      }
    };
    this.$setActive = function(active) {
      this.$container().toggleClass('active', !!active);
    };
  }).call(FileUploader.prototype);


  function uploadFiles(evt) {
    // If previously selected files are uploading, abort that.
    var el = $(evt.target);
    var uploader = el.data('currentUploader');
    if (uploader)
      uploader.abort();

    var files = evt.target.files;
    var IE8 = (browser.isIE && browser.IEVersion === 8);
    var id = fileInputBinding.getId(evt.target);

    if (!IE8 && files.length === 0)
      return;

    // Start the new upload and put the uploader in 'currentUploader'.
    if (IE8) {
      /*jshint nonew:false */
      new IE8FileUploader(exports.shinyapp, id, evt.target);
    } else {
      el.data('currentUploader', new FileUploader(exports.shinyapp, id, files));
    }
  }

  var fileInputBinding = new InputBinding();
  $.extend(fileInputBinding, {
    find: function(scope) {
      return $(scope).find('input[type="file"]');
    },
    getId: function(el) {
      return InputBinding.prototype.getId.call(this, el) || el.name;
    },
    getValue: function(el) {
      return null;
    },
    setValue: function(el, value) {
      // Not implemented
    },
    subscribe: function(el, callback) {
      $(el).on('change.fileInputBinding', uploadFiles);
    },
    unsubscribe: function(el) {
      $(el).off('.fileInputBinding');
    }
  });
  inputBindings.register(fileInputBinding, 'shiny.fileInputBinding');


  var OutputBindingAdapter = function(el, binding) {
    this.el = el;
    this.binding = binding;

    // If the binding actually has a resize method, override the prototype of
    // onResize with a version that does a makeResizeFilter on the element.
    if (binding.resize) {
      this.onResize = makeResizeFilter(el, function(width, height) {
        binding.resize(el, width, height);
      });
    }
  };
  (function() {
    this.onValueChange = function(data) {
      this.binding.onValueChange(this.el, data);
    };
    this.onValueError = function(err) {
      this.binding.onValueError(this.el, err);
    };
    this.showProgress = function(show) {
      this.binding.showProgress(this.el, show);
    };
    this.onResize = function() {
      // Intentionally left blank; see constructor
    };
  }).call(OutputBindingAdapter.prototype);


  // =========================================================================
  // initShiny
  // =========================================================================
  function initShiny() {

    var shinyapp = exports.shinyapp = new ShinyApp();

    function bindOutputs(scope) {

      if (scope === undefined)
        scope = document;

      scope = $(scope);

      var bindings = outputBindings.getBindings();

      for (var i = 0; i < bindings.length; i++) {
        var binding = bindings[i].binding;
        var matches = binding.find(scope) || [];
        for (var j = 0; j < matches.length; j++) {
          var el = matches[j];
          var id = binding.getId(el);

          // Check if ID is falsy
          if (!id)
            continue;

          var $el = $(el);
          if ($el.data('shiny-output-binding')) {
            // Already bound; can happen with nested uiOutput (bindAll
            // gets called on two ancestors)
            continue;
          }

          var bindingAdapter = new OutputBindingAdapter(el, binding);
          shinyapp.bindOutput(id, bindingAdapter);
          $el.data('shiny-output-binding', bindingAdapter);
          $el.addClass('shiny-bound-output');
        }
      }

      // Send later in case DOM layout isn't final yet.
      setTimeout(sendImageSize, 0);
      setTimeout(sendOutputHiddenState, 0);
    }

    function unbindOutputs(scope) {
      if (scope === undefined)
        scope = document;

      var outputs = $(scope).find('.shiny-bound-output');
      for (var i = 0; i < outputs.length; i++) {
        var bindingAdapter = $(outputs[i]).data('shiny-output-binding');
        if (!bindingAdapter)
          continue;
        var id = bindingAdapter.binding.getId(outputs[i]);
        shinyapp.unbindOutput(id, bindingAdapter);
        $(outputs[i]).removeClass('shiny-bound-output');
      }

      setTimeout(sendOutputHiddenState, 0);
    }

    var inputBatchSender = new InputBatchSender(shinyapp);
    var inputsNoResend = new InputNoResendDecorator(inputBatchSender);
    var inputsRate = new InputRateDecorator(inputsNoResend);
    var inputsDefer = new InputDeferDecorator(inputsNoResend);

    // By default, use rate decorator
    var inputs = inputsRate;
    $('input[type="submit"], button[type="submit"]').each(function() {
      // If there is a submit button on the page, use defer decorator
      inputs = inputsDefer;
      $(this).click(function(event) {
        event.preventDefault();
        inputsDefer.submit();
      });
    });

    exports.onInputChange = function(name, value) {
      inputs.setInput(name, value);
    };

    var boundInputs = {};

    function valueChangeCallback(binding, el, allowDeferred) {
      var id = binding.getId(el);
      if (id) {
        var value = binding.getValue(el);
        var type = binding.getType(el);
        if (type)
          id = id + ":" + type;
        inputs.setInput(id, value, !allowDeferred);
      }
    }

    function bindInputs(scope) {

      if (scope === undefined)
        scope = document;

      var bindings = inputBindings.getBindings();

      var currentValues = {};

      for (var i = 0; i < bindings.length; i++) {
        var binding = bindings[i].binding;
        var matches = binding.find(scope) || [];
        for (var j = 0; j < matches.length; j++) {
          var el = matches[j];
          var id = binding.getId(el);

          // Check if ID is falsy, or if already bound
          if (!id || boundInputs[id])
            continue;

          var type = binding.getType(el);
          var effectiveId = type ? id + ":" + type : id;
          currentValues[effectiveId] = binding.getValue(el);

          /*jshint loopfunc:true*/
          var thisCallback = (function() {
            var thisBinding = binding;
            var thisEl = el;
            return function(allowDeferred) {
              valueChangeCallback(thisBinding, thisEl, allowDeferred);
            };
          })();

          binding.subscribe(el, thisCallback);
          $(el).data('shiny-input-binding', binding);
          $(el).addClass('shiny-bound-input');
          var ratePolicy = binding.getRatePolicy(el);
          if (ratePolicy !== null) {
            inputsRate.setRatePolicy(
              effectiveId,
              ratePolicy.policy,
              ratePolicy.delay);
          }

          boundInputs[id] = {
            binding: binding,
            node: el
          };

          if (shinyapp.isConnected()) {
            valueChangeCallback(binding, el, false);
          }
        }
      }

      return currentValues;
    }

    function unbindInputs(scope) {
      if (scope === undefined)
        scope = document;

      var inputs = $(scope).find('.shiny-bound-input');
      for (var i = 0; i < inputs.length; i++) {
        var binding = $(inputs[i]).data('shiny-input-binding');
        if (!binding)
          continue;
        var id = binding.getId(inputs[i]);
        $(inputs[i]).removeClass('shiny-bound-input');
        delete boundInputs[id];
        binding.unsubscribe(inputs[i]);
      }
    }

    function _bindAll(scope) {
      bindOutputs(scope);
      return bindInputs(scope);
    }
    function unbindAll(scope) {
      unbindInputs(scope);
      unbindOutputs(scope);
    }
    exports.bindAll = function(scope) {
      // _bindAll alone returns initial values, it doesn't send them to the
      // server. export.bindAll needs to send the values to the server, so we
      // wrap _bindAll in a closure that does that.
      var currentValues = _bindAll(scope);
      $.each(currentValues, function(name, value) {
        inputs.setInput(name, value);
      });
    };
    exports.unbindAll = unbindAll;

    // Calls .initialize() for all of the input objects in all input bindings,
    // in the given scope.
    function initializeInputs(scope) {
      if (scope === undefined)
        scope = document;

      var bindings = inputBindings.getBindings();

      // Iterate over all bindings
      for (var i = 0; i < bindings.length; i++) {
        var binding = bindings[i].binding;
        var inputObjects = binding.find(scope) || [];

        // Iterate over all input objects for this binding
        for (var j = 0; j < inputObjects.length; j++) {
          binding.initialize(inputObjects[j]);
        }
      }
    }
    exports.initializeInputs = initializeInputs;


    // Initialize all input objects in the document, before binding
    initializeInputs(document);

    var initialValues = _bindAll(document);


    // The server needs to know the size of each image and plot output element,
    // in case it is auto-sizing
    $('.shiny-image-output, .shiny-plot-output').each(function() {
      if (this.offsetWidth !== 0 || this.offsetHeight !== 0) {
        initialValues['.clientdata_output_' + this.id + '_width'] = this.offsetWidth;
        initialValues['.clientdata_output_' + this.id + '_height'] = this.offsetHeight;
      }
    });
    function doSendImageSize() {
      $('.shiny-image-output, .shiny-plot-output').each(function() {
        if (this.offsetWidth !== 0 || this.offsetHeight !== 0) {
          inputs.setInput('.clientdata_output_' + this.id + '_width', this.offsetWidth);
          inputs.setInput('.clientdata_output_' + this.id + '_height', this.offsetHeight);
        }
      });
      $('.shiny-bound-output').each(function() {
        $(this).data('shiny-output-binding').onResize();
      });
    }
    var sendImageSizeDebouncer = new Debouncer(null, doSendImageSize, 0);
    function sendImageSize() {
      sendImageSizeDebouncer.normalCall();
    }
    // Make sure sendImageSize actually gets called before the inputBatchSender
    // sends data to the server.
    inputBatchSender.lastChanceCallback.push(function() {
      if (sendImageSizeDebouncer.isPending())
        sendImageSizeDebouncer.immediateCall();
    });

    // Return true if the object or one of its ancestors in the DOM tree has
    // style='display:none'; otherwise return false.
    function isHidden(obj) {
      // null means we've hit the top of the tree. If width or height is
      // non-zero, then we know that no ancestor has display:none.
      if (obj === null || obj.offsetWidth !== 0 || obj.offsetHeight !== 0) {
        return false;
      } else if (getStyle(obj, 'display') === 'none') {
        return true;
      } else {
        return(isHidden(obj.parentNode));
      }
    }
    var lastKnownVisibleOutputs = {};
    // Set initial state of outputs to hidden, if needed
    $('.shiny-bound-output').each(function() {
      if (isHidden(this)) {
        initialValues['.clientdata_output_' + this.id + '_hidden'] = true;
      } else {
        lastKnownVisibleOutputs[this.id] = true;
        initialValues['.clientdata_output_' + this.id + '_hidden'] = false;
      }
    });
    // Send update when hidden state changes
    function doSendOutputHiddenState() {
      var visibleOutputs = {};
      $('.shiny-bound-output').each(function() {
        delete lastKnownVisibleOutputs[this.id];
        // Assume that the object is hidden when width and height are 0
        if (isHidden(this)) {
          inputs.setInput('.clientdata_output_' + this.id + '_hidden', true);
        } else {
          visibleOutputs[this.id] = true;
          inputs.setInput('.clientdata_output_' + this.id + '_hidden', false);
        }
      });
      // Anything left in lastKnownVisibleOutputs is orphaned
      for (var name in lastKnownVisibleOutputs) {
        if (lastKnownVisibleOutputs.hasOwnProperty(name))
          inputs.setInput('.clientdata_output_' + name + '_hidden', true);
      }
      // Update the visible outputs for next time
      lastKnownVisibleOutputs = visibleOutputs;
    }
    // sendOutputHiddenState gets called each time DOM elements are shown or
    // hidden. This can be in the hundreds or thousands of times at startup.
    // We'll debounce it, so that we do the actual work once per tick.
    var sendOutputHiddenStateDebouncer = new Debouncer(null, doSendOutputHiddenState, 0);
    function sendOutputHiddenState() {
      sendOutputHiddenStateDebouncer.normalCall();
    }
    // We need to make sure doSendOutputHiddenState actually gets called before
    // the inputBatchSender sends data to the server. The lastChanceCallback
    // here does that - if the debouncer has a pending call, flush it.
    inputBatchSender.lastChanceCallback.push(function() {
      if (sendOutputHiddenStateDebouncer.isPending())
        sendOutputHiddenStateDebouncer.immediateCall();
    });

    // Given a namespace and a handler function, return a function that invokes
    // the handler only when e's namespace matches. For example, if the
    // namespace is "bs", it would match when e.namespace is "bs" or "bs.tab".
    // If the namespace is "bs.tab", it would match for "bs.tab", but not "bs".
    function filterEventsByNamespace(namespace, handler) {
      namespace = namespace.split(".");

      return function(e) {
        var eventNamespace = e.namespace.split(".");

        // If any of the namespace strings aren't present in this event, quit.
        for (var i=0; i<namespace.length; i++) {
          if (eventNamespace.indexOf(namespace[i]) === -1)
            return;
        }

        handler.apply(this, arguments);
      };
    }

    // The size of each image may change either because the browser window was
    // resized, or because a tab was shown/hidden (hidden elements report size
    // of 0x0). It's OK to over-report sizes because the input pipeline will
    // filter out values that haven't changed.
    $(window).resize(debounce(500, sendImageSize));
    // Need to register callbacks for each Bootstrap 3 class.
    var bs3classes = ['modal', 'dropdown', 'tab', 'tooltip', 'popover', 'collapse'];
    $.each(bs3classes, function(idx, classname) {
      $('body').on('shown.bs.' + classname + '.sendImageSize', '*',
        filterEventsByNamespace('bs', sendImageSize));
      $('body').on('shown.bs.' + classname + '.sendOutputHiddenState ' +
                   'hidden.bs.' + classname + '.sendOutputHiddenState',
                   '*', filterEventsByNamespace('bs', sendOutputHiddenState));
    });

    // This is needed for Bootstrap 2 compatibility and for non-Bootstrap
    // related shown/hidden events (like conditionalPanel)
    $('body').on('shown.sendImageSize', '*', sendImageSize);
    $('body').on('shown.sendOutputHiddenState hidden.sendOutputHiddenState', '*',
                 sendOutputHiddenState);

    // Send initial pixel ratio, and update it if it changes
    initialValues['.clientdata_pixelratio'] = pixelRatio();
    $(window).resize(function() {
      inputs.setInput('.clientdata_pixelratio', pixelRatio());
    });

    // Send initial URL
    initialValues['.clientdata_url_protocol'] = window.location.protocol;
    initialValues['.clientdata_url_hostname'] = window.location.hostname;
    initialValues['.clientdata_url_port']     = window.location.port;
    initialValues['.clientdata_url_pathname'] = window.location.pathname;
    initialValues['.clientdata_url_search']   = window.location.search;
    // This is only the initial value of the hash. The hash can change, but
    // a reactive version of this isn't sent because w atching for changes can
    // require polling on some browsers. The JQuery hashchange plugin can be
    // used if this capability is important.
    initialValues['.clientdata_url_hash_initial'] = window.location.hash;

    // The server needs to know what singletons were rendered as part of
    // the page loading
    var singletonText = initialValues['.clientdata_singletons'] =
        $('script[type="application/shiny-singletons"]').text();
    singletons.registerNames(singletonText.split(/,/));

    var dependencyText = $('script[type="application/html-dependencies"]').text();
    $.each(dependencyText.split(/;/), function(i, depStr) {
      var match = /\s*^(.+)\[(.+)\]\s*$/.exec(depStr);
      if (match) {
        registerDependency(match[1], match[2]);
      }
    });

    // We've collected all the initial values--start the server process!
    inputsNoResend.reset(initialValues);
    shinyapp.connect(initialValues);
  } // function initShiny()

  $(function() {
    // Init Shiny a little later than document ready, so user code can
    // run first (i.e. to register bindings)
    setTimeout(initShiny, 1);
  });

  $(document).on('click', '.slider-animate-button', function(evt) {
    evt.preventDefault();
    var self = $(this);
    var target = $('#' + $escape(self.attr('data-target-id')));
    var startLabel = 'Play';
    var stopLabel = 'Pause';
    var loop = self.attr('data-loop') !== undefined &&
               !/^\s*false\s*$/i.test(self.attr('data-loop'));
    var animInterval = self.attr('data-interval');
    if (isNaN(animInterval))
      animInterval = 1500;
    else
      animInterval = +animInterval;

    if (!target.data('animTimer')) {
      var slider;
      var timer;

      // Separate code paths:
      // Backward compatible code for old-style jsliders (Shiny <= 0.10.2.2),
      // and new-style ionsliders.
      if (target.hasClass('jslider')) {
        slider = target.slider();

        // If we're currently at the end, restart
        if (!slider.canStepNext())
          slider.resetToStart();

        timer = setInterval(function() {
          if (loop && !slider.canStepNext()) {
            slider.resetToStart();
          }
          else {
            slider.stepNext();
            if (!loop && !slider.canStepNext()) {
              self.click(); // stop the animation
            }
          }
        }, animInterval);

      } else {
        slider = target.data('ionRangeSlider');
        var sliderCanStep = function() {
          return slider.result.from < slider.result.max;
        };
        var sliderReset = function() {
          slider.update({from: slider.result.min});
        };
        var sliderStep = function() {
          slider.update({from: slider.result.from + slider.options.step});
        };

        // If we're currently at the end, restart
        if (!sliderCanStep())
          sliderReset();

        timer = setInterval(function() {
          if (loop && !sliderCanStep()) {
            sliderReset();
          }
          else {
            sliderStep();
            if (!loop && !sliderCanStep()) {
              self.click(); // stop the animation
            }
          }
        }, animInterval);
      }

      target.data('animTimer', timer);
      self.attr('title', stopLabel);
      self.addClass('playing');
      target.data('animating', true);
    }
    else {
      clearTimeout(target.data('animTimer'));
      target.removeData('animTimer');
      self.attr('title', startLabel);
      self.removeClass('playing');
      target.removeData('animating');
    }
  });

  $(document).on('keydown', function(e) {
    if (e.which !== 114 || (!e.ctrlKey && !e.metaKey) || (e.shiftKey || e.altKey))
      return;
    var url = 'reactlog?w=' + exports.shinyapp.config.workerId;
    window.open(url);
    e.preventDefault();
  });

})();