<!--
  </td><td>
  -->
          <div id="patterns">
  <!--
              <h2>choose a pattern:</h2>
  -->
  <!--
              <br/>
  -->
              <br/>
              <span>
                  canvas:
                  <br/>
                  <canvas id="pong" width="150" height="150" onclick="processor.updatePattern(this, true)"/>
              </span>
              <span>
                  text:
                  <br/>
                  <canvas id="yourtext" width="150" height="150" onclick="processor.updatePattern(this, false); document.getElementById('message').focus()"/>
                  <input id="message"/>
              </span>
              <span>
                  drawing:
                  <br/>
                  <canvas id="yourdrawing" width="150" height="150" onclick="processor.updatePattern(this, false)"/>
                  <input type="button" value="clear" onclick="processor.clearPainter()"/>
                  3 </span>
              <br />
              <span>
                  video:
                  <br/>
                  <video width="150" height="150" id="tiny_video" controls="true" src="showreel-create.ogg" onclick="processor.updatePattern(this, true)" autobuffer="true" tabindex="0"/>
              </span>
              <span>
                  image:
                  <br/>
                  <img width="150" height="150" id="token" src="@walk.gif" onclick="processor.updatePattern(this, true)" pattern="true"/>
              </span>
              <span>
                  image:
                  <br/>
                  <img width="150" height="150" id="ff" src="soutine.jpg" onclick="processor.updatePattern(this, false)"/>
              </span>
          </div>
          <br/>
  </td>
  </tr>
  </table>