<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         creationComplete="init()" xmlns:views="com.sharewithagent.views.*" paddingBottom="10"
         currentState="normal" width="100%">
    
    <s:states>
        <s:State name="first" />
        <s:State name="normal" />
    </s:states>
    
    <fx:Script><![CDATA[
        import com.afi.estimator.style.forms.AFICheckbox;
        import com.sharewithagent.map.AgentMarker;
        import com.sharewithagent.map.MapMarker;
        
        [Bindable]public var mapPin:AgentMarker;
        
        [Bindable]public var agentName:String;
        
        [Bindable]public var address:String;;
        
        [Bindable]public var miles:String;
        
        public var selected:Boolean = false;
        
        public var agent:Object;
        
        [Bindable]public var selectEvent:Function = function(a:Object):void {};
        
        private function init():void {    
            this.buttonMode = true;
            agent = mapPin.agent;
            this.mouseChildren =false;
            this.addEventListener(MouseEvent.CLICK, function(e:Event):void {
                trace("CLICK");
                selectItem();
            }); 
           
        }
        
        public function selectItem(force:Boolean = false):void {
            if (!force) {
                selected = !selected;
                chbx.selected = !chbx.selected;
            } else {
                selected = true;
                chbx.selected = true;    
            }
            
            if (mapPin) mapPin.dispatchClick();
        }
        
        public function disable():void {
            this.mouseEnabled = false;
        }
    ]]></fx:Script>
    <s:Group>
        
    <s:Rect width="100%" height="100%">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
    <s:Rect id="select" visible="false" width="100%" height="100%">
        <s:fill>
            <s:SolidColor color="0xFFCC00" />
        </s:fill>
    </s:Rect>
    
    <mx:Image includeIn="normal" left="-20" alpha="0.6" source="@Embed('/com/afi/estimator/assets/images/shadow-underline.png')" />
    
    <s:HGroup paddingTop.first="0" paddingTop.normal="10">
        <s:CheckBox skinClass="com.afi.estimator.style.forms.AFICheckbox" id="chbx" width="19" />
        <views:MapPin id="pinButton" letter="{mapPin.letter}" mouseEnabled="false" />
        <s:VGroup gap="5" width="220">
            <s:Label fontSize="16" color="#3E87B0" text="{agentName}" />
            <s:Label fontSize="10" width="220" color="#353535" text="{address}" maxDisplayedLines="3" />
        </s:VGroup>
        
        <s:VGroup horizontalAlign="right" width="100%">
        <s:Group width="70">
            <s:Rect width="100%" height="100%" radiusX="5" verticalCenter="0" right="10">
                <s:fill>
                    <s:SolidColor color="#FEFEFE" />
                </s:fill>
                <s:stroke>
                    <s:SolidColorStroke color="#A3A3A3" />
                </s:stroke>
                <s:filters>
                    <s:GlowFilter inner="true" color="0" blurX="10" blurY="10" alpha=".2" />
                </s:filters>
            </s:Rect>
            <s:Label horizontalCenter="true" textAlign="center" fontSize="11" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" text="{miles} mi" width="60" />
        </s:Group>
        </s:VGroup>
        <mx:Spacer height="20" />
    </s:HGroup>
    </s:Group>
</s:VGroup>