Pulling a value from one jQuery function into another

Question

I'm trying to take the hex value chosen from a jQuery colorpicker plugin, and store it as a cookie using the jQuery cookie plugin.

I just don't know the appropriate way to tie the two together (new to js and jQuery).

Here's my colorpicker function:

    $('#colorSelector').ColorPicker({
color: '#ffffff',
onShow: function (colpkr) {
 $(colpkr).fadeIn(500);
 return false;
},
onHide: function (colpkr) {
 $(colpkr).fadeOut(500);
 return false;
},
onChange: function (hsb, hex, rgb) {
 $('#colorSelector div, .preview-image, .cover ').css('backgroundColor', '#' + hex);
 $('body').css('backgroundColor', '#' + hex);
  $.cookie('bgColor', 'picker');
 return false;
}
});

And here's my cookie function as is:

    var bgColor = $.cookie('bgColor');  

if (bgColor == 'picker') {  
$('#colorSelector div, .preview-image, .cover ').css('backgroundColor', '#' + hex);  
};

I can set and store the cookie value as a standard css background-color, but can't figure out how to pull the "'backgroundColor', '#' + hex" value into the cookie function.

Answer 1

in onChange function:

$.cookie('bgColor', '#' + hex);

and in cookie function

var bgColor = $.cookie('bgColor');      
if (typeof bgColor == 'string' && bgColor.charAt(0)=='#') {  
  $('#colorSelector div, .preview-image, .cover ').css('backgroundColor', bgColor);  
};