(function() {

jQuery.fn.bgcolor_pick = function(opts){

// 引数のデフォルト値を渡す {}内は、カンマ（,）で区切って複数可能
opts = jQuery.extend({
  update_url: "style_update.php",
  onOpen: function(){},
  onClose: function(){}
  },opts);

this.each( function() {
  var target = $(this);
  var id = target.attr('id');
  
  target.click( function() {
    var form = $("<form class='flora'></form>")
      .appendTo("body")
      .append("<div class='picker'></div>");
    var picker = $(".picker", form );
    var before = $('body').css("backgroundColor");
    form.dialog({
      width: 235,
      height: 270,
      title: '背景色を変更する',
      modal: true,
      buttons: {
        'OK': function() {
        var dialog = $(this);
          $.post( opts.update_url, $.param({id:id,value:picker.get(0).farbtastic.color}), function(){
            dialog.dialog('close');
          });
        },
        'キャンセル': function() {
          $(this).dialog('close');
          $('body').css({backgroundColor: before});
        }
      },
      open: function() {
        opts.onOpen.apply($(this));
        picker.farbtastic(function(color){
          $('body').css({backgroundColor: color });
        });
      },
      close: function() {
        opts.onClose.apply($(this));
        $(this).dialog("destroy").remove();
      }
    });
  });
});

};

})(jQuery);