$('document').ready( function() {
  $('#b_brdcolor, #b_bgcolor, #lb_txtcolor, #lb_bgcolor, #rb_txtcolor, #rb_bgcolor').attr("readonly","readonly");

  $('form#create_button').createCP();
  $('form#create_button').ajaxButton();

  $('input#send').click( function(e) {
    e.preventDefault();
    $('form#create_button').ajaxButton();
  });
  $('input#reset').click( function(e) {
    e.preventDefault();
    $('form#create_button').ajaxButton({
      reset:true
    });
  });
  $('#lb_txt, #rb_txt').bind('keyup', function() {
    $('form#create_button').ajaxButton();
  })
  $('#b_align, #lb_align, #rb_align').click(function(e){
    e.preventDefault();
    $('form#create_button').ajaxButton();
  })
});
(function($) {
  $.fn.createCP = function() {
    $('#b_brdcolor, #b_bgcolor, #lb_txtcolor, #lb_bgcolor, #rb_txtcolor, #rb_bgcolor').ColorPicker({
      onSubmit: function(hsb, hex, rgb, el) {
        $(el).val(hex);
        $(el).ColorPickerHide();
        console.log($(el));
      },
      onBeforeShow: function () {
        $(this).ColorPickerSetColor(this.value);
        $t = $(this);
      },
      onChange: function(ev) {
        $t.val($(this).find('.colorpicker_hex input').val());
        $('form#create_button').ajaxButton();
      }
    })
    .bind('keyup', function() {
      $(this).ColorPickerSetColor(this.value);
    });
  }
})(jQuery);
(function($) {
  $.fn.ajaxButton = function(options) {
    var defaults = {
      reset:false
    };
    var opts = $.extend(defaults, options);
    if(opts.reset==true) {
      $('#b_brdcolor').val("000000");
      $('#b_bgcolor').val("ffffff");
      $('#b_align').val("Links");

      $('#lb_txt').val("W3C");
      $('#lb_txtcolor').val("000000");
      $('#lb_bgcolor').val("ffffff");
      $('#lb_align').val("Mitte");

      $('#rb_txt').val("HTML5");
      $('#rb_txtcolor').val("000000");
      $('#rb_bgcolor').val("44e61c");
      $('#rb_align').val("Mitte");
    }
    $('div#img').html("Lade Button...");
    $.ajax({
      url:"php/button.php",
      type:"GET",
      dataType:"html",
      contentType:"image/png",
      data: $(this).serialize(),
      success: function(data) {
        $('div#img').html(data);
      },
      error: function(data) {
        $('div#img').html("Error");
      }
    })
  }
})(jQuery);