Help creating multiple "protoswitchers"

[Deus]

Greetings!

Let me start by first stating that I've never really coded Javascript before in my life. Having said that, I'm not an idiot and I can generally pick up on things relatively quickly .

So, now to the point.

I'm currently creating a site in which I've incorporated Protoswitcher (http://cssrevolt.com/upload/files/pr...her/index.html). From what I can tell, it's a relatively simple script.

Now the catch is that I wanted to have more than one switcher on my site. And this is where I get stuck.

What I did initially was to basically copy the JS file (protoswitcher.js) and rename it something else (userbar.js, for example). I then changed the various places in the script which were previously for "var ProtoSwitcher" to "var UserBar", etc.

I managed to get it all to work fine. Both the boxes show up, and they both work as they should (clicking on them changes select bits of CSS).

Now the problem I'm having is that the original protoswitcher uses cookies to remember a persons preferences.

I cannot for the life of me figure out how to get the "new" protoswitcher (userbar.js) to work with cookies as well.

Any help would be much appreciated, and I'm sure I can give you a few dollars for your time .

Please let me know if I haven't made sense.

TLDL: I want to be able to use several protoswitchers with working cookies. I don't know how.

[djr33]

In theory you should be able to rename the cookies in the same way that you renamed the variables and everything should work. Rarely is something more complex than that, not to say it's always easy to find every instance of a name in a script.

[Deus]

I figured that, but it wasn't working. My guess is that I've not changed the right thing.. I've never worked with cookies before so I have no idea how they work really.

I might as well attach the two parts of the script. Do I need to also make a new copy of the cookie.js?

Protoswitcher.js

var ProtoSwitcher = Class.create({
  
	initialize: function(container, styles, options) {
		
		this.container  	= $(container);		
		this.styles			= $A(styles);
		this.body 			= $$('body')[0];
		
		this.options    = Object.extend({
			label			: '',
			callback		: null
        }, options || {});
		
		this.buildSwitcher();

  	},
	
	buildSwitcher: function() {

		
		this.switcher 		= new Element('div', { id:'protoswitcher' }).update(this.options.label);
		this.styleOptions	= new Element('ul', { id:'style-options' });
		this.container.insert(this.switcher);
		this.switcher.insert(this.styleOptions);
		
		this.temp= [];
		this.styles.each(function(style, index) {
			this.temp[index] = new Element('li', { id:style }).update(style);
			this.styleOptions.insert(this.temp[index]);
		}.bind(this));
		
		this.loadPreferences();
		this.setPreferences();

	},
	
	loadPreferences: function() {
		var cookie = Cookie.get('protoswitcher');
    	if (cookie=='' || cookie==null) {
			cookie = this.styles[0];			
  		}
  		this.body.className = cookie;
		this.currentStyle	= cookie;
	},
	
	setPreferences: function () {

		this.temp.each(function(element) {
								  
			element.observe('click', function(event) {	
			
  				var newStyle = element.readAttribute('id'); 

        		if (newStyle!= this.currentStyle) { 
          			this.replaceClass(this.body, this.currentStyle, newStyle);
					Cookie.set('protoswitcher', newStyle, 365);
					this.currentStyle = newStyle;
        		} 
     		
	      		Event.stop(event);
    		}.bind(this));

		}.bind(this)); 

	},
	
	replaceClass: function (elem, old_class, new_class) {
  		$(elem).addClassName(new_class);
  		$(elem).removeClassName(old_class);
	}

});

And the cookie.js

var Cookie = {
  set: function(name, value, daysToExpire) {
    var expire = '';
    if (daysToExpire != undefined) {
      var d = new Date();
      d.setTime(d.getTime() + (86400000 * parseFloat(daysToExpire)));
      expire = '; expires=' + d.toGMTString();
    }
    return (document.cookie = escape(name) + '=' + escape(value || '') + expire + '; path=/');
  },

  get: function(name) {
    var cookie = document.cookie.match(new RegExp('(^|;)\\s*' + escape(name) + '=([^;\\s]*)'));
    return (cookie ? unescape(cookie[2]) : null);
  },


  // get: function(key) {
//        var keyEquals = key+"=";
//        var value = false;
//        document.cookie.split(';').invoke('strip').each(function(s){
//            if (s.startsWith(keyEquals)) {
//                value = unescape(s.substring(keyEquals.length, s.length));
//                throw $break;
//            }
//        });
//        return value;
//    },

  erase: function(name) {
    var cookie = Cookie.get(name) || true;
    Cookie.set(name, '', -1);
    return cookie;
  },
  accept: function() {
    if (typeof navigator.cookieEnabled == 'boolean') {
      return navigator.cookieEnabled;
    }
    Cookie.set('_test', '1');
    return (Cookie.erase('_test') === '1');
  }
};

Basically I want to have two switchers. One for some colours, and one for the position of a userbar. That's the goal, anyway .