jQuery color box complete

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Color box test</title>

<link rel='stylesheet' type='text/css' href='css/syronex-colorpicker.css'  />

<script type='text/javascript' src="js/jquery-1.4.2.min.js"></script>
<script type='text/javascript' src='js/syronex-colorpicker.js'></script>


</head>


<script>

var toggled=false;
var selectedColor;
function toggle_box(box){
  toggled=true;
  $(box).animate({
    height: 'toggle'
  }, 400, function() {
    // Code that will run after the click
  });
}

function lastChar(string){
    return string.substring(string.length-1);
}

$(document).ready(function() {

    $('.boxColorSelect').click(function() {
      var selectedBox = $(this).attr("id");
      toggle_box('#colorBox'+lastChar(selectedBox));
    });

    $('.colorBox').colorPicker({
      defaultColor: 0, // index of the default color (optional)
      columns: 17,     // number of columns (optional)
      color: ['transparent','#E0ECFF', '#DFE2FF','#E0D5F9','#FDE9F4','#FFE3E3','#5A6986','#206CFF','#0000CC','#5229A3','#854F61','#CC0000','#FFF0E1','#FADCB3','#F3E7B3','#FFFFD4','#F9FFEF','#F1F5EC','#EC7000','#B36D00','#AB8B00','#636330','#64992C','#006633'], // list of colors (optional)
      // click event - selected color is passed as arg.
      click:function(c){
        if (toggled) {
            selectedColor = c;
        }
      }
    });

    $('.colorBox').click(function() {
      var currentColorBox = $(this).attr("id");
      $('#boxShow'+lastChar(currentColorBox)).css("background",selectedColor);
      toggle_box('#'+currentColorBox);
    });


});
</script>


<body>
    <div id="boxShow1" class="boxColorSelect" style="width:20px; height:20px; border:1px solid black; position:relative;"></div>
    <div id="colorBox1" class="colorBox" style="background-color:#fff; display:none;"></div>

    <div id="boxShow2" class="boxColorSelect" style="width:20px; height:20px; border:1px solid black; position:relative;"></div>
    <div id="colorBox2" class="colorBox" style="background-color:#fff; display:none;"></div>

    <div id="boxShow3" class="boxColorSelect" style="width:20px; height:20px; border:1px solid black; position:relative;"></div>
    <div id="colorBox3" class="colorBox" style="background-color:#fff; display:none;"></div>

    <div id="boxShow4" class="boxColorSelect" style="width:20px; height:20px; border:1px solid black; position:relative;"></div>
    <div id="colorBox4" class="colorBox" style="background-color:#fff; display:none;"></div>
</body>
</html>