var ThemeSwitcher = {
	
	startTheme: 'green',
	startRes: 1024,
	toolBar: null,
	themeButton: null,
	widthButton: null,
	theme: null,
	res: null,
	themeLink: null,
	sizeLink: null,
	
	init: function(){
		var self = ThemeSwitcher;
		self.themeLink = document.getElementById("colorTheme");
		self.sizeLink = document.getElementById("pageSize");
		self.toolBar = document.getElementById("toolbar");
		self.makeToolBar();
		
		// Check for a cookie containing theme color preference
		if (Core.getCookie('WPL_Theme')) {
			self.theme = Core.getCookie('WPL_Theme');
		} else {
			self.theme = self.startTheme;
			Core.setCookie('WPL_Theme', self.theme, 100);
		}
		
		// Check for a cookie containing page width preference
		if(Core.getCookie('WPL_Size')) {
			self.res = Core.getCookie('WPL_Size');
		} else {
			self.res = self.startRes;
			Core.setCookie('WPL_Size', self.res, 100);
		}
		
		self.setTheme();
		
	},
	
	makeToolBar: function(){
		var self = ThemeSwitcher;
		var themeButton = document.createElement("img");
		var widthButton = document.createElement("img");
		
		// Create the button for the theme color selection
		themeButton.setAttribute('src', '/images/icons/color_preferences.png');
		themeButton.setAttribute('alt', 'Change Theme');
		themeButton.setAttribute('id', 'toggleTheme');
		self.themeButton = themeButton;
		
		// Create the button for the page width selection
		// widthButton.setAttribute('src', '/images/icons/resize.png');
		// widthButton.setAttribute('alt', 'Change Page Width');
		// widthButton.setAttribute('id', 'toggleWidth');
		// widthButton.className = 'hover';
		// self.widthButton = widthButton;
		
		// Append the buttons to the document and set click event listeners
		//self.toolBar.appendChild(self.widthButton);
		self.toolBar.appendChild(self.themeButton);
		//Core.addEventListener(self.widthButton, "click", self.widthClickListener);
		Core.addEventListener(self.themeButton, "click", self.themeClickListener);
		Core.addEventListener(self.themeButton, "mouseover", self.hoverListener);
		Core.addEventListener(self.themeButton, "mouseout", self.unHoverListener);
	},
	
	setTheme: function(){
		// Apply the theme switch
		var self = ThemeSwitcher;
		var href = "/css/" + self.theme + ".css";
		
		self.themeLink.href = href;
	},
	
	setSize: function(){
		
	},
	
	themeClickListener: function(){
		// Check which color is current and apply the opposite
		var self = ThemeSwitcher;
		
		if(self.theme == 'purple'){
			self.theme = 'green';
		} else {
			self.theme = 'purple';
		}
		
		Core.setCookie('WPL_Theme', self.theme, 100);
		self.setTheme();
	},
	
	hoverListener: function(){
		Core.addClass(this, 'hover');	
	},
	
	unHoverListener: function(){
		Core.removeClass(this, 'hover');	
	},
	
	widthClickListener: function(){
		// Check which size is current and switch to the opposite
		var self = ThemeSwitcher;
		
		alert("This feature has not yet been implemented.");
	}
}
Core.start(ThemeSwitcher);