//<![CDATA[
    
    $(document).ready(function(){
    
      $("#yet-another-div").addClass("nailhover");
      document.onselectstart = function () { return false; };
      
      var draw = false;
      var prevX = false;
      var prevY = false;
      var canvas = document.getElementById("canvas");
      var cx = canvas.getContext("2d");
      cx.canvas.width  = window.innerWidth;
      cx.canvas.height = window.innerHeight;
      //cx.lineCap = "round";  
      
      if (localStorage && localStorage.getItem("PTcanvas")) { 
        var img = new Image();
        img.onload = function(){
          cx.drawImage(this, 0, 0);
        };
        img.src = localStorage.getItem("PTcanvas");
      }
      
      $("#reload").click(function() {
        if (localStorage) localStorage.clear();
      });

      $(".button").mousemove(function(e) {
        $("#mover").css({backgroundPosition: (e.pageX-256)+"px "+(e.pageY-256)+"px" });
      });
      
      $(".button").hover(function(){
        $(this).find("img.buttonimage").stop().animate({
          opacity: 1
        }, 300);
        $("body").stop().animate({
          backgroundColor: $(this).find("img.buttonimage").data("color") 
        }, 500);
      }, function(){
        $(this).find("img.buttonimage").stop().animate({
          opacity: 0 
        }, 300);
        $("#mover").css({ backgroundPosition: "-512px 0px" });
      });    
      
      $(document).mousedown(function(){
        cx.lineWidth = 1;
        draw = true;
        $("#yet-another-div").removeClass("nailhover").addClass("naildrag");
      });

      $(document).mouseup(function(){
        draw = false;
        $("#yet-another-div").removeClass("naildrag").addClass("nailhover");
        prevX = false;
        if (localStorage) localStorage.setItem("PTcanvas", canvas.toDataURL());
        //createCookie("ptc-test", "ok", 90);
        //createCookie("ptc-image", encodeURIComponent(canvas.toDataURL()), 90);
        //alert(encodeURIComponent(canvas.toDataURL())+" --- "+readCookie("ptc-image"));
      });

      $(document).mousemove(function(e) {
        if (draw) {
          if (prevX) {
            cx.beginPath();
            cx.moveTo(e.pageX,e.pageY);
            cx.lineTo(prevX,prevY);
            cx.strokeStyle = "rgba(255,255,255,0.2)";
            cx.stroke();
            cx.lineWidth = Math.max(cx.lineWidth + 0.44 - Math.random(), 0.2);
            cx.beginPath();
            cx.moveTo(e.pageX,e.pageY-1);
            cx.lineTo(prevX,prevY-1);
            cx.strokeStyle = "rgba(0,0,0,0.3)";
            cx.stroke();
          } 
          prevX = e.pageX;
          prevY = e.pageY;
        }    
      });      
      
    });
    
    //]]>