<?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:custom="Assets.*"
	         width="800" height="600" >

<fx:Script>
<![CDATA[

]]>
</fx:Script>

<!-- Embed fonts for cross platform compatibility of bitmap compares. -->
<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: EmbeddedVerdana;
        embedAsCFF: true;
    }

    @font-face {
        src: url("../../../../../Assets/Fonts/Open_Sans/OpenSans-Bold.ttf");
        fontWeight: bold;
        fontFamily: EmbeddedVerdana;
        embedAsCFF: true;
    }

    @font-face {
        src: url("../../../../../Assets/Fonts/Open_Sans/OpenSans-Italic.ttf");
        fontStyle: italic;
        fontFamily: EmbeddedVerdana;
        embedAsCFF: true;
    } */

    /*@font-face {
        src: url("../../../../../Assets/Fonts/PT_Serif/PT_Serif-Web-Regular.ttf");
        fontFamily: EmbeddedArial;
        embedAsCFF: false;
    }*/

    @font-face {
        src: url("../../../../../Assets/Fonts/PT_Serif/PT_Serif-Web-Bold.ttf");
        fontWeight: bold;
        fontFamily: EmbeddedArial;
        embedAsCFF: false;
    }

  /*  @font-face {
        src: url("../../../../../Assets/Fonts/PT_Serif/PT_Serif-Web-Italic.ttf");
        fontStyle: italic;
        fontFamily: EmbeddedArial;
        embedAsCFF: true;
    }*/

	/*@font-face {
		src: url("../../../../../Assets/Fonts/Cousine/Cousine-Regular.ttf");
		fontFamily: EmbeddedArno;
		embedAsCFF: true;
	}*/
	

    global{
        kerning: "off";
    }
        
/*    s|ButtonBar {
        fontFamily: EmbeddedVerdana;
        fontLookup: embeddedCFF;
        fontAntiAliasType: normal;
    }

    .fontFamilyDefault {
        fontFamily: EmbeddedVerdana;
        fontLookup: embeddedCFF;
        fontAntiAliasType: normal;
    }*/


    .fontFamily1{
        fontFamily: EmbeddedArial;
        fontLookup: embeddedCFF;
        fontAntiAliasType: normal;
    }


   /* .fontFamily2{
        fontFamily: EmbeddedArno;
        fontLookup: embeddedCFF;
        fontAntiAliasType: normal;
    }*/

    .fontSize1{
        fontSize: 8;
    }

    .fontSize2{
        fontSize: 24;
    }

    .fontWeight1{
        fontWeight: bold;
    }

    .fontWeight2{
        fontWeight: normal;
    }

    .color1{
        color: #ff0000;
    }
    
    .direction1{
        direction: rtl;
    }

    .direction2{
        direction: ltr;
    }
    
    .lineThrough1{
        lineThrough: true;
    }

    .lineThrough2{
        lineThrough: false;
    }

    .kerning1{
        kerning: on;
    }

    .kerning2{
        kerning: auto;
    }

    .kerning3{
        kerning: off;
    }
    
    .textDecoration1{
        textDecoration: underline;
    }

    .textDecoration2{
        textDecoration: none;
    }

    .textIndent1{
        textIndent: 0;
    }

    .textIndent2{
        textIndent: 10;
    }

    .textIndent3{
        textIndent: -10;
    }
    
    .paddingTop1{
       
    }

    .paddingTop2{
        
    }

    .paddingTop3{
        
    }
    
    .paddingLeft1{
        
    }

    .paddingLeft2{
       
    }

    .paddingLeft3{
        
    }

    .paddingBottom1{
        
    }

    .paddingBottom2{
        
    }

    .paddingBottom3{
     
    }
    
    .paddingRight1{
       
    }

    .paddingRight2{
        
    }

    .paddingRight3{
        
    }  
    
    .top1{
        top: 5;
    }  

    .top2{
        top: 0;
    }  

    .top3{
        top: -5;
    }  
    
    .left1{
        left: 5;
    }

    .left2{
        left: 0;
    }

    .left3{
        left: -5;
    }
    
    .bottom1{
        bottom: 5;
    }    

    .bottom2{
        bottom: 0;
    }    

    .bottom3{
        bottom: -5;
    }
    
    .right1{
        right: 5;
    }

    .right2{
        right: 0;
    }

    .right3{
        right: -5;
    }
    
    .verticalCenter1{
        verticalCenter: 5;
    }

    .verticalCenter2{
        verticalCenter: 0;
    }

    .verticalCenter3{
        verticalCenter: -5;
    }
    
    .horizontalCenter1{
        horizontalCenter: 5;
    }

    .horizontalCenter2{
        horizontalCenter: 0;
    }

    .horizontalCenter3{
        horizontalCenter: -5;
    }

