Index: components/artifactView/css/Artifact.css
===================================================================
--- components/artifactView/css/Artifact.css	(revision 9348)
+++ components/artifactView/css/Artifact.css	(working copy)
@@ -1,8 +1,35 @@
-.fl-artifact-thumbnail {
-    width:50%;
-    margin: 0 10px 10px 0;
+.fl-artifact-image-content {
+    width: 100%;
+}
+
+.fl-artifact-image-cell {
+    background-color: #000000;
+    height: 240px;
+    witdth: 100%;
+    text-align: center;
+}
+
+.fl-artifact-description {
+    padding-top: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 30px;
+}
+
+.fl-theme-iphone {
+    background: none;
 }
 
-.fl-demo-image {
-    padding: 1px 0;
+.fl-artifact-title {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.fl-artifact-info {
+    padding-left: 10px;
+}
+
+.fl-artifact-image {
+    max-height: 240px;
+    max-width: 100%;
 }
\ No newline at end of file
Index: components/artifactView/html/view.html
===================================================================
--- components/artifactView/html/view.html	(revision 9348)
+++ components/artifactView/html/view.html	(working copy)
@@ -11,11 +11,12 @@
         <link type="text/css" rel="stylesheet" href="../../../../fluid-infusion/src/webapp/framework/fss/css/fss-transitions.css" />
         <link type="text/css" rel="stylesheet" href="../../../../fluid-infusion/src/webapp/framework/fss/css/fss-mobile-layout.css" />
         <link type="text/css" rel="stylesheet" href="../../../../fluid-infusion/src/webapp/framework/fss/css/fss-mobile-theme-iphone.css" />
+        
         <link type="text/css" rel="stylesheet" href="../../../../fluid-engage-core/components/artifactView/css/Artifact.css" />
+        <link rel="stylesheet" type="text/css" href="../../../../fluid-engage-core/components/description/css/Description.css" />
         <link type="text/css" rel="stylesheet" href="../../../../fluid-engage-core/components/cabinet/css/Cabinet.css" />
         <link type="text/css" rel="stylesheet" href="../../../../fluid-engage-core/components/navigationList/css/NavigationList.css" />
-        <link rel="stylesheet" type="text/css" href="../../../../fluid-engage-core/components/tags/css/Tags.css" />
-        <link rel="stylesheet" type="text/css" href="../../../../fluid-engage-core/components/description/css/Description.css" />
+        
    
         <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/jquery/core/js/jquery.js"></script>
         <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/jquery/ui/js/ui.core.js"></script>
@@ -34,52 +35,58 @@
         <script type="text/javascript" src="../../../../fluid-engage-core/components/artifactView/js/ArtifactView.js"></script>
         <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/loadData.js"></script>
         <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/iPhoneChromeless.js"></script>
-        <script type="text/javascript" src="../../../../fluid-engage-core/components/tags/js/Tags.js"></script>
+        
+        <script type="text/javascript" src="../../../../fluid-engage-core/components/description/js/Description.js"></script>
         <script type="text/javascript" src="../../../../fluid-engage-core/components/navigationList/js/NavigationList.js"></script>  
         <script type="text/javascript" src="../../../../fluid-engage-core/components/cabinet/js/Cabinet.js"></script>
-        <script type="text/javascript" src="../../../../fluid-engage-core/components/description/js/Description.js"></script>
-        
               
     </head>   
-      <body class="fl-theme-iphone"> 
-        <div class="fl-artifact">
-            <div class="flc-artifact">
-                <div class="flc-artifact-renderscope">
-                    <div class="flc-screenNavigator-navbar fl-navbar fl-table">
-                        <div class="fl-table-row">              
-                            <h1 class="fl-table-cell artifact-name">Artifact name</h1>                          
-                        </div>
-                    </div>            
-                    <div class="fl-container-auto">
-                        <img src="../images/Snuffbox.jpg" alt="" class="fl-force-left fl-artifact-thumbnail artifact-picture" />
-                        <p class="artifact-descr-name">Here goes a longer artifact name!</p>
-                        <p class="artifact-provenance">Here goes a longer artifact provenance!</p>
-                        <p class="artifact-date">Here goes a longer artifact date!</p>
-                        <p class="artifact-accession-number">Here goes a longer artifact accession number!</p>
-                    </div>
-                </div>
-                <div class="flc-description">
-                    <div class="flc-description-content"></div>
-                </div>
-                <div class="cabinet">
-                    <div class="flc-cabinet-drawer">
-                        <div class="flc-cabinet-handle">
-                            <h2 class="flc-cabinet-header">Show Audio and Video</h2>
-                        </div>
-                        <div class="flc-cabinet-contents">
-                            <img class="fl-demo-image" src="../../../../fluid-engage-core/components/artifactView/images/media_panel.png" alt="Audio and Video" />
-                        </div>
-                    </div>
-                    <div class="flc-cabinet-drawer">
-                        <div class="flc-cabinet-handle">
-                            <h2 class="flc-cabinet-header">Show Comments</h2>
-                        </div>
-                        <div class="flc-cabinet-contents">
-                            <img class="fl-demo-image" src="../../../../fluid-engage-core/components/artifactView/images/comment_panel.png" alt="Audio and Video" />
-                        </div>
-                    </div>
-                </div>
+    <body class="fl-theme-iphone"> 
+        <div class="flc-artifact fl-artifact">
+            <div class="fl-navbar">
+                <span class="fl-force-left fl-navBar-left">Home</span>
+                <h1 class="flc-artifact-navBarTitle fl-artifact-title">
+                    push the screen and
+                </h1>
             </div>
+            <div class="fl-table fl-artifact-image-content">
+	            <div class="fl-artifact-image-cell fl-table-cell">
+	                <img src="../images/a.jpg" alt="Artifact Image" class="flc-artifact-image fl-artifact-image" />
+	            </div>
+            </div>
+            <h2 class="flc-artifact-title fl-bold fl-artifact-title" />
+            <div class="fl-artifact-info">
+	            <div class="flc-artifact-author">Artifact Author</div> 
+	            <div class="flc-artifact-dated">Artifact Dated</div>
+	            <div class="flc-artifact-medium">Artifact Medium</div>
+	            <div class="flc-artifact-dimensions">Artifact Dimensions</div>
+	            <div class="flc-artifact-mention">Artifact Mention</div>
+	            <div class="flc-artifact-accessionNumber">Artifact AccessionNumber</div>
+	        </div>
+	        <div class="flc-artifact-description fl-artifact-description">
+                <div class="flc-description-content fl-description-content"></div>
+                <div class="flc-description-toggler fl-description-toggler"></div>
+            </div>
+            <div class="flc-artifact-sections">
+	            <div class="flc-cabinet-drawer">
+	                <div class="flc-cabinet-handle">
+	                    <h2 class="flc-cabinet-header">Header</h2>
+	                </div>
+	                <div class="flc-navigationList flc-cabinet-contents">
+	                    <ul class="flc-navigationList-listGroup fl-list fl-list-menu fl-list-thumbnails">
+	                        <li class="flc-navigationList-items">
+	                            <div class="flc-navigationList-linkContainer">
+	                                <a class="flc-navigationList-link">
+	                                    <img class="flc-navigationList-image fl-icon" src="../images/fe_mobile_icon_video.png"/>
+	                                    <span class="flc-navigationList-titleText fl-navigationList-title">title/category</span>
+	                                    <span class="flc-navigationList-descriptionText fl-link-summary fl-navigationList-description">description</span>
+	                                </a>
+	                            </div>
+	                       </li>
+	                   </ul>
+	               </div>
+	            </div>
+	        </div>
         </div>
         <script id="flc-initBlock" type="text/javascript">
             fluid.engage.initComponentWithLocalData("fluid.engage.artifactView", ".flc-artifact");
Index: components/artifactView/js/ArtifactView.js
===================================================================
--- components/artifactView/js/ArtifactView.js	(revision 9348)
+++ components/artifactView/js/ArtifactView.js	(working copy)
@@ -16,121 +16,212 @@
 
 (function ($) {
     
-    var buildComponentTree = function (artifact) {
-        var tree = {
-            children: [
-                {
-                    ID: "artifactTitle",
-                    valuebinding: "artifactTitle"
-                },
-                {
-                    ID: "artifactTitle2",
-                    valuebinding: "artifactTitle",
-                    decorators: [{
-                        type: "addClass",
-                        classes: "fl-text-bold"
-                    }]
-                },
-                {
-                    ID: "artifactAuthor",
-                    valuebinding: "artifactAuthor"
-                },
-                {
-                    ID: "artifactDate",
-                    valuebinding: "artifactDate"
-                },
-                {
-                    ID: "artifactAccessionNumber",
-                    valuebinding: "artifactAccessionNumber"
-                }
-            ]
+    var removeEmptyComponents = function (proto, model) {
+        for (var selector in proto) {
+            var elPath = proto[selector];
+            if (typeof(elPath) !== "string") {
+                continue;
+            }
+            var modelValue = fluid.model.getBeanValue(model, elPath.substring(1));
+            if (modelValue === null || modelValue === undefined) {
+                delete proto[selector];
+            }
+        }
+    };
+
+    var makeProtoComponents = function (that) {
+        var proto = {
+            navBarTitle: "%artifactTitle",
+            accessionNumber: "%artifactAccessionNumber",
+            title: "%artifactTitle",
+            author: "%artifactAuthor",
+            dated: "%artifactDate",
+            medium: "%artifactMedium",
+            dimensions: "%artifactDimensions",
+            mention: "%artifactMention",
+            image: {target: "%artifactImage"},
+            sections: {
+                children: fluid.transform(that.sections, function (section) {
+                    var navList = {
+                        type: "fluid",
+                        func: "fluid.navigationList",
+                        options: fluid.merge("merge", fluid.copy(that.options.section.options), {model: section.sectionContents})
+                    };
+                    return {
+                        sectionContents: {
+                            decorators: navList
+                        },
+                        sectionHeader: {messagekey: section.sectionTitle, args: {size: section.sectionSize}}
+                    };
+                })
+            }
         };
         
-        if (artifact.artifactImage) {
-            tree.children.push({
-                ID: "artifactImage",
-                target: artifact.artifactImage
+        // Trim out any components for model values that are not present, so that the renderer will remove associated template markup.
+        removeEmptyComponents(proto, that.model);
+        return proto;
+    };
+    
+    var makeSectionList = function (model, key, mapper) {        
+        var spec = {};
+        spec[key] = {
+            dataSpec: {}
+        };
+        spec[key].dataSpec[key] = {
+            "path": key,
+            "func": mapper
+        };
+        var sectionModel = {};
+        sectionModel[key] = model[key];
+        var section = fluid.engage.mapModel(sectionModel, key, spec);
+        return section[key];
+    };
+    
+    var makeSection = function (model, key, count, mapper) {
+        return {
+            sectionTitle: key,
+            sectionSize: count,
+            sectionContents: makeSectionList(that.model, key, mapper) 
+        };
+    };
+
+    var transformMediaModelForNavList = function (model, options) {
+        return makeSection(model, "artifactMedia", model.artifactMediaCount, function (value) {
+            return fluid.transform($.makeArray(value) || [], function (val) {
+                return {
+                    image: val.type === "video" ? options.defaultVideoThumbnail : options.defaultAudioThumbnail,
+                    target: val.uri,
+                    title: val.title
+                };
             });
-        }
-        return tree;
+        });
     };
     
-    /**
-     * Renderers out the pieces of the component
-     * 
-     * @param {Object} that,the component
-     */    
-    var renderArtifactPage = function (that) {
-        var artifact = that.model.artifact;
-        fluid.selfRender(that.locate("renderScope"), buildComponentTree(artifact), {
-            cutpoints: that.options.cutpoints, 
-            model: artifact, 
-            debug: true
+    var transformCommentsModelForNavList = function (that, model) {
+        return makeSection(that, "artifactComments", model.artifactCommentsCount, function (value) {
+            return fluid.transform($.makeArray(value) || [], function (val) {
+                return {
+                    image: val.author ? val.author.avatar : "",
+                    title: val.author ? val.author.username : "",
+                    description: val.text
+                };
+            });
+        });              
+    };
+    
+    var chewArtifactSections = function (that) {
+        var model = that.model; 
+        var sections = [];
+        
+        if (model.artifactMediaCount > 0) {
+            sections.push(transformMediaModelForNavList(model, options));
+        }
+        
+        if (model.artifactCommentsCount > 0) {
+            sections.push(transformCommentsModelForNavList(that, model));
+        }
+        
+        if (model.artifactRelatedCount > 0) {
+            sections.push(makeSection(that, "artifactRelated", model.artifactRelatedCount, function (value) {
+                return fluid.transform($.makeArray(value) || [], function (val) {
+                    return {
+                        image: val.thumbnail ? val.thumbnail[0].nodetext : "",  
+                        title: val.title,
+                        description: val.subtitle,
+                        target: window.location.href.replace(that.model.artifactAccessionNumber, val.accessnumber),
+                        showBadge: val.hasMedia === "yes"
+                    };
+                });
+            }));                
+        }
+        that.sections = sections;
+    };
+
+    var setup = function (that) {
+        chewArtifactSections(that);        
+        var messageLocator = fluid.messageLocator(that.options.strings, fluid.stringTemplate);
+        that.render = fluid.engage.renderUtils.createRendererFunction(that.container, that.options.selectors, {
+            selectorsToIgnore: ["description", "sectionContainer"],
+            repeatingSelectors: ["sections"],
+            rendererOptions: {
+                messageLocator: messageLocator,
+                model: that.model
+            }
         });
+        
+        that.refreshView();
+    };
+    
+    var setupSubcomponents = function (that) {
+        if (that.model.artifactDescription) {
+            that.desctiption = fluid.initSubcomponent(that, "description", 
+                [that.locate("description"), fluid.COMPONENT_OPTIONS]);
+        }
+        if (that.options.useCabinet) {
+            that.cabinet = fluid.initSubcomponent(that, "cabinet", [that.locate("sectionContainer"), fluid.COMPONENT_OPTIONS]);
+        }
     };
 
-    /**
-     * The component's creator function 
-     * 
-     * @param {Object} container, the container which will hold the component
-     * @param {Object} options, options passed into the component
-     */
     fluid.engage.artifactView = function (container, options) {
         var that = fluid.initView("fluid.engage.artifactView", container, options);
-        that.model = that.options.model; 
+        that.model = that.options.model;
         
-        that.description = fluid.initSubcomponent(that, "description", [
-            that.locate("descriptionScope"), 
-            {
-                model: that.model.artifact.artifactDescription
-            }
-        ]);
-                
-        that.artifactCabinet = fluid.initSubcomponent(that, "artifactCabinet", that.locate("cabinetScope"));
+        var expander = fluid.renderer.makeProtoExpander({ELstyle: "%"});
+        
+        that.refreshView = function () {
+            var protoTree = makeProtoComponents(that);
+            var tree = expander(protoTree);
+            that.render(tree);
+            setupSubcomponents(that);
+        };
         
-        renderArtifactPage(that);
-        return that; 
+        setup(that);        
+        return that;
     };
     
     //start of Fluid defaults
     fluid.defaults("fluid.engage.artifactView", {
         selectors: {
-            descriptionScope: ".flc-description",
-            renderScope: ".flc-artifact-renderscope",
-            cabinetScope: ".cabinet"  
+            navBarTitle: ".flc-artifact-navBarTitle",
+            accessionNumber: ".flc-artifact-accessionNumber",
+            title: ".flc-artifact-title",
+            author: ".flc-artifact-author",
+            dated: ".flc-artifact-dated",
+            medium: ".flc-artifact-medium",
+            dimensions: ".flc-artifact-dimensions",
+            mention: ".flc-artifact-mention",
+            description: ".flc-artifact-description",
+            image: ".flc-artifact-image",
+            sectionContainer: ".flc-artifact-sections",
+            sections: ".flc-cabinet-drawer",
+            sectionContents: ".flc-cabinet-contents",
+            sectionHeader: ".flc-cabinet-header"
         },
-        description: {
-            type: "fluid.description"
+        useCabinet: true,
+        strings: {
+            artifactMedia: "Show Audio and Video (%size)",
+            artifactComments: "Show Comments (%size)",
+            artifactRelated: "Show Related Artifacts (%size)"
+            
         },
-        artifactCabinet: {
-            type: "fluid.cabinet"
+        defaultVideoThumbnail: "../images/fe_mobile_icon_video.png",
+        defaultAudioThumbnail: "../images/fe_mobile_icon_audio.png",
+        description: {
+            type: "fluid.description",
+            options: {
+                model: null
+            }
         },
-        cutpoints: [
-            {
-                id: "artifactTitle",
-                selector: ".artifact-name"
-            },
-            {
-                id: "artifactImage",
-                selector: ".artifact-picture"
-            },
-            {
-                id: "artifactTitle2",
-                selector: ".artifact-descr-name"
-            },
-            {
-                id: "artifactAuthor",
-                selector: ".artifact-provenance"
-            },
-            {
-                id: "artifactDate",
-                selector: ".artifact-date"
-            },
-            {
-                id: "artifactAccessionNumber",
-                selector: ".artifact-accession-number"
+        section: {
+            type: "fluid.navigationList",
+            options: {
+                model: null,
+                useDefaultImage: true
             }
-        ]
+        },
+        cabinet: {
+            type: "fluid.cabinet"
+        }
     });
     
 }(jQuery));
Index: components/artifactView/messages/messages_fr.json
===================================================================
--- components/artifactView/messages/messages_fr.json	(revision 0)
+++ components/artifactView/messages/messages_fr.json	(revision 0)
@@ -0,0 +1,5 @@
+{
+    "artifactMedia": "Voir les contenus audios et vid√©os (%size)",
+    "artifactComments": "Voir les commentaires (%size)",
+    "artifactRelated": "Voir les art√©facts associ√©s (%size)"
+}
\ No newline at end of file
Index: components/description/css/Description.css
===================================================================
--- components/description/css/Description.css	(revision 9348)
+++ components/description/css/Description.css	(working copy)
@@ -1,59 +1,13 @@
-.fl-description {
-    position:relative;
-}
 .fl-description-hide {
     max-height: 60px;
 }
-
-.fl-description-show {
-    max-height: 1000px;
+.fl-description-toggler {
+    text-decoration:underline;
+    font-weight:bold;
 }
-
+.fl-description-toggler:hover {
+    cursor: pointer;
+}
 .fl-description-content {
     overflow: hidden;
-    margin-right: 32px;
-    margin-left: 5px;
-}
-
-.fl-description-togglerCollapse {
-    background-image: url("../images/collapse.png");  
-}
-
-.fl-description-togglerExpand {
-    background-image: url("../images/expand.png");
-}
-
-.fl-description .fl-icon {
-    height: 20px;
-    width: 20px;
-    position:absolute;
-    bottom:0;
-    right:0;
-}
-
-.fl-theme-iphone .fl-description .fl-icon {
-    -webkit-border-radius:10px;
-    border:1px solid #fff;
-    background-image: -webkit-gradient(radial, 50% 80%, 0, 50% 100%, 22, 
-        from(#0097cb),
-        color-stop(0.5, #0077a0),
-        color-stop(0.5, #4b9ed3),
-        to(#bce7ff)
-    );
-    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px;    
-}
-.fl-theme-iphone .fl-description-togglerCollapse::after,
-.fl-theme-iphone .fl-description-togglerExpand::after {
-    text-indent:0;
-    position:absolute;
-    color:#fff;
-    top:0px;
-    left:0px;
-    text-shadow: rgba(33,11,170,.5) 0px 0px 4px;
-}
-.fl-theme-iphone .fl-description-togglerCollapse::after {
-    content: url(../images/minus.png);
-}
-.fl-theme-iphone .fl-description-togglerExpand::after {    
-    content: url(../images/plus.png);
-}
+}
\ No newline at end of file
Index: components/description/js/Description.js
===================================================================
--- components/description/js/Description.js	(revision 9348)
+++ components/description/js/Description.js	(working copy)
@@ -18,49 +18,6 @@
 (function ($) {
     
     /**
-     * Removes "." from the selector name
-     * This is used by addToggler to add in a selector from the defaults into the injected  markup
-     * 
-     * @param {Object} selector, a selector from the component's defaults
-     */
-    var cleanseSelector = function (selector) {
-        return selector.replace(/\./gi, "");
-    };
-    
-    /**
-     * Injects a hidden toggler into the markup
-     * 
-     * @param {Object} that, the component
-     */
-    var addToggler = function (that) {
-        var styles = that.options.styles;
-        var markup = "<div class='" + cleanseSelector(that.options.selectors.toggler) + " " + styles.descriptionToggle + " " + styles.descriptionToggleExpand + "' alt='Expand Description' title='Expand Description'>Expand</div>";
-        var markupNode = $(markup);
-        markupNode.hide();
-        that.container.append(markupNode);
-        return markupNode;
-    };    
-    
-    /**
-     * Programmatically adds the styles used by the component and specified in the styles section of the defaults
-     * 
-     * @param {Object} that, the component
-     */
-    var addStyleClasses = function (that) {
-        that.locate("content").addClass(that.options.styles.content);
-        that.container.addClass(that.options.styles.container);
-    };
-
-    /**
-     * Binds a click handler to the toggler to call that.toggleDescription on click
-     * 
-     * @param {Object} that, the component 
-     */
-    var addClickEvent = function (that) {
-        that.locate("toggler").click(that.toggleDescription);
-    };
-    
-    /**
      * Determines if the toggler needs to be added to the page, 
      * by testing the height of the content against the collpasedHeight specified in the defaults
      * 
@@ -70,46 +27,54 @@
         return that.locate("content").height() > that.options.collapsedHeight;
     };
     
-    /**
-     * Displayes the toggler and adds a click event to it.
-     * 
-     * @param {Object} that, the component
-     */
-    var setUpToggler = function (that) {
-        that.locate("toggler").show();
-        addClickEvent(that);
+    var hideDescription = function (that) {
+        that.locate("content").addClass(that.options.styles.descriptionHide);
+        that.locate("toggler").html(that.options.strings.more);
     };
     
-    /**
-     * Executes the necessary functions to setup the description
-     * 
-     * @param {Object} that, the component
-     */
-    var setUpDescription = function (that) {
-        addStyleClasses(that);
-        that.options.model = that.options.model.replace(/(<([^>]+)>)/gi, "");
-        
-        var renderOpts = {
-            selectorsToIgnore: ["toggler"]
-        };
-        var utils = fluid.engage.renderUtils;
-        var renderer = utils.createRendererFunction(that.container, that.options.selectors, renderOpts);
-        
-        var tree = {
-            children: [
-                utils.uiBound("content", that.options.model)
-            ]    
-        };
-        
-        renderer(tree);
-        
+    var showDescription = function (that) {
+        that.locate("toggler").html(that.options.strings.less);
+        that.locate("content").removeClass(that.options.styles.descriptionHide);
+    };
+    
+    var toggleDescription = function (that, isExpanded) {
+        if (isExpanded) {
+            hideDescription(that);
+        }
+        else {
+            showDescription(that);
+        }
+    };
+    
+    var setupToggler = function (that) {
         if (needToggle(that)) {
-            that.locate("content").addClass(that.options.styles.descriptionCollapsed);
-            addToggler(that);
-            setUpToggler(that);
+            var toggler = that.locate("toggler");
+            toggleDescription(that, !that.options.expandByDefault);
+            toggler.addClass(that.options.styles.toggler);
+            toggler.click(that.toggleDescription);
         }
     };
     
+    var makeProtoComponents = function (description) {
+        return description ? {
+            content: {markup: "description"}
+        } : {};
+    };
+    
+    var setup = function (that) {
+        var messageLocator = fluid.messageLocator(that.options.strings, fluid.stringTemplate);
+        var selectorsToIgnore = ["toggler"];
+        that.render = fluid.engage.renderUtils.createRendererFunction(that.container, that.options.selectors, {
+            selectorsToIgnore: selectorsToIgnore,
+            rendererOptions: {
+                messageLocator: messageLocator,
+                model: that.model
+            }
+        });
+        that.refreshView();
+        setupToggler(that);
+    };
+    
     /**
      * The component's creator function 
      * 
@@ -119,50 +84,49 @@
     fluid.description = function (container, options) {
         
         var that = fluid.initView("fluid.description", container, options);
+        that.model = that.options.model;
+        
+        that.refreshView = function () {
+            var expander = fluid.renderer.makeProtoExpander({ELstyle: "ALL"});
+            var protoTree = makeProtoComponents(that.model.description);
+            var tree = expander(protoTree);
+            that.render(tree);
+        };
+
+        that.isExpanded = that.options.expandByDefault;
         
         /**
          * Toggles the expansion/collapse of the description. 
          * Also changes the appearance of the toggler to indicate if
          * clicking will result in an expansion or a collapse.
          */
-        that.toggleDescription = function () {
-            var selector = that.locate("content");
-            var toggle = that.locate("toggler");
-            var styles = that.options.styles;
-            
-            if (toggle.hasClass(styles.descriptionToggleCollapse)) {
-                selector.addClass(styles.descriptionCollapsed);
-                selector.removeClass(styles.descriptionExpanded);
-            }
-            else {
-                selector.removeClass(styles.descriptionCollapsed);
-                selector.addClass(styles.descriptionExpanded);
-            }
-            
-            toggle.toggleClass(styles.descriptionToggleCollapse);
-            toggle.toggleClass(styles.descriptionToggleExpand);
+        that.toggleDescription = function () {           
+            toggleDescription(that, that.isExpanded);
+            that.isExpanded = !that.isExpanded;
         };        
         
-        setUpDescription(that);
-        
+        setup(that);
         return that;
     };
     
     fluid.defaults("fluid.description", {
         styles: {
-            descriptionCollapsed: "fl-description-hide",
-            descriptionExpanded: "fl-description-show",
-            descriptionToggle: "fl-icon",
-            descriptionToggleCollapse: "fl-description-togglerCollapse",
-            descriptionToggleExpand: "fl-description-togglerExpand",
+            descriptionHide: "fl-description-hide",
             content: "fl-description-content",
-            container: "fl-description"
+            toggler: "fl-description-toggler"
         },
         selectors: {
             content: ".flc-description-content",
             toggler: ".flc-description-toggler"
         },
+        strings: {
+            more: "MORE...",
+            less: "LESS..."
+        },
         collapsedHeight: 60, //this also has to be specified in the css file in the .fl-description-hide class
-        model: "Description Information"
+        expandByDefault: false,
+        model: {
+            description: null
+        }
     });
 })(jQuery);
\ No newline at end of file
Index: components/description/messages/messages_fr.json
===================================================================
--- components/description/messages/messages_fr.json	(revision 0)
+++ components/description/messages/messages_fr.json	(revision 0)
@@ -0,0 +1,4 @@
+{
+    "more": "PLUS...",
+    "less": "MOINS..."
+}
\ No newline at end of file
