var CaseNavigation = Thunder.Component.extend({			
	init: function(initRootElement, initDebug) {
		this._super(initRootElement);
			
		//Initialize properties
		this.debug = initDebug;
		this.index = 0; //current case study
		
		//Initialize assets
		this.assetManager.addAsset("start","btn",null,"SEECASESTUDIES",5,3,130,13);
		this.assetManager.addAsset("gui","btn",null,"NEXTCASESTUDY",5,21,112,13);
		
		for(var i = 0; i < totalCaseStudies; i++) {
			this.assetManager.addAsset("page","html","/content/case-studies/" + i + ".html","HTML_" + i,5,3,410,13);
		}
		
		//Initialize layers
		this.layerManager.defineSet("GUI");
		this.layerManager.defineSet("PAGE");
		
		//Get total number of case studies
		this.max = this.assetManager.getAssets("page").length - 1;
	},
	
	handleEvents: function(events) {
		for(var i = 0; i < events.length; i++) {
			if(this.debug) this.trace("CASENAVIGATION: " + events[i].name);
			
			switch(events[i].name) {
				case "BTN_CLICK":
					switch(events[i].owner.getName()) {
						case "SEECASESTUDIES":
							this.layerManager.layOut(this.assetManager.getAssets("gui"),"GUI",0);
							this.drawNextPage();
							break;
						case "NEXTCASESTUDY":
							this.incrementIndex();
							this.drawNextPage();
							break;
					}
					break;
			}
		}
	},
	
	handleCustomization: function(assetList) {
		for(var i = 0, ii = assetList.length; i < ii; i++) {
			var asset = assetList[i];			
						
			switch (asset.type) {	
				case "btn":	
					asset.param = new Button(asset.container,asset.tag,asset.width,asset.height,this.debug);
					asset.param.addListener(this.eventQueue);
					break;
				case "html":
					asset.container.load(asset.src);
					asset.setMask(0,asset.width,asset.height,0);
					break;
			}
		}
	},
	
	draw: function() {
		this.layerManager.layOut(this.assetManager.getAssets("start"),"GUI",0);
	},
	
	drawNextPage: function() {
		var assets = this.assetManager.getAssets("page");
		this.layerManager.layOut([assets[this.index]],"PAGE",0);		
		this.broadcastEvent("CASE_NAV_SELECTION");
	},
	
	incrementIndex: function() {
		this.index++;
		
		//if index is out of bounds, reset to 0
		if(this.index > this.max) {
			this.index = 0;
		}
	},
	
	getSelection: function() {
		return this.index;
	}
});