Gay-o-meter

<!DOCTYPE html>
<html>

 <body onLoad='' background='http://img2.findthebest.com/sites/default/files/2307/media/images/t2/Light_Sky_Blue_429603_i0.png'>

      <div id='meter_container'>

       <div id='stick'></div>
       <div id='onoff'>OFF</div>

        <div id='scale' style=''>

         <div id='one' class='scalee' style='left:0;background-color:#FFCCCC'></div>

         <div id='two' class='scalee' style='left:100px;background-color:#FF9999'></div>

         <div id='three' class='scalee' style='left:200px;background-color:#FF6666'></div>

         <div id='four' class='scalee' style='left:300px;background-color:#FF3333'></div>

         <div id='five' class='scalee' style='left:400px;background-color:#FF0000'></div>

        </div>

         <input type='text' id='name'>

      </div>


    <img src='http://image.spreadshirt.com/image-server/v1/designs/10494533,width=178,height=178/I-Love-Gays.png' id='head' style=''>

      <canvas id='graph' style='border:1px solid;background-color:yellow' width='400' height='180'></canvas>


     <style>

      #meter_container
      {
       width:500px;
       height:210px;
       position:absolute;
       top:0;left:0;bottom:0;right:0;
       border:1px solid;
       margin:auto;
       transition:opacity 0.4s;
      }

      #stick
      {
       width:1px;
       height:200px;
       position:absolute;
       left:50%;
       border:2px solid;
       background-color:black;
       -webkit-transform-origin: bottom left;
       transition:0.2s;
       border-radius:50% 50% 0 0;
      }

      #scale
      {
       width:500px;
       height:10px;
       position:relative;
       left:0;
       z-index:-1;
      }

      .scalee
      {
       width:100px;
       height:10px;
       position:absolute;
       text-align:center;
       font-size:85%;
       font-family: Century Gothic, sans-serif;
       transition:height 0.4s;
      }

      #name
      {
       width:500px;
       height:20px;
       position:absolute;
       border:1px solid;
       left:0;
       top:-30px;
       text-align:center;
       font-family: Century Gothic, sans-serif;
      }

      #head
      {
       width:200px;
       height:200px;
       position:absolute;
       right:0;left:0;margin:auto;
      }

      #state
      {
       width:100px;
       height:50px;
       position:absolute;
       right:0;left:0;margin:auto;
       top:-100px;
       font-size:120%;
       font-family: Century Gothic, sans-serif;
      }

      #onoff
      {
       width:80px;
       height:20px;
       background-color:red;
       box-shadow:1px 1px 5px #888888;
       text-align:center;
       font-size:105%;
       font-color:white;
       font-family: Tahoma, Geneva, sans-serif;
       color:white;
       border-color:black;
       padding:5px;
       cursor:pointer;
       border-radius:20px;
       vertical-align:middle;
       transition:background-color 2s;
       position:absolute;
       top:-80px;
       left:210px;
      }

      #onoff:active
      {
       background-color:#FF66FF;
      }

     </style>


     <script>

      var started = false;
      var go = false;
      var index = 0;
      var obj;
      var objt;
      var objtt;
      var amt;
      var c = 0;


      function start()
      {

       var n = document.getElementById('name').value;

       var amount = Math.floor(Math.random() * (90 - (-90) + 1)) + (-90);
       var stick = document.getElementById('stick');

        if(n == 'Janci' || n == 'janci' || n == 'Janči' || n == 'janči')
         amount = 90;

        if(n == 'Drew')
         amount = -90;
         amt = amount;

         setupg(10,10);

        stick.style.webkitTransform = 'rotate('+amount+'deg)';

       obj=setInterval(function dynamic()
       {

        var slightmove = Math.floor(Math.random() * (1 - (10) + 1)) + (10);

         stick.style.webkitTransform = 'rotate('+(amount+slightmove)+'deg)';

         setTimeout(function back()
         {

          stick.style.webkitTransform = 'rotate('+(amount-slightmove)+'deg)';
         },200);
       },400);
      }



      function randomize(min,max)
      {
       return Math.floor(Math.random() * (max - (min) + 1)) + (min);
      }


       document.getElementById('onoff').onmousedown = function(e)
       {

        objt = setTimeout(function enough(){

        if(!started)
        {

         start();
         started = true;
          document.getElementById('one').style.height = 210+'px';
          setTimeout(function go(){document.getElementById('two').style.height = 210+'px'},100);;
          setTimeout(function go(){document.getElementById('three').style.height = 210+'px'},200);;
          setTimeout(function go(){document.getElementById('four').style.height = 210+'px'},300);;
          setTimeout(function go(){document.getElementById('five').style.height = 210+'px'},400);;

           document.getElementById('one').innerHTML = 'Hetero';
           document.getElementById('two').innerHTML = 'Sometimes thinks about men';
           document.getElementById('three').innerHTML = 'Touches men too usually';
           document.getElementById('four').innerHTML = 'Kisses men';
           document.getElementById('five').innerHTML = "Gay'o fella";

           document.getElementById('onoff').innerHTML = 'ON';
           document.getElementById('onoff').style.backgroundColor = '#FF66FF';

            return;
        }
        },2000);
       }


       document.getElementById('onoff').onmouseup = function(e)
       {

        clearInterval(objt);
       }

       function setupg(bot,gap)
       {

        var g = document.getElementById('graph');
        var ctx = g.getContext('2d');

        var boat = g.height - bot;
        var up = (90 - amt) - bot;

         ctx.strokeStyle = '#ff0000';
         ctx.lineWidth = 2;
         ctx.fillText('Graph beta',20,20);
         ctx.fillRect(g.width-5,up-5,5,5);
         ctx.beginPath();

         ctx.moveTo(0,boat);
         ctx.lineTo(gap/2,up);
         ctx.lineTo(gap,boat);
         ctx.lineTo(g.width,boat);

         ctx.stroke();

        objtt = setInterval(function move()
        {

         c = c + 10;

          g.width = g.width;

         ctx.strokeStyle = '#ff0000';
         ctx.fillText('Graph beta',20,20);
         ctx.fillRect(g.width-5,up-5,5,5);
         ctx.lineWidth = 2;

         ctx.moveTo(0,boat);
         ctx.lineTo(c,boat);
         ctx.lineTo(gap/2+c,up);
         ctx.lineTo((gap)+c,boat);
         ctx.lineTo(g.width,boat);

          ctx.stroke();

           if(c >= g.width+1)
           {

            clearInterval(objtt);
            c=0;
            setupg(10,10);
           }

        },100);
       }


     </script>

 </body>

</html>