/*************************************************************************
 * This file defines the set of views that the card creator supports.
 * A view is composed of a number of displayables, which are HTML elements
 * with the "display" style property. 
 *************************************************************************/

var View = new function() {
	// An associative array to represent the "Displayable Type"
	var DT = {  CATEGORIES:"CategoriesCell",
				CARD:"CardCell",
				TOOLS:"ToolsCell",
				PLAYER:"PlayerCell",
				INSTRUCTIONS:"InstructionsCell",
				ARROW:"ArrowInstructionsCell",
				GAMES:"GamesCell",
				OPTIONS:"OptionsCell",
				WELCOME:"WelcomeCell",
				TUTORIALS:"TutorialsCell",
				DEMOS:"DemosCell" }					 
	
	// The set of publically accessible layouts
	this.nothing = new Layout(DT.CATEGORIES);
	this.creator = new Layout(DT.CATEGORIES, DT.CARD, DT.TOOLS);
	this.instructions = new Layout(DT.CATEGORIES, DT.INSTRUCTIONS);
	this.player = new Layout(DT.CATEGORIES, DT.PLAYER);
	this.games = new Layout(DT.CATEGORIES, DT.GAMES, DT.OPTIONS);
	this.welcome = new Layout(DT.CATEGORIES, DT.WELCOME);
	this.arrow = new Layout(DT.CATEGORIES, DT.ARROW);
	this.demo = new Layout(DT.DEMOS);
	this.tutorials = new Layout(DT.TUTORIALS);
	
	this.setDisplay = setDisplay;
	
	this.showDefault = function(withInstructions) {
		if (!withInstructions) {
			if (CurrentCard.getCategory()) {
				this.creator.display();
			}
			else {
				this.nothing.display();
			}
		}
		else {
			this.instructions.display();
		}
	}
	
	
	// An inner "class" of sorts, to handle the layouts
	function Layout() {
		this.displayables = new Array();
		this.display = defaultDisplay;
		
		for (var i = 0; i < arguments.length; i++) {
			this.displayables.push(arguments[i]);
		}

		function defaultDisplay() {
			clearView();
			for (var i = 0; i < this.displayables.length; i++) {
				setDisplay(this.displayables[i], true);
			}
			
			return false;
		}
	
		function clearView() {
			for (var i in DT) {
				setDisplay(DT[i], false);	
			}
		}
	}

	function setDisplay(elementID, value) {
		try {
			var display = (value) ? '' : 'none';
			var elementE = document.getElementById(elementID);
			elementE.style.display = display;
		}
		catch (e) {
			if (value) {
				alert("Error displaying " + elementID);
			}
		}
	}
}