<!--
  Copyright 2011-2014 Marvell Semiconductor, Inc.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<module xmlns="http://www.kinoma.com/kpr/1">
	<require path="mobile/control" id="CONTROL"/>
	<require path="mobile/scroller" id="SCROLLER"/>
	
	<container id="Box" left="0" right="0" top="0" bottom="0" skin="THEME.cancellerSkin" active="true">
		<layout skin="THEME.dialogBoxSkin" active="true">
			<behavior><![CDATA[
				function onCancel(layout) {
					layout.container.delegate("onCancel");
					application.behavior.closeDialog(layout.container);
					return true;
				}	
				function onCancelBegan(layout) {
					if ('cancelButton' in this && this.cancelButton)
						this.cancelButton.delegate('onTouchBegan');
				}
				function onCancelEnded(dialog) {
					if ('cancelButton' in this && this.cancelButton)
						this.cancelButton.delegate('onTouchEnded');
				}
				function onChanged(layout) {
					if ('okButton' in this && this.okButton)
						this.okButton.active = layout.container.delegate("canOK");
					return true;
				}
				function onCreate(layout, data) {
					this.data = data;
					this.query = data.query;
					var header = layout.first;
					var scroller = header.next;
					var footer = scroller.next;
					var column = scroller.first;
					var headerHeight = 0;;
					var footerHeight = 0;;
					if ('title' in data && data.title) {
						headerHeight = THEME.dialogHeaderHeight;
						header.coordinates = { left:0, right: 0, top:0, height:headerHeight };
						header.add(new Title(data.title));
					}
					var items = data.items;
					var c = items.length;
					var labelWidth = 0;
					for (var i = 0; i < c; i++) {
						var item = items[i];
						if ("label" in item) {
							var size = THEME.dialogLabelStyle.measure(item.label);
							if (labelWidth < size.width)
								labelWidth = size.width;
						}
					}
					column.add(new Spacer());
					for (var i = 0; i < c; i++) {
						var item = items[i];
						if ('id' in item && item.id && item.id in this.query)
							item.value = this.query[item.id];
						if (!('value' in item) || item.value === undefined)
							item.value = "";
						if ('Item' in item && item.Item) {
							item.labelWidth = labelWidth;
							column.add(new item.Item(item));
						}
					}
					column.add(new Spacer());

					var canCancel = ('cancel' in data && data.cancel);
					var canOK = ('ok' in data && data.ok);
					if (canCancel || canOK) {
						footerHeight = THEME.dialogFooterHeight;
						footer.coordinates = { left:0, right: 0, height:footerHeight, bottom:0 };
						if (canCancel) {
							this.cancelButton = new Cancel(data.cancel);
							footer.add(this.cancelButton);
						}
						if (canOK) {
							this.okButton = new OK(data.ok);
							footer.add(this.okButton);
						}
					}
					scroller.coordinates = { left:0, right: 0, top:headerHeight, bottom:footerHeight };
				}
				function onDisplaying(layout) {
					this.former = layout.focus();
					this.onChanged(layout);
				}
				function onKeyDown(layout, key, repeat, ticks) {
					var code = key.charCodeAt(0);
					if ((code == 8) || (code == 0xF0001))
						this.onCancelBegan(layout);
					else if ((code == 3) || (code == 13))
						this.onOKBegan(layout);
           			if ((Event.FunctionKeyPower == code) || (0xF000C == code))
                		return false;
					return true;
				}
				function onKeyUp(layout, key, repeat, ticks) {
					var code = key.charCodeAt(0);
					if ((code == 8) || (code == 0xF0001))
						this.onCancelEnded(layout);
					else if ((code == 3) || (code == 13))
						this.onOKEnded(layout);
           			if ((Event.FunctionKeyPower == code) || (0xF000C == code))
                		return false;
					return true;
				}
				function onOK(layout) {
					var data = this.data;
					var items = data.items;
					var c = items.length;
					var query = this.query;
					for (var i = 0; i < c; i++) {
						var item = items[i];
						if ('id' in item && item.id) 
							query[item.id] = item.value;
					}
					layout.container.delegate("onOK", query);
					application.behavior.closeDialog(layout.container);
					return true;
				}	
				function onOKBegan(layout) {
					var button = this.okButton;
					if (button)
						button.behavior.onTouchBegan(button);
				}
				function onOKEnded(dialog) {
					var button = this.okButton;
					if (button)
						button.behavior.onTouchEnded(button);
				}
				function onMeasureHorizontally(layout) {
					return Math.min(application.width - 40, 480);
				}
				function onMeasureVertically(layout) {
					var header = layout.first;
					var scroller = header.next;
					var footer = scroller.next;
					var column = scroller.first;
					var size = column.measure();
					var height = header.height + size.height + footer.height;
					return Math.min(height, application.height);
					return height;
				}
				function onScreenBegan(layout) {
					layout.distribute("onAutofocus", this);
				}
				function onUndisplayed(layout) {
					if (this.former)
						this.former.focus();
				}
			]]></behavior>
			<line left="0" right="0" top="0" height="0" skin="THEME.dialogHeaderSkin"/>
			<scroller left="0" right="0" top="0" bottom="0" skin="THEME.dialogScrollerSkin" behavior="SCROLLER.VerticalScrollerBehavior" active="true" clip="true">
				<column left="0" right="0" top="0"/>
				<content like="SCROLLER.TopScrollerShadow"/>
				<content like="SCROLLER.BottomScrollerShadow"/>
			</scroller>
			<line left="0" right="0" height="0" bottom="0" skin="THEME.dialogFooterSkin"/>
		</layout>
	</container>

	<!-- ITEMS -->

	<container id="Busy" left="0" right="0">
		<content left="10" width="40" height="60" skin="THEME.busySkin" behavior="CONTROL.BusyBehavior"/>
		<text anchor="TEXT" left="50" right="0" style="THEME.dialogCommentStyle" string="$.string"/>
	</container>

	<container id="Spinner" left="0" right="0">
		<content width="80" height="80" skin="THEME.spinnerSkin" behavior="CONTROL.SpinnerBehavior"/>
	</container>

	<container id="Cancel" left="0" right="0" top="0" bottom="0"  active="true" skin="THEME.dialogButtonSkin">
		<behavior like="CONTROL.ButtonBehavior">
			function onTouchEnded(container) {
				container.bubble("onCancel");
			}
		</behavior>
		<content left="0" skin="THEME.dialogButtonsSkin" variant="THEME.CANCEL"/>
		<label left="40" right="0" top="0" bottom="0" style="THEME.dialogCancelStyle" string="$"/>
	</container>
	
	<container id="OK" left="0" right="0" top="0" bottom="0"  active="true" skin="THEME.dialogButtonSkin">
		<behavior like="CONTROL.ButtonBehavior">
			function onTouchEnded(container) {
				container.bubble("onOK");
			}
		</behavior>
		<label left="0" right="40" top="0" bottom="0" style="THEME.dialogOKStyle" string="$"/>
		<content right="0" skin="THEME.dialogButtonsSkin" variant="THEME.OK"/>
	</container>

	<line id="Comment" left="0" right="0">
		<text left="0" right="0" style="THEME.dialogCommentStyle" string="$.string"/>
	</line>
	
	<line id="Caption" left="0" right="0">
		<text left="0" right="0" style="THEME.dialogCaptionStyle" string="$.string"/>
	</line>

	<line id="Subtitle" left="0" right="0">
		<text left="0" right="0" style="THEME.dialogSubtitleStyle" string="$.string"/>
	</line>

	<line id="Field" left="0" right="0" height="44" active="true">
		<behavior><![CDATA[
			function onCreate(container, data) {
				this.data = data;
			}
		]]></behavior>
		<label left="0" width="$.labelWidth" top="0" bottom="0" style="THEME.dialogLabelStyle" string="'label' in $ ? $.label : ''" active="true">
			<behavior><![CDATA[
				function onTouchBegan(label, id, x, y, ticks) {
					label.next.first.first.focus();
				}
			]]></behavior>
		</label>
		<container left="0" right="10" top="5" bottom="5" skin="THEME.fieldScrollerSkin">
			<scroller left="0" right="30" top="0" bottom="0" clip="true" active="true" behavior="CONTROL.FieldScrollerBehavior">
				<label left="0" top="0" bottom="0" editable="true" skin="THEME.fieldLabelSkin" style="THEME.fieldLabelStyle" string="$.value">
					<behavior like="CONTROL.FieldLabelBehavior">
						function onAutofocus(label) {
							label.focus();
							return true;
						}
						function onEdited(label) {
							var string = label.string;
							this.data.value = string;
							label.container.next.visible = string.length > 0;
							label.bubble("onChanged");
						}
						function onFocused(label) {
							//CONTROL.FieldLabelBehavior.prototype.onFocused.call(this, label);
							label.select(0, label.length);
							//label.container.next.active = true;
						}
						function onUnfocused(label) {
							//label.container.next.active = false;
							CONTROL.FieldLabelBehavior.prototype.onUnfocused.call(this, label);
						}
					</behavior>
				</label>
			</scroller>
			<content right="-5" top="0" bottom="0" skin="THEME.fieldDeleterSkin" active="true" behavior="CONTROL.FieldDeleterBehavior"/>
		</container>
	</line>
	
	<style id="fieldHintStyle" font="bold 20px" color="silver" align="left,middle">
		<margins left="5" right="5" top="5" bottom="5"/>
	</style>
	
	<line id="FieldHint" left="0" right="0" height="44" active="true">
		<behavior><![CDATA[
			function onCreate(container, data) {
				this.data = data;
			}
		]]></behavior>
		<container left="10" right="10" top="5" bottom="5" skin="THEME.fieldScrollerSkin">
			<scroller left="0" right="30" top="0" bottom="0" clip="true" active="true" behavior="CONTROL.FieldScrollerBehavior">
				<label left="0" top="0" bottom="0" editable="true" skin="THEME.fieldLabelSkin" style="THEME.fieldLabelStyle" string="$.value">
					<behavior like="CONTROL.FieldLabelBehavior"><![CDATA[
						function onAutofocus(label) {
							label.focus();
							return true;
						}
						function onEdited(label) {
							var string = label.string;
							this.data.value = string;
							label.container.next.next.visible = string.length == 0;
							label.bubble("onChanged");
						}
						function onFocused(label) {
							CONTROL.FieldLabelBehavior.prototype.onFocused.call(this, label);
						}
						function onUnfocused(label) {
							CONTROL.FieldLabelBehavior.prototype.onUnfocused.call(this, label);
						}
					]]></behavior>
				</label>
			</scroller>
			<content right="-5" top="0" bottom="0" skin="THEME.fieldDeleterSkin" active="true" behavior="CONTROL.FieldDeleterBehavior"/>
			<label left="0" top="0" bottom="0" style="fieldHintStyle" string="$.hint" visible="($.value.length == 0)"/>
		</container>
	</line>
	
	<line id="Password" like="Field">
		<behavior><![CDATA[
			function onCreate(container, data) {
				this.data = data;
				container.last.first.first.hidden = true;
			}
		]]></behavior>
	</line>
	
	<line id="PasswordHint" like="FieldHint">
		<behavior><![CDATA[
			function onCreate(container, data) {
				this.data = data;
				container.last.first.first.hidden = true;
			}
		]]></behavior>
	</line>
	
	<container id="Checkbox" left="0" right="0" height="44" active="true" behavior="CONTROL.CheckboxBehavior">
		<content like="CONTROL.Checkbox" left="12"/>
		<label left="40" right="12" top="0" bottom="0" style="THEME.dialogLabelStyle" string="$.label"/>
	</container>

	<container id="CheckboxRight" left="0" right="0" height="44" active="true" behavior="CONTROL.CheckboxBehavior">
		<label left="12" right="40" top="0" bottom="0" style="THEME.dialogLabelRightStyle" string="$.label"/>
		<content like="CONTROL.Checkbox" name="checkbox" right="6" variant="$.checkboxtheme"/>
	</container>

	<container id="ProgressBar" left="0" right="0" height="20">
		<container anchor="BAR" left="5" right="5" top="0" bottom="0" skin="THEME.progressBarSkin">
			<behavior><![CDATA[
				function onChanged(container) {
					var bar = container.first;
					var comb = container.last;
					var value = this.data.value;
					if (value < 0) {
						bar.visible = false;
						comb.visible = true;
					}
					else {
						bar.visible = true;
						comb.visible = false;
						bar.width = 12 + Math.round((container.width - 12) * value);
					}
				}
				function onCreate(container, data) {
					this.data = data;
				}
				function onDisplaying(container) {
					this.onChanged(container);
				}
			]]></behavior>
			<content left="0" width="0" top="0" bottom="0" skin="THEME.progressBarSkin" state="1"/>
			<scroller left="6" right="6" top="0" bottom="0" clip="true" loop="true" behavior="CONTROL.HorizontalTickerBehavior">
				<content left="0" width="600" top="0" bottom="0" skin="THEME.progressCombSkin"/>
			</scroller>
		</container>
	</container>
	
	<container id="Slider" left="0" right="0" height="60">
		<label left="0" right="0" top="5" height="20" style="THEME.dialogLabelStyle" string="$.label"/>
		<label left="0" right="0" top="5" height="20" style="THEME.dialogValueStyle"/>
		<container like="CONTROL.HorizontalSlider" left="0" right="0" top="20" height="40" bottom="0">
			<behavior like="CONTROL.HorizontalSliderBehavior"><![CDATA[
				function onValueChanged(container) {
					CONTROL.HorizontalSliderBehavior.prototype.onValueChanged.call(this, container);
					var data = this.data;
					if ("toString" in data)
						container.previous.string = data.toString(data.value);
					else
						container.previous.string = data.value;
				}
			]]></behavior>
		</container>
	</container>
	
	<container id="Spacer" left="0" right="0" height="5"/>
	
	<line id="Field2" left="0" right="0" height="44 * $.lines" active="true">
		<behavior><![CDATA[
			function onCreate(container, data) {
				this.data = data;
				this.multipleLines = true;
			}
		]]></behavior>
		<container left="10" right="10" top="5" bottom="5" skin="THEME.fieldScrollerSkin">
			<scroller left="0" right="0" top="0" bottom="0" clip="true" active="true" behavior="CONTROL.FieldScrollerBehavior">
				<text left="0" right="0" top="0" active="true" editable="true" skin="THEME.fieldLabelSkin" style="THEME.fieldLabelStyle" string="$.value">
					<behavior like="CONTROL.FieldLabelBehavior">
						function onAutofocus(label) {
							label.focus();
							return true;
						}
						function onEdited(label) {
							var string = label.string;
							this.data.value = string;
							label.bubble("onChanged");
						}
						function onFocused(label) {
							CONTROL.FieldLabelBehavior.prototype.onFocused.call(this, label);
							//label.container.next.active = true;
						}
						function onUnfocused(label) {
							//label.container.next.active = false;
							CONTROL.FieldLabelBehavior.prototype.onUnfocused.call(this, label);
						}
					</behavior>
				</text>
			</scroller>
		</container>
	</line>
	
	<scroller id="Title" left="0" right="0" top="0" bottom="0" clip="true" loop="true" skin="THEME.headerTitleSkin" behavior="CONTROL.HorizontalTickerBehavior">
		<label left="0" right="0" top="0" bottom="0" style="THEME.dialogTitleStyle" string="$"/>
	</scroller>

	<!-- MENU -->

	<container id="Menu" left="0" right="0" top="0" bottom="0" active="true" skin="THEME.cancellerSkin">
		<behavior><![CDATA[
			function onTouchEnded(container, id, x, y, ticks) {
				var layout = container.first;
				if (!layout.hit(x, y))
					layout.behavior.onCancel(layout);
			}	
		]]></behavior>
		<layout skin="THEME.dialogBoxSkin">
			<behavior><![CDATA[
				function onCancel(layout) {
					application.run(new THEME.MenuCloseTransition, application.last, this.data.button);
				}	
				function onCreate(layout, data) {
					this.data = data;
					var content = layout.first.first.content(data.selection);
					content.first.visible = true;
				}
				function onDisplaying(layout) {
					this.former = layout.focus();
				}
				function onKeyDown(layout, key, repeat, ticks) {
					var code = key.charCodeAt(0);
           			if ((Event.FunctionKeyPower == code) || (0xF000C == code))
                		return false;
					return true;
				}
				function onKeyUp(layout, key, repeat, ticks) {
					var code = key.charCodeAt(0);
					if ((code == 8) || (code == 0xF0001))
						this.onCancel(layout);
           			if ((Event.FunctionKeyPower == code) || (0xF000C == code))
                		return false;
					return true;
				}
				function onMeasureHorizontally(layout) {
					var size = layout.first.first.measure();
					return size.width;
				}
				function onMeasureVertically(layout) {
					var size = layout.first.first.measure();
					return Math.min(size.height, application.height - 46);
				}
				function onUndisplayed(layout) {
					if (this.former)
						this.former.focus();
				}
			]]></behavior>
			<scroller left="0" right="0" top="0" bottom="0" skin="THEME.whiteSkin" behavior="SCROLLER.VerticalScrollerBehavior" active="true" clip="true">
				<column anchor="LIST" left="0" right="0" top="0">
					<iterate on="$.items">
						<line left="0" right="0" active="true" skin="THEME.menuItemSkin" >
							<behavior like="CONTROL.ButtonBehavior"><![CDATA[
								function onTap(content) {
									var data = content.container.container.container.behavior.data;
									application.run(new THEME.MenuCloseTransition, application.last, data.button);
									data.selection = content.index;
									if ("button" in data)
										data.button.first.last.string = this.data.title;
									content.invoke(new Message(data.action + this.data.value));
								}
							]]></behavior>
							<content width="30" height="44" skin="THEME.menuBulletSkin" visible="false"/>
							<label left="0" top="4" bottom="4" style="THEME.menuItemStyle" string="$.title"/>
						</line>
					</iterate>
				</column>
				<content like="SCROLLER.TopScrollerShadow"/>
				<content like="SCROLLER.BottomScrollerShadow"/>
			</scroller>
		</layout>
	</container>

</module>
