<!--
  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.
-->
<program xmlns="http://www.kinoma.com/kpr/1">
    <require path="mobile/control" id="CONTROL"/>
    <require path="mobile/model" id="MODEL"/>
    <require path="themes/sample/theme" id="THEME"/>
    
    <!-- ASSETS -->

    <skin id="backgroundSkin" color="white"/>
    <skin id="toolbarSkin" color="#aaa"/>
    <skin id="buttonSkin" color="#ccf"/>
    <skin id="hiliteSkin" color="#88c"/>

    <style id="titleStyle" font="24px" color="black" align="center,middle"/>
    <style id="buttonStyle" font="bold 24px" color="blue" align="center,middle"/>
    <style id="errorStyle" font="14px" color="red" align="center,middle"/>
    
    <!-- MODEL -->

	<behavior id="ButtonBehavior">
		<method id="onCreate" params="label,data"><![CDATA[
			label.skin = buttonSkin;
			label.style = buttonStyle;
			label.active = true;
			this.data = data;
		]]></method>
		<method id="onTouchBegan" params="label"><![CDATA[
			label.skin = hiliteSkin;
		]]></method>
		<method id="onTouchEnded" params="label"><![CDATA[
			label.skin = buttonSkin;
			this.onTap(label);
		]]></method>
		<method id="onTap" params="label"><![CDATA[
			trace(label.string);
		]]></method>
	</behavior>

	<container id="MainContainer" left="0" right="0" top="0" bottom="0" skin="backgroundSkin">
		<line left="0" right="0" top="0" height="50" skin="toolbarSkin">
			<label string="' &lt;&lt; '" left="4">
				<behavior like="ButtonBehavior">
					<method id="onTap"><![CDATA[
						this.data.BROWSER.back();
					]]></method>
				</behavior>
			</label>
			<label string="' &gt;&gt; '" left="4">
				<behavior like="ButtonBehavior">
					<method id="onTap"><![CDATA[
						this.data.BROWSER.forward();
					]]></method>
				</behavior>
			</label>
			<label string="''" left="4" right="4" anchor="TITLE" style="titleStyle" skin="backgroundSkin"/>
			<content width="40" height="40" right="4" skin="THEME.busySkin" visible="false" anchor="BUSY" behavior="CONTROL.BusyBehavior"/>
		</line>

		<browser left="0" right="0" top="50" bottom="40" url="$.url" anchor="BROWSER">
			<behavior>
				<method id="onCreate" params="browser,data"><![CDATA[
					this.data = data;
				]]></method>
		
				<!-- onLoading will be called when the browser start loading the page -->
				<method id="onLoading" params="browser"><![CDATA[
					this.data.TITLE.string = "Loading";
					this.data.BUSY.visible = true;
					browser.visible = false;
				]]></method>
		
				<!-- onLoaded will be called when page is completely loaded -->
				<method id="onLoaded" params="browser"><![CDATA[
					this.data.TITLE.string = browser.evaluate("document.title");
					this.data.BUSY.visible = false;
					browser.visible = true;
				]]></method>
			</behavior>
		</browser>
        
		<line left="0" bottom="0" right="0" height="40" skin="toolbarSkin">
			<label string="'Kinoma'" left="4">
				<behavior like="ButtonBehavior">
					<method id="onTap"><![CDATA[
						this.data.BROWSER.load("http://developer.kinoma.com/");
					]]></method>
				</behavior>
			</label>
			<label string="'Google'" left="4">
				<behavior like="ButtonBehavior">
					<method id="onTap"><![CDATA[
						this.data.BROWSER.load("http://www.google.com/");
					]]></method>
				</behavior>
			</label>
			<label string="'Apple'" left="4">
				<behavior like="ButtonBehavior">
					<method id="onTap"><![CDATA[
						this.data.BROWSER.load("http://www.apple.com/");
					]]></method>
				</behavior>
			</label>
			<label string="'Twitter'" left="4">
				<behavior like="ButtonBehavior">
					<method id="onTap"><![CDATA[
						this.data.BROWSER.load("http://www.twitter.com/");
					]]></method>
				</behavior>
			</label>
		</line>
	</container>

	<container id="ErrorContainer" left="0" right="0" top="0" bottom="0" skin="backgroundSkin" style="errorStyle">
		<column>
			<label string="'Bad news.'"/>
			<label string="'Browser is not supported in your platform.'"/>
			<label string="$.platform" style="titleStyle"/>
		</column>
	</container>

	<script><![CDATA[
		var container, data;
		
		if (["mac", "android", "iphone"].indexOf(system.platform) < 0) {
			container = new ErrorContainer({ platform: system.platform });
		} else {
			container = new MainContainer({ url: "http://kinoma.com/meet-kinoma/" });
		}
		
		application.add(container);
	]]></script>
</program>
