<link href="http://wiki.fluidproject.org/download/attachments/5902236/progress-indicator.css" rel="stylesheet" type="text/css">
<link href="http://www.fluidproject.org/releases/1.0/framework/fss/css/fss-layout.css" rel="stylesheet" type="text/css">
<link href="http://www.fluidproject.org/releases/1.0/framework/fss/css/fss-text.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://www.fluidproject.org/releases/1.0/InfusionAll.js"></script>
<script type="text/javascript" src="http://wiki.fluidproject.org/download/attachments/5902236/progress-indicator.js?version=7"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                var uiOptionsProgress = fluid.componentProgressIndicator("#fl-cpi-progress-indicator-ui-options", {featureList: [
                    {
                        shortName: "Preview Pane",
                        longName: "Preview Pane",
                        status: "In Development",
                        link: "http://wiki.fluidproject.org/display/fluid/User+Interface+Options+Wireframes"
                    },
                    {
                        shortName: "Clear Preferences",
                        longName: "Clear Preferences",
                        status: "In Development",
                        link: "http://wiki.fluidproject.org/display/fluid/User+Interface+Options+Wireframes"
                    },
                    {
                        shortName: "Clear Individual Preferences",
                        longName: "Clear Individual Preferences",
                        status: "In Design",
                        link: "http://wiki.fluidproject.org/display/fluid/User+Interface+Options+Wireframes"
                    }
                ]});
                
                var easierToSeeProgress = fluid.componentProgressIndicator("#fl-cpi-progress-indicator-easier-to-see", {featureList: [
                    {
                        shortName: "Contrast Selection",
                        longName: "Contrast Selection",
                        status: "In Development",
                        link: "http://wiki.fluidproject.org/display/fluid/User+Interface+Options+Wireframes"
                    },
                    {
                        shortName: "Simple Layout",
                        longName: "Simple Layout",
                        status: "In Development",
                        link: "http://wiki.fluidproject.org/display/fluid/User+Interface+Options+Wireframes"
                    },
                    {
                        shortName: "Simple Graphics",
                        longName: "Simple Graphics",
                        status: "In Development",
                        link: "http://wiki.fluidproject.org/display/fluid/User+Interface+Options+Wireframes"
                    },
                    {
                        shortName: "Text Options",
                        longName: "Text Font, Size and Spacing",
                        status: "In Development",
                        link: "http://wiki.fluidproject.org/display/fluid/User+Interface+Options+Wireframes"
                    },
                    {
                        shortName: "Line Spacing",
                        longName: "Line Spacing",
                        status: "In Development",
                        link: "http://wiki.fluidproject.org/display/fluid/User+Interface+Options+Wireframes"
                    } 
                ]});

                var futureProgress = fluid.componentProgressIndicator("#fl-cpi-progress-indicator-future", {featureList: [
                    {
                        shortName: "Keyboard Shortcuts",
                        longName: "Keyboard Shortcuts",
                        status: "Future"
                    },
                    {
                        shortName: "Access Keys",
                        longName: "Access Keys",
                        status: "Future"
                    }, {
                        shortName: "Restructure Menus",
                        longName: "Restructure Menus and Toolbars",
                        status: "Future"
                    },
                    {
                        shortName: "Device Based Layout",
                        longName: "Device Based Layout",
                        status: "Future"
                    }, {
                        shortName: "Multiple Language",
                        longName: "Multiple Language",
                        status: "Future"
                    },
                    {
                        shortName: "Alternatives to Images",
                        longName: "Alternatives to Images",
                        status: "Future"
                    },
                    {
                        shortName: "Alternatives to Sound",
                        longName: "Alternatives to Sound",
                        status: "Future"
                    }
                ]});

                var easierToFindProgress = fluid.componentProgressIndicator("#fl-cpi-progress-indicator-easier-to-find", {featureList: [
                    {
                        shortName: "Table of Contents",
                        longName: "Table of Contents",
                        status: "In Development",
                        link: "http://wiki.fluidproject.org/display/fluid/User+Interface+Options+Wireframes"
                    },
                    {
                        shortName: "Highlight Links and Inputs",
                        longName: "Highlight Links and Inputs",
                        status: "In Development",
                        link: "http://wiki.fluidproject.org/display/fluid/User+Interface+Options+Wireframes"
                    },
                    {
                        shortName: "Structure Enhancement",
                        longName: "Structure Enhancement",
                        status: "In Design"
                    } //,
                ]});
                
                jQuery(window).resize(function () {
                    uiOptionsProgress.refreshView();
                    easierToSeeProgress.refreshView();
                    easierToFindProgress.refreshView();
                    futureProgress.refreshView();
                });
            });
        </script>

       <div id="progress-indicators" class="fl-cpi-border">

         <div id="fl-cpi-progress-indicator-ui-options">
            <p class="flc-progress-label fl-text-align-center">UI Options Interface</p>
            <div class="flc-cpi-all-progress-container fl-centered fl-cpi-progress-container-all">
                <div class="flc-cpi-progress-bars">
                    <div class="flc-progress">
                        <div class="flc-progress-bar fl-cpi-height-20-px">
                            <div class="flc-progress-indicator">
                            </div>
                        </div>
                    </div>
                </div>
                <table class="flc-cpi-separator fl-cpi-separator-table" role="grid">
                    <tr class="flc-cpi-progress-row-render" role="row">
                        <td class="flc-cpi-progress-cell-render fl-cpi-height-20-px fl-cpi-end" role="gridcell"></td>
                    </tr>
                    <tr class="flc-cpi-title-row-render" role="row">
                        <td class="flc-cpi-title-cell-render fl-cpi-height-20-px" role="gridcell">
                            <a class="flc-cpi-title-link"></a>
                        </td>
                    </tr>
                </table>
            </div>
            <ol class="flc-cpi-list-item-container-render">
                <li class="flc-cpi-list-item-render" role="listitem">
                    <a class="flc-cpi-list-link"></a>
                </li>
            </ol>
         </div>

