﻿<?xml version="1.0" encoding="utf-8" ?> 
<application-components>
	<application-component id = "steps" participant-id = "printer-friendly">
		<![CDATA[
			component_init : function(){

				this.getPointers().steps = [];
				this.getPointers().step_panes = [];
				this.createHandler("stepclick",0,0,1);
				
				var strip = document.createElement("div");
				var oC = this.getContainer();
				if(oC.firstChild) oC.insertBefore(strip,oC.firstChild);
				else oC.appendChild(strip);
				this.getPointers().step_strip = strip;
				strip.className += " stepstrip";

				
			},
			component_post_init : function(){

				this.Setup();
			},
			component_destroy : function(){
				this.getPointers().steps = [];
				this.getPointers().step_panes = [];
			},
			GetElementByRID : function(n){
				var o = org.cote.js.engine.EngineService.getEngine(this.getReferenceId()).getObjectByName(n);
				if(!o || !o.object) return o;
				o = o.object;
				if(typeof o.getContainer == "function") o = o.getContainer();
				return o;
			},
			Setup : function(){
			
			/*
			<div acid = "steps" appcomp_path = "/Gizmos/component.steps.xml" class = "field">
			*/
				var a = this.getContainer().childNodes,it=0;
				for(var i = 1; i < a.length; i++){
					if(a[i].nodeType == 1){
						this.getPointers().step_panes[this.getPointers().step_panes.length] = a[i];
						it++;
					}
				}
				
				if(it > 0){
					this.SetupSteps(it);
					this.DiagramStep(0);
				}
			},
			_handle_printerfriendly : function(s, p){
				this.getPointers().step_strip.style.display = "none";
				var a= this.getPointers().step_panes;
				for(var i= 0; i < a.length; i++){
					a[i].style.display = "block";
					a[i].removeChild(a[i].lastChild);
				}
			},
			SetupSteps : function(iTotal){
				var oDiag = this.getPointers().step_strip;//this.GetElementByRID("step_diagram");

				if(!oDiag) return;
				for(var i = 0; i < iTotal; i++){
					var oS = document.createElement("span");
					oS.className = "step step_inactive";
					this.getPointers().step_strip.appendChild(oS);
					org.cote.js.xml.setInnerXHTML(oS, "" + (i + 1));
					oS.step_index = i;
					oS.onclick = this._prehandle_stepclick;
					this.getPointers().steps[this.getPointers().steps.length] = oS;
					var oD = document.createElement("div");
					this.getPointers().step_panes[i].appendChild(oD);
					if(i > 0){
						oS = document.createElement("input");
						oS.setAttribute("type","button");
						oS.value = "Prev";
						oS.step_index = (i - 1);
						oS.onclick = this._prehandle_stepclick;
						oD.appendChild(oS);
					}
					if(i < (iTotal - 1)){
						oS = document.createElement("input");
						oS.setAttribute("type","button");
						oS.value = "Next";
						oS.step_index = (i + 1);
						oS.onclick = this._prehandle_stepclick;
						oD.appendChild(oS);
					}
					/*
					var oI = document.createElement("img");
					oI.setAttribute("src","Graphics/star_empty.jpg");
					oI.setAttribute("width","20");
					oI.setAttribute("width","20");
					oDiag.appendChild(oI);
					this.getPointers().steps[this.getPointers().steps.length]=oI;
					*/
					
				}
			},
			_handle_stepclick : function(e){
				var o = org.cote.js.dom.event._gevt_src(e);

				if(o && typeof o.step_index == "number") this.DiagramStep(o.step_index);
			},
			DiagramStep : function(iMark){
				var aS = this.getPointers().steps;
				var oDiag = this.getPointers().step_strip;
				if(!oDiag) return;

				for(var i = 0; i < aS.length; i++){
					this.getPointers().step_panes[i].style.display = "none";
					
					if(i < iMark){
						aS[i].className = "step";
					}
					else if( i == iMark){
						aS[i].className = "step step_active";
						this.getPointers().step_panes[i].style.display = "block";
					}
					else{
						aS[i].className = "step step_inactive";
					}
				}
			}
		]]>
	</application-component>
</application-components>