Allow Signed in users to change the skin of the site

custom.css

#skin-selector {
     background: #000;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
     display: inline-block;
     padding: 5px 0;
     position: absolute;
     right: 0;
     top: 0;
}

#skin-selector a {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
     border-radius: 2px;
     -moz-box-shadow: 1px 1px 3px #000;
     -webkit-box-shadow: 1px 1px 3px #000;
     box-shadow: 1px 1px 3px #000;
     display: block;
     float: left;
     height: 12px;
     margin-right: 10px;
     text-indent: -9999px;
     width: 12px;
}
				
#skin-selector a:hover {
     -moz-box-shadow: 1px 1px 5px #000;
     -webkit-box-shadow: 1px 1px 5px #000;
     box-shadow: 1px 1px 5px #000;
}

#skin-selector a.skin-bttn-red {
     background: red;
}
#skin-selector a.skin-bttn-blue {
     background: blue;
}

#skin-selector a.skin-bttn-green {
     background: green;
}

#skin-selector a.skin-bttn-none {
     background: white;
     margin-left: 5px;
}

.skin-red {
     background: red;
}

.skin-blue {
     background: blue;
}

.skin-green {
     background: green;
}

init_custom.vm

#set ($theme_custom_css_class = $getterUtil.getString($sessionClicks.get($request, "theme_custom_css_class", "")))

#if ($panelsMinimized != "")
	#set ($css_class = "${css_class} $theme_custom_css_class")
#end

main.js

AUI().ready(
	'aui-io',
	function(A) {
		A.one('#skin-selector').delegate(
		     'click',
		     function(event){
			var cssClass = event.currentTarget.attr('data-customCssClass');
			if (cssClass) {
				var body = A.getBody();
				body.attr('class', cssClass + body.attr('class').replace(/skin-[a-z]+/g, ""));
					
				A.io.request(
					themeDisplay.getPathMain() + '/portal/session_click',
					{
						data: {
							'theme_custom_css_class': cssClass
						}
					}
				);
			}
		},'a'
	        );
       }
	
);

portal_normal.vm

<div id="skin-selector">
	<a href="javascript:;" data-customCssClass="skin-none" class="skin-bttn-none">None</a>
	<a href="javascript:;" data-customCssClass="skin-red" class="skin-bttn-red">Red</a>
	<a href="javascript:;" data-customCssClass="skin-blue" class="skin-bttn-blue">Blue</a>
	<a href="javascript:;" data-customCssClass="skin-green" class="skin-bttn-green">Green</a>
</div>