$(document).ready(function(){

    function relink(){
        var hexes = '';  
        $(".color").each(function(){
          hexes = hexes + (($(this).hasClass('discard')) ? '*' : $(this).text().substr(1,6) ) + ",";
        });
        $("#reload").attr("href",("./?swatch="+hexes.slice(0, -1)));
    }

    $(".locking > a.unlocked").toggle(
      function () {
        $($(this).parent().prev()).toggleClass('discard');
        $(this).attr('title','Unlock');
        $(this).empty().css({"background-position":"center -20px"});
        relink();
        return(false);
      },
      function () {
        $($(this).parent().prev()).toggleClass('discard');
        $(this).attr('title','Lock');
        $(this).empty().css({"background-position":"center 0px"});
        relink();
        return(false);
      }
    );

    $(".locking > a.locked").toggle(
      function () {
        $($(this).parent().prev()).toggleClass('discard');
        $(this).attr('title','Lock');
        $(this).empty().css({"background-position":"center 0px"});
        relink();
        return(false);
      },    
      function () {
        $($(this).parent().prev()).toggleClass('discard');
        $(this).attr('title','Unlock');
        $(this).empty().css({"background-position":"center -20px"});
        relink();
        return(false);
      }
    );
});