var Themes = Class.create();

Themes.prototype = {
	initialize: function() {
		this.cookieName = 'KHLTheme';
		this.cookieJar = new CookieJar({
			expires: 1209600,
			path: '/'
		});
		this.onThemeChange = this.themeChange.bindAsEventListener(this);	
		this.registerEvents();
	},
	
	registerEvents: function() {
		var elements = $$('#themes a');

		for ( var x = 0 ; x < elements.length ; x++ ) {
			Event.observe(elements[x], 'click', this.onThemeChange);
		}
	},

	setDefault: function(skin) {
		var savedTheme = this.cookieJar.get(this.cookieName);
		if (savedTheme != null) {
			this.themeChange(savedTheme.theme);
		}
	},

	themeChange: function(e) {
		var body = $$('body')[0];
		
		// If the argument is a skin then 
		// simply add it, as we're expecing it to be a default
		if (typeof(e) == 'string') {
			body.addClassName(e);
			return;
		}

		// Remove all class names, then add new one
		var element = Event.element(e);
		body.removeClassName(body.className);
		body.addClassName(element.className);
		var object = {
				theme: element.className
		};

		this.cookieJar.put(this.cookieName, object);
	}
};

var themes;

Event.observe(window, "load", 
	function() {
		themes = new Themes();
		themes.setDefault();
	}
);