<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:maps="com.google.maps.*" layout="absolute" title="Amsterdam Coffeeshop Finder" initialize="init()" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
        
        // Importeer Flex specifieke classes
        import mx.controls.Image;
        import mx.controls.Alert;
        import mx.events.DragEvent;
        import mx.events.ResizeEvent;                
        import mx.core.Window;        
        import mx.effects.Resize;
        
        // Importeer XML specifieke classes
        import com.adobe.utils.XMLUtil;
        import com.adobe.xml.syndication.rss.Item20;
        import com.adobe.xml.syndication.rss.RSS20;
        
        // Importeer classes mbt URLs
        import flash.net.URLLoader;
        import flash.net.URLRequest;
        import flash.net.URLRequestMethod;
        import flash.net.navigateToURL;
           
           // Importeer Google Maps specifieke classes
        import com.google.maps.LatLng;
        import com.google.maps.Map;
        import com.google.maps.MapEvent;
        import com.google.maps.MapType;
        import com.google.maps.MapMouseEvent;
        import com.google.maps.LatLng;
        import com.google.maps.InfoWindowOptions;
        import com.google.maps.overlays.Marker;
        import com.google.maps.overlays.MarkerOptions;
        import com.google.maps.controls.ZoomControl;
        import com.google.maps.controls.PositionControl;
        import com.google.maps.controls.MapTypeControl;
        import com.google.maps.controls.NavigationControl;
        
        [Embed(source="icon.png")] private var coffeeshopIcon:Class // Embed Coffeeshop icoon
        
        private static const RSS_URL:String = "rss.xml"; // Pad naar rss bestand
        private static const GEORSS_NAMESPACE:String = "http://www.georss.org/georss"; // Namespace URL
        private static const MAP_CENTER:LatLng = new LatLng(52.3740,4.8986); // Midden van de map
        private static const AUTO_RESIZE:Boolean = false; // Rechterdeel van de applicatie automatisch resizen
        private static const STATUSBAR_DEFAULTTEXT:String = "Kies een locatie"; // Statusbar standaard tekst
        
        private var loader:URLLoader = new URLLoader(); // Nieuw URLLoader object
        private var ns:Namespace = new Namespace("georss",GEORSS_NAMESPACE); // Defineer namespace van het type georss
        private var pointElement:QName = new QName(ns, "point"); // Defineer namespace
        
        private function init():void
        {
            var screenBounds:Rectangle = Screen.mainScreen.bounds; // Defineer de randen van het scherm in een variable
            var nativeWindow:NativeWindow  = this.nativeWindow; // Defineer de applicatie in een variable
            
            // Zet de applicatie in het midden van het scherm
            nativeWindow.x = (screenBounds.width - nativeWindow.width)/2;
               nativeWindow.y = (screenBounds.height - nativeWindow.height)/2;
                
            this.status = STATUSBAR_DEFAULTTEXT; // Tekst in de statusbar
            divider.getDividerAt(0).visible = AUTO_RESIZE; // Divider zichtbaar of niet
        }
        
        private function parseRSS(data:String):void
        {
            if(!XMLUtil.isValidXML(data)) // Controleer of de feed valid is
            {
                Alert.show("Feed bevat geen valide XML.","Fout"); // Geef een error op het scherm
                return; // Stop de functie
            }
            
            var rss:RSS20 = new RSS20(); // Nieuwe variable aanmaken
                        
            rss.parse(data); // De feed parsen
            
            var items:Array = rss.items; // Nieuw variable gevuld met alle items uit de feed
            
            for each(var item:Item20 in items) // Loop alle items door
            {
                var points:Array = item.xml.descendants(pointElement).toString().split(" "); // Splits de punten in de feed in tweeen
                var enclosures:XMLList = item.xml.descendants("enclosure").attribute("url"); // Haal de URLs van de bijlages op
                var images:Array = null; // Defineer de images array
                
                if(enclosures.length() > 0) // Als er meer dan 0 resultaten zijn
                {
                    images = new Array(); // Maak een lege array aan
                    
                    for each(var enclosure:String in enclosures) // Loop de bijlages door
                    {
                        images.push(enclosure); // Voeg de bijlage toe aan de images-array
                    }
                }
                                                                                
                this.map.addOverlay(createMarker(item.title,item.description,item.link,points,images)); // Voeg voor ieder item een punt op de map toe
            }
        }
        
        private function createMarker(title:String,description:String,url:String,position:Array,images:Array=null):Marker
        {
            // Defineer de opties voor de marker
            var markerOptions:MarkerOptions = new MarkerOptions();
            
            markerOptions.icon = new coffeeshopIcon(); // Eigen icon
            markerOptions.tooltip = title; // Opschrift
            markerOptions.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER; // Uitlijning
            markerOptions.iconOffset = new Point(0,-10); // Uitlijning
            markerOptions.hasShadow = true; // Schaduw
            
            var marker:Marker = new Marker(new LatLng(position[0],position[1]),markerOptions); // Voeg marker toe
            
            marker.addEventListener(MapMouseEvent.ROLL_OVER,function(event:MapMouseEvent):void { // Bij muis-over
                var street:String = description.split("<")[0]; // Krijg de straat uit de description-tekst (eerste regel)
                changeStatus(title + " (" + street + ")"); // Geef in statusbar titel + straat weer
            });
            
            marker.addEventListener(MapMouseEvent.ROLL_OUT,function(event:MapMouseEvent):void {
                changeStatus(STATUSBAR_DEFAULTTEXT); // Statusbar terug naar standaard waarde
            });
            
            marker.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void {  
                txtTitle.text = title; // Titel vullen
                txtDescription.htmlText = description; // Descriptie vullen
                btnLink.visible = true; // Link weergeven
                btnLink.toolTip = url; // De url als opschrift instellen
                btnLink.addEventListener(MouseEvent.CLICK,function(event:MouseEvent):void { // Bij muis-klik
                    navigateToURL(new URLRequest(url),"website"); // Navigeer naar URL
                });
                
                accordion.selectedIndex = 0; // Selecteer de eerste container uit de accordion
                container.removeAllChildren(); // Verwijder alle bestaande images in de images-container             
                

                for each(var image:String in images) // Loop alle afbeeldingen door
                {
                    var objImage:Image = new Image(); // Creeer een nieuw plaatje
                    objImage.load(image); // Laad de afbeelding
                    objImage.maintainAspectRatio = true; // Behouwd het formaat
                    objImage.showBusyCursor = true; // Laat zandloper zien tijdens het laden
                    objImage.percentWidth = 90; // Breedte in procenten
                    container.addChild(objImage); // Plaatje toevoegen aan container
                }
                
                if(AUTO_RESIZE) // Als auto_resize op true staat (werkt niet goed)
                {
                    var finished:Boolean = false;
                    
                    accordion.resizeToContent = true;
                    
                    divider.getDividerAt(0).x = stage.stageWidth - boxDescription.width;
                    
                    /*accordion.addEventListener(ResizeEvent.RESIZE,function(event:ResizeEvent):void {
                        if(!finished)
                        {
                            trace(event.target.width);
                            divider.getDividerAt(0).x = stage.stageWidth - event.target.width;
                            finished = true;
                        }
                    });*/
                }
                
                map.panTo(event.latLng); // Focus op de map op geklikte marker
            });     
               
            return marker; // Geeft waarde van de marker terug
        }
        
        private function changeStatus(text:String):void
        {
            this.status = text; // Verander statusbar tekst
        }
        
        private function onDataLoad(event:Event):void
        {
            var rawRSS:String = URLLoader(event.target).data; // Laad rss-feed

            parseRSS(rawRSS); // Parse de rss-feed
        }
        
        private function onMapPreinitialize(event:Event):void // Voordat de map getekend wordt
        {
            var request:URLRequest = new URLRequest(RSS_URL); // Haal feed-url op
            request.method = URLRequestMethod.GET; // Methode op GET
        
            loader.addEventListener(Event.COMPLETE, onDataLoad); // Als inladen voltooid is
            loader.load(request); // Feed laden
        }
    
        private function onMapReady(event:Event):void // Als de map klaar is
        {
            this.map.enableScrollWheelZoom(); // Scrollen met scrollwiel is toegestaam
            this.map.enableContinuousZoom(); // Smoother scrollen
                    
            this.map.addControl(new NavigationControl()); // Navigatie elementen toevoegen
                        
            this.map.setCenter(MAP_CENTER, 16, MapType.NORMAL_MAP_TYPE); // Begin punt van de map
        }
        
        ]]>
    </mx:Script>
    <mx:HDividedBox id="divider" width="100%" height="100%" ><!-- Een box die de applicatie door tweeen deelt -->
    
        <mx:HBox width="80%" height="100%"><!-- Eerste box -->
            <maps:Map id="map" mapevent_mapready="onMapReady(event)" mapevent_mappreinitialize="onMapPreinitialize(event)" width="100%" height="100%" key="ABQIAAAATEjwloQxnrFICySY4m0OexSOW14Fob9ANQdkqXsiDTAtWn4o0BTh9K8wg-g5Mh9mgsMicJTggM9sHQ" url="http://code.google.com/apis/maps/" /><!-- Google Maps -->
        </mx:HBox>
    
        <mx:HBox width="30%" height="100%"><!-- Tweede box -->
            <mx:Accordion id="accordion" color="0x323232" width="100%" height="100%"> <!-- Marker specifieke content -->
                <mx:VBox id="boxDescription" label="Beschrijving" paddingTop="5" paddingLeft="5">
                    <mx:Text id="txtTitle" selectable="false" fontWeight="bold"  />
                    <mx:Text id="txtDescription" selectable="false" />
                    <mx:Button id="btnLink" label="Bezoek website" visible="false" />
                </mx:VBox>
                    
                <mx:VBox id="container" label="Foto's" horizontalAlign="center" paddingTop="15"><!-- Container voor foto's -->
                
                </mx:VBox>
            </mx:Accordion>
        </mx:HBox>
    
    </mx:HDividedBox>
</mx:WindowedApplication>