var Navigation = Thunder.Component.extend({			
	init: function(initRootElement, initDebug) {
		this._super(initRootElement);
			
		//Initialize properties
		this.debug = initDebug;
		this.imageDirectory = "/image/nav/";
		
		//Initialize assets
		var x = 28;
		var y = 76;
		var yOffset = 18;
		this.assetManager.addAsset("gui","btn",null,"HOME",x,y,100,13);
		this.assetManager.addAsset("gui","btn",null,"CLIENTS",x - 5,(y += yOffset),100,13);
		this.assetManager.addAsset("gui","btn",null,"TARGETING",x - 8,(y += yOffset),100,13);
		this.assetManager.addAsset("gui","btn",null,"TRACKING",x - 17,(y += yOffset),100,13);
		this.assetManager.addAsset("gui","btn",null,"APPINSTALLS",x - 23,(y += yOffset),100,13);
		this.assetManager.addAsset("gui","btn",null,"ABOUT",x - 17,(y += yOffset),100,13);
		this.assetManager.addAsset("gui","btn",null,"PRICING",x - 8,(y += yOffset),100,13);
		this.assetManager.addAsset("gui","btn",null,"GUARANTEEDSUCCESS",x - 5,(y += yOffset),100,24);
		this.assetManager.addAsset("gui","btn",null,"CONTACTUS",x,(y += yOffset + 11),100,13);
		this.assetManager.addAsset("gui","img",this.imageDirectory + "compass_shadow.png","COMPASS_SHADOW",98,125,60,60);
		this.assetManager.addAsset("compass","img",this.imageDirectory + "compass_80.png","COMPASS",98,125,60,60);
		this.assetManager.addAsset("compass","img",this.imageDirectory + "compass_60.png","COMPASS",98,125,60,60);
		this.assetManager.addAsset("compass","img",this.imageDirectory + "compass_40.png","COMPASS",98,125,60,60);
		this.assetManager.addAsset("compass","img",this.imageDirectory + "compass_20.png","COMPASS",98,125,60,60);
		this.assetManager.addAsset("compass","img",this.imageDirectory + "compass_0.png","COMPASS",98,125,60,60);
		this.assetManager.addAsset("compass","img",this.imageDirectory + "compass_n20.png","COMPASS",98,125,60,60);
		this.assetManager.addAsset("compass","img",this.imageDirectory + "compass_n40.png","COMPASS",98,125,60,60);
		this.assetManager.addAsset("compass","img",this.imageDirectory + "compass_n60.png","COMPASS",98,125,60,60);
		this.assetManager.addAsset("compass","img",this.imageDirectory + "compass_n80.png","COMPASS",98,125,60,60);
		
		//Initialize layers
		this.layerManager.defineSet("GUI");
		this.layerManager.defineSet("COMPASS");
		
		//Load images
		this.loadImages(this.assetManager.getAssets("compass"));
	},
	
	handleEvents: function(events) {
		for(var i = 0; i < events.length; i++) {
			if(this.debug) this.trace("NAVIGATION: " + events[i].name);
			
			switch(events[i].name) {
				case "MOUSEUP":
					if(events[i].owner.param == false) {
						this.setButtonState(events[i].owner,"on",true);
						this.broadcastEvent("NAV_SELECTION");
					}
					break;
				case "MOUSEENTER":					
					this.setButtonState(events[i].owner,"on");
					break;
				case "MOUSELEAVE":					
					this.setButtonState(events[i].owner,"off");
					break;
			}
		}
	},
	
	handleCustomization: function(assetList) {
		for(var i = 0, ii = assetList.length; i < ii; i++) {
			var asset = assetList[i];			
						
			switch (asset.type) {	
				case "img":	
					asset.container.append("<img width='" + asset.width + "' height='" + asset.height + "' src='" + asset.src + "' id='" + asset.tag + "'/>");
					break;
				case "btn":		
					asset.param = 0; //using the param to note the current selection
					new Thunder.EventMap(asset.container,asset,this.eventQueue);
					var imgSrc = this.imageDirectory + "btn_" + asset.tag.toLowerCase();
					asset.container.append($('<img />').attr('name',asset.tag).attr('src', imgSrc + "_off.png").attr('id', asset.tag + "_off").attr('class',"btn"));
					asset.container.append($('<img />').attr('name',asset.tag).attr('src', imgSrc + "_on.png").attr('id', asset.tag + "_on").attr('class',"btn"));
					break;
			}
		}
	},
	
	draw: function() {
		var assets = this.assetManager.getAssets("gui");
		this.layerManager.layOut(assets,"GUI",0);
		
		//set initial button states
		for(var i = 0; i < assets.length; i++)
			this.setButtonState(assets[i],"off");
				
		this.broadcastEvent("NAV_READY");
	},
	
	setButtonState: function(asset,newState,isSelected) {
		if(asset.param == 0) {
			switch(newState) {
				case "on":
					$("#" + asset.tag + "_on").css("display","block");
					$("#" + asset.tag + "_off").css("display","none");
					break;
				case "off":
					$("#" + asset.tag + "_on").css("display","none");
					$("#" + asset.tag + "_off").css("display","block");
					break;
			}
			
			if(isSelected) {
				var assets = this.assetManager.getAssets("gui","btn");
				var compassAssets = this.assetManager.getAssets("compass");
				
				for(var i = 0; i < assets.length; i++) {					
					if(assets[i].param == 1) {
						// remove the selection if the button is selected
						assets[i].param = 0;
						this.setButtonState(assets[i],"off");
					} else if(asset.tag == assets[i].tag) {
						assets[i].param = 1;
						
						//rotate compass						
						this.layerManager.layOut([compassAssets[i]],"COMPASS",0);
					}
				}
			}
		}
	},
	
	getSelection: function() {
		var assets = this.assetManager.getAssets("gui","btn");
		
		for(var i = 0; i < assets.length; i++) {
			if(assets[i].param == true) {
				return assets[i].tag;	
			}
		}
		
		return null;
	},
	
	setSelection: function(tag) {
		var asset = this.assetManager.getAsset(tag);
		this.setButtonState(asset,"on",true);
	}
});