Brightness Calc jQuery

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Color Brightness jQuery Test</title>
  <script src="rgbcolor.js"></script><!-- http://www.phpied.com/rgb-color-parser-in-javascript/ -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">
      $(function() {
        $("form").submit(function(e) {
          e.preventDefault();
          $("#calculate").click();
        });

        $("#calculate").click(function(e) {
          e.preventDefault();
          var BGColor = $("#color").val();
          var color = new RGBColor(BGColor);
          if (color.ok) { // 'ok' is true when the parsing was a success
            var brightness = calcBrightness(color);
            var foreColor = (brightness < 130) ? "#FFFFFF" : "#000000";

            var $span = $("<span>Some Text!!!</span>").css({color:foreColor, background:color.toHex()});

            $("#target_container").append($span);

          } else {
            alert('Invalid color!');
          }
          $("#color").val("");
        });
      });

      // http://alienryderflex.com/hsp.html
      function calcBrightness(color) {
        return Math.sqrt(
           color.r * color.r * .299 +
           color.g * color.g * .587 +
           color.b * color.b * .114);
      }
  </script>
  <style type="text/css">
    #target_container span { padding:30px; color:#fff; display:block; width:100px; background:#000; float:left; margin:10px;}
  </style>
</head>
<body>
  <form>
    <input type="text" id="color" value="#000000" />
    <input type="button" id="calculate" value="calculate" />
    <div id="target_container"></div>
  </form>


</body>
</html>