<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright 2006 Renaun Erickson (http://renaun.com)

Licensed 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.

@ignore
-->
<!--

This example shows how to implement a basic RollOver Button using Image and the Button controls.

To see the application run go to http://renaun.com/flex2/RollOverButtons/
To see the application's source code go to http://renaun.com/flex2/RollOverButtons/srcview/

-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    xmlns:buttons="com.renaun.buttons.*"
    initialize="createRollOvers()" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import mx.controls.Image;
            import mx.controls.Button;
        
        [Bindable]
        [Embed("images/arrowBlueUp.png")]
        private var iconUp:Class;
        
        [Bindable]
        [Embed("images/arrowBlueDown.png")]
        private var iconOver:Class;
        
        [Bindable]
        [Embed("images/arrowGreenDown.png")]
        private var iconDown:Class;           
        
        private function createRollOvers():void {
            var lblImgRoll:Label = new Label();
            lblImgRoll.text = "Image Roll Over using ActionScript";
            
            pnlRollover.addChild( lblImgRoll );
            
            var imgRoll:Image = new Image();
            imgRoll.source = iconUp;
            
            imgRoll.addEventListener( MouseEvent.ROLL_OVER, imgRollOver );
            imgRoll.addEventListener( MouseEvent.ROLL_OUT, imgRollOut );
            imgRoll.addEventListener( MouseEvent.MOUSE_DOWN, imgRollDown );
            
            pnlRollover.addChild( imgRoll );

            var lblBtnRoll:Label = new Label();
            lblBtnRoll.text = "Button Roll Over using ActionScript";
            
            pnlRollover.addChild( lblBtnRoll );

            var btnRoll:Button = new Button();
            btnRoll.width = 20;
            btnRoll.height = 20;
            btnRoll.setStyle( "fillAlphas", [0.0,0.0] );
            btnRoll.setStyle( "highlightAlphas", [0.0,0.0] );            
            btnRoll.setStyle( "upSkin", null );
            btnRoll.setStyle( "overSkin", null );
            btnRoll.setStyle( "downSkin", null );

            btnRoll.setStyle("overIcon",iconOver);
            btnRoll.setStyle("downIcon",iconDown);
            btnRoll.setStyle("upIcon",iconUp);            
            
            pnlRollover.addChild( btnRoll );                        
        }
        
        private function imgRollOver( event:MouseEvent ):void {
            event.target.source = iconOver;
        }
        private function imgRollOut( event:MouseEvent ):void {
            event.target.source = iconUp;
        }
        private function imgRollDown( event:MouseEvent ):void {
            event.target.source = iconDown;
        }                
            

        ]]>
    </mx:Script>
    <mx:Panel id="pnlRollover" title="Roll Over Image/Button Examples"
        horizontalAlign="center" verticalAlign="middle"
        width="300"
        height="250"
        layout="vertical" >
        <mx:Label text="Custom Roll Over Image" />
        <buttons:RollOverImage upImage="{ iconUp }" overImage="{ iconOver }" downImage="{ iconDown }" />
        <mx:ControlBar>
            <mx:Label text="Right Click to View Source" />
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>