<?xml version="1.0" encoding="utf-8"?>
  <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
          backgroundAlpha="{app().roamer.currentItem == (data as Item) ? 1.0 : 0.6}"
          filters="{calcFilters(app().roamer.currentItem, data as Item)}"
          backgroundColor="{calcColor(app().roamer.currentItem, data as Item)}">
          <mx:states>
                  <mx:State name="expanded">
                          <mx:SetProperty target="{app().roamer}" name="maxDistanceFromCurrent" value="0"/>
                          <mx:AddChild position="lastChild">
                                  <mx:HBox click="this.currentState=''" width="100%" height="100%">
                                          <mx:Image width="50%" height="100%" autoLoad="true" scaleContent="true" source="{'../assets/images/philo/' + data.data.@image}"/>
                                          <mx:Text width="50%" height="100%" fontSize="13" htmlText="{data.data.@body}" color="#ffffff" selectable="false"/>
                                  </mx:HBox>
                          </mx:AddChild>
                          <mx:SetProperty target="{text1}" name="width" value="100%"/>
                          <mx:SetProperty target="{this}" name="width" value="100%"/>
                          <mx:SetProperty target="{this}" name="height" value="100%"/>
                          <mx:SetProperty target="{this}" name="x" value="0"/>
                          <mx:SetProperty target="{this}" name="y" value="0"/>
                          <mx:SetProperty target="{app().filosoftware}" name="visible" value="false"/>
                          <mx:SetProperty target="{app().filosoftware2}" name="visible" value="false"/>
                          <mx:SetProperty target="{app().help}" name="visible" value="false"/>
                          <mx:SetProperty target="{app().infoText}" name="visible" value="false"/>
                  </mx:State>
          </mx:states>
                                  
          <mx:Text fontSize="13" text="{data.data.@name}" color="#ffffff" width="165" selectable="false" id="text1" textAlign="center"/>        
  
          <mx:Script>
                  <![CDATA[
                          import mx.controls.Alert;
                          import mx.effects.Glow;
                          import com.adobe.flex.extras.controls.springgraph.Graph;
                          import com.adobe.flex.extras.controls.springgraph.Item;
                          import mx.core.Application;
                          
                          public function doubleClick(event: Event): void {
                                  if(app().roamer.currentItem == data as Item) {
                                          showContent();
                                  } else {
                                          app().itemDoubleClick(event);
                                  }
                          }
                          
                          private function app(): graph_philosopher {
                                  return Application.application as graph_philosopher;
                          }
                          
                          /* This function gets called whenever the graph's current item changes,
  			 * or when our data changes, to calculate the borderthickness.
  			 */
                          private function calcFilters(currentItem: Item, item: Item): Array {
                                  if(app().roamer.currentItem == item) {
                                          return [new GlowFilter(0xFFFF00, 0.5, 8, 8, 2, 1)];
                                          //this.currentState = "expanded";
                                  } else if(app().roamer.hasBeenCurrentItem(item)) {
                                          return [new GlowFilter(0x0000FF, 0.3, 6, 6, 2, 1)];
                                          //this.currentState = "";
                                  } else {
                                          return null;
                                  }
                          }
                          
                          private function calcState(item: Item):void {
                                  if(app().roamer.currentItem != item) {
                                          this.currentState = "";
                                  }
                          }
                          
                          private function showContent():void {
                                  //this.currentState = "expanded";
                                  if(app().roamer.currentItem == data as Item) {
                                          this.currentState = "expanded";
                                  } else {
                                          this.currentState = "";
                                  }
                                  
                          }
                          
                          private function onMouseOut():void {
                                  //this.currentState = "";
                          }
                          
                          /* This function gets called whenever the graph's current item changes,
  			 * or when our data changes, to calculate a color based on our distance
  			 * from the current item. 
  			 */
                           // backgroundColor="{calcColor(app().roamer.currentItem, data as Item)}"
                           
                          private function calcColor(currentItem: Item, item: Item): int {
                                  calcState(item);
                                  switch (app().roamer.distance(currentItem, item)) {
                                          case 0:
                                                  //return item.data.@color;
                                                  //mx.controls.Alert.show(">>" + item.data.@color);
                                                  return 0x000000;
                                                  //return 0x5555ee;
                                          //default:
                                          case 1:
                                                  return item.data.@color;
                                                  //return 0x5555ee;
                                                  //return 0x7777bb;
                                          default:
                                                  return 0x999999;
                                  }
                          }
                          
                  ]]>
          </mx:Script>                                
  </mx:VBox>