function $(selector) {
  return document.querySelector(selector);
}

window.addEventListener(
  "DOMContentLoaded",
  function() {
    var TOUCH_EVENTS = ["touchstart",
			"touchmove",
			"touchend",
			"touchcancel"];
    var content = $("#content");
    var image = $("#image");
    var lastX = 0;
    var currX = 0;

    function log(text) {
      content.textContent += text + "\n";
    }

    log("Start touching the image.");

    TOUCH_EVENTS.forEach(
      function(name) {
        image.addEventListener(
          name,
          function(event) {
            switch (event.type) {
            case "touchstart":
              event.preventDefault();
              lastX = event.targetTouches[0].pageX;
              break;
            case "touchend":
              break;
            case "touchmove":
              event.preventDefault();
              var xDelta = event.targetTouches[0].pageX - lastX;
              lastX = event.targetTouches[0].pageX;
              currX += xDelta;
              var target = event.targetTouches[0].target;
              target.style.webkitTransform = 'translate(' + currX + 'px,0px)';
              break;
            };
          },
          false
        );
      });
  },
  false
);