<!-- this is bad - there are several copies of the template -->
         <div id="fl-cpi-progress-indicator-easier-to-see">
            <p class="flc-progress-label fl-text-align-center">Easier To See Options</p>
            <div class="flc-cpi-all-progress-container fl-centered fl-cpi-progress-container-all">
                <div class="flc-cpi-progress-bars">
                    <div class="flc-progress">
                        <div class="flc-progress-bar fl-cpi-height-20-px">
                            <div class="flc-progress-indicator">
                            </div>
                        </div>
                    </div>
                </div>
                <table class="flc-cpi-separator fl-cpi-separator-table" role="grid">
                    <tr class="flc-cpi-progress-row-render" role="row">
                        <td class="flc-cpi-progress-cell-render fl-cpi-height-20-px fl-cpi-end" role="gridcell"></td>
                    </tr>
                    <tr class="flc-cpi-title-row-render" role="row">
                        <td class="flc-cpi-title-cell-render fl-cpi-height-20-px" role="gridcell">
                            <a class="flc-cpi-title-link"></a>
                        </td>
                    </tr>
                </table>
            </div>
            <ol class="flc-cpi-list-item-container-render">
                <li class="flc-cpi-list-item-render" role="listitem">
                    <a class="flc-cpi-list-link"></a>
                </li>
            </ol>
         </div>


         <div id="fl-cpi-progress-indicator-easier-to-find">
            <p class="flc-progress-label fl-text-align-center">Easier To Find Options</p>
            <div class="flc-cpi-all-progress-container fl-centered fl-cpi-progress-container-all">
                <div class="flc-cpi-progress-bars">
                    <div class="flc-progress">
                        <div class="flc-progress-bar fl-cpi-height-20-px">
                            <div class="flc-progress-indicator">
                            </div>
                        </div>
                    </div>
                </div>
                <table class="flc-cpi-separator fl-cpi-separator-table" role="grid">
                    <tr class="flc-cpi-progress-row-render" role="row">
                        <td class="flc-cpi-progress-cell-render fl-cpi-height-20-px fl-cpi-end" role="gridcell"></td>
                    </tr>
                    <tr class="flc-cpi-title-row-render" role="row">
                        <td class="flc-cpi-title-cell-render fl-cpi-height-20-px" role="gridcell">
                            <a class="flc-cpi-title-link"></a>
                        </td>
                    </tr>
                </table>
            </div>
            <ol class="flc-cpi-list-item-container-render">
                <li class="flc-cpi-list-item-render" role="listitem">
                    <a class="flc-cpi-list-link"></a>
                </li>
            </ol>
         </div>

       <div id="fl-cpi-progress-indicator-future">
            <p class="flc-progress-label fl-text-align-center">Future Options</p>
            <div class="flc-cpi-all-progress-container fl-centered fl-cpi-progress-container-all">
                <div class="flc-cpi-progress-bars">
                    <div class="flc-progress">
                        <div class="flc-progress-bar fl-cpi-height-20-px">
                            <div class="flc-progress-indicator">
                            </div>
                        </div>
                    </div>
                </div>
                <table class="flc-cpi-separator fl-cpi-separator-table" role="grid">
                    <tr class="flc-cpi-progress-row-render" role="row">
                        <td class="flc-cpi-progress-cell-render fl-cpi-height-20-px fl-cpi-end" role="gridcell"></td>
                    </tr>
                    <tr class="flc-cpi-title-row-render" role="row">
                        <td class="flc-cpi-title-cell-render fl-cpi-height-20-px" role="gridcell">
                            <a class="flc-cpi-title-link"></a>
                        </td>
                    </tr>
                </table>
            </div>
            <ol class="flc-cpi-list-item-container-render">
                <li class="flc-cpi-list-item-render" role="listitem">
                    <a class="flc-cpi-list-link"></a>
                </li>
            </ol>
          </div>

            <div class="fl-cpi-legend">
                <p>Legend</p>
                <table>
                    <tr class="fl-cpi-legend-row">
                        <td class="fl-cpi-stable fl-cpi-legend-cell" title="Stable"><a class="fl-font-black" href="http://wiki.fluidproject.org/display/fluid/Glossary#Glossary-stable">Stable</a></td>
                        <td class="fl-cpi-in-development fl-cpi-legend-cell" title="In Development"><a class="fl-font-black" href="http://wiki.fluidproject.org/display/fluid/Glossary#Glossary-inprogress">In Development</a></td>
                        <td class="fl-cpi-in-design fl-cpi-legend-cell" title="In Design"><a class="fl-font-black" href="http://wiki.fluidproject.org/display/fluid/Glossary#Glossary-indesign">In Design</a></td>
                        <td class="fl-cpi-legend-cell" title="Future"><a class="fl-font-black" href="http://wiki.fluidproject.org/display/fluid/Glossary#Glossary-future">Future</a></td>
                    </tr>
                </table>
                <p class="fl-cpi-small-print fl-font-size-80 fl-font-arial">*Based on the <a href="http://wiki.fluidproject.org/display/fluid/Fluid+Infusion+-+Current+Release">latest current release</a></p>
            </div>
        </div>