<?xml version="1.0" encoding="utf-8"?> 
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
     creationComplete="init()" width="100%"> 
     <mx:Script> 
     <![CDATA[
             import com.afcomponents.umap.interfaces.IInfoWindow;
             import com.afcomponents.umap.events.*;
          import com.afcomponents.umap.interfaces.IOverlay;
          import com.afcomponents.umap.overlays.Circle;
          import com.afcomponents.umap.overlays.Layer;
          import com.afcomponents.umap.overlays.Marker;
          import com.afcomponents.umap.providers.Providers;
          import com.afcomponents.umap.styles.DropShadowStyle;
          import com.afcomponents.umap.styles.GeometryStyle;
          import com.afcomponents.umap.styles.GradientStyle;
          import com.afcomponents.umap.styles.IconStyle;
          import com.afcomponents.umap.styles.MarkerStyle;
          import com.afcomponents.umap.styles.StrokeStyle;
          import com.afcomponents.umap.styles.TextStyle;
          import com.afcomponents.umap.types.Align;
          import com.afcomponents.umap.types.LatLng;
          import com.afcomponents.umap.types.Offset;
      import com.afcomponents.umap.gui.*; 
      import com.afcomponents.umap.core.UMap; 
      import com.afcomponents.umap.core.Control; 
      import mx.core.UIComponent; 
      import mx.controls.Alert;
          import mx.events.ItemClickEvent;
      import mx.controls.TabBar;
                  
             private var _map:UMap; 
             private var container:UIComponent;
             //private var marker:Marker;
     //        private var position:LatLng;
             //private var style:MarkerStyle;
  
          private var _style1:IconStyle = new IconStyle({align:new Align(Align.CENTER, Align.BOTTOM), offset:new Offset("0", "0"), scale:0.7, rotation:null, colorTransform:null});
          private var _style2:TextStyle = new TextStyle({antiAliasType:AntiAliasType.ADVANCED, autoSize:TextFieldAutoSize.LEFT, condenseWhite:true, embedFonts:null, gridFitType:GridFitType.PIXEL, sharpness:null, thickness:null, textFormat:new TextFormat("_sans", 12, 0x000000, null, null, null, "", "", TextFormatAlign.LEFT, null, null, null, null), wordWrap:null, multiline:null, selectable:null, html:null, styleSheet:null});
          private var _style3:DropShadowStyle = new DropShadowStyle({angle:15, distance:0.5, color:0x000000, alpha:0.6, blurX:3, blurY:3, strength:0, quality:1});
          private var _style4:GradientStyle = new GradientStyle({type:GradientType.LINEAR, colors:[0xDDDDDD,0xFFFFFF], alphas:[70,100], ratios:[200,255], matrix:new Matrix(-1.1211606022543736e-17, -0.06103515625, 0.06103515625, -1.1211606022543736e-17, 50, 50), spreadMethod:SpreadMethod.PAD, interpolationMethod:InterpolationMethod.RGB, focalPointRatio:null});
          private var _style5:StrokeStyle = new StrokeStyle({pixelHinting:true, noScale:LineScaleMode.NORMAL, capsStyle:CapsStyle.ROUND, jointStyle:JointStyle.ROUND, miterLimit:3});
          private var _style6:MarkerStyle = new MarkerStyle({radius:7, icon:null, iconStyle:_style1, label:true, shadow:true, labelStyle:_style2, shadowStyle:_style3, fill:GeometryStyle.RGB, fillRGB:0xFFFFFF, fillAlpha:1, fillGradient:_style4, fillBitmap:null, stroke:GeometryStyle.RGB, strokeRGB:0x000000, strokeAlpha:1, strokeThickness:1, strokeGradient:null, strokeStyle:_style5});
          private var _style7:GradientStyle = new GradientStyle({type:GradientType.LINEAR, colors:[0xDDDDDD,0xFFFFFF], alphas:[70,100], ratios:[200,255], matrix:new Matrix(-1.1211606022543737e-17, -0.06103515625, 0.06103515625, -1.1211606022543737e-17, 50, 50), spreadMethod:SpreadMethod.PAD, interpolationMethod:InterpolationMethod.RGB, focalPointRatio:null});
          private var _style8:MarkerStyle = new MarkerStyle({radius:7, icon:"http://umapper.s3.amazonaws.com/ufiles/2009-08/0bf3782c79e05af08c78741ad4b259d8", iconStyle:_style1, label:true, shadow:null, labelStyle:_style2, shadowStyle:_style3, fill:GeometryStyle.RGB, fillRGB:0xFFFFFF, fillAlpha:1, fillGradient:_style7, fillBitmap:null, stroke:GeometryStyle.RGB, strokeRGB:0x000000, strokeAlpha:1, strokeThickness:1, strokeGradient:null, strokeStyle:_style5});
          private var _style9:MarkerStyle = new MarkerStyle({radius:7, icon:null, iconStyle:_style1, label:true, shadow:true, labelStyle:_style2, shadowStyle:_style3, fill:GeometryStyle.RGB, fillRGB:0xFF0000, fillAlpha:1, fillGradient:_style7, fillBitmap:null, stroke:GeometryStyle.RGB, strokeRGB:0x000000, strokeAlpha:1, strokeThickness:1, strokeGradient:null, strokeStyle:_style5});
          
          private var _marker1:Marker = new Marker({index:"P", name:"Nederland", position:new LatLng(52.22779942222279, 5.240478515625), infoStyle:{contentStyle:{html:true}, titleStyle:{html:true}}},  _style9);
          private var _marker2:Marker = new Marker({id:1, name:"Leidsegracht", 
                  description:"<TEXTFORMAT LEADING=\"2\"><FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\">" + 
                          "<P ALIGN=\"LEFT\">3 items. <a href=\"event:1;4;Leidsegracht\">Item List</a></p>" + 
                          "<p><a href=\"event:2;2;1\">Film 1</a></P>" + 
                          "<P ALIGN=\"LEFT\"><a href=\"event:2;1;1\">Film 2</a></FONT></P>" + 
                          "<br><a href=\"event:2;1;1\"><IMG SRC=\"http://umapper.s3.amazonaws.com/ufiles/2009-08/0bf3782c79e05af08c78741ad4b259d8\"/></a>" +
                          "</TEXTFORMAT>", position:new LatLng(52.365838949081315, 4.882543087005615), infoStyle:{contentStyle:{html:true}, titleStyle:{html:true}}}, _style9);
          private var _marker3:Marker = new Marker({id:2, index:"P", name:"Donau", description:"<TEXTFORMAT LEADING=\"2\"><P ALIGN=\"LEFT\"><FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\">Donau in Budapest, Hungary</FONT></P></TEXTFORMAT><TEXTFORMAT LEADING=\"2\"><P ALIGN=\"LEFT\"><FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\">\\n<a href=\"http://link\">Link to movie</a>\\n</FONT></P></TEXTFORMAT>", position:new LatLng(47.58398004380382, 19.071407318115234)}, _style9);
          private var _marker4:Marker = new Marker({id:3, index:"P", name:"La Digue", position:new LatLng(-4.355247749889177, 55.83234786987305)}, _style9);
             private var _marker5:Marker = new Marker({id:4, index:"P", name:"Amsterdam",
             description:"<TEXTFORMAT LEADING=\"2\">" + 
                          "<FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\">" + 
                          "<P ALIGN=\"LEFT\">359 items. <a href=\"event:1;1;Amsterdam\">Item List</a></p>" + 
                          "<P ALIGN=\"LEFT\"><a href=\"event:2;1;1\">Film 1</a></p>" + 
                          "<P ALIGN=\"LEFT\"><a href=\"event:2;1;2\">Film 2</a></p>" + 
                          "<P ALIGN=\"LEFT\"><a href=\"event:2;1;3\">Film 3</a></p>" + 
                          "<P ALIGN=\"LEFT\"><a href=\"event:2;1;4\">Film 4</a></p>" + 
                          "</FONT></textformat>", position:new LatLng(52.36690022958957, 4.888958930969238), infoStyle:{contentStyle:{html:true}, titleStyle:{html:true}}},_style9);
          private var _marker6:Marker = new Marker({id:5, name:"Utrecht", position:new LatLng(52.087786788311426, 5.1229870319366455)}, _style9);
          private var _marker7:Marker = new Marker({id:6, name:"Singel", 
          description:"<TEXTFORMAT LEADING=\"2\"><FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\">" + 
                          "<P ALIGN=\"LEFT\">2 items. <a href=\"event:1;2;Singel\">Item List</a></p>" + 
                          "<p><a href=\"event:2;2;1\">Film 1</a></FONT></P></TEXTFORMAT><TEXTFORMAT LEADING=\"2\"><P ALIGN=\"LEFT\"><FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\"><a href=\"event:2;1\">Film 2</a></FONT></P></TEXTFORMAT>", position:new LatLng(52.37455906, 4.88955975), infoStyle:{contentStyle:{html:true}, titleStyle:{html:true}}}, _style9);
          private var _marker8:Marker = new Marker({id:7, name:"Reguliersgracht", 
          description:"<TEXTFORMAT LEADING=\"2\">" + 
                          "<FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\">" + 
                          "<P ALIGN=\"LEFT\">1 item.</p>" + 
                          "<P ALIGN=\"LEFT\">" + 
                          "<a href=\"event:2;1;1\">Film 1</a>" + 
  //                        "<IMG SRC=\"http://umapper.s3.amazonaws.com/ufiles/2009-08/39531978a8d19e1e603c13db84ca6650\"/>" +
                          "<a href=\"event:2;1;1\"><IMG SRC=\"student-umap-IMG-3850tmb.jpg\"/></a>" +
                          "</P></FONT></TEXTFORMAT>", position:new LatLng(52.35962272, 4.89641011), infoStyle:{contentStyle:{html:true}, titleStyle:{html:true}}}, _style9);
          private var _marker9:Marker = new Marker({id:8, name:"Amstel", 
          description:"<TEXTFORMAT LEADING=\"2\"><FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\">" + 
                          "<P ALIGN=\"LEFT\">5 items. <a href=\"event:1;3;Amstel\">item list</a></p>" + 
                          "<P ALIGN=\"LEFT\"><a href=\"event:2;3;1\">Film 1</a></P>" + 
                          "<br><a href=\"event:2;3;1\"><IMG SRC=\"http://www.few.vu.nl/~dbs800/umap/IMG_3847tmb.jpg\"/></a>" +
                          "</FONT></TEXTFORMAT>", position:new LatLng(52.36279384, 4.9028635), infoStyle:{contentStyle:{html:true}, titleStyle:{html:true}}}, _style9);
          private var _marker10:Marker = new Marker({id:9, name:"Berlagebrug", 
          description:"<TEXTFORMAT LEADING=\"2\"><FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\">" + 
                          "<P ALIGN=\"LEFT\">2 items.</p>" + 
                          "<P ALIGN=\"LEFT\"><a href=\"event:2;1;1\">Film 1</a></P>" + 
                          "<br><a href=\"event:2;1;1\"><IMG SRC=\"student-umap-IMG-3845tmb.jpg\"/></a>" +
                          "</FONT></TEXTFORMAT>", position:new LatLng(52.34733576, 4.9127233), infoStyle:{contentStyle:{html:true}, titleStyle:{html:true}}}, _style9);
  
          private var _layer1:Layer = new Layer();
      
             public function init() : void 
             { 
        container = new UIComponent(); 
          
        _map = new UMap(); 
        _map.setSize(639, 600); 
          
        container.addChild(_map); 
        mapCanvas.addChild(container); 
        container.focusManager.deactivate(); 
          
        _map.addControl(new MapTypeControl()); 
        _map.addControl(new ZoomControl()); 
        _map.addControl(new PositionControl()); 
        _map.setProvider(Providers.GOOGLE);
        _map.setCenter(new LatLng(52.36,4.89),13);
        
                  addOverlaysToLayers(_layer1, _marker1, _marker2, _marker3, _marker4, _marker5, _marker6, _marker7, _marker8, _marker9, _marker10);
                  addOverlaysToUmap(_map, _layer1);
                  _map.addEventListener(DisplayEvent.UPDATE_ZOOM, zoomMarkers);
  
                  _map.addEventListener(TextEvent.LINK, link, true); 
          
        //addMarkers();
             } 
             
             public function link(event:TextEvent):void 
                  { 
                          
                          var array:Array = event.text.split(/;/);
                          //mx.controls.Alert.show(array[0]);
                                  accordion.selectedIndex=array[0];                        
                          if (array[0] == 1) {
                                  itemList.dataProvider = list[array[1]];
                                  itemList.labelField = "data";
                                  itemListLabel.text = "Lijst van items in " + array[2];
                          }
                          if (array[0] == 2) {
  
                      showItemLabel.text = "Bekijk " + list[array[1]][array[2]].data;
                      showItemImage.source = list[array[1]][array[2]].link;
                          }
  
                          
                  }                
             
             public function zoomMarkers(event:DisplayEvent):void
             {
                     //Alert.show(_map.zoom.toString());
                     //var newzoom:Number = _map.zoom;
                     if (_map.zoom < 6) {
                             //Alert.show(_map.zoom.toString());
                             _style9.radius = 4;
                             //Alert.show(_style9.radius.toString());
                     }
                     else if (_map.zoom > 14) _style9.radius = 10;
                     else _style9.radius = 7;
                     //Alert.show(_style9.radius.toString());
                     //_marker1.setStyle(_style9);
                     //_layer1.addOverlay(_marker1);
                     //_map.addOverlay(_layer1);
                     addStyleToMarkers(_style9, _marker1, _marker2, _marker3, _marker4, _marker5, _marker6, _marker7, _marker8, _marker9, _marker10);
                     addOverlaysToLayers(_layer1, _marker1, _marker2, _marker3, _marker4, _marker5, _marker6, _marker7, _marker8, _marker9, _marker10);
                  addOverlaysToUmap(_map, _layer1);
  
             }
     
    /* public function addMarkers():void
     {
  
                     position = new LatLng(52.36,4.89);
  //                   marker.position = position;
                     style = new MarkerStyle();
                     style.fill = GeometryStyle.RGB;
                     style.fillRGB = 0xff0000;
                     marker.setStyle(style);
                     _map.addOverlay(marker);
                     _map.setCenter(position,13);
     }*/
                          public function addOverlaysToUmap(map:UMap, ...args:Array):void{
                                  var len:int = args.length;
                                  for(var i:int = 0; i < len; i++)
                                  {
                                          if(args[i] is IOverlay) map.addOverlay(args[i]);
                                  }
                          }
                          public function addOverlaysToLayers(layer:Layer, ...args:Array):void{
                                  var len:int = args.length;
                                  for(var i:int = 0; i < len; i++)
                                  {
                                          if(args[i] is IOverlay) layer.addOverlay(args[i]);
                                  }
                          }
                          public function addStyleToMarkers(style:MarkerStyle, ...args:Array):void{
                                  var len:int = args.length;
                                  for(var i:int = 0; i < len; i++)
                                  {
                                          if(args[i] is IOverlay) args[i].setStyle(style);
                                  }
                          }                        
  
              import mx.collections.ArrayCollection;
  
              [Bindable]
              public var place:ArrayCollection = new ArrayCollection(
                  [ {label:"Amsterdam - Nederland", lat:(52.3669), lng:(4.8889), data:351},
                    {label:"La Digue - Seychellen", lat:(-4.355), lng:(55.83), data:3}, 
                    {label:"Donau - Hongarije", lat:(47.58398), lng:(19.0714), data:60} ]);
          
              public function closeHandler(event:Event):void {
                      accordion.selectedIndex=0;
                  myLabel.text = ComboBox(event.target).selectedItem.label + ", gevonden items: " + ComboBox(event.target).selectedItem.data;
                  //myData.text = ComboBox(event.target).selectedItem.data;
                  _map.setCenter(new LatLng(ComboBox(event.target).selectedItem.lat, ComboBox(event.target).selectedItem.lng),12);
                 // _map.setCenter(new LatLng(47.58,19));
              }    
              [Bindable]
              public var TAB_ARRAY:Array = 
                      [{label:"Hierarchisch", data:"hierarchy"},
                  {label:"Image", data:"images"},
                  {label:"Detail", data:"details"}
              ];
              
             [Bindable]
              public var list:Array = 
                      [{place:""},
                      [{data:"Film1", link:"http://umapper.s3.amazonaws.com/ufiles/2009-08/39531978a8d19e1e603c13db84ca6650"}, {data:"Film2", link:"http://umapper.s3.amazonaws.com/ufiles/2009-08/39531978a8d19e1e603c13db84ca6650"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}, {data:"Film2", link:"Film2"}, {data:"Film3", link:"Film3"}],
                  [{data:"Film1", link:"http://umapper.s3.amazonaws.com/ufiles/2009-08/39531978a8d19e1e603c13db84ca6650"}, {data:"Film2", link:"http://umapper.s3.amazonaws.com/ufiles/2009-08/39531978a8d19e1e603c13db84ca6650"}],
                  [{data:"Film1", link:"http://umapper.s3.amazonaws.com/ufiles/2009-08/39531978a8d19e1e603c13db84ca6650"}, {data:"Film2", link:"http://umapper.s3.amazonaws.com/ufiles/2009-08/39531978a8d19e1e603c13db84ca6650"}, {data:"Film3", link:"http://umapper.s3.amazonaws.com/ufiles/2009-08/39531978a8d19e1e603c13db84ca6650"}, {data:"Film4", link:"http://umapper.s3.amazonaws.com/ufiles/2009-08/39531978a8d19e1e603c13db84ca6650"}, {data:"Film5", link:"http://umapper.s3.amazonaws.com/ufiles/2009-08/39531978a8d19e1e603c13db84ca6650"}],
                  [{data:"Film1", link:"http://umapper.s3.amazonaws.com/ufiles/2009-08/39531978a8d19e1e603c13db84ca6650"}, {data:"Film2", link:"http://umapper.s3.amazonaws.com/ufiles/2009-08/39531978a8d19e1e603c13db84ca6650"}, {data:"Film3", link:"http://umapper.s3.amazonaws.com/ufiles/2009-08/39531978a8d19e1e603c13db84ca6650"}]
              ];   
        
              
                      private function clickEvt(event:ItemClickEvent):void {
                              // Access target TabBar control.
                              var targetComp:TabBar = TabBar(event.currentTarget);
                              Alert.show(targetComp.dataProvider[event.index].data);
                              //forClick.text="manier van zoeken: "  + targetComp.dataProvider[event.index].data;
                              myViewStack.selectedChild=targetComp.dataProvider[event.index].data;
                              
                      }
                      
                          [Bindable]
              public var selectedNode:XML;
  
              // Event handler for the Tree control change event.
              public function treeChanged(event:Event):void {
                  selectedNode=Tree(event.target).selectedItem as XML;
                  accordion.selectedIndex=1;
                  itemList.dataProvider = list[1];
                                  itemList.labelField = "data";
                                  itemListLabel.text = "Lijst van items in " + selectedNode.label;
  
              }
              
              public function viewItem(event:Event):void {
                      accordion.selectedIndex=2;
                      showItemLabel.text = "Bekijk " + List(event.target).selectedItem.data;
                      showItemImage.source = List(event.target).selectedItem.link;
                      
              }
              
              [Bindable]
              public var selectedItem:Object;
          ]]>
      </mx:Script>
     
     <mx:XMLList id="treeData">
              <node label="Nederland">
                  <node label="Amsterdam (359)">
                      <node label="Amstel (5)">
                              <node label="Film1"/>
                              <node label="Film2"/>
                          </node>
                      <node label="Berlagebrug (2)">
                              <node label="Film1"/>
                              <node label="Film2"/>
                          </node>
                          <node label="Leidsegracht (3)">
                              <node label="Film1"/>
                              <node label="Film2"/>
                          </node>
                      <node label="Reguliersgracht (1)"/>
                      <node label="Singel (2)">
                              <node label="Film1"/>
                              <node label="Film2"/>
                          </node>
                  </node>
                  </node>        
      </mx:XMLList>
   
     
        <mx:Panel title="Umap application" width="100%" height="100%" layout="horizontal" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
                  <mx:Box direction="vertical">        
                          <mx:Text  width="200" color="blue" text="Selecteer een plaats."/>
                          <mx:ComboBox dataProvider="{place}" width="200" close="closeHandler(event);"/>
                  <mx:VBox width="250">
                      
                  </mx:VBox>
                  
                  <!--<mx:TabBar itemClick="clickEvt(event);">
                      <mx:dataProvider>{TAB_ARRAY}</mx:dataProvider>
                  </mx:TabBar>
          
                  <mx:TextArea id="forClick" height="100%" width="100%">
                          
                  </mx:TextArea>-->
          <mx:VBox>
          <mx:HBox borderStyle="solid">
                  <mx:Text text="View:" paddingTop="4" paddingLeft="6"/>
                  <mx:LinkBar dataProvider="{myViewStack}"/>
          </mx:HBox>        
          <mx:Label id="myLabel" text=""/>
              <!--<mx:Label id="myData" text=""/>-->
          <mx:ViewStack id="myViewStack" width="100%" height="100%">
                  <mx:Box id="hierarchy" label="Hierarchie" width="300" height="100%">
                      <mx:Tree id="myTree" width="100%" height="400" labelField="@label"
                          showRoot="false" dataProvider="{treeData}"
                          change="treeChanged(event)" />
                      <!--<mx:TextArea height="100%" width="50%"
                          text="Selected Item: {selectedNode.@label}"/>-->
                  </mx:Box>
                  <mx:Box id="images" label="Image" width="300" height="100%" borderStyle="solid">
                                 <mx:Tile direction="horizontal" horizontalGap="10" verticalGap="15" 
                  paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
                          <mx:Image scaleContent="true" width="90" height="60">
                                  <mx:source>file:
