<!--
  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">
	
	<transition id="HeaderFooterShowHideTransition"><![CDATA[
		function onBegin(application, header, footer, flag) {
			this.flag = flag;
			this.layer0 = new Layer({alpha: false});
			this.layer1 = new Layer({alpha: false});
			if (flag) {
				header.active = true;
				header.visible = true;
				footer.active = true;
				footer.visible = true;
			}
			this.layer0.attach(header);
			this.layer1.attach(footer);
		}
		function onEnd(application, header, footer, flag) {
			this.layer0.detach();
			this.layer1.detach();
			if (!flag) {
				header.active = false;
				header.visible = false;
				footer.active = false;
				footer.visible = false;
			}
		}
		function onStep(fraction) {
			var flag = this.flag;
			var header = this.layer0;
			var footer = this.layer1;
			header.translation = { y: (0 - header.height) * (flag ? (1 - fraction) : fraction ) };
			footer.translation = { y: footer.height * (flag ? (1 - fraction) : fraction ) };
		}
	]]></transition>
	
	<transition id="DialogOpenTransition" duration="300"><![CDATA[
		function onBegin(container, content) {
			container.add(content);
			this.canceller = content;
			var layer = this.layer = new Layer({alpha: false});
			layer.attach(content.first);
			layer.origin = { x: layer.width / 2 };
			this.starts = [
				{ x: 0.2, y: 0.49 },
				{ x: 0.8, y: 0.49 },
				{ x: 1.2, y: 0.51 },
				{ x: -0.2, y: 0.51 },
			];
			this.stops = [
				{ x: 0, y: 0 },
				{ x: 1, y: 0 },
				{ x: 1, y: 1 },
				{ x: 0, y: 1 },
			];
			this.steps = [
				{ x: 0, y: 0 },
				{ x: 1, y: 0 },
				{ x: 1, y: 1 },
				{ x: 0, y: 1 },
			];
		}
		function onEnd(container, content) {
			this.layer.detach();
			content.distribute(application.behavior._onScreenBegan);
		}
		function onStep(fraction) {
			fraction = Math.quadEaseOut(fraction);
			var starts = this.starts;
			var stops = this.stops;
			var steps = this.steps;
			for (var i = 0; i < 4; i++) {
				var start = this.starts[i];
				var stop = this.stops[i];
				var step = this.steps[i];
				step.x = (start.x * (1 - fraction)) + (stop.x * fraction);
				step.y = (start.y * (1 - fraction)) + (stop.y * fraction);
			}
			this.layer.corners = steps;
			this.canceller.state = fraction;
		}
	]]></transition>
	
	<transition id="DialogCloseTransition" duration="300"><![CDATA[
		function onBegin(container, content) {
			this.canceller = content;
			var layer = this.layer = new Layer({alpha: false});
			layer.attach(content.first);
			layer.origin = { x: layer.width / 2 };
			this.starts = [
				{ x: 0, y: 0 },
				{ x: 1, y: 0 },
				{ x: 1, y: 1 },
				{ x: 0, y: 1 },
			];
			this.stops = [
				{ x: -0.2, y: 0.49 },
				{ x: 1.2, y: 0.49 },
				{ x: 0.8, y: 0.51 },
				{ x: 0.2, y: 0.51 },
			];
			this.steps = [
				{ x: 0, y: 0 },
				{ x: 1, y: 0 },
				{ x: 1, y: 1 },
				{ x: 0, y: 1 },
			];
		}
		function onEnd(container, content) {
			this.layer.detach();
			container.remove(content);
		}
		function onStep(fraction) {
			fraction = Math.quadEaseIn(fraction);
			var starts = this.starts;
			var stops = this.stops;
			var steps = this.steps;
			for (var i = 0; i < 4; i++) {
				var start = this.starts[i];
				var stop = this.stops[i];
				var step = this.steps[i];
				step.x = (start.x * (1 - fraction)) + (stop.x * fraction);
				step.y = (start.y * (1 - fraction)) + (stop.y * fraction);
			}
			this.layer.corners = steps;
			this.canceller.state = 1 - fraction;
		}
	]]></transition>
	
	<transition id="MenuOpenTransition" duration="250"><![CDATA[
		function onBegin(container, content, button) {
			container.add(content);
			this.canceller = content;
			var layer = this.layer = new Layer({alpha: false});
			layer.attach(content.first);
			if (!button)
				button = container;
			this.translation = { 
				x: button.x + (button.width / 2) - layer.x, 
				y: button.y + (button.height / 2) - layer.y, 
			}; 
		}
		function onEnd(container, content) {
			this.layer.detach();
		}
		function onStep(fraction) {
			this.layer.scale = { x: fraction, y: fraction };
			this.layer.translation = { x: this.translation.x * (1 - fraction), y: this.translation.y * (1 - Math.quadEaseIn(fraction)) };
			this.canceller.state = fraction;
		}
	]]></transition>
	
	<transition id="MenuCloseTransition" duration="250"><![CDATA[
		function onBegin(container, content, button) {
			this.canceller = content;
			var layer = this.layer = new Layer({alpha: false});
			layer.attach(content.first);
			layer.opacity = 1;
			if (!button)
				button = container;
			this.translation = { 
				x: button.x + (button.width / 2) - layer.x, 
				y: button.y + (button.height / 2) - layer.y, 
			}; 
		}
		function onEnd(container, content) {
			this.layer.detach();
			container.remove(content);
		}
		function onStep(fraction) {
			fraction = Math.quadEaseOut(fraction);
			this.layer.scale = { x: 1 - fraction, y: 1 - fraction };
			this.layer.translation = { x: this.translation.x * fraction, y: this.translation.y * fraction };
			this.canceller.state = 1 - fraction;
		}
	]]></transition>
	
	<transition id="ScreenTransition" duration="500"><![CDATA[
		function onBegin(container, formerScreen, currentScreen, formerData, currentData) {
			container.add(currentScreen);
			this.formerHeader = null;
			this.currentHeader = null;
			this.formerFooter = null;
			this.currentFooter = null;
			if (("BODY" in formerData) && ("BODY" in currentData)) {
				var formerLayer = this.formerLayer = new Layer({alpha: false});
				formerLayer.attach(formerData.BODY);
				var currentLayer = this.currentLayer = new Layer({alpha: false});
				currentLayer.attach(currentData.BODY);
				if ("HEADER" in formerData) {
					formerData.HEADER.active = false;		// trying to get the auto scroll to stop here

					var formerHeader = this.formerHeader = new Layer({alpha: false});
		//			formerHeader.attach(formerData.HEADER);
					formerHeader.capture(formerScreen, 0, 0, formerData.HEADER.width, formerData.HEADER.height);
					application.add(formerHeader);
					
					this.realFormerHeader = formerData.HEADER;
					formerData.HEADER.visible = false;
				}
				if ("HEADER" in currentData) {
					currentData.HEADER.active = false;		// trying to get the auto scroll to stop here	

					var currentHeader = this.currentHeader = new Layer({alpha: false});
//					currentHeader.attach(currentData.HEADER);
					currentHeader.capture(currentScreen, 0, 0, currentData.HEADER.width, currentData.HEADER.height);
					application.add(currentHeader);	
					
					this.realCurrentHeader = currentData.HEADER;
					currentData.HEADER.visible = false;			
				}
				if ("FOOTER" in currentData) {
					var currentFooter = this.currentFooter = new Layer({alpha: false});
					currentFooter.attach(currentData.FOOTER);
				}
				else if ("FOOTER" in formerData) {
					var formerFooter = this.formerFooter = new Layer({alpha: false});
					formerFooter.attach(formerData.FOOTER);
				}
			}
			else {
				var formerLayer = this.formerLayer = new Layer({alpha: false});
				formerLayer.attach(formerScreen);
				var currentLayer = this.currentLayer = new Layer({alpha: false});
				currentLayer.attach(currentScreen);
			}
			this.width = container.width;
		}
		function onEnd(container, formerScreen, currentScreen) {
			if (this.currentFooter)
				this.currentFooter.detach();
			if (this.formerFooter)
				this.formerFooter.detach();
			if (this.currentHeader) {
	//			this.currentHeader.detach();
				this.currentHeader.container.remove(this.currentHeader);
				this.realCurrentHeader.visible = true;
				this.realCurrentHeader.active = true;
			}
			if (this.formerHeader) {
	//			this.formerHeader.detach();
				this.formerHeader.container.remove(this.formerHeader);
				this.realFormerHeader.visible = true;
				this.realFormerHeader.active = true;
			}
			this.currentLayer.detach();
			this.formerLayer.detach();
			container.remove(formerScreen);
		}
	]]></transition>
	
	<transition id="ScreenOpenTransition" like="ScreenTransition"><![CDATA[
		function onStep(fraction) {
			fraction = 1 - Math.pow(1 - fraction, 2);
			var width = this.width;
			this.formerLayer.translation = {x: (0 - width) * fraction};
			this.currentLayer.translation = {x: width * (1 - fraction)};
			if (this.currentHeader)
				this.currentHeader.opacity = fraction;
			if (this.formerHeader)
				this.formerHeader.opacity = 1 - fraction;
			if (this.currentFooter)
				this.currentFooter.opacity = fraction;
			if (this.formerFooter)
				this.formerFooter.opacity = 1 - fraction;
		}
	]]></transition>
	
	<transition id="ScreenNextTransition" like="ScreenOpenTransition"/>
	
	<transition id="ScreenCloseTransition" like="ScreenTransition"><![CDATA[
		function onStep(fraction) {
			fraction = 1 - Math.pow(1 - fraction, 2);
			var width = this.width;
			this.formerLayer.translation = {x: width * fraction};
			this.currentLayer.translation = {x: (0 - width) * (1 - fraction)};
			if (this.currentHeader)
				this.currentHeader.opacity = fraction;
			if (this.formerHeader)
				this.formerHeader.opacity = 1 - fraction;
			if (this.currentFooter)
				this.currentFooter.opacity = fraction;
			if (this.formerFooter)
				this.formerFooter.opacity = 1 - fraction;
		}
	]]></transition>
	
	<transition id="ScreenPreviousTransition" like="ScreenCloseTransition"/>
	
	<transition id="TabScreenSwapTransition" duration="250"><![CDATA[
		function onBegin(container, formerBody, currentBody, formerHeader, currentHeader) {
			this.height = application.height;
			container.insert(currentBody, formerBody.next);
			container.add(currentHeader);
			var layer0 = this.layer0 = new Layer({alpha: false});
			layer0.attach(currentBody);
			var layer1 = this.layer1 = new Layer({alpha: false});
			layer1.attach(currentHeader);
		}
		function onEnd(container, formerBody, currentBody, formerHeader, currentHeader) {
			this.layer1.detach();
			this.layer0.detach();
			container.remove(formerHeader);
			container.remove(formerBody);
		}
		function onStep(fraction) {
			fraction = Math.pow(fraction, 2);
			this.layer0.translation = {y: this.height * (1 - fraction)};
			this.layer1.opacity = fraction;
		}
	]]></transition>
		
	<transition id="TabListSwapTransition" duration="250"><![CDATA[
		function onBegin(container, content, by) {
			var scroller = container.container;
			var temporary = new Container({left: 0, right: 0, top: scroller.height, height: scroller.height}, THEME.blackSkin);
			if (content.y < scroller.y)
				by.coordinates = {left: 0, right: 0, top: content.y - scroller.y}
			temporary.add(by);
			scroller.add(temporary);
			this.layer1 = new Layer({alpha: false});
			this.layer1.attach(temporary);
			this.delta = Math.max(content.y - this.layer1.y, 0 - this.layer1.height);
		}
		function onEnd(container, content, by) {
			var scroller = container.container;
			var temporary = this.layer1.detach();
			scroller.remove(temporary);
			temporary.remove(by);
			by.coordinates = {left: 0, right: 0, top: 0}
			container.replace(content, by);
		}
		function onStep(fraction) {
			fraction = Math.pow(fraction, 2);
			this.layer1.translation = {y: this.delta * fraction};
		}
	]]></transition>
	
</module>