$(function(){//dom ready event



					//colorpickers

					$('.hex').each(function(){

						var bgColor = $(this).val();

						bgColor = '#'+bgColor.replace(/#/g, "");

						$(this).val(bgColor).css('background', bgColor);

						$(this).wrap('<div class="hasPicker"></div>').after('<a href="#" class="pickerIcon"><span class="inner"></span></a>');

					});

					

					//set up colors, then remove temp pickers

					$('input.hex').each(function(){

						$('body').append('<div id="picker" style="display: none;"></div>');

						$('#picker').farbtastic(this).remove();;

					});

					

					//click events for color pickers

					$('.pickerIcon').click(function(){

						if($(this).next().is('#picker')){

							$('#picker').remove();

							return false;

						}

						$('#picker').remove();

						$('a.on').removeClass('on');

						$('div.texturePicker ul:visible').fadeOut(100, function(){$(this).parent().css('position', 'static');});

						$(this).toggleClass('on').parent().css('position', 'relative');

						$(this).after('<div id="picker"></div>');

						$('#picker').farbtastic($(this).prev());

						$('body').click(function(){

							$('#picker').remove();

						});

						return false;

					});



					$('a[href="#themeGallery"]').click(function(){

						$('#rollerTabsNav').tabs( "select", 1 );

						return false;

					});



					

});



//function to append a new theme stylesheet with the new style changes

function updateCSS(){

	$('#loadingComp').remove();

	$('#components h1').prepend('<span id="loadingComp">Loading</span>');



		setTimeout(function(){$('#loadingComp').fadeOut(1000);}, 1000);



}