<application-components>

	<!--
	
		The "_handle_[event]" syntax is static.
		The event list is specified as a configurable property in the Engine SDK.
		
	-->

	<application-component id = "demo_select_type" participant-id = "select-recipes">
		<![CDATA[	

			component_init:function(){
				this.getContainer().selectedIndex = 0;			
			},
			_handle_change:function(s,p){
				if(!p) this.serveTransaction('change');
			}

		]]>
	</application-component>	

	<application-component id = "demo_select_recipe" participant-id = "select-recipes">
		<![CDATA[	

			/*
				The objective is to key one select field from another.

				There are several object levels at play here, with the current context being
				the [application-component /] level.
				
				With normal HTML, this is easy because DOM-access methods such as
				the forms collection or getElementById may be used:

				<select id = 'oDemoRecipeType'>
					[application-component /]
				</select>
				<select id = 'oDemoRecipe'>
					[application-component /]
				</select>
				
				However, there are advantages to using the engine framework.
					- id's are not globally scoped
					- the element is extended by the xhtmlformcomponent

				It is possible to load an XHTMLComponent around an element, such that
				the following API structure will be created.
				
				[xhtmlcomponent]
					[xhtmlformcomponent /]
					<select rid = 'demo_recipe_type'>
						[application-component /]
					</select>
					<select rid = 'demo_recipe'>
						[application-component /]
					</select>
				[/xhtmlcomponent]
				
				In this case, there is no automatic association with an engine,
				so some sort of collection id may be specified when creating the XHTMLComponent.
				
				Instead of manually jacking HTML into the engine framework, the Engine configuration
				does this automatically.
				
				[engine]
					[xhtmlcomponent]
						[xhtmlformcomponent /]
						<select rid = 'demo_recipe_type'>
							[application-component /]
						</select>
						<select rid = 'demo_recipe'>
							[application-component /]
						</select>
					[/xhtmlcomponent]
				[/engine]
				
			*/
			
			getReferenceId:function(){
				var oRegistry = org.cote.js.registry.ObjectRegistry;

				/* oContainer = XHTMLComponent */
				var oContainer = oRegistry.getObject(this.getContainerId());

				if(!oContainer) return 0;

				/* ReferenceId = EngineID or specified id */
				return oContainer.getReferenceId();
			},
			
			getRecipeType:function(){
				var oXForm = org.cote.js.xhtml.form.XHTMLFormComponent;
				return oXForm.getValue('demo_recipe_type',this.getReferenceId());
			},
			getRecipe:function(){
				var oXForm = org.cote.js.xhtml.form.XHTMLFormComponent;
				return oXForm.getValue('demo_recipe',this.getReferenceId());
			},

	
			_handle_begin_transaction:function(s,p){
				this.showRecipes(this.getRecipeType());
			},
			
			_handle_change:function(s,p){

				if(p){
					this.showRecipes(this.getRecipeType());					

				}
				this.serveTransaction('change');

			},
			
			showRecipes:function(iType){
				if(iType <= 0) iType = 1;
				var oSource = this.getContainer();
				var aRecipes = [
					["cereal and milk","toast and eggs","fruit and waffles"],
					["ham and swiss on rye","soup and salad","pizza"],
					["pheasant under glass","duck in orange sauce","chips and beer"]
				];
				oSource.length = 0;
				if(!aRecipes[iType - 1]){
					oSource.options[0] = new Option("<[ Data Error #" + (iType-1) + " ]>");
					return 0;
				}
				for(var i = 0;i < aRecipes[iType - 1].length; i++){
					oSource.options[i] = new Option(aRecipes[iType-1][i],(i+1)+((iType-1)*aRecipes[iType - 1].length));
					if(i == 0) oSource.options[i].selected = 1;
				}
			}
			
			
		]]>
	</application-component>	
	<application-component id = "demo_select_ingredients" participant-id = "select-recipes">
		<![CDATA[	
			getRecipe:function(){
				var oXForm = org.cote.js.xhtml.form.XHTMLFormComponent;
				return oXForm.getValue('demo_recipe',this.getReferenceId());
			},
			getIngredient:function(){
				var oXForm = org.cote.js.xhtml.form.XHTMLFormComponent;
				return oXForm.getValue('demo_ingredients',this.getReferenceId());
			},
			getIngredientIndex:function(){
				var iRecipe = parseInt(this.getRecipe());
				return iRecipe;
			},
			
			getReferenceId:function(){
				var oRegistry = org.cote.js.registry.ObjectRegistry;
				var oContainer = oRegistry.getObject(this.getContainerId());
				if(!oContainer) return 0;
				return oContainer.getReferenceId();
			},
			_handle_begin_transaction:function(s,p){
				this.showIngredients(this.getIngredientIndex());
			},
			_handle_change:function(s,p){
				if(p){
					this.showIngredients(this.getIngredientIndex());
				}
			},
			showIngredients:function(iRecipe){
				if(iRecipe <= 0) iRecipe = 1;
				var oSource = this.getContainer();
				var aIngredients = [
					["oats","milk","sugar"],
					["bread","butter","eggs"],
					["berries","bananas","melon","flour","eggs","syrup"],
					["sliced ham","deli swiss","rye bread"],
					["minestrone soup","garden salad","olive oil dressing"],
					["pizza","pizza stuffin'"],
					["pheasant","glass","red wine"],
					["duck","orange sauce","red wine"],
					["chips","television","couch","beer"]
				];
				oSource.length = 0;
				if(!aIngredients[iRecipe - 1]){
					oSource.options[0] = new Option("<[ Data Error #" + (iRecipe - 1) + " ]>");
					return 0;
				}
				for(var i = 0;i < aIngredients[iRecipe - 1].length; i++){
					oSource.options[i] = new Option(aIngredients[iRecipe - 1][i],(i+1));
					if(i == 0) oSource.options[i].selected = 1;
				}
			}
		]]>
	
	</application-component>	
	<application-component id = "demo_button" participant-id = "demo_buttons">
		<![CDATA[
			_handle_mouseover:function(s,p){
				var oSource = this.getContainer();
				oSource.style.backgroundColor = "#FF5555";

				if(!p){
					this.serveTransaction('mouseover');
					this.serveTransaction('mouseover',0,0,"demo_buttons_2");
				}
			},
			_handle_mouseout:function(s,p){
				var oSource = this.getContainer();
				oSource.style.backgroundColor = "#CFCFCF";

				if(!p){
					this.serveTransaction('mouseout');
					this.serveTransaction('mouseout',0,0,"demo_buttons_2");
				}
			},

			_handle_click:function(e){
				org.cote.js.message.MessageService.sendMessage("Click: " + this.getObjectId(),"200.3",1);
			}

		]]>
		
	</application-component>

	<application-component id = "demo_button_2" participant-id = "demo_buttons">
		<![CDATA[
			_handle_mouseover:function(s,p){
				var oSource = this.getContainer();
				oSource.style.backgroundColor = "#FFFFEF";

				if(!p) this.serveTransaction('mouseover');
			},
			_handle_mouseout:function(s,p){
				var oSource = this.getContainer();
				oSource.style.backgroundColor = "#CFCFCF";

				if(!p) this.serveTransaction('mouseout');
			},
			_handle_click:function(e){
				var oSource = this.getContainer();
				org.cote.js.message.MessageService.sendMessage("Click: " + this.getObjectId(),"200.3",1);
			}

		]]>
		
	</application-component>
	<application-component id = "demo_button_3" participant-id = "demo_buttons_2">
		<![CDATA[
			_handle_mouseover:function(s,p){
				var oSource = this.getContainer();
				oSource.style.backgroundColor = "#AAAAFF";

				if(!p) this.serveTransaction('mouseover');
			},
			_handle_mouseout:function(s,p){
				var oSource = this.getContainer();
				oSource.style.backgroundColor = "#CFCFCF";

				if(!p) this.serveTransaction('mouseout');
			},
			_handle_click:function(e){
				var oSource = this.getContainer();
				org.cote.js.message.MessageService.sendMessage("Click: " + this.getObjectId(),"200.3",1);
			}

		]]>
		
	</application-component>
	<application-component id = "demo_field">
		<![CDATA[
			_handle_focus:function(s,p){
 				var oSource = this.getContainer();
				oSource.style.backgroundColor = "#FFFFFF";
			},
			_handle_blur:function(s,p){
				var oSource = this.getContainer();
				oSource.style.backgroundColor = "#EFEFEF";
			}

		]]>
		
	</application-component>
	<application-component id = "demo_field_2">
		<![CDATA[
			_handle_focus:function(s,p){
				var oSource = this.getContainer();
				oSource.style.backgroundColor = "#505050";
				oSource.style.color = "#FFFFFF";
			},
			_handle_blur:function(s,p){
				var oSource = this.getContainer();
				oSource.style.color = "#000000";
				oSource.style.backgroundColor = "#EFEFEF";
			}

		]]>
		
	</application-component>

</application-components>

