html backbone.js colorpicker

backbone.js の練習で作った colorpicker です。
もうちょっとうまいやり方がある気がします。
クリックで背景色が変わって
ダブルクリックで、パレットの色を変更できます。
localstorage にパレットを保存します。
backbone.js の例の中のひとつとしてみてください。
（荒削りですが）

```colorpicker.html
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
      <!--
      a.colorpicker
      {
      display: block;
      text-decoration:none;
      width: 12px;
      height: 12px;
      border: solid 1px #888888;
      }
      a.colorpicker:hover
      {
      border: solid 1px #aaaaaa;
      }
      div.class01
      {
      position: absolute;
      top:17px; left:20px;
      display: none;
      }
      a.class02
      {
      position: relative;
      top: 0px; left: 0px;
      }
      -->
    </style>
    <script language="JavaScript" type="text/javascript" src="javascripts/jquery-1.9.0.min.js"></script>
    <script language="JavaScript" type="text/javascript" src="javascripts/underscore-min.js"></script>
    <script language="JavaScript" type="text/javascript" src="javascripts/backbone-min.js"></script>
    <script language="JavaScript" type="text/javascript" src="javascripts/backbone.localStorage-min.js"></script>
    <script type="text/javascript" language="JavaScript">
      <!--
      function showColorpicker() {
        document.getElementById('pickupcolor').style.display = 'block';
        document.getElementById('changecolor').style.display = 'none';
      }
      //-->
    </script>
  </head>
  <body>
<script type="text/template" id="colorink">
 <a href='#' class='colorpicker' style='background-color: <%- name %>'></a> 
</script>

    <a href="#" class="class02" onclick="showColorpicker();"> ■ </a>

    <div style="position:absolute;display:none;float:left;border:1px solid #000000;" id="pickupcolor">
      <table>
        <tr>
          <td colspan="8" align="right">
          <input type="button" value="×" style="width:16px;height:16px;padding: 0px;" onclick="document.getElementById('pickupcolor').style.display='none';">
          </td>
        </tr>
        <tbody id="palette">
        </tbody>
      </table>

      <div style="position:absolute;none;float:left;border:1px solid #000000;" id="changecolor">
        <table>
          <tr>
            <td colspan="2" align="right">
            <input type="button" value="×" style="width:16px;height:16px;padding: 0px;" onclick="document.getElementById('changecolor').style.display='none';">
            </td>
          </tr>
          <tr>
            <td>
            <input type="text" value="#ffffff" id="inkcode" onchange="setColor(this);" />
            </td>
            <td>
            <input type="button" value="OK" onclick="changeInk(document.getElementById('inkcode').value);document.getElementById('changecolor').style.display='none';"/>
            </td>
          </tr>
        </table>
      </div>

    </div>

    <script src="javascripts/colorpicker.js"></script>
  </body>
</html>
```

