var K = {
  tryToFindOne: function() {
    for (var i=0;i<arguments.length;++i) {
      try {
        return (arguments[i])();
      } catch(e) {
      }
    }
  },
 newXHR: function() {
  return K.tryToFindOne(
    function() {
      return XMLHttpRequest ? new XMLHttpRequest() : undefined;
    },
    function() {
      return ActiveXObject ? new ActiveXObject('Msxml2.XMLHTTP')
          : undefined;
    },
    function() {
      return ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP')
          : undefined;
    });
  },
  xhrGET: function(url,isAsync,callback) {
    var xhr = K.newXHR();
    if (isAsync) {
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          callback(xhr);
        }
      };
    }
    xhr.open("GET",url,isAsync);
    xhr.send("");
    !isAsync && callback(xhr);
  },
  newButton: function(parent, label, caption, onClique) {
    var a = parent.appendChild(document.createElement('DIV'));
    var b = a.appendChild((function() {
      //workaround ie issue.
      var n = document.createElement('INPUT');
      n.type = 'button';
      return n;
    })());
    var c = a.appendChild(document.createElement('SPAN'));

    a.style.background = '#ffd';
    a.style.margin = '10px 0 20px 0';
    a.style.padding = '10px';
    a.style.border = '1px solid #666';

    b.value = label;
    b.style.width = '120px';
    b.onclick = onClique;

    c.style.fontWeight = 'bold';
    c.style.padding = '0 0 0 10px';
    c.appendChild(document.createTextNode(caption));

    return c;
  },
  updateButton: function(node, text) {
    var node = node.firstChild;
    if (node.nodeName == '#text') {
      node.nodeValue = text;
    }
  },
  eventTarget: function(event) {
    alert(typeof event);
    var target =  event.target || event.srcElement;
    alert(target);
    return (target.nodeType == 3) ? target.parentNode : target;
  },
  cueChatter: function(target, node) {
    var chat = [
      function() { K.updateButton(node,'We can continue to talk while doing this.') },
      function() { K.updateButton(node,'See, The UI is free to update.') },
      function() { K.updateButton(node,'Of course, you could click the button again.') },
      function() { K.updateButton(node,'So, let me disable it now.') },
      function() { target.disabled = true },
      function() { K.updateButton(node,'And now we will wait for the request to finish.') } ];
    for (var i=0;i<chat.length;i++) {
      setTimeout(function(a) { return a; }(chat[i]), 1500*i);
    }
  }
};

(function() {
  document.getElementById("load-1096").style.display = 'none';
  var div = document.getElementById("flap-1096");
  var url = "/media/upload/2007/0210-sync/req";

  var sync = K.newButton(div, "Synchronous", "The bad example, click with caution.", function() {
    //NOTE: We cannot update now if we wanted to.
    K.xhrGET(url,false,function(xhr) {
      K.updateButton(sync, "DONE! That was pretty painful.");
    });
  });

  var asyn = K.newButton(div, "Asynchronous", "The way it should be.", function(event) {
    var target = event.target || event.srcElement || {};
    K.cueChatter(target, asyn);
    K.xhrGET(url,true,function(xhr) {
      K.updateButton(asyn, "DONE!");
      target.disabled = false;
    });
  });

}());