Touch support for JesperTheEnd's number game

index.html

    <!-- Don't forget to add this line to the head to disable zooming and scrolling on mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />


    <script>
      var $tl=0,$intv,$txtColor="black",$time,$touch=false;

      $(document).ready(function() {
        post('request');
        setInterval(tl,1000);
        $intv=setInterval(request,100);
        
        document.getElementById("number").addEventListener('touchstart', function(e){ //jQuery doesn't support touchevents, so we have to use js-internal events.
          e.preventDefault(); //Seams to be broken in recent firefox.
          $touch=true; //Using  workaround.
          $time=new Date().getTime();
        });
        document.getElementById("number").addEventListener('touchend', function(e){
          e.preventDefault();
          $now=new Date().getTime();
          if($time+500>$now){
            post('increase');
          }else{
            post('decrease');
          }
          setTimeout(function() {$touch=false}, 10);
        });
          
        $("#number").mousedown(function(e){
          if(!$touch){
            switch(e.which) {
              case 1:
                post('increase');
                break;
              case 2:
                post('increase'); //Is this break missing on purpose? (It will run both case 2 and case 3)
              case 3:
                post('decrease');
                break;
              default:
                post('decrease');
                break;
            }
          }
        });
      });

      function tl() {
        $tl++;
        switch($tl) {
          case 1:
            $("#info").fadeTo(500,1);
            break;
          case 5:
            $("#info").fadeTo(500,0);
            break;
          case 6:
            $("#info").html("Right click the number to decrease the value");
            $("#info").fadeTo(500,1);
            break;
          case 10:
            $("#info").fadeTo(500,0);
            break;
          case 11:
            $("#info").html("Oh yeah, also this thing is real time.");
            $("#info").fadeTo(500,1);
            break;
          case 13:
            $("#info").fadeTo(500,0);
            break;
          case 14:
            $("#info").html("So if you change it, it changes everywhere in the world :D");
            $("#info").fadeTo(500,1);
            break;
          case 20:
            $("#info").fadeTo(500,0);
            break;
          case 21:
            $("#info").css("font-size","9px");
            $("#info").html("Oh yeah also, I'm storing your ip to prevent spamming.<br>But don't worry, I'll remove it after one minute.<br>(unless you use a spamming bot, then I'll remove it after a day)");
            $("#info").fadeTo(500,1);
            break;
          case 24:
            $("#info").fadeTo(10000,0);
            break;
        }
      }

      function request(){
        post('request');
      }

      function post($action) {
        $oldNumber=$("#number").html();
        $oldNumber=parseInt($oldNumber);
        $.ajax({
          url: 'action.php',
          type: 'POST',
          data: {
            action: $action,
          },
          success: function(result) {
            switch(result){
              case "0":
                $("body").css("background","black");
                $txtColor="white";
                break;
              case "420":
                $("body").css("background","url(http://i.imgur.com/dpAHscB.png)");
                $("body").css("background-size","cover");
                $txtColor="rgb(205,42,0)";
                break;
              case "666":
                $("body").css("background","url(http://i.imgur.com/pvdccdz.jpg)");
                $("body").css("background-size","cover");
                break;
              case "1337":
                $("body").css("background","url(http://i.imgur.com/gHAD3Ta.jpg)");
                $("body").css("background-size","cover");
                $txtColor="rgb(0,255,0)";
                break;
              default:
                $("body").css("background","");
                $txtColor="black";
            }
            $("#info").css("color",$txtColor);
            if($oldNumber<result){
              animate(1.1,"green");
            }
            if($oldNumber>result) {
              animate(0.9,"red");
            }
            $("#number").html(result);
          }
        });
      }

      function animate($zoom,$color){
        $("#number").stop();
        $("#number").css("zoom",$zoom);
        $("#number").css("color",$color);
        $("#number").animate({zoom:1,color:$txtColor},300);
      }
    </script>