</fx:Style>

<fx:Declarations>

    <s:ArrayCollection id="ac1">
        <fx:String>one</fx:String>
        <fx:String>t_o</fx:String>
        <fx:String>three</fx:String>
    </s:ArrayCollection>

    <s:ArrayCollection id="ac2">
        <fx:String>WAWAWAWAWA</fx:String>
    </s:ArrayCollection>

    <s:ArrayCollection id="ac_hebrew">
        <fx:String>שרה</fx:String>
        <fx:String>אלפבית</fx:String>
    </s:ArrayCollection>
</fx:Declarations>

<s:layout> <s:HorizontalLayout/> </s:layout>

<s:VGroup>
    <s:ButtonBar id="fontFamilyBB1" dataProvider="{ac1}" fontSize="24" fontFamily="EmbeddedArial" 
        fontLookup="embeddedCFF" />
    <!--<s:ButtonBar id="fontFamilyBB2" dataProvider="{ac1}" fontSize="24" fontFamily="EmbeddedArno" 
        fontLookup="embeddedCFF" />-->
    <s:ButtonBar id="fontSizeBB1" dataProvider="{ac1}" fontSize="8" />
    <s:ButtonBar id="fontSizeBB2" dataProvider="{ac1}" fontSize="24" />
    <s:ButtonBar id="fontWeightBB1" dataProvider="{ac1}" fontWeight="bold" />
    <s:ButtonBar id="fontWeightBB2" dataProvider="{ac1}" fontWeight="normal" />
    <s:ButtonBar id="colorBB1" dataProvider="{ac1}" color="0xff0000" />
    <s:ButtonBar id="directionBB1" dataProvider="{ac1}" direction="rtl" />
    <s:ButtonBar id="directionBB2" dataProvider="{ac1}" direction="ltr" />
    <s:ButtonBar id="lineThroughBB1" dataProvider="{ac1}" lineThrough="true" />
    <s:ButtonBar id="lineThroughBB2" dataProvider="{ac1}" lineThrough="false" />
    <s:ButtonBar id="kerningBB1" dataProvider="{ac2}" kerning="on" />
    <s:ButtonBar id="kerningBB2" dataProvider="{ac2}" kerning="auto" />
    <s:ButtonBar id="kerningBB3" dataProvider="{ac2}" kerning="off" />
    <s:ButtonBar id="textDecorationBB1" dataProvider="{ac1}" textDecoration="underline" />
    <s:ButtonBar id="textDecorationBB2" dataProvider="{ac1}" textDecoration="none" />

</s:VGroup>

