<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:trix="assets.*"
	width="600" height="600"
    backgroundColor="0xFFFFFF">

    <s:layout>
        <s:BasicLayout/>
    </s:layout>

	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";

		@font-face{
		src: url("../../../../../Assets/Fonts/Open_Sans/OpenSans-Regular.ttf");
		fontFamily: vera0;
		embedAsCFF: false;
		}

		@font-face{
		src: url("../../../../../Assets/Fonts/Open_Sans/OpenSans-Regular.ttf");
		fontFamily: vera1;
		embedAsCFF: true;
		}

		mx|Panel {
		fontFamily: vera0;
		fontLookup: device;
		color: blue;
		}

		s|SkinnableComponent {
		fontFamily: vera1;
		fontLookup: embeddedCFF;
		color: black;
		}
	</fx:Style>
	
    <fx:Script>
        <![CDATA[
        import mx.core.UIComponent;
		import mx.controls.Image;
        
        //Pubs
        public var pauseQuanta:int = 500;
        
		
		[Embed(source='assets/clear_100x30.png')]
		public var clearImage:Class;
		public var clearBitmap:Bitmap = new clearImage();


        private function Init():void
		{
		}
        
        public function ShowContainer(container:UIComponent):void
        {
            if(container == this.controls1)
                this.controls1.visible = true;
            else
                this.controls1.visible = false;
            
            if(container == this.controls2)
                this.controls2.visible = true;
            else
                this.controls2.visible = false;
            
            if(container == this.controls3)
                this.controls3.visible = true;
            else
                this.controls3.visible = false;
            
            if(container == this.controls4)
                this.controls4.visible = true;
            else
                this.controls4.visible = false;
            
            if(container == this.card)
                this.card.visible = true;
            else
                this.card.visible = false;
        }
        
        public function IsInRange(current:Number, low:Number, high:Number):Boolean
        {
            if((low <= current) && (high >= current))
            {
                return(true);
            }
            
            return(false);
        }
		]]>
    </fx:Script>

    <fx:Declarations>
        <s:CrossFade id="e_CrossFade" />

        <mx:Parallel id="p_CrossFade_fxAnimate">
            <s:CrossFade
	        	bitmapFrom="{clearBitmap.bitmapData}"/>
            <s:Animate>
                <s:motionPaths>
                    <s:SimpleMotionPath property="x" valueFrom="100" valueTo="200" />
                    <s:SimpleMotionPath property="y" valueFrom="100" valueTo="200" />
                </s:motionPaths>
            </s:Animate>
        </mx:Parallel>

        <mx:Parallel id="p_CrossFade_fxAnimateColor">
            <s:CrossFade
	        	bitmapFrom="{clearBitmap.bitmapData}"/>
            <s:AnimateColor colorFrom="0xFF0000" colorTo="0x0000FF"/>
        </mx:Parallel>

        <mx:Parallel id="p_CrossFade_fxFade">
            <s:CrossFade
	        	bitmapFrom="{clearBitmap.bitmapData}"/>
            <s:Fade alphaFrom="1" alphaTo="0" />
        </mx:Parallel>
        
        <mx:Parallel id="p_CrossFade_fxMove" >
            <s:CrossFade
	        	bitmapFrom="{clearBitmap.bitmapData}"/>
            <s:Move yFrom="100" yTo="200"/>
        </mx:Parallel>

        <mx:Parallel id="p_CrossFade_fxResize">
            <s:CrossFade
	        	bitmapFrom="{clearBitmap.bitmapData}"/>
            <s:Resize widthFrom="100" widthTo="200"/>
        </mx:Parallel>

        <mx:Parallel id="p_CrossFade_fxRotate">
            <s:CrossFade
	        	bitmapFrom="{clearBitmap.bitmapData}"/>
            <s:Rotate angleFrom="0" angleTo="90"/>
        </mx:Parallel>

        <mx:Parallel id="p_CrossFade_fxRotate3D">
            <s:CrossFade
	        	bitmapFrom="{clearBitmap.bitmapData}"/>
            <s:Rotate3D angleXFrom="0" angleXTo="90" angleYFrom="0" angleYTo="90" angleZFrom="0" angleZTo="90"/>
        </mx:Parallel>

    </fx:Declarations>

    <trix:Controls1 id="controls1" visible="true"
        x="100" y="10"
        height="570"/>

    <trix:Controls2 id="controls2" visible="false"
        x="100" y="10"/>

    <trix:Controls3 id="controls3" visible="false"
        x="100" y="10"/>

    <trix:Controls4 id="controls4" visible="false"
        x="100" y="10"/>

    <trix:Card id="card" visible="false"
		x="100" y="10"/>

</s:Application>