[mootools]ボタンでスタイルシートを切り替える（Cookie使用）

mootoolsを使ってスタイルシートを切り替えるサンプル。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも

ベースのCSSをlinkさせておいて、クリックでCSSファイルを切り替えるようにする。
ボタンをクリックしたときCookieを発行し、リロードしたら記憶させたCSSファイルを読み込んで表示する。
リロードしても選択したCSSを表示する動作になるが、Cookie読み込んだりAssetしたりというJavascriptの動作分だけ、CSSが切り替わるのにタイムラグが発生する。
Assetよりｓｒｃだけ書き換えた方がいいのかも。

書き散らしたから汚い…

<a href="#" id="s1">StyleA</a>
<a href="#" id="s2">StyleB</a>
<a href="#" id="s3">StyleC</a>

window.addEvent('domready', function(){
var path = 'css/';
var style_1, style_2,style_3, style_base;
var settings = { seet:{},id:{} }

var HashCookie = new Hash.Cookie('StyleCookie');
if (HashCookie.get('seet')) {
var seetURL = HashCookie.get('seet');
var seetID = HashCookie.get('id');
new Asset.css(path + seetURL, {id: seetID});
} else {
new Asset.css(path +'style.css', {id: 'base'});
}
/* Style 1 */
$('s1').addEvent('click', function(e) {
e = new Event(e).stop();
url ='style1.css';
cssid ='style1';
if (style_1) style_1.remove();
new Asset.css(path + url, {id:cssid});
style_1 = $(cssid);
settings['seet']=url;
settings['id']=cssid;
HashCookie.extend(settings);
});

/* Style 2 */
$('s2').addEvent('click', function(e) {
e = new Event(e).stop();
url ='style2.css';
cssid = 'style2';
if (style_2) style_2.remove();
new Asset.css(path + url, {id:cssid});
style_2 = $(cssid);
settings['seet']=url;
settings['id']=cssid;
HashCookie.extend(settings);
});

/* Style 3 */
$('s3').addEvent('click', function(e) {
e = new Event(e).stop();
url ='style3.css';
cssid = 'style3';
if (style_3) style_3.remove();
new Asset.css(path + url, {id: cssid});
style_3 = $(cssid);
settings['seet']=url;
settings['id']=cssid;
HashCookie.extend(settings);
});

});