Need help with Cookie

Need help with Cookie

I've been trying to use the cookie with a script I'm using, however every way I've attempted to apply it doesn't work. The script allows users to click on colored boxes to change the background of the page they are viewing. I'm wanting to use the cookie to remember what color the individual selected last, but like I said it's not working and I've tried to set it up several ways. I've attempted to trigger the cookie by click but got nothing from it, and I attempted to use the "if" along with it... and several other ways, none seem to work. I am using the jquery.cookie.js as well incase anyone asks.

Here's the script:

  1. <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
              // Load jQuery
              google.load("jquery", "1");   
    </script>

    <script type="text/javascript">
    var $rwwdbgcc = jQuery.noConflict();

    $rwwdbgcc(function(){
        $rwwdbgcc("#rwwdbgcc_one").click( function(){ $rwwdbgcc
            ("body").removeClass('bgcc2 , bgcc3 , bgcc4').addClass("bgcc1");
        });
        $rwwdbgcc("#rwwdbgcc_two").click( function(){ $rwwdbgcc
            ("body").removeClass("bgcc1 , bgcc3 , bgcc4").addClass("bgcc2");
        });
        $rwwdbgcc("#rwwdbgcc_three").click( function(){ $rwwdbgcc
            ("body").removeClass("bgcc1 , bgcc2 , bgcc4").addClass("bgcc3");
        });
        $rwwdbgcc("#rwwdbgcc_four").click( function(){ $rwwdbgcc
            ("body").removeClass("bgcc1 , bgcc2 , bgcc3").addClass("bgcc4");
        });
        $rwwdbgcc("#rwwdbgcc_reset").click( function(){ $rwwdbgcc
            ("body").removeClass("bgcc1 , bgcc2 , bgcc3 , bgcc4");
        });
    });
    </script>

























Here's the CSS and HTML:

  1. <style type="text/css">
    .bgcc1 { background: red }
    .bgcc2 { background: olive; }
    .bgcc3 {background: cyan; }
    .bgcc4 {background: gold; }
    input.btn_rwwdbgcc_one {
        border:1px solid black;
        color: #ffffff;
        background: red;
        height: 15px;
        width: 15px;
            outline: none;
            -moz-focus-inner: none;
            -moz-outline-style: none;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-box-shadow: 1px 1px 2px #999999;
        -webkit-box-shadow: 1px 1px 2px #999999;
    }
    input.btn_rwwdbgcc_two {
        border:1px solid black;
        color: #ffffff;
        background: olive;
        height: 15px;
        width: 15px;
            outline: none;
            -moz-focus-inner: none;
            -moz-outline-style: none;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-box-shadow: 1px 1px 2px #999999;
        -webkit-box-shadow: 1px 1px 2px #999999;
    }
    input.btn_rwwdbgcc_three {
        border:1px solid black;
        color: #ffffff;
        background: cyan;
        height: 15px;
        width: 15px;
            outline: none;
            -moz-focus-inner: none;
            -moz-outline-style: none;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-box-shadow: 1px 1px 2px #999999;
        -webkit-box-shadow: 1px 1px 2px #999999;
    }
    input.btn_rwwdbgcc_four {
        border:1px solid black;
        color: #ffffff;
        background: gold;
        height: 15px;
        width: 15px;
            outline: none;
            -moz-focus-inner: none;
            -moz-outline-style: none;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-box-shadow: 1px 1px 2px #999999;
        -webkit-box-shadow: 1px 1px 2px #999999;
    }
    input.btn_rwwdbgcc_reset {
        border:1px solid black;
        color: #ffffff;
        height: 15px;
        width: 15px;
        color: black;
        font-weight: bold;
        padding-left: 3px;
        line-height: .75em;
            outline: none;
            -moz-focus-inner: none;
            -moz-outline-style: none;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-box-shadow: 1px 1px 2px #999999;
        -webkit-box-shadow: 1px 1px 2px #999999;
    }
    </style>

    <div id="rwwdbgcc_v1">
    <input type="button" class="btn_rwwdbgcc_one" id="rwwdbgcc_one" title="red">
    <input type="button" class="btn_rwwdbgcc_two" id="rwwdbgcc_two" title="olive">
    <input type="button" class="btn_rwwdbgcc_three" id="rwwdbgcc_three" title="cyan">
    <input type="button" class="btn_rwwdbgcc_four" id="rwwdbgcc_four" title="gold">
    <input type="button" class="btn_rwwdbgcc_reset" id="rwwdbgcc_reset" title="reset" value="R">
    </div>