### Eclipse Workspace Patch 1.0
#P fluid-engage-core
Index: components/myCollection/css/myCollection.css
===================================================================
--- components/myCollection/css/myCollection.css	(revision 9418)
+++ components/myCollection/css/myCollection.css	(working copy)
@@ -1,33 +1,13 @@
-.flc-navigationListLink {
-	display: none;
-}
-/* TODO: clean up the css */
-
-.flc-myCollection-image {
-    background: #eee;
-    margin-left: auto;
-    margin-right: auto;
-    width: 64px;
-    height: 64px;
-}
-
-
-.flc-myCollection-period {
-	color: #777;
+.fl-myCollection-empty {
+    height: 100%;
+    margin: auto;
+    text-align: center;
 }
 
 .fl-myCollection-loading .flc-myCollection-imageContainer {
     display: none;
 }
 
-.fl-myCollection-loading .flc-myCollection-navbar {
-	display: none;
-}
-
-.fl-myCollection-loading .flc-myCollection-subHeading {
-    display: none;
-}
-
 .fl-myCollection-loading .fl-myCollection-loadMessage {
     display: block;
     text-align: center;
@@ -38,56 +18,7 @@
     display: none;
 }
 
-.flc-myCollection-toggler {
-	cursor: pointer;
-	white-space: normal !important;
-}
-
-.flc-myCollection-back {
-    cursor: pointer;
-}
-
-.flc-myCollection-items {
-	outline: none;
-    padding: 3.5px;
-    width: 71px !important;
-    height: 71px !important;
-}
-
-.flc-myCollection-items .flc-myCollection-image {
-	outline: 2px solid red;
-}
-
-.fl-list .flc-myCollection-items {
-	width: 100% !important;	 
-}
-
-.fl-invisible {
-    display: none !important;
-}
-
-.flc-myCollection-status {
-    white-space: normal !important;
-}
-
-.fl-myCollection-dropMarker {    
-	height: 64px !important;
-	width: 64px !important;
-	margin: 0 -2px;
-	padding: 0 2px;
-	background-color: red !important;
-	float: left;
-}
-
-.flc-myCollection-titleText {
-	margin-left: 100px;
-	margin-top: -50px;
-	white-space: nowrap;
-	overflow: hidden;
-}
-
-.flc-myCollection-period {
-	margin-left: 100px;
-	white-space: nowrap;	
-	overflow: hidden;
-}
+.fl-myCollection-emptyStatus {
+    white-space: normal;
+    line-height: 400px;
+}
\ No newline at end of file
Index: components/myCollection/html/myCollection.html
===================================================================
--- components/myCollection/html/myCollection.html	(revision 9418)
+++ components/myCollection/html/myCollection.html	(working copy)
@@ -11,44 +11,53 @@
         <link type="text/css" rel="stylesheet" href="../../../../fluid-infusion/src/webapp/framework/fss/css/fss-transitions.css" ></link>
         <link type="text/css" rel="stylesheet" href="../../../../fluid-infusion/src/webapp/framework/fss/css/fss-mobile-layout.css" ></link>
         <link type="text/css" rel="stylesheet" href="../../../../fluid-infusion/src/webapp/framework/fss/css/fss-mobile-theme-iphone.css" ></link>
+        <link type="text/css" rel="stylesheet" href="../../../../fluid-engage-core/components/navigationBar/css/NavigationBar.css" />
+        <link type="text/css" rel="stylesheet" href="../../../../fluid-engage-core/components/navigationList/css/NavigationList.css" />        
 		<link type="text/css" rel="stylesheet" href="../../../../fluid-engage-core/components/myCollection/css/myCollection.css" ></link>
 
 		<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>
-		<script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/jquery/plugins/delegate/js/jquery.delegate.js"></script>
-		<script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/json/js/json2.js"></script>
-        <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/fastXmlPull/js/fastXmlPull.js"></script>
-        <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/jquery/ui/js/ui.draggable.js"></script>
-        <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/framework/core/js/jquery.keyboard-a11y.js"></script>
-		<script type="text/javascript" src="../../../../fluid-infusion/src/webapp/framework/core/js/Fluid.js"></script>
-		<script type="text/javascript" src="../../../../fluid-infusion/src/webapp/framework/core/js/FluidDOMUtilities.js"></script>
-		<script type="text/javascript" src="../../../../fluid-infusion/src/webapp/framework/core/js/DataBinding.js"></script>
-		<script type="text/javascript" src="../../../../fluid-infusion/src/webapp/framework/renderer/js/fluidParser.js"></script>
-		<script type="text/javascript" src="../../../../fluid-infusion/src/webapp/framework/renderer/js/fluidRenderer.js"></script>		
+        <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/framework/core/js/Fluid.js"></script>
+        <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/framework/renderer/js/fluidParser.js"></script>
+        <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/framework/renderer/js/fluidRenderer.js"></script>
+        <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/fastXmlPull/js/fastXmlPull.js"></script>        
 
-		<script type="text/javascript" src="../../../../fluid-engage-core/lib/jquery/plugins/cookie/js/jquery.cookie.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/engageClientUtils.js"></script>
+        <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/engageClientUtils.js"></script>		
+        <script type="text/javascript" src="../../../../fluid-engage-core/components/navigationBar/js/NavigationBar.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/user/js/user.js"></script>
    		<script type="text/javascript" src="../../../../fluid-engage-core/components/myCollection/js/MyCollectionView.js"></script>
 		
 	</head>
-	<body class="fl-theme-iphone">
+	<body class="flc-myCollection fl-theme-iphone">
 <!--		<div class="flc-myCollection fl-myCollection-loading">-->
-		<div class="flc-myCollection">			
-			<div class="flc-myCollection-navbar fl-navbar fl-table">
-			    <div class="fl-table-row">
-	    		    <a class="flc-myCollection-back fl-backButton fl-table-cell">Back</a>
-	                <h1 class="flc-navbar-title fl-table-cell">My Collection</h1>
-	                <a class="flc-myCollection-toggler fl-table-cell" alt="Toggle View" title="Toggle View">Toggle View</a>
-	            </div>
-	            <div class="fl-table-row">
-	                <div class="fl-table-cell"></div>
-	                <div class="flc-myCollection-status fl-table-cell"></div>
-	                <div class="fl-table-cell"></div>
-	            </div>
-			</div>
+		<div class="flc-myCollection-container">
+					
+		    <!-- Navigation Bar and Header -->
+            <div class="flc-navigationBar fl-navbar fl-col-mixed">
+                <!-- Back button -->
+                <div class="fl-col-fixed fl-force-left">
+                    <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton" href="#">
+                        <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
+                    </a>
+                </div>
+                <!-- Home button -->
+                <div class="fl-col-fixed fl-force-left">
+                    <a rsf:id="scr=null" class="flc-navigationBar-home fl-button" href="#">
+                        <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
+                    </a>
+                </div>
+                <!-- Toggle button -->
+                <div class="fl-col-fixed fl-force-right">
+                    <a rsf:id="scr=null" class="flc-navigationBar-toggle fl-button" href="#">
+                        <img class="flc-navigationBar-toggle-grid fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/toggle-grid.png" alt="Switch to grid layout"/>
+                        <img class="flc-navigationBar-toggle-list fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/toggle-list.png" alt="Switch to list layout"/>
+                    </a>
+                </div>
+                <!-- Page header -->
+                <h1 class="flc-myCollection-title fl-navbar-title fl-col-flex">My Collection</h1>
+            </div>
+
+            <div class="flc-myCollection-emptyStatus"></div>
 	
 			<div class="fl-myCollection-loadMessage fl-note fl-bevel-white">
 				Loading...
@@ -62,7 +71,7 @@
 			
 					
 			<!-- hidden link to the navigation list template -->
-			<a class="flc-navigationList-link" href="../../../../fluid-engage-core/components/navigationList/html/NavigationList.html"/>
+			<a class="flc-myCollection-navigationList-link" href="../../../../fluid-engage-core/components/navigationList/html/NavigationList.html"/>
 		</div>
 
 		<script id="flc-initBlock" type="text/javascript">
Index: components/myCollection/messages/messages_fr.json
===================================================================
--- components/myCollection/messages/messages_fr.json	(revision 9418)
+++ components/myCollection/messages/messages_fr.json	(working copy)
@@ -1,5 +1,4 @@
 {
     "header": "TODO My Collection",
-    "statusMessageTemplate": "TODO Your collection contains %artifactsNumber artifact%artifactsPlural. Touch and drag the thumbnails to reorganize.",
     "emptyCollectionMessage": "TODO Your collection is empty. Start adding artifacts to your collection by using the 'Collect' button you find on artifact screens."
 }
\ No newline at end of file
Index: components/myCollection/js/MyCollectionView.js
===================================================================
--- components/myCollection/js/MyCollectionView.js	(revision 9418)
+++ components/myCollection/js/MyCollectionView.js	(working copy)
@@ -32,8 +32,11 @@
         that.navigationList.events.afterRender.addListener(function () {
             that.container.removeClass(that.options.styles.load);
         });
-        
-        that.locate("toggler").click(function () {
+    };
+    
+    var setupNavBar = function (that) {
+        that.navBar = fluid.initSubcomponent(that, "navigationBar", [that.container, fluid.COMPONENT_OPTIONS]);
+        that.navBar.events.onToggle.addListener(function () {
             that.navigationList.toggleLayout();
         });
     };
@@ -67,20 +70,12 @@
         });
     };
     
