
/* 

You will need to define CSS styles for the controls somewhere on your page... 

To init, do something like the following:

var url = '/images/family_kicks/nhl/reskins/';
var bgs = [
	{image:'calgary_flames1.gif', color: '#ffffff'},
	{image:'calgary_flames2.gif', color: '#E13A3E'}
];
BackgroundSwitcher.init(bgs, url, 'kicks');

*/
BackgroundSwitcher = {
	
	currentBackground: 1,
	imageRequest: null,
	imageURL: '',
	backgrounds: [],
	cookieName: 'bgswt_',
	
	init: function(backgrounds, imageURL, cookieName) {
		BackgroundSwitcher.backgrounds = backgrounds;
		BackgroundSwitcher.writeHTML();
		BackgroundSwitcher.imageURL = imageURL;
		if(cookieName) BackgroundSwitcher.cookieName = BackgroundSwitcher.cookieName + cookieName;
		
		var cookie = BackgroundSwitcher.readCookie(BackgroundSwitcher.cookieName);
		if(cookie != '' && cookie != null) {
			BackgroundSwitcher.changeBackground(parseInt(cookie, 10));
		} else {
			BackgroundSwitcher.changeBackground(1);
		}
		
	},
	
	changeBackground: function(id) {
		BackgroundSwitcher.imageRequest =  new Image();
		var bg = BackgroundSwitcher.getBackground(id);
		BackgroundSwitcher.imageRequest.onload = function() {
			BackgroundSwitcher.setBackgroundImage(bg);
			BackgroundSwitcher.currentBackground = id;
			BackgroundSwitcher.rememberBackground(id);
		};
		BackgroundSwitcher.imageRequest.src = BackgroundSwitcher.imageURL + bg.image;
	},
	
	getBackground: function(id) {
		id--;
		return BackgroundSwitcher.backgrounds[id];
	},
	
	getBackgroundFilename: function(id) {
		return BackgroundSwitcher.getBackground(id).image;
	},
	
	getBackgroundColor: function(id) {
		return BackgroundSwitcher.getBackground(id).color;
	},
	
	setBackgroundImage: function(bg) {
		document.body.style.backgroundColor = bg.color;
		document.body.style.backgroundImage = "url('" + BackgroundSwitcher.imageURL + bg.image + "')";
	},
	
	rememberBackground: function(id) {
		BackgroundSwitcher.createCookie(BackgroundSwitcher.cookieName, id, 7);
	},
	
	writeHTML: function() {
		document.write('<div id="backgroundSwitcher">');
		var len = BackgroundSwitcher.backgrounds.length;
		for(var i = 1; i <= len; ++i) {
			document.write('<a id="backgroundSwitcher-button'
							+ i + '" class="backgroundSwitcher-button" href="javascript:BackgroundSwitcher.changeBackground('
							+ i +');"></a>');
		}
		document.write('</div>');
	},
	
	createCookie: function(name, value, days) {
		if (days) {
			var date = new Date();
			date.setTime(date.getTime()+(days*24*60*60*1000));
			var expires = "; expires="+date.toGMTString();
		}
		else var expires = "";
		document.cookie = name+"="+value+expires+"; path=/";
	},
	
	//cookie functions from:
	//		http://www.quirksmode.org/js/cookies.html
	readCookie: function(name) {
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	}
};