<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:dot="*" usePreloader="true" layout="absolute" viewSourceURL="srcview/index.html">
    <mx:Style>
    Panel {
       borderColor: #000000;
       borderAlpha: 1;
       borderThickness: 3;
       roundedBottomCorners: true;
       cornerRadius: 0;
       highlightAlphas: 0, 0.21;
       headerColors: #000000, #000000;
       backgroundColor: #000000;
       titleStyleName: "mypanelTitle";
    }
    .mypanelTitle {
       color: #ffffff;
       fontFamily: Tahoma;
       fontSize: 14;
       letterSpacing: 2;
    }
    .manipulator {
        fillColors:#66b6f0, #0074f0;
        color:#ffffff;
        themeColor:#00fcff;
        borderColor:#000000;
        fontSize:14;
        textRollOverColor:#ffffff;
    }
    .viewButton {
        fillColors:#ff0000, #a30700;
        color:#ffffff;
        themeColor:#FF923E;
        borderColor:#000000;
        textRollOverColor:#ffffff;
    }

    </mx:Style>
    
    <mx:Panel layout="absolute" left="0" right="0" top="0" bottom="0" title="Tangle Explorer" id="mainPanel">
        <dot:Away3DScene left="0" right="0" top="0" bottom="0" id="mainCanvas" 
            scene="{new TangleScene(mainCanvas)}" 
            backgroundColor="#000a16">
            <mx:Button x="10" y="100" label="Zero" width="70" id="zero" color="#ffffff" themeColor="#05FF00" height="40" fontSize="14" borderColor="#000000" textRollOverColor="#FFFFFF"/>
            <mx:Button x="88" y="100" label="Twist" id="twist" width="70" height="40" styleName="manipulator" />
            <mx:Button x="10" y="148" label="Turn" id="turn"  width="70" height="40" styleName="manipulator" />
            <mx:Button x="88" y="148" label="Untwist" id="untwist"  width="70" height="40" styleName="manipulator" />
            <mx:Button x="10" y="40" label="Front" width="70" id="front" styleName="viewButton"/>
            <mx:Button x="10" y="70" label="Zoom In" width="70" id="zoomIn" styleName="viewButton" />
            <mx:Button x="88" y="70" label="Zoom Out" width="70" id="zoomOut" styleName="viewButton" />
            <mx:Button x="10" y="10" label="Top" width="70" id="top" styleName="viewButton" />
            <mx:Button label="L" width="38" id="lagrange" styleName="viewButton"  bottom="27" left="10"/>
            <mx:Button x="88" y="40" label="3D" width="70" id="threeD" styleName="viewButton" />
            <mx:Button x="88" y="10" label="Side" width="70" id="side" styleName="viewButton" />
            <mx:Text text="1" fontSize="16" color="#ffffff" bottom="26" right="17" id="q" width="81" textAlign="right" height="27"/>
            <mx:Text text="0" fontSize="16" color="#ffffff" bottom="55" right="18" id="p" width="80" textAlign="right"/>
            <mx:HRule strokeColor="#ffffff" themeColor="#ffffff" width="15" height="3" bottom="53" right="20"/>
            <mx:TextArea text="Text" height="24" right="10" bottom="0" left="10" color="#e4f02d" id="cfrac" editable="true" borderStyle="none" backgroundAlpha="0.0"/>
        </dot:Away3DScene>
    </mx:Panel>
</mx:Application>