<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" frameRate="99" backgroundColor="#000000" verticalGap="0" backgroundGradientColors="[#000000,#000000]" layout="vertical" creationComplete="init()" xmlns:containers="com.mh.containers.*" xmlns:containers1="flexlib.containers.*" paddingBottom="5" paddingLeft="5" paddingRight="0" paddingTop="5" viewSourceURL="examples/flickr_api/srcview/index.html">
    <mx:Script>
        <![CDATA[
            import com.gskinner.motion.GTween;
            import mx.collections.ArrayCollection;
            import com.adobe.webapis.flickr.PagedPhotoList;
            import com.adobe.webapis.flickr.methodgroups.helpers.PhotoSearchParams;
            import mx.core.UIComponent;
            import com.adobe.webapis.flickr.Photo;
            import com.adobe.webapis.flickr.methodgroups.Photos;
            import com.adobe.webapis.flickr.events.FlickrResultEvent;
            import com.adobe.webapis.flickr.FlickrService;
            private var service:FlickrService = new FlickrService("YOUR_API_KEY");
            private var photos:Photos;
            
            private var photoCollection:ArrayCollection = new ArrayCollection();
            private var currentlyLoading:ArrayCollection = new ArrayCollection();
            private var loaded:ArrayCollection = new ArrayCollection();
            
            private var numPages:int = 0;
            private var loadCount:int = 10;
            private var currentLoadtotal:int = 0;
            
            private var imageTotal:int;
            [Bindable] private var loadedPercent:int;
            
            private function init():void
            {
                service.secret = "YOUR_SECRET";
                
                service.addEventListener(FlickrResultEvent.PHOTOS_SEARCH, handleSearchResult);
                this.loadPage(1)
            }
            
            private function loadPage(number:int):void
            {
                service.addEventListener(FlickrResultEvent.PHOTOS_SEARCH, handleSearchResult);
                this.photos = new Photos(service);
                var p:PhotoSearchParams = new PhotoSearchParams()
                p.user_id = "YOUR_NSID";
                p.per_page = 250;
                p.page = number;
                p.content_type = 1;
                p.media = "photo"
                p.sort = "date-posted-desc";
                this.photos.searchWithParamHelper(p);                
            }
            
            private function displayImages():void
            {
                for(var i:int=0;i<this.loadCount;i++)
                {
                    loadSingleImage()                
                }

            
            }
            
            private function loadSingleImage():void
            {
                var photoToLoad:Photo = this.photoCollection.getItemAt(0) as Photo;
                var thumb:Thumb = new Thumb(photoToLoad,this.service); 
                thumb.width = 75;
                thumb.height = 75;
                thumb.addEventListener("loaded", this.imageLoadComplete);
                this.photoCollection.removeItemAt(0);
                this.photoGrid.addChild(thumb);        
                                
            }
            
            private function handleSearchResult(event:FlickrResultEvent):void
            {
                var pagedPhotos:PagedPhotoList = event.data.photos as PagedPhotoList;
                if(pagedPhotos.page == 1)
                    this.numPages = pagedPhotos.pages
                for each(var photo:Photo in pagedPhotos.photos)
                {
                    this.photoCollection.addItem(photo);
                }

                if(pagedPhotos.page==this.numPages)
                {
                    
                    this.imageTotal = this.photoCollection.length;
                    displayImages()
                    return;
                }
                this.loadPage(pagedPhotos.page+1)
            }
            
            private function imageLoadComplete(event:Event):void
            {
                this.currentLoadtotal +=1
                event.target.removeEventListener("loaded", this.imageLoadComplete);
                if(this.photoCollection.length>0)    
                    loadSingleImage()
                    trace(this.photoGrid.numChildren, this.imageTotal)
                if(this.photoGrid.numChildren == this.imageTotal)
                {
                    this.loadBar.width=0;
                    
                }
                this.loadedPercent = int((this.photoGrid.numChildren/this.imageTotal)*100)
                this.loadingText.text = this.loadedPercent + "% loading photos"
                this.loadBar.width = 200 * (this.photoCollection.length/this.imageTotal)
                if(this.loadBar.width==0)
                    var tween:GTween = new GTween(this.loadingMeter,2,{alpha:0});
                
            }
        ]]>
    </mx:Script>
    <mx:HBox id="loadContainer" width="100%" verticalAlign="middle">
        <mx:Label text="Provinsal.com" styleName="headerTitle"/>
        <mx:HBox hideEffect="Fade" width="100%" id="loadingMeter" verticalAlign="middle" horizontalAlign="right" paddingRight="10">
            <mx:Label id="loadingText" text="finding some photos" styleName="headerTitle"/>
            <mx:Canvas id="loadBar" backgroundColor="#FF0000" height="10" width="200"/>
        </mx:HBox>
    </mx:HBox>
    <mx:Canvas id="photoCont" width="100%" height="100%" >
        <containers1:FlowContainer  backgroundColor="#000000" id="photoGrid"  width="{this.photoCont.width}" height="100%" autoLayout="true" />    
    </mx:Canvas>
    
    <mx:Style source="main.css"/>
</mx:Application>