<s:VGroup>

    <s:Group id="topCanvas1"  >
        <s:ButtonBar height="24" id="topBB1" dataProvider="{ac1}" top="5" />
    </s:Group>

    <s:Group id="topCanvas2"  >
        <s:ButtonBar height="24" id="topBB2" dataProvider="{ac1}" top="0" />
    </s:Group>

    <s:Group id="topCanvas3" >
        <s:ButtonBar height="24" id="topBB3" dataProvider="{ac1}" top="-5" />
    </s:Group>

    <s:Group id="leftCanvas1"  >
        <s:ButtonBar id="leftBB1" dataProvider="{ac1}" left="5"  width="215"/>
    </s:Group>

    <s:Group id="leftCanvas2" >
        <s:ButtonBar id="leftBB2" dataProvider="{ac1}" left="0"  width="215"/>
    </s:Group>

    <s:Group id="leftCanvas3" >
        <s:ButtonBar id="leftBB3" dataProvider="{ac1}" left="-5"  width="215"/>
    </s:Group>

    <s:Group id="bottomCanvas1" >
        <s:ButtonBar id="bottomBB1" height="24" dataProvider="{ac1}" bottom="5" />
    </s:Group>
</s:VGroup>

<s:VGroup>
    <s:Group id="bottomCanvas2"  >
        <s:ButtonBar height="24" id="bottomBB2" dataProvider="{ac1}" bottom="0" />
    </s:Group>

    <s:Group id="bottomCanvas3" >
        <s:ButtonBar height="24" id="bottomBB3" dataProvider="{ac1}" bottom="-5" />
    </s:Group>

    <s:Group id="rightCanvas1" >
        <s:ButtonBar id="rightBB1" dataProvider="{ac1}" right="5"  width="215"/>
    </s:Group>

    <s:Group id="rightCanvas2" >
        <s:ButtonBar id="rightBB2" dataProvider="{ac1}" right="0"  width="215"/>
    </s:Group>

    <s:Group id="rightCanvas3" >
        <s:ButtonBar id="rightBB3" dataProvider="{ac1}" right="-5"  width="215"/>
    </s:Group>

    <s:Group id="verticalCenterCanvas1" height="50">
        <s:ButtonBar id="verticalCenterBB1" height="24" dataProvider="{ac1}" verticalCenter="5" />
    </s:Group>

    <s:Group id="verticalCenterCanvas2" height="50">
        <s:ButtonBar id="verticalCenterBB2" height="24" dataProvider="{ac1}" verticalCenter="0" />
    </s:Group>

    <s:Group id="verticalCenterCanvas3" height="50">
        <s:ButtonBar id="verticalCenterBB3" height="24" dataProvider="{ac1}" verticalCenter="-5" />
    </s:Group>

    <s:Group id="horizontalCenterCanvas1" width="250">
        <s:ButtonBar id="horizontalCenterBB1" width="220" dataProvider="{ac1}" horizontalCenter="5" />
    </s:Group>

    <s:Group id="horizontalCenterCanvas2" width="250">
        <s:ButtonBar id="horizontalCenterBB2" width="220" dataProvider="{ac1}" horizontalCenter="0" />
    </s:Group>

    <s:Group id="horizontalCenterCanvas3" width="250">
        <s:ButtonBar id="horizontalCenterBB3" width="220" dataProvider="{ac1}" horizontalCenter="-5" />
    </s:Group>

    <s:ButtonBar id="runtimeBB1" />
    <custom:CustomFxButtonBar10 id="runtimeBox1" /> <!-- Contains runtimeBB2. -->
    <custom:CustomFxButtonBar11 id="runtimeCanvas1" /> <!-- Contains runtimeBB3. -->

    <s:SkinnableContainer>
         <s:ButtonBarButton id="buttonbarbutton1" />
         <s:ButtonBarButton id="buttonbarbutton2" label="end" styleName="fontFamilyDefault" />
    </s:SkinnableContainer>

    <s:Group id="group_buttonbar">
        <custom:CustomFxButtonBar3 id="baseline_buttonbar" />
        <custom:CustomFxButtonBar3 id="baseline_buttonbar_mxml" baseline="70"/>	
        <s:Rect id="border" left="0" right="0" top="0" bottom="0">
	    <s:stroke>
	        <s:SolidColorStroke color="0xFF0000"/>
	    </s:stroke>
        </s:Rect>
    </s:Group>
</s:VGroup>


</s:Application>