<?xml version="1.0" encoding="utf-8"?>
<!--

Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements.  See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You 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.

-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="HorizontalLayout">
	
	<fx:Script>
		<![CDATA[
			import spark.primitives.BitmapImage;
			import spark.skins.spark.DefaultComplexItemRenderer;
			
			protected function buttonHandler(event:MouseEvent):void
			{
				if(currentState == "DemoState")
				{
					currentState = "InfoState";				
				}
				else if(currentState == "InfoState")
				{
					currentState = "DemoState";
				}
			}
		]]>
	</fx:Script>
	<s:states>
		<s:State name="DemoState"/>
		<s:State name="InfoState"/>
	</s:states>
	<fx:Declarations>
		<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1.png')" 
								source240dpi="@Embed('assets/icons/240/1.png')" 
								source320dpi="@Embed('assets/icons/320/1.png')"
								source480dpi="@Embed('assets/icons/480/1.png')" id="box1"/>
		<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')" 
								source240dpi="@Embed('assets/icons/240/2.png')" 
								source320dpi="@Embed('assets/icons/320/2.png')"
								source480dpi="@Embed('assets/icons/480/2.png')" id="box2"/>
		<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')" 
								source240dpi="@Embed('assets/icons/240/3.png')" 
								source320dpi="@Embed('assets/icons/320/3.png')"
								source480dpi="@Embed('assets/icons/480/3.png')" id="box3"/>
		<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/about.png')" id="aboutIcon"  
								source240dpi="@Embed('assets/icons/240/about.png')" 
								source320dpi="@Embed('assets/icons/320/about.png')"
								source480dpi="@Embed('assets/icons/480/about.png')"/>
		<s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/dock.png')" id="demoIcon"
								source240dpi="@Embed('assets/icons/240/dock.png')"  
								source320dpi="@Embed('assets/icons/320/dock.png')"
								source480dpi="@Embed('assets/icons/480/dock.png')"/>
	</fx:Declarations>	
	<s:actionContent>
		<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
	</s:actionContent>	
	<s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" includeIn="DemoState" verticalScrollPolicy="off">
		<s:layout>
			<s:HorizontalLayout verticalAlign="middle" useVirtualLayout="true" />
		</s:layout>
		<s:dataProvider>
			<s:ArrayList>
				<s:BitmapImage source="{box1}" />
				<s:BitmapImage source="{box2}" />
				<s:BitmapImage source="{box3}" />
				<s:BitmapImage source="{box1}" />
				<s:BitmapImage source="{box2}" />
				<s:BitmapImage source="{box3}" />
				<s:BitmapImage source="{box1}" />
				<s:BitmapImage source="{box2}" />
				<s:BitmapImage source="{box3}" />
				<s:BitmapImage source="{box1}" />
				<s:BitmapImage source="{box2}" />
				<s:BitmapImage source="{box3}" />
				<s:BitmapImage source="{box1}" />
				<s:BitmapImage source="{box2}" />
				<s:BitmapImage source="{box3}" />
			</s:ArrayList>
		</s:dataProvider>
	</s:List>
	<s:TextArea includeIn="InfoState" selectable="false"  left="10" right="10" top="10" bottom="10" editable="false" 
				text="The HorizontalLayout class arranges the layout elements in a horizontal sequence, left to right, with optional gaps between the elements and optional padding around the elements.				
				&#xd; &#xd;The horizontal position of the elements is determined by arranging them in a horizontal sequence, left to right, taking into account the padding before the first element and the gaps between the elements.
				&#xd; &#xd;The vertical position of the elements is determined by the layout's verticalAlign property.
				&#xd; &#xd;During the execution of the measure() method, the default size of the container is calculated by accumulating the preferred sizes of the elements, including gaps and padding. When the requestedColumnCount property is set to a value other than -1, only the space for that many elements is measured, starting from the first element.				
				&#xd; &#xd;During the execution of the updateDisplayList() method, the width of each element is calculated according to the following rules, listed in their respective order of precedence (element's minimum width and maximum width are always respected):				
				&#xd; &#xd;- If variableColumnWidth is false, then set the element's width to the value of the columnWidth property.				
				&#xd; &#xd;- If the element's percentWidth is set, then calculate the element's width by distributing the available container width between all elements with percentWidth setting. The available container width is equal to the container width minus the gaps, the padding and the space occupied by the rest of the elements. The element's precentWidth property is ignored when the layout is virtualized.				
				&#xd; &#xd;- Set the element's width to its preferred width.				
				&#xd; &#xd;The height of each element is calculated according to the following rules, listed in their respective order of precedence (element's minimum height and maximum height are always respected):				
				&#xd; &#xd;- If the verticalAlign property is 'justify', then set the element's height to the container height.
				&#xd; &#xd;- If the verticalAlign property is 'contentJustify', then set the element's height to the maximum between the container's height and all elements' preferred height.
				&#xd; &#xd;- If the element's percentHeight property is set, then calculate the element's height as a percentage of the container's height.
				&#xd; &#xd;- Set the element's height to its preferred height. "/>
</s:View>