function change_font_color(hsb, hex, rgb) {
  $('#font_color input').val(hex);
  $('.card_inside_form textarea, .card_inside_form input').css('color', '#' + hex);
  $('#font_color .picker div').css('backgroundColor', '#' + hex);
}

function change_background_color(hsb, hex, rgb) {
  $('#card_color input').val(hex);
  $('.card_inside_form_wrapper').css('background', '#' + hex);
  $('#card_color .picker div').css('backgroundColor', '#' + hex);
}

$('#card_style_customizer select').bind('change', function() {
  $('.card_inside_form textarea, .card_inside_form input').css('font-family', $(this).val());
});

$(document).ready(function(){
  $('#font_color .picker').ColorPicker({
    color: '#0000ff',
    onShow: function (colpkr) {
      $(colpkr).fadeIn(500);
      return false;
    },
    onHide: function (colpkr) {
      $(colpkr).fadeOut(500);
      return false;
    },
    onChange: change_font_color
  });

  $('#card_color .picker').ColorPicker({
    color: '#0000ff',
    onShow: function (colpkr) {
      $(colpkr).fadeIn(500);
      return false;
    },
    onHide: function (colpkr) {
      $(colpkr).fadeOut(500);
      return false;
    },
    onChange: change_background_color
  });
});