fixed #13 now sketchpad will work under jQuery.noConflict

.gitignore

@@ -0,0 +1 @@
+_site

README.md

@@ -0,0 +1,17 @@
+# Raphael SketchPad Version 0.5.1
+
+Raphael Sketchpad is a simple drawing editor that you can easily include with your forms.
+It is similar to Mai'Nada.net's InputDraw, but does not require Flash.
+It is built on top of the Raphael Javascript vector graphics library.
+
+Raphael Sketchpad requires these Javascript libraries: Raphael, jQuery, and JSON.stringify.
+
+http://ianli.github.io/raphael-sketchpad/
+
+Copyright (c) 2011 Ian Li (http://ianli.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

_includes/analytics.html

@@ -0,0 +1,13 @@
+<!-- Google Analytics -->
+<script src='http://www.google-analytics.com/urchin.js' type='text/javascript'></script>
+<script type='text/javascript'>
+  _uacct = 'UA-317324-1';
+  urchinTracker();
+</script>
+<!-- Start of StatCounter Code -->
+<script type="text/javascript">
+  var sc_project=6453565; 
+  var sc_invisible=1;
+  var sc_security="285089de";
+</script>
+<script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script><noscript><div class="statcounter"><a class="statcounter" href="http://www.statcounter.com/"><img class="statcounter" src="http://c36.statcounter.com/3249429/0/8b3a3ada/0/" alt="website statistics" /></a></div></noscript>

_includes/editing.html

@@ -0,0 +1,254 @@
+<div class="reference span-24">
+  <h2>Editing Actions and Pen Properties</h2>
+
+  <div class="span-8">
+    {% capture editor_js %}
+<div id="editor" class="widget" style="height:260px;"></div>
+<input type="hidden" id="data2" name="data2" />
+
+<div class="clear widget_actions span-2">
+  <div class="_title">Color</div>
+  <div id="editor_black" class="selected">Black</div>
+  <div id="editor_red">Red</div>
+</div>
+<div class="widget_actions span-2">
+  <div class="_title">Width</div>
+  <div id="editor_thin" class="selected">Thin</div>
+  <div id="editor_thick">Thick</div>
+</div>
+<div class="widget_actions span-2">
+  <div class="_title">Opacity</div>
+  <div id="editor_solid" class="selected">Solid</div>
+  <div id="editor_fuzzy">Fuzzy</div>
+</div>
+<div class="widget_actions span-2 last">
+  <div id="editor_undo" class="disabled">Undo</div>
+  <div id="editor_redo" class="disabled">Redo</div>
+  <div id="editor_clear" class="disabled">Clear</div>
+</div>
+<div class="clear"></div>
+<div class="widget_actions span-4">
+  <div id="editor_draw_erase">Draw</div>
+</div>
+<div class="widget_actions span-4 last">
+  <div id="editor_animate">Animate!</div>
+</div>
+
+<script type="text/javascript">
+  $(document).ready(function() {
+    var sketchpad = Raphael.sketchpad("editor", {
+      height: 260,
+      width: 260,
+      editing: true // true is default
+    });
+
+    // When the sketchpad changes, update the input field.
+    sketchpad.change(function() {
+      $("#data2").val(sketchpad.json());
+    });
+
+    sketchpad.strokes([{
+      "type":"path",
+      "path":[["M",10,10],["L",90,90]],
+      "fill":"none",
+      "stroke":"#000000",
+      "stroke-opacity":1,
+      "stroke-width":5,
+      "stroke-linecap":"round",
+      "stroke-linejoin":"round"
+    }]);
+
+    function enable(element, enable) {
+      if (enable) {
+        $(element).removeClass("disabled");
+      } else {
+        $(element).addClass("disabled");
+      }
+    };
+
+    function select(element1, element2) {
+      $(element1).addClass("selected");
+      $(element2).removeClass("selected");
+    }
+
+    $("#editor_undo").click(function() {
+      sketchpad.undo();
+    });
+    $("#editor_redo").click(function() {
+      sketchpad.redo();
+    });
+    $("#editor_clear").click(function() {
+      sketchpad.clear();
+    });
+    $("#editor_animate").click(function() {
+      sketchpad.animate();
+    });
+
+    $("#editor_thin").click(function() {
+      select("#editor_thin", "#editor_thick");
+      sketchpad.pen().width(5);
+    });
+    $("#editor_thick").click(function() {
+      select("#editor_thick", "#editor_thin");
+      sketchpad.pen().width(15);
+    });
+    $("#editor_solid").click(function() {
+      select("#editor_solid", "#editor_fuzzy");
+      sketchpad.pen().opacity(1);
+    });
+    $("#editor_fuzzy").click(function() {
+      select("#editor_fuzzy", "#editor_solid");
+      sketchpad.pen().opacity(0.3);
+    });
+    $("#editor_black").click(function() {
+      select("#editor_black", "#editor_red");
+      sketchpad.pen().color("#000");
+    });
+    $("#editor_red").click(function() {
+      select("#editor_red", "#editor_black");
+      sketchpad.pen().color("#f00");
+    });
+    $("#editor_draw_erase").toggle(function() {
+      $(this).text("Erase");
+      sketchpad.editing("erase");
+    }, function() {
+      $(this).text("Draw");
+      sketchpad.editing(true);
+    });
+
+    function update_actions() {
+      enable("#editor_undo", sketchpad.undoable());
+      enable("#editor_redo", sketchpad.redoable());
+      enable("#editor_clear", sketchpad.strokes().length > 0);
+    }
+
+    sketchpad.change(update_actions);
+
+    update_actions();
+  });
+</script>
+{% endcapture %}
+
+      {{ editor_js }}
+  </div>
+
+  <div class="span-8">
+    <h3>Editing Actions</h3>
+
+    <p>
+      The editor supports various editing actions.
+    </p>
+
+    <div class="span-2">
+      <h4>clear</h4>
+    </div>
+    <div class="span-6 last">
+      {% capture js %}
+// Clear the editor.
+editor.clear();
+{% endcapture %}
+
+      <pre class="code">{{ js | strip | escape }}</pre>
+  </div>
+
+  <div class="span-2">
+    <h4>undo</h4>
+  </div>
+  <div class="span-6 last">
+    {% capture js %}
+// Undo the last stroke.
+editor.undo();
+{% endcapture %}
+
+    <pre class="code">{{ js | strip | escape }}</pre>
+  </div>
+
+  <div class="span-2">
+    <h4>undoable</h4>
+  </div>
+  <div class="span-6 last">
+    {% capture js %}
+// True if can undo.
+editor.undoable();
+{% endcapture %}
+
+    <pre class="code">{{ js | strip | escape }}</pre>
+  </div>
+
+  <div class="span-2">
+    <h4>redo</h4>
+  </div>
+  <div class="span-6 last">
+    {% capture js %}
+// Redo the undone stroke.
+editor.redo();
+{% endcapture %}
+
+    <pre class="code">{{ js | strip | escape }}</pre>
+  </div>
+
+  <div class="span-2">
+    <h4>redoable</h4>
+  </div>
+  <div class="span-6 last">
+    {% capture js %}
+// True if can redo.
+editor.redoable();
+{% endcapture %}
+
+        <pre class="code">{{ js | strip | escape }}</pre>
+    </div>
+  </div>
+
+  <div class="span-8 last">
+    <h3>Pen Properties</h3>
+
+    <p>
+      The pen has various properties that you can set.
+    </p>
+
+    <div class="span-2">
+      <h4>color</h4>
+    </div>
+    <div class="span-6 last">
+      {% capture js %}
+// #ff0000 or #f00
+pen.color("#ff0000");
+{% endcapture %}
+
+      <pre class="code">{{ js | strip | escape }}</pre>
+    </div>
+
+    <div class="span-2">
+      <h4>width</h4>
+    </div>
+    <div class="span-6 last">
+      {% capture js %}
+  // min = 1, max = 1000
+  pen.width(10);
+  {% endcapture %}
+
+      <pre class="code">{{ js | strip | escape }}</pre>
+    </div>
+
+    <div class="span-2">
+      <h4>opacity</h4>
+    </div>
+    <div class="span-6 last">
+      {% capture js %}
+  // min = 0, max = 1.0
+  pen.opacity(10);
+  {% endcapture %}
+
+      <pre class="code">{{ js | strip | escape }}</pre>
+    </div>
+  </div>
+
+  <div class="span-24">
+    <a href="javascript:void(0);" onclick="$(this).next('pre.code').toggle();">Show source</a>
+    <pre class="code"
+        style="display:none">{{ editor_js | strip | escape }}</pre>
+  </div>
+
+  <hr class="space">
+</div>

_includes/header.html

@@ -0,0 +1,31 @@
+<div id="hd" class="span-24">
+  <div class="span-16">
+    <div style="float:right;">
+      by <a href="http://ianli.com">Ian Li</a>
+    </div>
+    <h1>Raphael SketchPad</h1>
+  </div>
+
+  <div class="clear span-16">
+    <p>
+      Raphael Sketchpad is a simple drawing editor that you can easily include with your forms.<br/>
+      It is similar to <a href="http://www.mainada.net/inputdraw">Mai'Nada.net's InputDraw</a>,
+      but does not require Flash.<br/>
+      It is built on top of the <a href="http://raphaeljs.com">Raphael</a>
+      Javascript vector graphics library.
+    </p>
+    <p>
+      Raphael Sketchpad requires these Javascript libraries:
+      <a href="http://raphaeljs.com/">Raphael 2.0.1</a>,
+      <a href="http://jquery.com/">jQuery</a>, and
+      <a href="http://www.json.org/js.html">JSON.stringify</a>.
+    </p>
+  </div>
+  <div class="span-8 last" style="text-align:center;">
+    <div style="margin-bottom:5px;border:2px solid #e3e3e3;border-width:0 2px 3px 0;">
+      <a id="download" href="javascripts/raphael.sketchpad.js">Download 0.5.1</a>
+    </div>
+    or visit the
+    <a href="http://github.com/ianli/raphael-sketchpad">GitHub project page</a>.
+  </div>
+</div>

_includes/how-it-works.html

@@ -0,0 +1,60 @@
+<h2 class="clear">How It Works</h2>
+
+<div class="span-8">
+  <h3>Editor</h3>
+  <p>
+    Draw a sketch below.
+  </p>
+  <div style="height:260px;" class="widget">
+    <div id="sketchpad_editor"></div>
+  </div>
+</div>
+
+<div class="span-8">
+  <h3>Result</h3>
+  <p>
+    The sketch is stored as JSON in an input field.
+  </p>
+  <form action="" method="post" onsubmit="return false;">
+    <textarea id="input1" name="input1" style="margin:0;width:250px;height:250px;"></textarea>
+  </form>
+</div>
+
+<div class="span-8 last">
+  <h3>Viewer</h3>
+  <p>
+    <a href="javascript:void(0);" id="update_sketchpad_viewer">Click</a>
+    to display the JSON data in the viewer.
+  </p>
+  <div style="height:260px;" class="widget">
+    <div id="sketchpad_viewer"></div>
+  </div>
+</div>
+
+<script type="text/javascript">
+  $(document).ready(function() {
+    var strokes = [];
+
+    var sketchpad_editor = Raphael.sketchpad("sketchpad_editor", {
+      width: 260,
+      height: 260,
+      editing: true,  // true is default
+      strokes: strokes
+    });
+    sketchpad_editor.change(function() {
+      $("#input1").val(sketchpad_editor.json());
+    });
+
+    var sketchpad_viewer = Raphael.sketchpad("sketchpad_viewer", {
+      width: 260,
+      height: 260,
+      editing: false
+    });
+
+    $("#update_sketchpad_viewer").click(function() {
+      sketchpad_viewer.json($('#input1').val());
+    });
+  });
+</script>
+
+<hr class="space" />