<!--
  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="./control" id="CONTROL"/>
	<require path="./scroller" id="SCROLLER"/>
	<require path="./tool" id="TOOL"/>

	<container id="EmptyScreen" left="0" right="0" top="0" bottom="0"/>
	
	<container id="TabScreen" like="EmptyScreen">
		<container anchor="BODY" like="$.tabs[$.selection].Pane" with="$.tabs[$.selection]"/>
		<line anchor="FOOTER" like="TabFooter"/>
		<container anchor="HEADER" like="$.tabs[$.selection].Header" with="$.tabs[$.selection]"/>
	</container>

	<!-- BODIES -->
	
	<container id="EmptyBody" left="0" right="0" top="THEME.screenHeaderHeight" bottom="0">
		<behavior><![CDATA[
			function onDisplaying(container) {
				container.focus();
			}
		]]></behavior>
	</container>
	
	<behavior id="ListBehavior"><![CDATA[
		function addBusyLine(list) {
			list.add(new BusyLine);
		}
		function addEmptyLine(list) {
			list.add(new EmptyLine);
		}
		function addErrorLine(list) {
			list.add(new ErrorLine);
		}
		function addItemLine(list, item, index) {
			debugger;
		}
		function addLines(list, items, more) {
			var c = items.length;
			if (c) {
				for (var i = 0; i < c; i++)
					this.addItemLine(list, items[i], i);
				if (more)
					this.addMoreLine(list);
			}
			if (!list.length)
				this.addEmptyLine(list);
		}
		function addMoreLine(list, more) {
			list.add(new MoreLine(this.data));
		}
		function createMessage(list, data) {
			debugger;
		}
		function getItems(list, message, result) {
			debugger;
		}
		function hasMore(list, message, result) {
		}
		function load(list, more) {
			this.addBusyLine(list);
			list.invoke(this.createMessage(list, this.data), "JSON");
		}
		function onComplete(list, message, result) {
			var data = this.data;
			list.remove(list.last);
			var items = this.getItems(list, message, result);
			var more = this.hasMore(list, message, result);
			if (items && items.length) {
				if (data.items)
					data.items = data.items.concat(items);
				else
					data.items = items;
				data.more = more;
				this.addLines(list, items, more);
			}
			else {
				if (!data.items) {
					data.items = [];
					this.addLines(list, data.items, false);
				}
			}
		}
		function onCreate(list, data) {
			this.data = data;
			if (data.items)
				this.addLines(list, data.items, data.more);
			else
				this.load(list);
		}
		function onDelete(list) {
			list.cancel();
		}
		function onDisplayed(list) {
			var content = this._selection;
			delete this._selection;
			if (content) {
				content.duration = 400;
				content.time = 0;
				content.start();
			}
		}
		function onDisplaying(list) {
			var data = this.data;
			this._selection = null;
			if (data && ("selection" in data)) {
				var index = data.selection;
				if ((0 <= index) && (index < list.length)) {
					var content = list.content(index);
					var behavior = content.behavior;
					if (ListItemBehavior.prototype.isPrototypeOf(behavior)) {
						behavior.changeState(content, 1);
						this._selection = content;
						if ("scroll" in data) {
							var bounds = content.bounds;
							bounds.y -= list.y;
							list.container.reveal(bounds);
						}
					}
					data.selection = -1;
				}
			}
		}
		function onItemTap(list, item) {
			var data = this.data;
			if (data && ("selection" in data))
				data.selection = item.index;
		}
		function onMore(list) {
			list.remove(list.last);
			this.load(list);
			return true;
		}
		function reload(list) {
			this.unload(list);
			this.load(list);
		}
		function unload(list) {
			list.cancel();
			this.data.items = null;
			list.empty();
		}
	]]></behavior>
	
	<behavior id="ListItemBehavior"><![CDATA[
		function changeState(line, state) {
			line.state = state;
		}
		function onCreate(line, data) {
			this.data = data;
			this.waiting = false;
		}
		function onFinished(line) {
			if (this.waiting) {
				this.waiting = false;
				this.changeState(line, 1);
			}
		}
		function onTap(line) {
			var list = line.container;
			list.behavior.onItemTap(list, line);
			var data = this.data;
			if (data && ("action" in data))
				line.invoke(new Message(data.action));
		}
		function onTimeChanged(line) {
			if (!this.waiting)
				this.changeState(line, 1 - line.fraction);
		}
		function onTouchBegan(line, id, x, y, ticks) {
			this.waiting = true;
			line.duration = 100;
			line.time = 0;
			line.start();
		}
		function onTouchCancelled(line, id, x, y, ticks) {
			if (this.waiting) {
				line.stop();
				this.waiting = false;
			}
			else {
				line.duration = 500;
				line.time = 0;
				line.start();
			}
		}
		function onTouchEnded(line, id, x, y, ticks) {
			if (this.waiting) {
				line.stop();
				this.waiting = false;
				this.changeState(line, 1);
			}
			line.captureTouch(id, x, y, ticks);
			this.onTap(line);
		}
	]]></behavior>
	
	<container id="BusyLine" left="0" right="0" height="50">
		<content skin="THEME.busySkin" behavior="CONTROL.BusyBehavior"/>
	</container>
	
	<container id="EmptyLine" left="0" right="0" height="50">
		<container skin="THEME.emptySkin"/>
	</container>
	
	<container id="ErrorLine" left="0" right="0" height="50">
		<container skin="THEME.errorSkin">
			<label style="THEME.errorStyle" string="$"/>
		</container>
	</container>
	
	<behavior id="MoreBehavior" like="CONTROL.ButtonBehavior"><![CDATA[
		function onTap(button) {
			button.bubble("onMore");
		}
	]]></behavior>
	
	<container id="MoreLine" left="0" right="0" height="50">
		<container active="true" skin="THEME.moreSkin" behavior="MoreBehavior"/>
	</container>
	
	<line id="TabLine" left="0" right="0" height="THEME.defaultLineHeight" style="THEME.tabLineStyle">
		<behavior like="CONTROL.TabBarBehavior"><![CDATA[
			function onCreate(line, data) {
				CONTROL.TabBarBehavior.prototype.onCreate.call(this, line, data);
				line.content(0).skin = THEME.tabLineLeftSkin;
				line.content(line.length - 1).skin = THEME.tabLineRightSkin;
			}
			function onTabTap(line, item) {
				CONTROL.TabBarBehavior.prototype.onTabTap.call(this, line, item);
				var data = this.data;
				var list = line.container;
				var tab = data.tabs[data.selection];
				list.run(new THEME.TabListSwapTransition, list.last, new tab.Pane(tab));
			}
		]]></behavior>
		<iterate on="$.tabs">
			<container left="0" right="0" top="0" bottom="0" skin="THEME.tabLineMiddleSkin" active="true" behavior="CONTROL.TabBehavior">
				<label left="0" right="0" top="0" bottom="0" string="$.title"/>
			</container>
		</iterate>
	</line>
	
	<!-- FOOTERS -->

	<container id="EmptyFooter" left="0" right="0" height="THEME.screenFooterHeight" bottom="0" skin="THEME.footerSkin"/>
	
	<line id="TabFooter" left="0" right="0" height="THEME.screenFooterHeight" bottom="0" skin="THEME.footerSkin" style="THEME.tabBarStyle">
		<behavior like="CONTROL.TabBarBehavior"><![CDATA[
			function onCreate(line, data) {
				CONTROL.TabBarBehavior.prototype.onCreate.call(this, line, data);
				line.content(0).skin = THEME.tabBarLeftSkin;
				line.content(line.length - 1).skin = THEME.tabBarRightSkin;
			}
			function onTabTap(line, item) {
				CONTROL.TabBarBehavior.prototype.onTabTap.call(this, line, item);
				var data = this.data;
				var screen = line.container;
				var tab = data.tabs[item.index];
				data.BODY = new tab.Pane(tab);
				data.HEADER = new tab.Header(tab);
				screen.run(new THEME.TabScreenSwapTransition, line.previous, data.BODY, line.next, data.HEADER);
			}
		]]></behavior>
		<iterate on="$.tabs">
			<container left="0" right="0" top="0" bottom="0" active="true" skin="THEME.tabBarMiddleSkin" behavior="CONTROL.TabBehavior">
				<content width="40" top="0" height="40" skin="$$.skin" variant="$.variant"/>
				<label width="100" bottom="0" string="$.title"/>
			</container>
		</iterate>
	</line>
	
	<!-- HEADERS -->
	
	<line id="EmptyHeader" left="0" right="0" top="0" height="THEME.screenHeaderHeight" skin="THEME.headerSkin" style="THEME.headerStyle"/>
	
	<line id="PlainHeader" like="EmptyHeader">
		<container like="TOOL.BackButton"/>
		<scroller like="TOOL.HeaderTitle" style="THEME.plainHeaderTitleStyle"/>
	</line>
	
	<line id="SearchHeader" like="EmptyHeader">
		<container like="TOOL.BackButton"/>
		<container left="0" right="0" top="0" bottom="0" skin="THEME.searchTitleSkin" active="true">
			<behavior>
				function onKeyDown(container, key, repeat, ticks) {
					var code = key.charCodeAt(0);
					if (code == 13) {
						container.next.delegate("onTouchBegan");
						return true;
					}
				}
				function onKeyUp(container, key, repeat, ticks) {
					var code = key.charCodeAt(0);
					if (code == 13) {
						container.next.delegate("onTouchEnded");
						return true;
					}
				}
			</behavior>
			<scroller left="18" right="40" top="8" bottom="8" active="true" clip="true" behavior="CONTROL.FieldScrollerBehavior">
				<label anchor="FIELD" left="0" top="0" bottom="0" editable="true" skin="THEME.fieldLabelSkin" style="THEME.fieldLabelStyle" string="$.what">
					<behavior like="CONTROL.FieldLabelBehavior">
						function onEdited(label) {
							label.container.next.active = label.string.length > 0;
						}
						function onUnfocused(label) {
							label.string = this.data.what;
							this.onEdited(label);
							CONTROL.FieldLabelBehavior.prototype.onUnfocused.call(this, label);
						}
					</behavior>
				</label>
			</scroller>
			<content right="5" top="0" bottom="0" behavior="CONTROL.FieldDeleterBehavior" skin="THEME.fieldDeleterSkin"/>
		</container>
		<container width="50" right="0" top="0" bottom="0" skin="THEME.toolButtonSkin" active="true">
			<behavior like="CONTROL.ButtonBehavior">
				function onTap(container) {
					var data = this.data;
					data.what = "";
					container.invoke(new Message(data.action + encodeURIComponent(data.FIELD.string)));
				}
			</behavior>
			<content width="40" height="40" skin="THEME.toolSkin" variant="THEME.SEARCH"/>
		</container>
	</line>
	
	<line id="ToolHeader" like="EmptyHeader">
		<container like="TOOL.BackButton"/>
		<scroller like="TOOL.HeaderTitle" style="THEME.toolHeaderTitleStyle"/>
		<container like="TOOL.ToolButton"/>
	</line>
	
</module>