<?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:Group xmlns:controls="com.flexcapacitor.graphics.*"
		 xmlns:fx="http://ns.adobe.com/mxml/2009"
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:filters="com.flexcapacitor.filters.*"
		 xmlns:c="com.flexcapacitor.controls.*"
		 creationComplete="group1_creationCompleteHandler(event)"
		 >

	<fx:Script>
		<![CDATA[
			import com.flexcapacitor.controller.Radiate;
			import com.flexcapacitor.events.RadiateEvent;
			import com.flexcapacitor.model.Device;
			import com.flexcapacitor.model.IDocument;
			import com.flexcapacitor.tools.ITool;
			
			import mx.events.FlexEvent;
			
			import spark.events.IndexChangeEvent;
			
			public var radiate:Radiate;
			
			
			/**
			 * Shows the show actual size button
			 * */
			[Bindable]
			public var showRestoreSize:Boolean = true;
			
			/**
			 * Shows the show center button
			 * */
			[Bindable]
			public var showCenterButton:Boolean = true;
			
			/**
			 * Shows devices list
			 * */
			[Bindable]
			public var showDevicesList:Boolean = false;
			
			/**
			 * Shows the show fit size button
			 * */
			[Bindable]
			public var showFitSize:Boolean = true;
			
			protected function group1_creationCompleteHandler(event:FlexEvent):void {
				radiate = Radiate.getInstance();
				
				//radiate.addEventListener(RadiateEvent.SCALE_CHANGE, scaleChangedHandler, false, 0, true);
				radiate.addEventListener(RadiateEvent.DOCUMENT_CHANGE, documentChangeHandler, false, 0, true);
				radiate.addEventListener(RadiateEvent.DOCUMENT_SIZE_CHANGE, documentSizeChangeHandler, false, 0, true);
				
				//toolDescription = radiate.getToolByType(Zoom);
				
				//zoomTool = toolDescription.instance as Zoom;
				
				
				// temp to get reference
				//if (!tool) tool = new Zoom();
				
				//updateTool(zoomTool);
			}
			
			/**
			 * Update UI components to tool value
			 * */
			public function updateTool(tool:ITool):void {
				/*var zoomValue:Number;
				zoomValue = zoomTool.getScale();
					
				updateZoomInComboBox(zoomValue);*/
			}
			
			/**
			 * Size combo box change handler. Update size.
			 * */
			protected function sizeComboBox_changeHandler(event:IndexChangeEvent):void {
				updateDocumentSize();
				//zoomTool.setScale(parseInt(sizesComboBox.selectedItem)/100);
			}
			
			/**
			 * 
			 * */
			protected function actualSize_clickHandler(event:MouseEvent):void {
				radiate.restoreDefaultScale();
				
			}
			
			/**
			 * Size changed
			 * */
			protected function sizeChangedHandler(event:RadiateEvent):void {
				/*var zoomValue:Number;
				var zoomString:String;
				
				zoomValue = zoomTool.getScale();
				
				updateZoomInComboBox(zoomValue);*/
			}
			
			/**
			 * Format size value.
			 * */
			public function updateSizeInComboBox(zoomValue:Number):void {
				/*var zoomString:String;
				
				if (!isNaN(zoomValue)) {
					
					if (String(zoomValue*100).indexOf(".")!=-1) {
						zoomString = Number(zoomValue*100).toFixed(1) + "%";
					}
					else {
						zoomString = Number(zoomValue*100) + "%";
					}
					
					if (zoomValue==1) {
						sizesComboBox.selectedItem = "100%";
					}
					else {
						sizesComboBox.selectedItem = zoomString;
					}
				}*/
			}
			
			/**
			 * Document changed
			 * */
			protected function documentChangeHandler(event:RadiateEvent):void {
				// since we use this independently of the tool being selected we need to make sure
				// the target application is set
				// we'll move this later
				/*var zoomValue:Number = zoomTool.getScale();
				
				updateSizeInComboBox(zoomValue);*/
				
				updatePortraitCheckbox();
				
			}
			
			/**
			 * Restore
			 * */
			protected function sizeComboBox_doubleClickHandler(event:MouseEvent):void {
				/*
				if (zoomTool) {
					zoomTool.restoreDefaultScale();
					sizesComboBox.selectedItem = "100%";
				}*/
			}
			
			public function labelFunction(item:Object):String {
				var device:Device = Device(item);
				
				if (device.type=="device" || device.type=="screen") {
					return device.name;
				}
				
				return device.name + device.width + "x" + device.height;
			}
			
			protected function changeOrientation_changeHandler(event:Event):void {
				updateDocumentSize();
			}
			
			/**
			 * 
			 * */
			public var properties:Array = ["width", "height"];
			
			/**
			 * Update portrait setting
			 * */
			public function updatePortraitCheckbox():void {
				var document:IDocument = radiate.selectedDocument;
				var documentInstance:DisplayObject = document ? document.instance as DisplayObject : null;
				var portrait:Boolean;
				
				if (documentInstance &&
					documentInstance.width<documentInstance.height) {
					portraitEnabledCheckbox.selected= true;
					portraitEnabledCheckbox.enabled = true;
				}
				else if (documentInstance && documentInstance.width==documentInstance.height) {
					portraitEnabledCheckbox.enabled = false;
				}
				else {
					portraitEnabledCheckbox.selected= false;
					portraitEnabledCheckbox.enabled = true;
				}
				
			}
			
			/**
			 * 
			 * */
			public function updateDocumentSize():void {
				var document:IDocument = radiate.selectedDocument;
				var device:Device = sizesComboBox.selectedItem as Device;
				var object:Object = {};
				var applied:Boolean;
				var displayObject:DisplayObject = document ? document.instance as DisplayObject : null;
				
				
				if (!showDevicesList) {
					var values:Object = {width:displayObject.height, height:displayObject.width};
					Radiate.setProperties(displayObject, properties, values);
					return;
				}
				
				
				
				
				if (device.type=="screen") {
					object.width = device.resolutionWidth;
					object.height = device.resolutionHeight;
					
					applied = Radiate.setProperties(displayObject, properties, object);
				}
				else {
					if (portraitEnabledCheckbox.selected) {
						object.width = device.usableWidthPortrait;
						object.height = device.usableHeightPortrait;
						
						applied = Radiate.setProperties(displayObject, properties, object, device.name);
					}
					else {
						object.width = device.usableWidthLandscape;
						object.height = device.usableHeightLandscape;
						
						applied = Radiate.setProperties(displayObject, properties, object, device.name);
					}
				}
			}
			
			protected function fitSizeButton_clickHandler(event:MouseEvent):void {
				radiate.scaleToFit(true);
				radiate.centerApplication(true, true);
			}
			
			protected function centerButton_clickHandler(event:MouseEvent):void {
				radiate.centerApplication(true, true);
			}
			
			protected function documentSizeChangeHandler(event:RadiateEvent):void {
				updatePortraitCheckbox();
			}
			
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<s:ArrayCollection id="sizesCollection">
			
		</s:ArrayCollection>
	</fx:Declarations>

	<s:layout>
		<s:HorizontalLayout paddingLeft="4" verticalAlign="baseline"/>
	</s:layout>
	
	<s:ToggleButton id="portraitEnabledCheckbox" 
				label="Portrait" 
				selected="true"
				change="changeOrientation_changeHandler(event)"
				skinClass="com.flexcapacitor.views.skins.OrientationButton"
				useHandCursor="true"
				buttonMode="true"
				/>
	<s:Spacer width="1"/>
	<s:DropDownList id="sizesComboBox" 
				width="180" 
				focusAlpha="0" 
				selectedIndex="8"
				visible="{showDevicesList}"
				includeInLayout="{showDevicesList}"
				arrowKeysWrapFocus="false"
				doubleClickEnabled="true"
				labelFunction="labelFunction"
				dataProvider="{Radiate.deviceCollections}"
				change="sizeComboBox_changeHandler(event)"
				doubleClick="sizeComboBox_doubleClickHandler(event)"
				>
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="10" />
        </s:layout>
	</s:DropDownList>
	
	<c:ImageButton id="centerButton" 
			   toolTip="Center"
			   visible="{showCenterButton}"
			   includeInLayout="{showCenterButton}"
			   source="{Radii8LibraryAssets.centerAlignment}" 
			   click="centerButton_clickHandler(event)"
			   />
	
	<c:ImageButton id="fitSizeButton" 
			   toolTip="Fit"
			   visible="{showFitSize}"
			   includeInLayout="{showFitSize}"
			   source="{Radii8LibraryAssets.zoomToFit}" 
			   click="fitSizeButton_clickHandler(event)"
			   />
	
	<c:ImageButton id="actualSizeButton" 
			   toolTip="Actual"
			   visible="{showRestoreSize}"
			   includeInLayout="{showRestoreSize}"
			   source="{Radii8LibraryAssets.actualSize}" 
			   click="actualSize_clickHandler(event)"
			   />
	

</s:Group>