$(function() {
    $('input.pwg-picker')
      .each(function() {
	  if ($(this).val() !== undefined) {
	    if ($(this).val().indexOf('#',0)==-1) {
	      $(this).css('background-color', '#'+$(this).val());
	    } else {
	      $(this).css('background-color', $(this).val());
	    }
      }
	})
      .ColorPicker({
	onSubmit: function(hsb, hex, rgb, el) {
	    $(el).val(hex);
	    $(el).ColorPickerHide();
	    $(el).css('background-color', '#'+hex);
	  },
	    onBeforeShow: function () {
	    $(this).ColorPickerSetColor(this.value);
	  }
	})
      .bind('keyup', function(){
	  $(this).ColorPickerSetColor(this.value);
	});

    if ($('#pwg_cumulus_mode_transparent').is(':checked')) {
      $('#pwg_cumulus_p_bgcolor')      
	.css('opacity', '0.3')
	.children().children('input').attr('disabled', 'disabled');
    }
    $('#pwg_cumulus_mode_transparent')
      .click(function() {
	  if ($(this).is(':checked')) {
	    $('#pwg_cumulus_p_bgcolor')
	      .animate({opacity:'-=0.7'}, 500)
	      .children().children('input').attr('disabled', 'disabled');
	  } else {
	    $('#pwg_cumulus_p_bgcolor')
	      .animate({opacity:'+=0.7'}, 500)
	      .children().children('input').removeAttr('disabled');
	  }
	});
  });