title: How to create a multi-option Style Switcher using jQuery?
body: <p>I need to create a multi-option Style Switcher for my WordPress theme, but I can't get anything working (see code below). By multi-option I mean this: The user should be able to select a custom color, pattern and font independently of each other (a simple css link swap-out won't do). All this is far beyond my current skill level, can anyone help me in the right direction?</p>
  
  <p><strong>Basic Markup:</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Style Switcher&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;link rel="stylesheet" href="css/plugins.css"&gt;
  &lt;/head&gt;
  &lt;body id="top"&gt;
      &lt;div id="wrapper"&gt;
          &lt;p&gt;The quick brown fox jumps over the lazy dog.&lt;/p&gt;
      &lt;/div&gt;
      &lt;script src="js/plugins.js"&gt;&lt;/script&gt;
      &lt;script src="js/scripts.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>scripts.js (2nd attempt)</strong> Adapted from <a href="http://www.themeblvd.com/demo/alyeska/" rel="nofollow">this theme</a>.</p>
  
  <pre><code>// DOM READY, NO CONFLICT REMAP
  jQuery(document).ready(function($){
  
      // THEME NAME
      var themeID='mytheme';
  
      // STYLE SWITCHER MARKUP
      $('body').append(
          '&lt;div id="ss"&gt;'+
              '&lt;p&gt;'+
                  '&lt;select id="ssColor" name="ss-color"&gt;'+
                      '&lt;option value="red"&gt;Red&lt;/option&gt;'+
                      '&lt;option value="green"&gt;Green&lt;/option&gt;'+
                      '&lt;option value="blue"&gt;Blue&lt;/option&gt;'+
                  '&lt;/select&gt;'+
              '&lt;/p&gt;'+
              '&lt;p&gt;'+
                  '&lt;select id="ssPattern" name="ss-pattern"&gt;'+
                      '&lt;option value="pat-a"&gt;Pattern A&lt;/option&gt;'+
                      '&lt;option value="pat-b"&gt;Pattern B&lt;/option&gt;'+
                      '&lt;option value="pat-c"&gt;Pattern C&lt;/option&gt;'+
                  '&lt;/select&gt;'+
              '&lt;/p&gt;'+
              '&lt;p&gt;'+
                  '&lt;a id="ssReset" href=""&gt;Reset&lt;/a&gt;'+
              '&lt;/p&gt;'+
          '&lt;/div&gt;'
      );
  
      // RESET
      $('#ssReset').click(function(){
          var i=0;
          var cookies = new Array();
          $('#ss select').each(function(){
              var cookie = $(this).attr('name');
              cookies[i] = cookie;
              i++;
          });
      });
  
      // ???
      var cookiesMax=cookies.length;
      for(var i=0, max=cookiesMax; i&lt;max; ++i){
          $.dough(themeID+'-'+cookies[i],'remove');
      }
  
      // APPLY CHANGES FUNCTION
      function applyChanges(id,selectName,selectValue){
          var cookieName=id+'-'+selectName;
          $.dough(cookieName,selectValue);
          location.reload();
      }
  
      // PROCESS
      $('#ss select').change(function(){
          var selectName = $(this).attr('name');
          var selectValue = $(this).val();
          applyChanges(themeID,selectName,selectValue);
      });
  
  });
  </code></pre>
  
  <p><strong>scripts.js (1st attempt)</strong> Adapted from <a href="http://www.userfirst.com/creations/pure-jquery-style-switcher/" rel="nofollow">this tutorial</a>.</p>
  
  <pre><code>// DOM READY, NO CONFLICT REMAP
  jQuery(document).ready(function($){
  
      // APPLY STYLES FUNCTION
      function apply_styles(bgcolor,bgpattern){
          $('html').css('backgroundColor','#'+bgcolor);
          $('html').css('backgroundImage','url(img/'+bgpattern+')');
      }
  
      // CREATE COOKIE FUNCTION
      function create_cookie(bgcolor,bgpattern){
          $.dough('bgcolor','remove');
          $.dough('bgcolor',bgcolor);
          $.dough('bgpattern','remove');
          $.dough('bgpattern',bgpattern);
      }
  
      // READ COOKIES ELSE DEFAULTS
      var cbgcolor=$.dough('bgcolor');
      var cbgpattern=$.dough('bgpattern');
      if(cbgcolor!=undefined&amp;&amp;cbgpattern!=undefined){
          apply_styles(cbgcolor,cbgpattern);
      }else{
          apply_styles('fff','default.gif');
      }
  
      // STYLE SWITCHER
      $('body').append(
          '&lt;div id="style_switcher"&gt;'+
              '&lt;p&gt;&lt;strong id="colorpicker_box"&gt;&lt;em&gt;&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;'+
              '&lt;ul id="patterns"&gt;'+
                  '&lt;li&gt;&lt;img src="css/img/spat1.gif" rel="pat1.gif" alt=""&gt;&lt;/li&gt;'+
                  '&lt;li&gt;&lt;img src="css/img/spat2.gif" rel="pat2.gif" alt=""&gt;&lt;/li&gt;'+
                  '&lt;li&gt;&lt;img src="css/img/spat3.gif" rel="pat3.gif" alt=""&gt;&lt;/li&gt;'+
              '&lt;/ul&gt;'+
              '&lt;p&gt;&lt;strong id="save_css"&gt;Save&lt;/strong&gt;&lt;/p&gt;'+
          '&lt;/div&gt;'
      );
  
      // COLORPICKER
      $('#colorpicker_box').ColorPicker({
          onShow:function(colpkr){$(colpkr).fadeIn(500);return false;},
          onHide:function(colpkr){$(colpkr).fadeOut(500);return false;},
          onChange:function(hsb,hex,rgb){
              $('#colorpicker_box em').css({backgroundColor:'#'+hex});
          }
      });
  
      // PROCESS VALUES
      var pickerValue= // store 'hex' from COLORPICKER above, but how?
      var patternValue= // store rel="" value of CLICKED '#patterns li img'
      $('#save_css').click(function(){
          apply_styles(pickerValue,patternValue);
      });
  
  });
  </code></pre>