<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" mouseChildren="false" buttonMode="true" mouseOver="group1_mouseOverHandler(event)" mouseOut="group1_mouseOutHandler(event)"
         xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" creationComplete="init()" click="group1_clickHandler(event)">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            [Bindable]public var icon:String;
            [Bindable]public var label:String;
            [Bindable]public var link:String;

            private function init():void
            {
                currentState = 'normal';    
            }
            
            protected function group1_mouseOverHandler(event:MouseEvent):void
            {
                currentState = 'over';
            }


            protected function group1_mouseOutHandler(event:MouseEvent):void
            {
                currentState = 'normal';
            }


            protected function group1_clickHandler(event:MouseEvent):void
            {
                navigateToURL(new URLRequest(link),'_blank');
            }

        ]]>
    </fx:Script>
    
    <s:states>
        <s:State name="over" />
        <s:State name="normal" />
    </s:states>
    <s:HGroup gap="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalAlign="middle">
        <mx:Image source="{icon}" />
        <s:Label text="{label}" fontSize="12"
                 fontFamily="allerBold" verticalCenter="4"
                 color="#777777" color.over="#000000"
                 maxDisplayedLines="1"/>
    </s:HGroup>
</s:Group>