```colorpicker.js
var colorarray = 
[
  ['#000000',1,'black']
  ,['#0000CD',1,'mediumblue']
  ,['#0000FF',1,'blue']
  ,['#006400',1,'darkgreen']
  ,['#008000',1,'green']
  ,['#008080',1,'teal']
  ,['#008B8B',1,'darkcyan']
  ,['#00BFFF',1,'deepskyblue']
  ,['#00CED1',1,'darkturquoise']
  ,['#00FA9A',1,'mediumspringgreen']
  ,['#00FF00',1,'lime']
  ,['#00FF7F',1,'springgreen']
  ,['#00FFFF',1,'aqua']
  ,['#00FFFF',1,'cyan']
  ,['#8B0000',1,'darkred']
  ,['#800000',1,'maroon']
  ,['#F08080',1,'lightcoral']
  ,['#BC8F8F',1,'rosybrown']
  ,['#CD5C5C',1,'indianred']
  ,['#B22222',1,'firebrick']
  ,['#A52A2A',1,'brown']
  ,['#FFE4E1',1,'mistyrose']
  ,['#FA8072',1,'salmon']
  ,['#FF6347',1,'tomato']
  ,['#E9967A',1,'darksalmon']
  ,['#FF7F50',1,'coral']
  ,['#FF4500',1,'orangered']
  ,['#FFA07A',1,'lightsalmon']
  ,['#A0522D',1,'sienna']
  ,['#FFF5EE',1,'seashell']
  ,['#8B4513',1,'saddlebrown']
  ,['#F4A460',1,'sandybrown']
  ,['#FFDAB9',1,'peachpuff']
  ,['#CD8541',1,'peru']
  ,['#FAF0E6',1,'linen']
  ,['#D2691E',1,'chocolate']
  ,['#FFE4C4',1,'bisque']
  ,['#FF8C00',1,'darkorange']
  ,['#DEB887',1,'burlywood']
  ,['#D2B48C',1,'tan']
  ,['#FAEBD7',1,'antiquewhite']
  ,['#FFDEAD',1,'navajowhite']
  ,['#FFEBCD',1,'blanchedalmond']
  ,['#FFEFD5',1,'papayawhip']
  ,['#FFE4B5',1,'moccasin']
  ,['#FFA500',1,'orange']
  ,['#FDF5E6',1,'oldlace']
  ,['#F5DEB3',-1,'wheat']
  ,['#FFFAF0',-1,'floralwhite']
  ,['#B8860B',-1,'darkgoldenrod']
  ,['#DAA520',-1,'goldenrod']
  ,['#FFF8DC',-1,'cornsilk']
  ,['#FFD700',-1,'gold']
  ,['#FFFACD',-1,'lemonchiffon']
  ,['#EEE8AA',-1,'palegoldenrod']
  ,['#F0E68C',-1,'khaki']
  ,['#BDB76B',-1,'darkkhaki']
  ,['#FFFFF0',-1,'ivory']
  ,['#FFFFE0',-1,'lightyellow']
  ,['#F5F5DC',-1,'beige']
  ,['#FAFAD2',-1,'lightgoldenrodyellow']
  ,['#FFFF00',-1,'yellow']
  ,['#808000',-1,'olive']
  ,['#9ACD32',-1,'yellowgreen']
  ,['#6B8E23',-1,'olivedrab']
  ,['#556B2F',-1,'darkolivegreen']
  ,['#B1FF2F',-1,'greenyellow']
  ,['#7FFF00',-1,'chartreuse']
  ,['#7CFC00',-1,'lawngreen']
  ,['#F0FFF0',-1,'honeydew']
  ,['#98FB98',-1,'palegreen']
  ,['#90EE90',-1,'lightgreen']
  ,['#32CD32',-1,'limegreen']
  ,['#8FBC8F',-1,'darkseagreen']
  ,['#228B22',-1,'forestgreen']
  ,['#3CB371',-1,'mediumseagreen']
  ,['#2E8B57',-1,'seagreen']
  ,['#F5FFFA',-1,'mintcream']
  ,['#66CDAF',-1,'mediumaquamarine']
  ,['#7FFFD4',-1,'aquamarine']
  ,['#40E0D0',-1,'turquoise']
  ,['#20B2AA',-1,'lightseagreen']
  ,['#48D1CC',-1,'mediumturquoise']
  ,['#FAFFFF',-1,'azure']
  ,['#E0FFFF',-1,'lightcyan']
  ,['#2F4F4F',-1,'darkslategray']
  ,['#AFEEEE',-1,'paleturquoise']
  ,['#5F9EA0',-1,'cadetblue']
  ,['#B0E0E6',-1,'powderblue']
  ,['#ADD8E6',-1,'lightblue']
  ,['#87CEEB',-1,'skyblue']
  ,['#87CEFA',-1,'lightskyblue']
  ,['#F0F8FF',-1,'aliceblue']
  ,['#4682B4',-1,'steelblue']
  ,['#1E90FF',-1,'dodgerblue']
  ,['#778899',-1,'lightslategray']
  ,['#708090',-1,'slategray']
  ,['#B0C4DE',-1,'lightsteelblue']
  ,['#6495ED',-1,'cornflowerblue']
  ,['#4169E1',-1,'royalblue']
  ,['#FF0000',0,'red']
];
/*
 * 色名が正しいかどうか
 * str : 色名
 * array : 使用できる色名の配列
 */
function colorformat(str,array)
{
    if(str.match(/^#[0-9|a-f|A-F]{6}/))
      return true;
    else if(str.match(/^#[0-9|a-f|A-F]{3}/))
      return true;
    else
      for(i=0;i<array.length;i++)
            if(str.toLowerCase() == array[i][2])
                return true;
    return false;
}
function setColor(obj)
{
  if(colorformat(obj.value,colorarray))
  {
    obj.style.backgroundColor = obj.value;
  }
}
function changeInk(inkcode)
{
  if(colorformat(inkcode,colorarray))
  {
    colorbuffer.model.set('code',inkcode);
    colorbuffer.model.set('name',inkcode);
    colorbuffer.el.childNodes[1].style.backgroundColor = inkcode;
    colorbuffer.model.save();
  }
}
/*
 * use backbone.js
 */
var colorbuffer;
var colors;
(function(){
  /* model */
  var Color = Backbone.Model.extend({
    defaults:
    { 
        code: "#ffffff"
        ,order: -1
        ,name: "white"
    }
  });
  /* model view */
  var ColorView = Backbone.View.extend({
    tagName: 'td'
    ,events:{
      "dblclick": "showChangeInkColor"
      ,"click": "setColor"
    }
    ,showChangeInkColor: function(){
      colorbuffer = this;
      $('#changecolor').show();
    }
    ,setColor: function(){
      console.log(this.model.get('code'));
      $('body').css('background', this.model.get('code'));
    }
    ,template: _.template($('#colorink').html())
    ,render: function()
    {
      var template = this.template(this.model.toJSON());
      this.$el.html(template);
      return this;
    }
  });
  /* collection */
  var ColorList = Backbone.Collection.extend({
    model: Color
    ,localStorage: new Backbone.LocalStorage('items')
  })
  colorList = new ColorList;
  /* collection view */
  var ColorsView = Backbone.View.extend({
    tagName: 'tr'
    ,initialize: function()
    {
      colorList.fetch();
    }
    ,render: function()
    {
      this.collection.each(function(color)
      {
        var colorView = new ColorView({model: color});
        this.$el.append(colorView.render().el);
      },this);
      return this;
    }
  });
  /* make collection */
  colorList.fetch();
  if(0 == colorList.length)
  {
    for(i=0;i<colorarray.length;i++)
    {
      if(-1 < colorarray[i][1])
      {
        colorList.create({
          code:colorarray[i][0]
          ,order:colorarray[i][1]
          ,name:colorarray[i][2]
        });
      }
    }
    colorList.fetch();
  }
  //tr の中に td ８ のテーブル……
  var colorsView = new ColorsView({collection: colorList});
  var str = colorsView.render().el;
  var tds = $(str).find('td');
  var tr;
  for(i=0;i<40;i++)
  {
    if(i % 8 == 0)
      tr = document.createElement('tr');
    tr.appendChild(tds[i]);
    if(i % 8 == 7)
    {
      $('#palette').append(tr);
    }
  }
})();//end of $function 

```