<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" xmlns:view="com.tp.bcard.view.*"
	creationComplete="onCreationComplete()">
	<mx:Script>
		<![CDATA[
			import org.alivepdf.layout.Size;
			import com.tp.helpers.Global;
		]]>
	</mx:Script>
	<mx:Script source="../controller/Step2Controller.as" />
	<mx:HBox top="5" right="5" bottom="5" left="5" horizontalGap="10" visible="true">
		<mx:Canvas width="225" height="100%" styleName="step2LeftContent" horizontalScrollPolicy="off">
			<mx:VBox id="step2LeftVboxId" width="100%" height="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off">			
				<mx:Label text="Select Your Required Product" height="25" width="100%" fontWeight="bold" fontSize="11"/>
				<mx:ComboBox id="step2ProductComboBoxId" height="25" dataProvider="{Global.products}" change="changeSelectedProduct();" labelField="name" left="10" right="10" width="90%"/>
				<mx:Label id="productCategoryLabelId" height="25" text="Select Required Product Type" width="100%" fontWeight="bold" fontSize="11"/>
				<mx:ComboBox id="productCategoryComboBoxId" height="25" left="10" right="10" width="90%" labelField="name" change="changeSelectedProductType()"/>
				<mx:Label text="Select Your Required Category" height="25" width="100%" fontWeight="bold" fontSize="11"/>
				<mx:ComboBox id="categoryList" left="10" height="25" right="10" width="90%"/>
				<mx:TileList id="tileList" itemRenderer="com.tp.bcard.view.DesignThumbnailItemRenderer" verticalScrollPolicy="off" horizontalScrollPolicy="off"
					columnCount="1" styleName="step2DesignListTile" rowHeight="150" bottom="35" left="10" right="10" backgroundAlpha="0.0" borderStyle="none"/>
				<!-- mx:LinkButton id="backBtn" label="back" bottom="5" left="5" / -->
			</mx:VBox>
		</mx:Canvas>
		<mx:Canvas width="100%" height="100%" styleName="step2RightContent" verticalScrollPolicy="auto" horizontalScrollPolicy="auto">
			<mx:Canvas id="designViewCanvas" width="100%" height="100%"  top="5" right="5" bottom="5" left="5">
				<mx:HBox x="{mainCanvasId.width/4 - 50}">
					<mx:Image id="frontSideImage" x="59" y="10"  width="223" height="94"/>
					<mx:Image id="backSideImage" x="309" y="10"  width="253" height="94"/>	
				</mx:HBox>
				
			
				<mx:Canvas id="mainCanvasId" minWidth="600" backgroundColor="#FFFFFF" borderStyle="solid" cornerRadius="10" top="100" left="20" verticalScrollPolicy="off" horizontalScrollPolicy="off" height="500">
					<mx:Canvas left="10" top="10" right="10" width="100" bottom="10"  backgroundColor="#71B2EB" borderStyle="solid" cornerRadius="5" verticalScrollPolicy="off" horizontalScrollPolicy="off">
						<mx:VBox horizontalGap="0" verticalGap="5" top="10" left="10" width="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off">
							<mx:HBox id="optionsHboxId" height="25" verticalGap="0" horizontalGap="0">
								<mx:LinkButton id="addTextButton" label="Add Text" textAlign="right" styleName="addTextButton" height="22" textDecoration="underline" />
								<mx:LinkButton id="addImageButton" label="Add Image" styleName="addImageButton" height="22" textDecoration="underline" />
								<mx:LinkButton id="addLogoButton" label="Open Image" styleName="addImageButton" height="22" textDecoration="underline" />
								<mx:HSlider id="scaleHSlider" minimum="1" maximum="100" liveDragging="true" snapInterval="1" value="70"  width="140" labels="[-,+]" dataTipPlacement="bottom" labelOffset="20" toolTip="Scale image"/>				
							</mx:HBox>	
							<mx:HBox height="25" horizontalGap="10" width="540">
								<mx:Button id="copyButon" styleName="copyButton" width="22" height="22" buttonMode="true" useHandCursor="true" toolTip="Copy" />
								<mx:Button id="pasteButton" styleName="pasteButton" width="18" height="22" buttonMode="true" useHandCursor="true" toolTip="Paste"/>
								<mx:Button id="deleteButton" styleName="deleteButton" width="22" height="22" buttonMode="true" useHandCursor="true" toolTip="Delete" />
								<mx:Spacer width="29"/>
								<mx:Button id="clearBothSidesButton" label="Clear All" useHandCursor="true"  width="100"/>							
								<mx:Button id="rotateLeftButton" label="Rotate Image Left" height="22" useHandCursor="true" buttonMode="true" toolTip="Rotate Left" width="140"/>
								<mx:Button id="rotateRightButton" label="Rotate Image Right" height="22" useHandCursor="true" buttonMode="true" toolTip="Rotate Right" width="140"/>
							</mx:HBox>
							<mx:HBox width="540" height="25" horizontalGap="10">
								<mx:Label text="Type your initial"  fontSize="13" fontWeight="bold"/>
								<mx:TextInput id="initialTextInput" width="100"  fontSize="12"/>
								<mx:Button id="previewSaveButton" label="Preview and Save"  width="140"/>
								<mx:Button id="viewSavedItems" label="View Saved Designs"  width="140"/>
							</mx:HBox>							
						</mx:VBox>						
						<view:DesignArea left="10" id="designArea" width="100%" height="100%" top="120"/>
						<!--<view:DesignElementProperties id="designElementProperties" y="319" x="40"/>-->
							
					</mx:Canvas>				
				</mx:Canvas>
			</mx:Canvas>			
		</mx:Canvas>		
	</mx:HBox>
	
	<mx:Canvas id="designPreviewCanvas" width="100%" height="100%" styleName="step2RightContent" visible="false">
		<mx:VBox left="20" top="20" right="20" paddingLeft="1" paddingRight="1">
			<mx:Label text="{Global.getAppTitle()}" fontSize="20" fontWeight="bold"  textAlign="left" width="100%"/>			
			<mx:Box width="100%" height="3"  backgroundColor="#08C8F8"/>
			<mx:HBox paddingTop="10" horizontalGap="20" width="100%" horizontalAlign="center" paddingBottom="10">
				<mx:Button id="viewSavedItemsTwo" label="View Saved Designs"  width="150" height="30" fillAlphas="[1.0, 1.0]" fillColors="[#F5902E, #F5902E]"/>
				<mx:Button id="designSaveButton" label="Save design"  width="150" height="30" fillAlphas="[1.0, 1.0]" fillColors="[#F5902E, #F5902E]"/>
			<!--<mx:Button id="proofSaveButton" label="Download PROOF"  width="150" height="30" fillAlphas="[1.0, 1.0]" fillColors="[#F5902E, #F5902E]"/>
				<mx:Button id="pdfSaveButton" label="Save design as PDF"  width="150" height="30" fillAlphas="[1.0, 1.0]" fillColors="[#F5902E, #F5902E]"/> -->
				<mx:Button id="imageSaveButton" label="Save design as PNG"  width="150" height="30" fillAlphas="[1.0, 1.0]" fillColors="[#F5902E, #F5902E]"/>
				<mx:Button id="cancelPreviewButton" label="Go back and edit"  width="150" height="30" fillAlphas="[1.0, 1.0]" fillColors="[#F5902E, #F5902E]"/>
				<mx:Button id="logoutButton" label="Logout" width="150" height="30" fillAlphas="[1.0, 1.0]" fillColors="[#F5902E, #F5902E]"/>										
			</mx:HBox>
			<mx:Label id="messageLabel" fontSize="14" />
			<mx:VBox width="100%">
				<mx:Label text="Please review following proof for correct spelling, artwork and colour:"  fontSize="12" fontWeight="bold"/>
				<mx:TextArea width="100%" editable="false" borderStyle="none" backgroundAlpha="0" height="60">
					<mx:text><![CDATA[- The images on this proof are a preview to the final product.
- Please note that there may be some variation in colour(+/-5-10%) during production.
- Artwork may shift in direction 1/16th of an inch during production.]]></mx:text>
				</mx:TextArea>
			</mx:VBox>
			<mx:RadioButtonGroup id="renderSideSelector" />
			<mx:HBox paddingRight="20" horizontalAlign="left" horizontalGap="20" paddingLeft="20" verticalScrollPolicy="off" horizontalScrollPolicy="off">
				<mx:VBox horizontalScrollPolicy="off" minWidth="350">
					<mx:VBox id="frontDesignImageVBox">
						<mx:Label text="FRONT"  fontWeight="bold" fontSize="14" width="100%" textAlign="center"/>
						<mx:Image id="frontDesignImage" height="150" />
						<mx:RadioButton group="{renderSideSelector}" label="Render Front" value="front" selected="true" />
					</mx:VBox>
					<mx:VBox>
						<mx:Label text="Colours of the text in Front Side Design"  fontWeight="bold" color="#0D4F89"/>
						<mx:VBox id="frontSideTextColorsVBox" width="{frontDesignImage.width}"/>
					</mx:VBox>
				</mx:VBox>
				
				<mx:VBox verticalScrollPolicy="off" horizontalScrollPolicy="off" minWidth="350">
					<mx:VBox id="backDesignImageVBox">
						<mx:Label text="STANDARD BACK"  fontWeight="bold" fontSize="14" textAlign="center" width="100%"/>
						<mx:Image id="backDesignImage" height="150" />
						<mx:RadioButton group="{renderSideSelector}" label="Render Back" value="back" />
					</mx:VBox>
					<mx:VBox>
						<mx:Label text="Colours of the text in Back Side Design"  fontWeight="bold" color="#0D4F89"/>
						<mx:VBox id="backSideTextColorsVBox" width="{backDesignImage.width}" verticalScrollPolicy="off" horizontalScrollPolicy="off"/>
					</mx:VBox>
				</mx:VBox>
			</mx:HBox>
			<mx:Text  width="90%" textAlign="center" fontSize="12">
				<mx:text>PLEASE NOTE: COLOURS IN PDF PROOF VARIES FROM MONITOR TO MONITOR, IT DOES NOT REFLECT CMYK PRINTED MATTER. WE WILL MATCH SELECTED PANTONE COLOURS TO CMYK VALUES ON PRESS TO OUR BEST ABILITY.</mx:text>
			</mx:Text>
		<!--	<mx:Text  width="90%" textAlign="left">
				<mx:text>If you are satisfied with all aspects of this proof, please sign and check the appropriate box below. Any changes to this proof will require sign off on an updated proof before going to press</mx:text>
			</mx:Text>-->
			
		</mx:VBox>
	</mx:Canvas>
	<mx:Panel layout="absolute" id="saveAlert" width="410" height="304" horizontalCenter="0" verticalCenter="0" title="Process..." visible="false" borderAlpha="1">
		<mx:Text x="10" y="10" fontSize="12" width="370" height="67" textAlign="center" id="messageID"/>
		<mx:ProgressBar indeterminate="true" labelPlacement="center" label=""  horizontalCenter="0" height="14" width="300" top="85"/>
		<mx:Text x="10" y="107" text="Preparing card data..." width="370" height="147" id="log" fontStyle="normal" textDecoration="normal"/>
	</mx:Panel>
</mx:Canvas>
