<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               applicationComplete="srv.send()" xmlns:local="*" xmlns:layouts="layouts.*"
               width="500" viewSourceURL="srcview/index.html">
    
    <fx:Style>

        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
        
        @font-face {
            src: url("assets/MyriadPro-Semibold.otf");
            fontFamily: "main";
            embedAsCFF: true;
        }
        
        s|Application {
            font-family: main;
            font-size: 14;
        }
        
    </fx:Style>
    
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
            
            [Bindable]private var items:ArrayCollection;
            
            [Bindable]private var filteredItems:ArrayCollection;
            
            [Bindable]private var _maxPrice:Number = 1000;
            
            [Bindable]private var _camera:Boolean = false;
            
            [Bindable]private var _video:Boolean = false;
            
            [Bindable]private var _triband:Boolean = false;
            
            
            private function resultHandler(event:ResultEvent):void
            {
                items = event.result.catalog.product as ArrayCollection;
                filteredItems = new ArrayCollection(items.source);
                filteredItems.filterFunction = filter;
            }
            
            private function selectionChange():void
            {
                filteredItems.refresh();
                filterLayout.filter();
            }
            
            private function filter(item:Object):Boolean
            {
                return    (item.price <= _maxPrice) &&
                    (!_camera || item.camera) &&
                    (!_video || item.video) &&
                    (!_triband || item.triband);
            }            
            
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <s:HTTPService id="srv" url="data/catalog.xml" result="resultHandler(event)"/>
    </fx:Declarations>
    
    <s:HGroup verticalAlign="middle" paddingLeft="8">
        <s:Label text="Max Price:"/>
        <s:HSlider id="priceSlider" minimum="0" maximum="1000" snapInterval="100" value="@{_maxPrice}" change="selectionChange()"/>
        <mx:Spacer width="20"/>
        <s:CheckBox label="Camera" selected="@{_camera}" change="selectionChange()"/>
        <s:CheckBox label="Video" selected="@{_video}" change="selectionChange()"/>
        <s:CheckBox label="Triband" selected="@{_triband}" change="selectionChange()"/>
    </s:HGroup>
    
    <s:DataGroup dataProvider="{items}" itemRenderer="renderers.PhoneRenderer" top="50" left="0" right="0" horizontalCenter="0">
        <s:layout>
            <layouts:FilteredTileLayout id="filterLayout" filteredItems="{filteredItems}" />
        </s:layout>
    </s:DataGroup>
    
</s:Application>