<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:edit="net.systemeD.potlatch2.mapfeatures.editors.*"
	xmlns:flexlib="flexlib.controls.*"
	borderStyle="inset" verticalAlign="middle" width="100%" paddingLeft="3"
	backgroundColor="{bg}" color="{fg}" backgroundAlpha="1.0">
	
	<mx:Image source="{iconImage}"/>
    <mx:Text condenseWhite="true" width="100%" htmlText="{iconHTML}" selectable="false"/>
    <mx:ComboBox id="dir" color="black" dataProvider="{routeDirs}" selectedItem="{findSelected(role)}"
        click="event.stopPropagation()"
        change="setRole(dir.selectedItem.data)" />
    
    <mx:Script><![CDATA[
    import net.systemeD.halcyon.connection.*;
    import net.systemeD.halcyon.styleparser.RuleSet;
    import net.systemeD.potlatch2.mapfeatures.*;
    import flash.events.*;

    import mx.collections.ArrayCollection;

    [Bindable]
    public var routeDirs:ArrayCollection = new ArrayCollection(
        [ {label:">>", data:"forward"}, 
          {label:"<<", data:"backward"}, 
          {label:"<>", data:""} ]);

    private var _iconImage:String = null;
    private var _iconHTML:String = "";
    private var _bg:String = "white";
    private var _fg:String = "black";
    private var _route:Object;
    
    private function findSelected(role:String):Object {
        for each ( var item:Object in routeDirs ) {
            if ( item.data == role )
                return item;
        }
        return routeDirs[2];
    }
         
    public function setRoute(route:Object, icon:XMLList):void {   
        _route = route;
        var relation:Relation = route["relation"];
        _iconHTML = Feature.makeHTMLIcon(icon, relation);

        if ( icon.length() > 0 ) {
            if (icon[0].hasOwnProperty("@image"))
                _iconImage = icon[0].@image;
            if (icon[0].hasOwnProperty("@foreground"))
                _fg = icon[0].@foreground;
            if (icon[0].hasOwnProperty("@background"))
                _bg = icon[0].@background;
        }    

        dispatchEvent(new Event("route_changed"));
    }
    
    [Bindable(event="route_changed")]
    private function get iconImage():String {
        return _iconImage;
    }
    
    [Bindable(event="route_changed")]
    private function get iconHTML():String {
        return _iconHTML;
    }

    [Bindable(event="route_changed")]
    private function get role():String {
        return _route["role"];
    }

    [Bindable(event="route_changed")]
    private function get fg():uint {
        return RuleSet.parseCSSColor(_fg);
    }

    [Bindable(event="route_changed")]
    private function get bg():uint {
        return RuleSet.parseCSSColor(_bg);
    }
    
    public function get route():Object {
        return _route;
    }
    
    private function setRole(role:String):void {
        var member:RelationMember = new RelationMember(_route["entity"], role);
        _route["relation"].setMember(_route["index"], member);
    }
    
    ]]></mx:Script>
</mx:HBox>