<?xml version="1.0" encoding="utf-8"?>
<!--

////////////////////////////////////////////////////////////////////////////////
//
//    Copyright 2014 Ardisia Labs LLC. All Rights Reserved.
//
//    This file is licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////

-->
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:timeline="ardisia.components.timeline.*" 
          xmlns:dataTypes="ardisia.components.timebarContainer.dataTypes.*" 
          xmlns:dataTypes1="ardisia.components.timeline.dataTypes.*"
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:data1="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:scroller="ardisia.components.scroller.*"
          xmlns:dataTypes2="ardisia.components.timebarContainer.dataTypes.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.conversion.TextConverter;
            
            include "../data/SpaceRaceData.as";
            include "../data/TVShowRatingsData.as";
            include "../data/ClassScheduleData.as";
            include "../data/ComputerHistoryData.as";
            include "../data/FranceWinterOlympics.as";
            
            import ardisia.components.timeline.events.TimelineEvent;
            import ardisia.utils.DateUtils;
            
            //----------------------------------
            //     methods
            //----------------------------------
            
            public function creationComplete():void
            {
                
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            // space race
            
            protected function dataTipFunctionSpaceRace(value:Object):Object
            {
                var time:String = DateUtils.format(value.begin, 'M/D/YYYY');
                if (value.end)
                    time += " - " + DateUtils.format(value.end, 'M/D/YYYY');
                
                return TextConverter.importToFlow("<p><b>" + value.mission + "</b></p><p>" + time + "</p>", 
                    TextConverter.TEXT_FIELD_HTML_FORMAT);
            }
            
            protected function spaceRaceChangeHandler(event:TimelineEvent):void
            {
                if (!timeline.selectedItem)
                {
                    title.text = "";
                    seal.source = null;
                    dates.text = "";
                    description.text = "";
                    
                    return;
                }
                
                var time:String = DateUtils.format(timeline.selectedItem.begin, 'M/D/YYYY');
                if (timeline.selectedItem.end)
                    time += " - " + DateUtils.format(timeline.selectedItem.end, 'M/D/YYYY');
                
                title.text = timeline.selectedItem.mission;
                seal.source = timeline.selectedItem.nation == "USA" ? usaSource.bitmapData : timeline.selectedItem.nation == "USSR" ? sovietSource.bitmapData : canadaSource.bitmapData;
                dates.text = time;
                description.text = timeline.selectedItem.description;
            }
            
            // top rated shows
            
            protected function dataTipFunctionTvRatings(value:Object):Object
            { 
                var interval:String = DateUtils.format(value.begin, 'YYYY') + " - " + DateUtils.format(value.end, 'YYYY');
                var topRatingsInterval:String = DateUtils.format(value.topBegin, 'YYYY') + " - " + DateUtils.format(value.topEnd, 'YYYY');
                return TextConverter.importToFlow("<p><b>" + value.show +"</b></p><p>Show Run:" + interval + "</p><p>Top Rated Show: " + topRatingsInterval + "</p><p>Nielson Rating: " + value.ratings, 
                    TextConverter.TEXT_FIELD_HTML_FORMAT);
            }
            
            // class scheduling
            
            protected function dataTipFunctionClassSchedule(value:Object):Object
            { 
                var interval:String = DateUtils.format(value.begin, 'H:NN A') + " - " + DateUtils.format(value.end, 'H:NN A');
                return TextConverter.importToFlow("<p><b>" + value.classType +"</b></p><p>" + interval + "</p><p>Room: " + value.room + "</p><p>" + value.type + "</p>", 
                    TextConverter.TEXT_FIELD_HTML_FORMAT);
            }
            
            // computer history
            
            protected function dataTipFunctionExample2(value:Object):Object
            {
                var ageMeridian:String = value.begin.fullYear >= 0 ? "AD" : "BC";
                var time:String = DateUtils.format(value.begin, 'YYYY') + " " + ageMeridian;
                return TextConverter.importToFlow("<p><b>" + value.title +"</b></p><p>" + time + "</p>", 
                    TextConverter.TEXT_FIELD_HTML_FORMAT);
            }
            
            protected function computerHistoryChangeHandler(event:Event):void
            {
                if (!timeline4.selectedItem)
                {
                    title4.text = "";
                    dates4.text = "";
                    description4.text = "";
                    nation4.text = "";
                    type4.text = "";
                    timeline4Fill.color = 0xFFFFFF;
                    
                    return;
                }
                else
                {
                    switch (timeline4.selectedItem.type)
                    {
                        
                        case "mechanical":
                            var bgColor:uint = 0x008C48;
                            
                            break;
                        
                        case "culture":
                            bgColor = 0xAB63A2;
                            
                            break;
                        
                        case "electro-mechanical":
                            bgColor = 0xEE2E2F;
                            
                            break;
                        
                        case "electronic":
                            bgColor = 0x185AA9;
                            
                            break;
                        
                        case "theory":
                            bgColor = 0xF47D23;
                            
                            break;
                    }
                }
                
                var ageMeridian:String = timeline4.selectedItem.begin.fullYear >= 0 ? "AD" : "BC";
                var time:String = DateUtils.format(timeline4.selectedItem.begin, 'YYYY') + " " + ageMeridian;;
                
                title4.text = timeline4.selectedItem.title;
                dates4.text = time;
                var nation:String = timeline4.selectedItem.nation;
                nation = nation.charAt(0).toUpperCase() + nation.substr(1);
                nation4.text = "Nation: " + nation;
                var type:String = timeline4.selectedItem.type;
                type = type.charAt(0).toUpperCase() + type.substr(1);
                type4.text = "Advancement Type: " + type;
                description4.text = timeline4.selectedItem.description;
                
                timeline4Fill.color = bgColor;
            }
            
            protected function computerHistory2ChangeHandler(event:Event):void
            {
                if (!timeline5.selectedItem)
                {
                    title5.text = "";
                    dates5.text = "";
                    description5.text = "";
                    nation5.text = "";
                    type5.text = "";
                    timeline5Fill.color = 0xFFFFFF;
                    
                    return;
                }
                else
                {
                    switch (timeline5.selectedItem.type)
                    {
                        
                        case "mechanical":
                            var bgColor:uint = 0x008C48;
                            
                            break;
                        
                        case "culture":
                            bgColor = 0xAB63A2;
                            
                            break;
                        
                        case "electro-mechanical":
                            bgColor = 0xEE2E2F;
                            
                            break;
                        
                        case "electronic":
                            bgColor = 0x185AA9;
                            
                            break;
                        
                        case "theory":
                            bgColor = 0xF47D23;
                            
                            break;
                    }
                }
                
                var ageMeridian:String = timeline5.selectedItem.begin.fullYear >= 0 ? "AD" : "BC";
                var time:String = DateUtils.format(timeline5.selectedItem.begin, 'YYYY') + " " + ageMeridian;;
                
                title5.text = timeline5.selectedItem.title;
                dates5.text = time;
                var nation:String = timeline5.selectedItem.nation;
                nation = nation.charAt(0).toUpperCase() + nation.substr(1);
                nation5.text = "Nation: " + nation;
                var type:String = timeline5.selectedItem.type;
                type = type.charAt(0).toUpperCase() + type.substr(1);
                type5.text = "Advancement Type: " + type;
                description5.text = timeline5.selectedItem.description;
                
                timeline5Fill.color = bgColor;
            }
            
            // france winter olympic history
            
            protected function dataTipFunctionExample6(value:Object):Object
            {
                var medal:String = value.medal == 1 ? "Gold" : value.medal == 2 ? "Silver" : "Bronze";
                var gender:String = value.gender == "M" ? "Mens" : value.gender == "W" ? "Womens" : "Pairs";
                return TextConverter.importToFlow("<p><b>Medal:</b> " + medal +"</b></p><p><b>Year:</b> " + DateUtils.format(value.begin, 'YYYY') + "</p><p><b>City:</b> " + value.city + "</p><p><b>Sport:</b> " + value.sport + "</p><p><b>Gender:</b> " + gender + "</p>", 
                    TextConverter.TEXT_FIELD_HTML_FORMAT);
            }
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <!--- space race assets -->
        <fx:Object id="usaSource" bitmapData="@Embed(source='images/usa-seal.jpg')" />
        <fx:Object id="sovietSource" bitmapData="@Embed(source='images/soviet-seal.jpg')" />
        <fx:Object id="canadaSource" bitmapData="@Embed(source='images/canada.jpg')" />
        
    </fx:Declarations>
    
    <!-- states -->
    <s:states>
        <s:State name="stockholm" />
        <s:State name="london" />
        <s:State name="spark" />
    </s:states>
    
    <!-- application -->
    <containers:DemoApplicationWrapper id="demoAppWrapper" 
                                       width="100%" height="100%"
                                       westRegionTitle="Timeline Description"
                                       description="Display events along a timebar.&#13;&#13;Massive flexibility via custom item renderers. See the examples to the right."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data1:ExpandingContainerData>
                <data:label>API</data:label>
                <data:content>
                    <s:FormItem label="Show Data Tip:">
                        <s:CheckBox id="showDataTipSelect"
                                    selected="true" />
                    </s:FormItem>
                    <s:FormItem enabled="{showDataTipSelect.selected}" 
                                label="Data Tip Hide Delay:">
                        <s:HSlider id="dataTipHideDelaySelect"
                                   width="100"
                                   minimum="0" maximum="1000" snapInterval="1" value="350"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The delay before hiding the data tip."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Enable Selection:">
                        <s:CheckBox id="selectableSelect" 
                                    selected="true" />
                    </s:FormItem>
                    <s:FormItem label="Zoom Factor:">
                        <s:HSlider id="zoomFactorSelect"
                                   width="100"
                                   minimum="0.01" maximum="0.5" snapInterval="0.01" stepSize="0.01" value="0.3"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The amount of zoom applied on each mouse wheel tick.&#13;&#13;E.G. a value of 0.1 means that each mouse wheel tick zooms in +-10% of the visible period duration."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Drag Scrolling:">
                        <s:CheckBox id="dragScrollingSelect"
                                    selected="true"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="True to allow the user to change the horizontal scroll by holding down the mouse over the timeline and dragging.&#13;&#13;This is not the same as using the scrollbar."/>
                        </s:helpContent>
                    </s:FormItem>
                </data:content>
            </data1:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data1:PrimaryContentData>
                <data:tabLabel>Space Race Example</data:tabLabel>
                <data:exampleDescription>Space race between the USA and the Soviet Union. Focused on a time period of ~ 2 decades with a maximum zoom to 1 day intervals.</data:exampleDescription>
                <data:toolbarContent>
                    <s:RichEditableText width="100%"
                                        editable="false" selectable="false">
                        <s:p>This example uses text from the Wikipedia article located at <s:a href="http://en.wikipedia.org/wiki/Timeline_of_the_Space_Race">Timeline of the Space Race</s:a>
                            which is released under the <s:a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share-Alike License 3.0</s:a> license.
                            <s:br/><s:br/>The original text has been modified for this application. All modifications made to the text are also released under the Creative Commons Attribution-Share-Alike License 3.0 license.
                        </s:p>
                    </s:RichEditableText>
                    <s:HGroup>
                        <s:Form>
                            <s:FormHeading label="API"/>
                            <s:FormItem label="Series Gap:">
                                <s:HSlider id="seriesGap1Select" 
                                           value="10" minimum="0" maximum="50" snapInterval="1"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of pixels between each displayed series."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        <s:Form>
                            <s:FormItem label="Row Gap:">
                                <s:HSlider id="rowGap1Select" 
                                           value="8" minimum="-2" maximum="10" snapInterval="1"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of pixels between each row."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Row Height:">
                                <s:HSlider id="rowHeight1Select" 
                                           value="11" minimum="1" maximum="50" snapInterval="1"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The height in pixels of each row of item renderers."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        <s:Form>
                            <s:FormItem label="Padding Top:">
                                <s:HSlider id="paddingTop1Select"
                                           width="100"
                                           minimum="0" maximum="100" snapInterval="0" value="65"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Padding from the top for the contentGroup."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Padding Bottom:">
                                <s:HSlider id="paddingBottom1Select"
                                           width="100"
                                           minimum="0" maximum="100" snapInterval="0" value="0"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Padding from the bottom for the contentGroup."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:VGroup right="20" left="20"
                              verticalCenter="0"
                              horizontalAlign="justify">
                        <s:Label text="Zoom via the mouse wheel or the scrollbar end buttons"
                                 fontWeight="bold"/>
                        <s:HGroup maxHeight="350" minHeight="250"
                                  right="20" left="20"
                                  gap="5"
                                  verticalAlign="justify">
                            <timeline:Timeline id="timeline"
                                               width="100%" height="350"
                                               dataTipHideDelay="{dataTipHideDelaySelect.value}"
                                               zoomFactor="{zoomFactorSelect.value}"
                                               selectable="{selectableSelect.selected}"
                                               enableDragScrolling="{dragScrollingSelect.selected}"
                                               rowHeight="{rowHeight1Select.value}"
                                               showDataTip="{showDataTipSelect.selected}"
                                               seriesGap="{seriesGap1Select.value}"
                                               rowGap="{rowGap1Select.value}"
                                               minimumVisibleDuration="{1000 * 60 * 60 * 24 * 12}"
                                               periodBegin="{new Date(1957, 0, 1)}"
                                               periodEnd="{new Date(1977, 0, 1)}"
                                               visiblePeriodBegin="{new Date(1962, 0, 1)}"
                                               visiblePeriodEnd="{new Date(1972, 0, 1)}"
                                               seriesField="nation"
                                               beginField="begin"
                                               endField="end"
                                               selectedIndex="1"
                                               dataProvider="{spaceRace}"
                                               dataTipFormatFunction="{dataTipFunctionSpaceRace}"
                                               paddingTop="{paddingTop1Select.value}"
                                               paddingBottom="{paddingBottom1Select.value}"
                                               borderColor="#5F5F5F" borderAlpha="1"
                                               skinClass="components.timeline.SpaceRaceSkin"
                                               change="spaceRaceChangeHandler(event)">
                                <timeline:intervalModes>
                                    <dataTypes2:IntervalMode name="quarterCentury" years="25" />
                                    <dataTypes2:IntervalMode name="decade" years="10" />
                                    <dataTypes2:IntervalMode name="halfDecade" years="5" />
                                    <dataTypes2:IntervalMode name="year" years="1" />
                                    <dataTypes2:IntervalMode name="halfYear" months="6" />
                                    <dataTypes2:IntervalMode name="quarter" months="3" />
                                    <dataTypes2:IntervalMode name="month" months="1" />
                                    <dataTypes2:IntervalMode name="week" days="7" />
                                    <dataTypes2:IntervalMode name="day" days="1" />
                                </timeline:intervalModes>
                                <timeline:series>
                                    <dataTypes1:TimelineSeries displayName="USSR" fieldValue="USSR" hideLabel="false"/>
                                    <dataTypes1:TimelineSeries displayName="USA" fieldValue="USA" hideLabel="false"/>
                                    <dataTypes1:TimelineSeries displayName="Canada" fieldValue="Canada" hideLabel="false"/>
                                </timeline:series>
                            </timeline:Timeline>
                            
                            <s:BorderContainer width="200"
                                               borderColor="#5F5F5F" borderAlpha="1">
                                <scroller:Scroller width="100%" height="100%">
                                    <s:VGroup paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10"
                                              gap="12">
                                        <s:RichText id="title"
                                                    width="100%"
                                                    fontWeight="bold"
                                                    fontSize="13"/>
                                        <s:BitmapImage id="seal"/>
                                        <s:RichText id="dates"
                                                    width="100%"
                                                    fontWeight="bold"
                                                    fontSize="12"/>
                                        <s:RichText id="description"
                                                    width="100%"
                                                    fontSize="12"/>
                                    </s:VGroup>
                                </scroller:Scroller>
                            </s:BorderContainer>
                        </s:HGroup>
                    </s:VGroup>
                </data:primaryContent>
            </data1:PrimaryContentData>
            
            <!--- example #2 -->
            <data1:PrimaryContentData>
                <data:tabLabel>Top Rated TV Shows Example</data:tabLabel>
                <data:exampleDescription>Top rated TV shows in the USA. The years the show was the top rated show are displayed in green. Focused on a time period of ~ 6 decades with a maximum zoom to 5 years. Uses a single series of data.</data:exampleDescription>
                <data:toolbarContent>
                    <s:RichEditableText width="100%"
                                        editable="false" selectable="false">
                        <s:p>This example uses text from the Wikipedia article located at <s:a href="http://en.wikipedia.org/wiki/Nielsen_ratings">Nielsen ratings</s:a>
                            which is released under the <s:a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share-Alike License 3.0</s:a> license.
                            <s:br/><s:br/>Certain date information was modified to create a more useful demo so don't rely on the accuracy of the data. The original text has been modified for this application. All modifications made to the text are also released under the Creative Commons Attribution-Share-Alike License 3.0 license.
                        </s:p>
                    </s:RichEditableText>
                    <s:HGroup>
                        <s:Form>
                            <s:FormItem label="Row Gap:">
                                <s:HSlider id="rowGap2Select" 
                                           value="10" minimum="-2" maximum="20" snapInterval="1"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of pixels between each row."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Row Height:">
                                <s:HSlider id="rowHeight2Select" 
                                           value="25" minimum="1" maximum="50" snapInterval="1"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The height in pixels of each row of item renderers."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        <s:Form>
                            <s:FormItem label="Padding Top:">
                                <s:HSlider id="paddingTop2Select"
                                           width="100"
                                           minimum="0" maximum="100" snapInterval="0" value="65"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Padding from the top for the contentGroup."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Padding Bottom:">
                                <s:HSlider id="paddingBottom2Select"
                                           width="100"
                                           minimum="0" maximum="100" snapInterval="0" value="0"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Padding from the bottom for the contentGroup."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:VGroup top="20" bottom="20" right="20" left="20"
                              horizontalAlign="justify"
                              verticalCenter="0">
                        <timeline:Timeline id="timeline2"
                                           height="100%"
                                           dataTipHideDelay="{dataTipHideDelaySelect.value}"
                                           zoomFactor="{zoomFactorSelect.value}"
                                           selectable="{selectableSelect.selected}"
                                           enableDragScrolling="{dragScrollingSelect.selected}"
                                           rowHeight="{rowHeight2Select.value}"
                                           showDataTip="{showDataTipSelect.selected}"
                                           rowGap="{rowGap2Select.value}"
                                           minimumVisibleDuration="{1000 * 60 * 60 * 24 * 365.25 * 5}"
                                           periodBegin="{new Date(1945, 0, 1)}"
                                           periodEnd="{new Date(2015, 0, 1)}"
                                           visiblePeriodBegin="{new Date(1945, 0, 1)}"
                                           visiblePeriodEnd="{new Date(2015, 0, 1)}"
                                           seriesField="type"
                                           beginField="begin"
                                           endField="end"
                                           seriesGap="0"
                                           dataProvider="{tvShowRatingsData}"
                                           dataTipFormatFunction="{dataTipFunctionTvRatings}"
                                           paddingTop="{paddingTop2Select.value}"
                                           paddingBottom="{paddingBottom2Select.value}"
                                           borderColor="#5F5F5F" borderAlpha="1"
                                           skinClass="components.timeline.TvShowRatingsTimelineSkin">
                            <timeline:intervalModes>
                                <dataTypes2:IntervalMode name="century" years="100" />
                                <dataTypes2:IntervalMode name="halfCentury" years="50" />
                                <dataTypes2:IntervalMode name="quarterCentury" years="25" />
                                <dataTypes2:IntervalMode name="decade" years="10" />
                                <dataTypes2:IntervalMode name="halfDecade" years="5" />
                                <dataTypes2:IntervalMode name="year" years="1" />
                            </timeline:intervalModes>
                            <timeline:series>
                                <dataTypes1:TimelineSeries fieldValue="tv" hideLabel="true"/>
                            </timeline:series>
                        </timeline:Timeline>
                        <s:BorderContainer width="100%"
                                           borderColor="#5F5F5F" borderAlpha="1">
                            <s:HGroup top="10" right="10" bottom="10" left="10"
                                      gap="20"
                                      verticalAlign="middle">
                                <s:Label text="Legend:"
                                         fontWeight="bold"
                                         paddingTop="2"/>
                                <s:HGroup verticalAlign="middle"
                                          paddingTop="2">
                                    <s:Rect height="10" width="10">
                                        <s:fill>
                                            <s:SolidColor color="#79C36A"/>
                                        </s:fill>
                                    </s:Rect>
                                    <s:Label text="Top Rated Show"
                                             paddingTop="1"/>
                                </s:HGroup>
                            </s:HGroup>
                        </s:BorderContainer>
                    </s:VGroup>
                </data:primaryContent>
            </data1:PrimaryContentData>
            
            <!--- example #3 -->
            <data1:PrimaryContentData>
                <data:tabLabel>Class Schedule Example</data:tabLabel>
                <data:exampleDescription>Hypothetical class schedule for 5 students. Focused on a time period of ~ 9 hours with no zooming in or out, no horizontal scroll bar, and only 1 row of time interval item renderers.</data:exampleDescription>
                <data:toolbarContent>
                    <s:HGroup>
                        <s:Form>
                            <s:FormHeading label="API"/>
                            <s:FormItem label="Series Gap:">
                                <s:HSlider id="seriesGap3Select" 
                                           value="10" minimum="0" maximum="50" snapInterval="1"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of pixels between each displayed series."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        <s:Form>
                            <s:FormItem label="Row Gap:">
                                <s:HSlider id="rowGap3Select" 
                                           value="8" minimum="-2" maximum="10" snapInterval="1"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of pixels between each row."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Row Height:">
                                <s:HSlider id="rowHeight3Select" 
                                           value="40" minimum="1" maximum="50" snapInterval="1"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The height in pixels of each row of item renderers."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        <s:Form>
                            <s:FormItem label="Padding Top:">
                                <s:HSlider id="paddingTop3Select"
                                           width="100"
                                           minimum="0" maximum="100" snapInterval="0" value="65"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Padding from the top for the contentGroup."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Padding Bottom:">
                                <s:HSlider id="paddingBottom3Select"
                                           width="100"
                                           minimum="0" maximum="100" snapInterval="0" value="0"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Padding from the bottom for the contentGroup."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:VGroup top="20" right="20" bottom="20" left="20"
                              verticalAlign="middle" horizontalAlign="justify">
                        <timeline:Timeline id="timeline3"
                                           width="100%" height="100%" 
                                           dataTipHideDelay="{dataTipHideDelaySelect.value}"
                                           zoomFactor="{zoomFactorSelect.value}"
                                           selectable="{selectableSelect.selected}"
                                           enableDragScrolling="{dragScrollingSelect.selected}"
                                           rowHeight="{rowHeight3Select.value}"
                                           showDataTip="{showDataTipSelect.selected}"
                                           seriesGap="{seriesGap3Select.value}"
                                           rowGap="{rowGap3Select.value}"
                                           minimumVisibleDuration="{1000 * 60 * 60 * 10}"
                                           periodBegin="{new Date(2014, 0, 1, 7, 30)}"
                                           periodEnd="{new Date(2014, 0, 1, 17, 30)}"
                                           visiblePeriodBegin="{new Date(2014, 0, 1, 7, 30)}"
                                           visiblePeriodEnd="{new Date(2014, 0, 1, 17, 30)}"
                                           seriesField="student"
                                           beginField="begin"
                                           endField="end"
                                           dataProvider="{classScheduleData}"
                                           dataTipFormatFunction="{dataTipFunctionClassSchedule}"
                                           paddingTop="{paddingTop3Select.value}"
                                           paddingBottom="{paddingBottom3Select.value}"
                                           borderColor="#5F5F5F" borderAlpha="1"
                                           skinClass="components.timeline.ClassScheduleSkin">
                            <timeline:intervalModes>
                                <dataTypes2:IntervalMode name="hours" hours="1" />
                            </timeline:intervalModes>
                            <timeline:series>
                                <dataTypes1:TimelineSeries data="@Embed(source='icons/user-green.png')" displayName="Jake" fieldValue="Jake" hideLabel="false"/>
                                <dataTypes1:TimelineSeries data="@Embed(source='icons/user-red.png')" displayName="Julie" fieldValue="Julie" hideLabel="false"/>
                                <dataTypes1:TimelineSeries data="@Embed(source='icons/user-blue.png')" displayName="Picard" fieldValue="Picard" hideLabel="false"/>
                                <dataTypes1:TimelineSeries data="@Embed(source='icons/user-orange.png')" displayName="Heidi" fieldValue="Heidi" hideLabel="false"/>
                                <dataTypes1:TimelineSeries data="@Embed(source='icons/user-blue.png')" displayName="Federico" fieldValue="Federico" hideLabel="false"/>
                            </timeline:series>
                        </timeline:Timeline>
                        <s:BorderContainer borderColor="#5F5F5F" borderAlpha="1">
                            <s:HGroup top="10" right="10" bottom="10" left="10"
                                      gap="20"
                                      verticalAlign="middle">
                                <s:Label text="Classes:"
                                         fontWeight="bold"
                                         paddingTop="2"/>
                                <s:HGroup verticalAlign="middle">
                                    <s:Rect height="11" width="11">
                                        <s:fill>
                                            <s:SolidColor color="#79C36A"/>
                                        </s:fill>
                                    </s:Rect>
                                    <s:Label text="Honors"
                                             paddingTop="2"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Rect height="11" width="11">
                                        <s:fill>
                                            <s:SolidColor color="#FFA150"/>
                                        </s:fill>
                                    </s:Rect>
                                    <s:Label text="College Level"
                                             paddingTop="2"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Rect height="11" width="11">
                                        <s:fill>
                                            <s:SolidColor color="#AB63A2"/>
                                        </s:fill>
                                    </s:Rect>
                                    <s:Label text="Remedial"
                                             paddingTop="2"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Rect height="11" width="11">
                                        <s:fill>
                                            <s:SolidColor color="#E3684D"/>
                                        </s:fill>
                                    </s:Rect>
                                    <s:Label text="Standard"
                                             paddingTop="2"/>
                                </s:HGroup>
                            </s:HGroup>
                        </s:BorderContainer>
                    </s:VGroup>
                </data:primaryContent>
            </data1:PrimaryContentData>
            
            <!--- example #4 -->
            <data1:PrimaryContentData>
                <data:tabLabel>Computing History Example 1</data:tabLabel>
                <data:exampleDescription>A history of computing. Focused on a time period of ~ 4500 years with a maximum zoom to 10 years.</data:exampleDescription>
                <data:toolbarContent>
                    <s:RichEditableText width="100%"
                                        editable="false" selectable="false">
                        <s:p>This example uses the nation that made the advancement as the seriesField used to arrange the data.
                            <s:br/><s:br/>This example uses text from the Wikipedia article located at <s:a href="http://en.wikipedia.org/wiki/Timeline_of_computing_hardware_2400_BC–1949">Timeline of computing hardware 2400 BC–1949</s:a>
                            which is released under the <s:a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share-Alike License 3.0</s:a> license.
                            <s:br/><s:br/>The original text has been modified for this application. All modifications made to the text are also released under the Creative Commons Attribution-Share-Alike License 3.0 license.
                        </s:p>
                    </s:RichEditableText>
                    <s:HGroup>
                        <s:Form>
                            <s:FormHeading label="API"/>
                            <s:FormItem label="Series Gap:">
                                <s:HSlider id="seriesGap4Select" 
                                           value="0" minimum="-10" maximum="50" snapInterval="1"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of pixels between each displayed series."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        <s:Form>
                            <s:FormItem label="Row Gap:">
                                <s:HSlider id="rowGap4Select" 
                                           value="1" minimum="-2" maximum="10" snapInterval="1"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of pixels between each row."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Row Height:">
                                <s:HSlider id="rowHeight4Select" 
                                           value="9" minimum="1" maximum="50" snapInterval="1"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The height in pixels of each row of item renderers."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        <s:Form>
                            <s:FormItem label="Padding Top:">
                                <s:HSlider id="paddingTop4Select"
                                           width="100"
                                           minimum="0" maximum="100" snapInterval="0" value="65"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Padding from the top for the contentGroup."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Padding Bottom:">
                                <s:HSlider id="paddingBottom4Select"
                                           width="100"
                                           minimum="0" maximum="100" snapInterval="0" value="0"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Padding from the bottom for the contentGroup."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:VGroup top="20" right="20" bottom="20" left="20"
                              horizontalAlign="justify"
                              gap="5">
                        <s:HGroup height="100%"
                                  gap="5"
                                  verticalAlign="justify">
                            <timeline:Timeline id="timeline4"
                                               width="100%" height="100%"
                                               dataTipHideDelay="{dataTipHideDelaySelect.value}"
                                               selectable="{selectableSelect.selected}"
                                               enableDragScrolling="{dragScrollingSelect.selected}"
                                               zoomFactor="{zoomFactorSelect.value}"
                                               showDataTip="{showDataTipSelect.selected}"
                                               rowHeight="{rowHeight4Select.value}"
                                               seriesGap="{seriesGap4Select.value}"
                                               rowGap="{rowGap4Select.value}"
                                               minimumVisibleDuration="{1000 * 60 * 60 * 24 * 365 * 10}"
                                               periodBegin="{new Date(-4400, 0, 1)}"
                                               periodEnd="{new Date(1950, 0, 1)}"
                                               visiblePeriodBegin="{new Date(-4400, 0, 1)}"
                                               visiblePeriodEnd="{new Date(1950, 0, 1)}"
                                               seriesField="nation"
                                               beginField="begin"
                                               endField="end"
                                               selectedIndex="0"
                                               dataTipFormatFunction="{dataTipFunctionExample2}"
                                               dataProvider="{computerHistoryData}"
                                               paddingTop="{paddingTop4Select.value}"
                                               paddingBottom="{paddingBottom4Select.value}"
                                               borderColor="#5F5F5F" borderAlpha="1"
                                               skinClass="components.timeline.ComputingHistoryNationsSkin"
                                               change="computerHistoryChangeHandler(event)">
                                <timeline:intervalModes>
                                    <dataTypes2:IntervalMode name="decaMillenium" years="10000" />
                                    <dataTypes2:IntervalMode name="pentaMillenium" years="5000" />
                                    <dataTypes2:IntervalMode name="biMillenium" years="2000" />
                                    <dataTypes2:IntervalMode name="millenium" years="1000" />
                                    <dataTypes2:IntervalMode name="halfMillenium" years="500" />
                                    <dataTypes2:IntervalMode name="century" years="100" />
                                    <dataTypes2:IntervalMode name="halfCentury" years="50" />
                                    <dataTypes2:IntervalMode name="quarterCentury" years="25" />
                                    <dataTypes2:IntervalMode name="decade" years="10" />
                                    <dataTypes2:IntervalMode name="halfDecade" years="5" />
                                    <dataTypes2:IntervalMode name="year" years="1" />
                                </timeline:intervalModes>
                                <timeline:series>
                                    <fx:Array id="computerHistoryNationSeries">
                                        <dataTypes1:TimelineSeries data="@Embed(source='icons/gosquared/arab.png')" displayName="Arab" fieldValue="arab" hideLabel="false"/>
                                        <dataTypes1:TimelineSeries data="@Embed(source='icons/gosquared/Australia.png')" displayName="Australia" fieldValue="australia" hideLabel="false"/>
                                        <dataTypes1:TimelineSeries data="@Embed(source='icons/gosquared/Austria.png')" displayName="Austria" fieldValue="austria" hideLabel="false"/>
                                        <dataTypes1:TimelineSeries data="@Embed(source='icons/gosquared/China.png')" displayName="China" fieldValue="china" hideLabel="false"/>
                                        <dataTypes1:TimelineSeries data="@Embed(source='icons/gosquared/France.png')" displayName="France" fieldValue="france" hideLabel="false"/>
                                        <dataTypes1:TimelineSeries data="@Embed(source='icons/gosquared/Germany.png')" displayName="Germany" fieldValue="germany" hideLabel="false"/>
                                        <dataTypes1:TimelineSeries data="@Embed(source='icons/gosquared/Greece.png')" displayName="Greece" fieldValue="greece" hideLabel="false"/>
                                        <dataTypes1:TimelineSeries data="@Embed(source='icons/gosquared/India.png')" displayName="India" fieldValue="india" hideLabel="false"/>
                                        <dataTypes1:TimelineSeries data="@Embed(source='icons/gosquared/Iran.png')" displayName="Iran" fieldValue="iran" hideLabel="false"/>
                                        <dataTypes1:TimelineSeries data="@Embed(source='icons/gosquared/Italy.png')" displayName="Italy" fieldValue="italy" hideLabel="false"/>
                                        <dataTypes1:TimelineSeries data="@Embed(source='icons/gosquared/Russia.png')" displayName="Russia" fieldValue="russia" hideLabel="false"/>
                                        <dataTypes1:TimelineSeries data="@Embed(source='icons/gosquared/Spain.png')" displayName="Spain" fieldValue="spain" hideLabel="false"/>
                                        <dataTypes1:TimelineSeries data="@Embed(source='icons/gosquared/Sweden.png')" displayName="Sweden" fieldValue="sweden" hideLabel="false"/>
                                        <dataTypes1:TimelineSeries data="@Embed(source='icons/gosquared/Switzerland.png')" displayName="Switzerland" fieldValue="swiss" hideLabel="false"/>
                                        <dataTypes1:TimelineSeries data="@Embed(source='icons/gosquared/United-Kingdom.png')" displayName="UK" fieldValue="UK" hideLabel="false"/>
                                        <dataTypes1:TimelineSeries data="@Embed(source='icons/gosquared/United-States.png')" displayName="USA" fieldValue="USA" hideLabel="false"/>
                                    </fx:Array>
                                </timeline:series>
                            </timeline:Timeline>
                            <s:BorderContainer id="computerHistoryInfoBox" 
                                               width="250"
                                               borderColor="#5F5F5F" borderAlpha="1">
                                <s:Rect top="0" right="0" bottom="0" left="0">
                                    <s:fill>
                                        <s:SolidColor id="timeline4Fill"
                                                      color="#FFFFFF"
                                                      alpha="0.4"/>
                                    </s:fill>
                                </s:Rect>
                                <scroller:Scroller width="100%" height="100%">
                                    <s:VGroup paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10"
                                              gap="12">
                                        <s:RichText id="title4"
                                                    width="100%"
                                                    fontWeight="bold"
                                                    fontSize="13"/>
                                        <s:RichText id="dates4"
                                                    width="100%"
                                                    fontWeight="bold"
                                                    fontSize="12"/>
                                        <s:RichText id="nation4"
                                                    width="100%"
                                                    fontWeight="normal"
                                                    fontSize="12"/>
                                        <s:RichText id="type4"
                                                    width="100%"
                                                    fontWeight="normal"
                                                    fontSize="12"/>
                                        <s:RichText id="description4"
                                                    width="100%"
                                                    fontSize="12"/>
                                    </s:VGroup>
                                </scroller:Scroller>
                            </s:BorderContainer>
                        </s:HGroup>
                        
                        <s:BorderContainer borderColor="#5F5F5F" borderAlpha="1">
                            <s:HGroup top="10" right="10" bottom="10" left="10"
                                      gap="15"
                                      verticalAlign="middle">
                                <s:Label text="Classes:"
                                         fontWeight="bold"/>
                                <s:HGroup verticalAlign="middle">
                                    <s:Rect height="11" width="11">
                                        <s:fill>
                                            <s:SolidColor color="#008C48"/>
                                        </s:fill>
                                    </s:Rect>
                                    <s:Label text="Mechanical"
                                             paddingTop="2"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Rect height="11" width="11">
                                        <s:fill>
                                            <s:SolidColor color="#F47D23"/>
                                        </s:fill>
                                    </s:Rect>
                                    <s:Label text="Theory"
                                             paddingTop="2"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Rect height="11" width="11">
                                        <s:fill>
                                            <s:SolidColor color="#AB63A2"/>
                                        </s:fill>
                                    </s:Rect>
                                    <s:Label text="Culture"
                                             paddingTop="2"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Rect height="11" width="11">
                                        <s:fill>
                                            <s:SolidColor color="#EE2E2F"/>
                                        </s:fill>
                                    </s:Rect>
                                    <s:Label text="Electro-Mechanical"
                                             paddingTop="2"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Rect height="11" width="11">
                                        <s:fill>
                                            <s:SolidColor color="#185AA9"/>
                                        </s:fill>
                                    </s:Rect>
                                    <s:Label text="Electronic"
                                             paddingTop="2"/>
                                </s:HGroup>
                            </s:HGroup>
                        </s:BorderContainer>
                    </s:VGroup>
                </data:primaryContent>
            </data1:PrimaryContentData>
            
            <!--- example #5 -->
            <data1:PrimaryContentData>
                <data:tabLabel>Computing History Example 2</data:tabLabel>
                <data:exampleDescription>Identical to the previous example except that this example uses a "seriesField" of the "type" of innovation rather than nation where the innovation occurred. </data:exampleDescription>
                <data:toolbarContent>
                    <s:RichEditableText width="100%"
                                        editable="false" selectable="false">
                        <s:p>Useful to illustrate how using a different "seriesField" can significantly alter the presentation of the data.
                            <s:br/><s:br/>This example uses text from the Wikipedia article located at <s:a href="http://en.wikipedia.org/wiki/Timeline_of_computing_hardware_2400_BC–1949">Timeline of computing hardware 2400 BC–1949</s:a>
                            which is released under the <s:a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share-Alike License 3.0</s:a> license.
                            <s:br/><s:br/>The original text has been modified for this application. All modifications made to the text are also released under the Creative Commons Attribution-Share-Alike License 3.0 license.
                        </s:p>
                    </s:RichEditableText>
                    <s:HGroup>
                        <s:Form>
                            <s:FormHeading label="API"/>
                            <s:FormItem label="Series Gap:">
                                <s:HSlider id="seriesGap5Select" 
                                           value="10" minimum="-10" maximum="50" snapInterval="1"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of pixels between each displayed series."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        <s:Form>
                            <s:FormItem label="Row Gap:">
                                <s:HSlider id="rowGap5Select" 
                                           value="5" minimum="-2" maximum="10" snapInterval="1"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of pixels between each row."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Row Height:">
                                <s:HSlider id="rowHeight5Select" 
                                           value="13" minimum="1" maximum="50" snapInterval="1"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The height in pixels of each row of item renderers."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        <s:Form>
                            <s:FormItem label="Padding Top:">
                                <s:HSlider id="paddingTop5Select"
                                           width="100"
                                           minimum="0" maximum="100" snapInterval="0" value="65"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Padding from the top for the contentGroup."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Padding Bottom:">
                                <s:HSlider id="paddingBottom5Select"
                                           width="100"
                                           minimum="0" maximum="100" snapInterval="0" value="0"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Padding from the bottom for the contentGroup."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:HGroup top="20" right="20" bottom="20" left="20"
                              gap="5"
                              verticalAlign="justify">
                        <timeline:Timeline id="timeline5"
                                           width="100%" minHeight="400"
                                           dataTipHideDelay="{dataTipHideDelaySelect.value}"
                                           selectable="{selectableSelect.selected}"
                                           enableDragScrolling="{dragScrollingSelect.selected}"
                                           zoomFactor="{zoomFactorSelect.value}"
                                           showDataTip="{showDataTipSelect.selected}"
                                           rowHeight="{rowHeight5Select.value}"
                                           seriesGap="{seriesGap5Select.value}"
                                           rowGap="{rowGap5Select.value}"
                                           minimumVisibleDuration="{1000 * 60 * 60 * 24 * 365 * 10}"
                                           periodBegin="{new Date(-4400, 0, 1)}"
                                           periodEnd="{new Date(1950, 0, 1)}"
                                           visiblePeriodBegin="{new Date(-4400, 0, 1)}"
                                           visiblePeriodEnd="{new Date(1950, 0, 1)}"
                                           seriesField="type"
                                           beginField="begin"
                                           endField="end"
                                           selectedIndex="0"
                                           dataTipFormatFunction="{dataTipFunctionExample2}"
                                           dataProvider="{computerHistoryData}"
                                           paddingTop="{paddingTop5Select.value}"
                                           paddingBottom="{paddingBottom5Select.value}"
                                           borderColor="#5F5F5F" borderAlpha="1"
                                           skinClass="components.timeline.ComputingHistoryTypeSkin"
                                           change="computerHistory2ChangeHandler(event)">
                            <timeline:intervalModes>
                                <dataTypes2:IntervalMode name="decaMillenium" years="10000" />
                                <dataTypes2:IntervalMode name="pentaMillenium" years="5000" />
                                <dataTypes2:IntervalMode name="biMillenium" years="2000" />
                                <dataTypes2:IntervalMode name="millenium" years="1000" />
                                <dataTypes2:IntervalMode name="halfMillenium" years="500" />
                                <dataTypes2:IntervalMode name="century" years="100" />
                                <dataTypes2:IntervalMode name="halfCentury" years="50" />
                                <dataTypes2:IntervalMode name="quarterCentury" years="25" />
                                <dataTypes2:IntervalMode name="decade" years="10" />
                                <dataTypes2:IntervalMode name="halfDecade" years="5" />
                                <dataTypes2:IntervalMode name="year" years="1" />
                            </timeline:intervalModes>
                            <timeline:series>
                                <fx:Array id="computerHistoryTypeSeries">
                                    <dataTypes1:TimelineSeries displayName="Theory" fieldValue="theory" hideLabel="false"/>
                                    <dataTypes1:TimelineSeries displayName="Mechanical" fieldValue="mechanical" hideLabel="false"/>
                                    <dataTypes1:TimelineSeries displayName="Electro-Mechanical" fieldValue="electro-mechanical" hideLabel="false"/>
                                    <dataTypes1:TimelineSeries displayName="Electronic" fieldValue="electronic" hideLabel="false"/>
                                    <dataTypes1:TimelineSeries displayName="Culture" fieldValue="culture" hideLabel="false"/>
                                </fx:Array>
                            </timeline:series>
                        </timeline:Timeline>
                        <s:BorderContainer id="computerHistoryInfoBox2" 
                                           width="250"
                                           borderColor="#5F5F5F" borderAlpha="1">
                            <s:Rect top="0" right="0" bottom="0" left="0">
                                <s:fill>
                                    <s:SolidColor id="timeline5Fill"
                                                  color="#FFFFFF"
                                                  alpha="0.4"/>
                                </s:fill>
                            </s:Rect>
                            <scroller:Scroller width="100%" height="100%">
                                <s:VGroup paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10"
                                          gap="12">
                                    <s:RichText id="title5"
                                                width="100%"
                                                fontWeight="bold"
                                                fontSize="13"/>
                                    <s:RichText id="dates5"
                                                width="100%"
                                                fontWeight="bold"
                                                fontSize="12"/>
                                    <s:RichText id="nation5"
                                                width="100%"
                                                fontWeight="normal"
                                                fontSize="12"/>
                                    <s:RichText id="type5"
                                                width="100%"
                                                fontWeight="normal"
                                                fontSize="12"/>
                                    <s:RichText id="description5"
                                                width="100%"
                                                fontSize="12"/>
                                </s:VGroup>
                            </scroller:Scroller>
                        </s:BorderContainer>
                    </s:HGroup>
                </data:primaryContent>
            </data1:PrimaryContentData>
            
            <!--- example #6 -->
            <data1:PrimaryContentData>
                <data:tabLabel>France Winter Olympic Example</data:tabLabel>
                <data:exampleDescription>Medal count for France for the Winter Olympics. Example illustrates stacking renderers.</data:exampleDescription>
                <data:toolbarContent>
                    <s:HGroup>
                        <s:Form>
                            <s:FormItem label="Row Gap:">
                                <s:HSlider id="rowGap6Select" 
                                           value="-15" minimum="-20" maximum="20" snapInterval="1"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of pixels between each row."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Row Height:">
                                <s:HSlider id="rowHeight6Select" 
                                           value="38" minimum="1" maximum="50" snapInterval="1"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The height in pixels of each row of item renderers."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        <s:Form>
                            <s:FormItem label="Padding Top:">
                                <s:HSlider id="paddingTop6Select"
                                           width="100"
                                           minimum="0" maximum="100" snapInterval="0" value="45"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Padding from the top for the contentGroup."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Padding Bottom:">
                                <s:HSlider id="paddingBottom6Select"
                                           width="100"
                                           minimum="0" maximum="100" snapInterval="0" value="0"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Padding from the bottom for the contentGroup."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:VGroup top="20" right="20" bottom="20" left="20"
                              verticalAlign="middle" horizontalAlign="justify">
                        <timeline:Timeline id="timeline6"
                                           width="100%" height="100%" 
                                           dataTipHideDelay="{dataTipHideDelaySelect.value}"
                                           selectable="{selectableSelect.selected}"
                                           enableDragScrolling="{dragScrollingSelect.selected}"
                                           zoomFactor="{zoomFactorSelect.value}"
                                           showDataTip="{showDataTipSelect.selected}"
                                           rowHeight="{rowHeight6Select.value}"
                                           rowGap="{rowGap6Select.value}"
                                           minimumVisibleDuration="{1000 * 60 * 60 * 24 * 365 * 10}"
                                           periodBegin="{new Date(1920, 0, 1)}"
                                           periodEnd="{new Date(2014, 0, 1)}"
                                           visiblePeriodBegin="{new Date(1970, 0, 1)}"
                                           visiblePeriodEnd="{new Date(2014, 0, 1)}"
                                           seriesField="country"
                                           beginField="begin"
                                           endField="end"
                                           selectedIndex="0"
                                           dataTipFormatFunction="{dataTipFunctionExample6}"
                                           dataProvider="{franceWinterOlympicData}"
                                           paddingTop="{paddingTop6Select.value}"
                                           paddingBottom="{paddingBottom6Select.value}"
                                           borderColor="#5F5F5F" borderAlpha="1"
                                           skinClass="components.timeline.FranceWinterOlympicsSkin">
                            <timeline:intervalModes>
                                <dataTypes2:IntervalMode name="century" years="100" />
                                <dataTypes2:IntervalMode name="halfCentury" years="50" />
                                <dataTypes2:IntervalMode name="quarterCentury" years="25" />
                                <dataTypes2:IntervalMode name="decade" years="10" />
                                <dataTypes2:IntervalMode name="halfDecade" years="5" />
                                <dataTypes2:IntervalMode name="year" years="1" />
                            </timeline:intervalModes>
                            <timeline:series>
                                <fx:Array>
                                    <dataTypes1:TimelineSeries fieldValue="FRA" hideLabel="true"/>
                                </fx:Array>
                            </timeline:series>
                        </timeline:Timeline>
                        <s:BorderContainer borderColor="#5F5F5F" borderAlpha="1">
                            <s:HGroup top="10" right="10" bottom="10" left="10"
                                      gap="15"
                                      verticalAlign="middle">
                                <s:Label text="Legend:"
                                         fontWeight="bold"/>
                                <s:HGroup verticalAlign="middle">
                                    <s:Image source="@Embed(source='images/gold-medal.png')" />
                                    <s:Label text="Gold"
                                             paddingTop="1"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Image source="@Embed(source='images/silver-medal.png')" />
                                    <s:Label text="Silver"
                                             paddingTop="1"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Image source="@Embed(source='images/bronze-medal.png')" />
                                    <s:Label text="Bronze"
                                             paddingTop="1"/>
                                </s:HGroup>
                            </s:HGroup>
                        </s:BorderContainer>
                    </s:VGroup>
                </data:primaryContent>
            </data1:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>