C|/Users/Dorine/Pictures/2008/IMG_3848.JPGmx:source>


                          </mx:Image>
                          <mx:Image scaleContent="true" width="90" height="60">
                                  <mx:source>file:
C|/Users/Dorine/Pictures/2008/IMG_3845.JPGmx:source>


                          </mx:Image>
                          <mx:Image scaleContent="true" width="90" height="60">
                                  <mx:source>file:
C|/Users/Dorine/Pictures/2008/IMG_3846.JPGmx:source>


                          </mx:Image>
                          <mx:Image scaleContent="true" width="90" height="60">
                                  <mx:source>file:
C|/Users/Dorine/Pictures/2008/IMG_3850.JPGmx:source>


                          </mx:Image>
                  </mx:Tile>
                  </mx:Box>
                  <mx:Box id="details" label="Detailed" width="300" height="100%">
                                 <mx:Text text="details"/>
                  </mx:Box>
              </mx:ViewStack>
              </mx:VBox>
          </mx:Box>
          <mx:Accordion id="accordion" selectedIndex="0" width="100%" height="100%">
                  <mx:VBox label="Map">
                                  <mx:Canvas id="mapCanvas" width="100%" height="100%"/>
                          </mx:VBox>
                  <mx:VBox label="Item List">
                          <mx:Label id="itemListLabel"/>
                          <mx:List id="itemList" width="639" height="500" borderStyle="none"
                                  change="viewItem(event)"
                                  />
                  </mx:VBox>
                          <mx:VBox label="Show Item" paddingTop="10">
                                  <mx:Label id="showItemLabel"/>
                                  <mx:Image id="showItemImage" scaleContent="true" width="300" height="200" horizontalAlign="center"/>
                
                          </mx:VBox>
          </mx:Accordion>
  
          <mx:Box direction="vertical">
                  <mx:Text width="200" color="blue" text="Verfijning"/>
                  <mx:TextArea id="refine" height="600" width="100%" >
                          <!--<mx:htmlText><![CDATA[
                          <p>Jaar<br>
                          2009 (91)<br>
                          2008 (49)<br>
                          2007 (56)<br>
                          voor 1950 (2)<br>
                          <p>Type<br>
                          ]]></mx:htmlText>-->
                          </mx:TextArea>
          </mx:Box>
        </mx:Panel>
  
  </mx:Application>