var styleSwitcher = {
	// Begin script:
	init: function(){
		// Initialise the CSS dummy method:
		// (If you don't know what this is then read through the NETTUTS tutorial!)
		styleSwitcher.cssDummy.init();
		// Specify container of the links (<A>) to different styles:
		var ss = document.getElementById('style-switcher');
		// If it exists on the page:
		if (ss) {
			// Get anchors within the container and assing length to variable:
			var ssLinks = ss.getElementsByTagName('a'), l = ssLinks.length;
			// Loop through all anchors:
			while (l--) {
				// Assign onclick event:
				ssLinks[l].onclick = (function(){
					var href = this.href;
					// Load the stylesheet:
					styleSwitcher.loadStyleSheet(href);
					return false;
				});
			}
		}
	},
	loadStyleSheet: function(href){
		// Create new overlay DIV element and style it:
		// (applyCSS is another method)
		if(!document.getElementById('overlay')) {
			var overlay = document.createElement('div');
			overlay.id = "overlay";
			styleSwitcher.applyCSS(document.body,{height:'100%'}); // For IE6
			styleSwitcher.applyCSS(overlay,{
				position: 'absolute',
				top:0,
				left: 0,
				width: '100%',
				height: '100%',
				zIndex: 1000,
				background: 'black url(img/loading.gif) no-repeat center',
				opacity: 0,
				filter: 'alpha(opacity=0)'
			});
			// Append our overlay to the document:
			document.body.appendChild(overlay);
		} else {
			var overlay = document.getElementById('overlay');
		}
		// Fade in the overlay
		styleSwitcher.fadeIn(overlay,function(){
			// Callback function: Get response from style-switcher.php:
			styleSwitcher.AJAX.load(href + '&js',function(data){
				// Do stuff with the data response:
				var link = document.getElementById('stylesheet');
				if(link) link.href = 'css/' + data + '.css';
				// Initiliase the "check" method of cssDummy:
				styleSwitcher.cssDummy.check(function(){
					// Once CSS has loaded fade-out the overlay:
					styleSwitcher.fadeOut(overlay);
				});
			})
		})
	},
	// It makes sense to make a quick method to apply CSS rules to elements:
	applyCSS: function(element,styles){
		// If styles are passed in as an object the proceed:
		if (typeof styles == "object") {
			// We don't want an array though:
			if (!styles[0]) {
				// Loop through array and apply styles:
				for (var i in styles) {
					element.style[i] = styles[i];
				}
			}
		}
	},
	// fadeIn method:
	fadeIn: function(element,callback) {
		element.style.display = "block";
		function nudgeOpacity(to) {
			// If the element has NOT finished fading in the proceed:
			if (parseInt(to,10) < 10) {
				element.style.opacity = to/10; // For all the good browsers
				element.style.filter = 'alpha(opacity=' + to*10 + ')'; // For IE
				// Pause for 50 milliseconds then nudge opacity up another step:
				setTimeout(function(){
					nudgeOpacity(to + 1)
				},50)
			} else {
				// If the element HAS finished fading in then initiate callback function:
				callback();
			}
		}
		nudgeOpacity(0);
	},
	// fadeOut method:
	fadeOut: function(element,callback) {
		function nudgeOpacity(to) {
			// If the element has NOT finished fading out the proceed:
			if (parseInt(to,10) > 0) {
				element.style.opacity = to/10; // For all the good browsers
				element.style.filter = 'alpha(opacity=' + to*10 + ')'; // For IE
				// Pause for 50 milliseconds then nudge opacity down another step:
				setTimeout(function(){
					nudgeOpacity(to - 1);
				},50)
			} else {
				// If the element HAS finished fading out then initiate callback function:
				if(callback) callback();
				// Then make sure overlay is properly hidden:
				styleSwitcher.applyCSS(element,{
					opacity: 0,
					filter: 'alpha(opacity=0)',
					display: 'none'
				});
			}
		}
		nudgeOpacity(10);
	},
	AJAX: {
		// This will load style-switcher.php gives us the response data:
		http:false,
		callback:function(data){},
		opt:new Object(),
		getHTTPObject : function() {
			var http = false;
			if(typeof ActiveXObject != 'undefined') {
				try {http = new ActiveXObject("Msxml2.XMLHTTP");}
				catch (e) {
					try {http = new ActiveXObject("Microsoft.XMLHTTP");}
					catch (E) {http = false;}
				}
			} else if (XMLHttpRequest) {
				try {http = new XMLHttpRequest();}
				catch (e) {http = false;}
			}
			return http;
		},
		load : function (url,callback) {
			this.init(); 
			if(!this.http||!url) return;
			if (this.http.overrideMimeType) this.http.overrideMimeType('text/xml');
			this.callback=callback;
			var ths = this;
			var now = "uid=" + new Date().getTime();
			// Solve caching problem in IE7:
			url += (url.indexOf("?")+1) ? "&" : "?";
			url += now;
			var parameters = null;	
			this.http.open('GET', url, true);
			this.http.onreadystatechange = function () {
				if(!ths) return;
				var http = ths.http;
				if (http.readyState == 4) {
					if(http.status == 200) {
						var result = "";
						if(http.responseText) result = http.responseText;
						if(ths.callback) ths.callback(result);
					} else {
						// If style-switcher.php does not exist:
						alert('Cannot find theme specified')
					}
				}
			}
			this.http.send(parameters);
		},
		init : function() {this.http = this.getHTTPObject();}
	},
	// cssDummy method which tells us whether stylesheet has loaded:
	cssDummy: {
		init: function(){
			var dummy = document.createElement('div');
			dummy.id="dummy-element";
			dummy.style.display='none';
			document.body.appendChild(dummy);
		},
		check: function(callback) {	
			// Get computed styles (cross-browser):
			function getStyle(el, prop) {
				if (document.defaultView && document.defaultView.getComputedStyle) {
					var a = document.defaultView.getComputedStyle(el, null)[prop];
					if(parseInt(a,10)!==0) return a;
				}
				if (el.currentStyle) {
					var b = el.currentStyle[prop];
					if(parseInt(b,10)!==0) return b;
				} else {
					var c = el.style[prop];
					if(parseInt(c,10)!==0) return c;
				}
			}
			// If 2px width is detected then initiate callback:
			if (getStyle(document.getElementById('dummy-element'),'width')=='2px') callback();
			// Otherwise check again in 500 milliseconds:
			else setTimeout(function(){styleSwitcher.cssDummy.check(callback)}, 500);
		}
	}
};