var GetStartedForm = Thunder.Component.extend({			
	init: function(initRootElement, initDebug) {
		this._super(initRootElement);
			
		//Initialize properties
		this.debug = initDebug;
		
		//Initialize assets
		this.assetManager.addAsset("shade","img","/image/dialog/shade.png","BG_SHADE",0,0,700,500);
		this.assetManager.addAsset("gui","img","/image/dialog/bg_getstarted.png","BG_GETSTARTED",0,0,700,400);
		
		this.assetManager.addAsset("form","html","/content/getstarted_form.html","HTML_GETSTARTED",10,25,680,460);
		this.assetManager.addAsset("form","btn",null,"SUBMIT",552,360,138,30);
		
		this.assetManager.addAsset("thankyou","html","/content/getstarted_thankyou.html","HTML_GETSTARTED",10,25,680,460);
		this.assetManager.addAsset("thankyou","btn",null,"CLOSE",552,360,138,30);
		
		this.assetManager.addAsset("gui","btn",null,"X",684,2,14,14);
		
		//Initialize layers
		this.layerManager.defineSet("SHADE");
		this.layerManager.defineSet("GUI");
		this.layerManager.defineSet("PAGE");
		
		//Listen for window resize
		var t = this;		
		$(window).resize(function() { t.resize(); });
		$(window).scroll(function() { t.resize(); });
		
		//Start
		this.draw();
	},
	
	handleEvents: function(events) {
		for(var i = 0; i < events.length; i++) {
			if(this.debug) this.trace("GETSTARTEDFORM: " + events[i].name);
			
			switch(events[i].name) {
				case "BTN_CLICK":
					switch(events[i].owner.getName()) {
						case "X":
						case "CLOSE":
							this.removeDatePicker();
							this.broadcastEvent("DIALOG_CLOSE");
							break;
						case "SUBMIT":
							if($("#getStartedForm").valid()) {
								$("#getStartedForm").ajaxSubmit();
								this.removeDatePicker();
								this.layerManager.layOut(this.assetManager.getAssets("thankyou"),"PAGE",0);
								App.track("/getstarted/thankyou");
							}
							break;
					}
					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 = 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);
					break;
			}
		}
	},
	
	draw: function() {
		this.layerManager.layOut(this.assetManager.getAssets("shade"),"SHADE",0);
		this.layerManager.layOut(this.assetManager.getAssets("gui"),"GUI",0);
		this.layerManager.layOut(this.assetManager.getAssets("form"),"PAGE",0);
		this.resize();
	},
	
	resize: function() {		
		var bg_shade = this.assetManager.getAsset("BG_SHADE").getContainer();
		//bg_shade.css("top",this.container.offset().top * -1);
		//bg_shade.css("left",this.container.offset().left * -1);
		bg_shade.css("top",(this.container.offset().top * -1) + $(window).scrollTop());
		bg_shade.css("left",(this.container.offset().left * -1) + $(window).scrollLeft());
		$('#BG_SHADE').css("width",$(window).width());
		$('#BG_SHADE').css("height",$(window).height());
		
		if(gIsIPad) {
			var x = ($(window).width() / 2) - (700 / 2) + $(window).scrollLeft();
			var y = ($(window).height() / 2) - (400 / 2) + $(window).scrollTop();
		} else {
			var x = ($(window).width() / 2) - (700 / 2);
			var y = ($(window).height() / 2) - (400 / 2);
		}
		
		x -= this.container.offset().left;
		y -= this.container.offset().top;
		this.layerManager.setLayerSetPosition("GUI",new Thunder.Point(x,y));
		this.layerManager.setLayerSetPosition("PAGE",new Thunder.Point(x,y));
	},
	
	removeDatePicker: function() {
		$("#campaign_start_date").datepicker('hide');
		$("#campaign_end_date").datepicker('hide');
		$("#campaign_start_date").datepicker('destroy');
		$("#campaign_end_date").datepicker('destroy');
	}
});