-    var setupStatusMessage = function (statusEl, strings, collectedArtifacts) {
-        var collectionSize = collectedArtifacts.length;
+    var setupStatusMessage = function (statusEl, myCollectionContainerEl, strings, styles) {
         var status = strings.emptyCollectionMessage;
         
-        // TODO: This needs to be internationalized.
-        if (collectionSize > 0) {
-            status = fluid.stringTemplate(
-                strings.statusMessageTemplate, {
-                    artifactsNumber: collectionSize,
-                    artifactsPlural: collectionSize === 1 ? "" : "s"
-                }
-            );
-        }
         statusEl.text(status);
+        statusEl.addClass(styles.emptyStatus);
+        myCollectionContainerEl.addClass(styles.collectionEmpty);
     };
     
     /**
@@ -88,14 +83,17 @@
      * 
      * @param {Object} that, the component
      */
-    var setupMyCollection = function (that) {    	
-    	setupNavList(that);
-        setupStatusMessage(that.locate("collectionStatus"), 
-                           that.options.strings, 
-                           that.model);
-
-        // TODO: This should be replaced by the Navigation Bar component.
-        that.locate("navbarTitle").text(that.options.strings.header);
+    var setupMyCollection = function (that) {
+        setupNavBar(that);
+        setupNavList(that);
+        if (that.model.length === 0) {
+            setupStatusMessage(that.locate("collectionEmptyStatus"),
+                               that.locate("myCollectionContainer"),
+                               that.options.strings, 
+                               that.options.styles);
+        }
+        // Init title
+        that.locate("title").text(that.options.strings.header);
     };
 
     /**
@@ -114,33 +112,34 @@
     
     fluid.defaults("fluid.engage.myCollection",
         {
+            navigationBar : {
+                type : "fluid.engage.navigationBar"
+            },
+            
             navigationList: {
                 type: "fluid.navigationList",
                 options: {
                     useDefaultImage: true,
                     defaultToGrid: true
                 }
-    		},
+            },
                 
             selectors: {
-                myCollectionContainer: ".flc-myCollection-imageContainer",
-                navbarTitle: ".flc-navbar-title", 
+                myCollectionContainer: ".flc-myCollection-container",
                 navListContainer: ".flc-navigationList",
-                navListLink: ".flc-navigationList-link",
-                backButton: ".flc-myCollection-back",
-                collectionStatus: ".flc-myCollection-status",
-                toggler: ".flc-myCollection-toggler"
+                navListLink: ".flc-myCollection-navigationList-link",
+                collectionEmptyStatus: ".flc-myCollection-emptyStatus",
+                title: "flc-myCollection-title"
             },
 
             styles: {
-                load: "fl-myCollection-loading"
+                load: "fl-myCollection-loading",
+                collectionEmpty: "fl-myCollection-empty",
+                emptyStatus: "fl-myCollection-emptyStatus"
             },
 
             strings: {
                 header: "My Collection",
-                statusMessageTemplate:
-                    "Your collection contains %artifactsNumber artifact" +
-                    "%artifactsPlural. Touch and drag the thumbnails to reorganize.",
                 emptyCollectionMessage:
                     "Your collection is empty. Start adding artifacts to your " +
                     "collection by using the \"Collect\" button you find on artifact screens."
