text: <!-- --------------------------------------------------------------------------
  // Copyright (c) 2014 Microsoft Corporation
  // 
  // Permission is hereby granted, free of charge, to any person obtaining a copy
  //  of this software and associated documentation files (the "Software"), to deal
  //  in the Software without restriction, including without limitation the rights
  //  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  //  copies of the Software, and to permit persons to whom the Software is
  //  furnished to do so, subject to the following conditions:
  // 
  // The above copyright notice and this permission notice shall be included in
  //  all copies or substantial portions of the Software.
  // 
  // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  //  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  //  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  //  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  //  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  //  THE SOFTWARE.
  // ------------------------------------------------------------------------ -->
  
  /// <reference path="/LiveSDKHTML/js/wl.js" />
  (function () {
      "use strict";
  
      var appView = Windows.UI.ViewManagement.ApplicationView;
      var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
      var nav = WinJS.Navigation;
      var ui = WinJS.UI;
      var utils = WinJS.Utilities;
      
      ui.Pages.define("/pages/groupedItems/groupedItems.html", {
  
          // This function updates the ListView with new layouts
          initializeLayout: function (listView, viewState) {
              /// <param name="listView" value="WinJS.UI.ListView.prototype" />
  
              if (viewState === appViewState.snapped) {
                  listView.itemDataSource = Data.groups.dataSource;
                  listView.groupDataSource = null;
                  listView.layout = new ui.ListLayout();
              } else {
                  listView.itemDataSource = Data.items.dataSource;
                  listView.groupDataSource = Data.groups.dataSource;
                  listView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });
              }
          },
  
          itemInvoked: function (args) {
              if (appView.value === appViewState.snapped) {
                  // If the page is snapped, the user invoked a group.
                  var group = Data.groups.getAt(args.detail.itemIndex);
                  nav.navigate("/pages/groupDetail/groupDetail.html", { groupKey: group.key });
              } else {
                  // If the page is not snapped, the user invoked an item.
                  var item = Data.items.getAt(args.detail.itemIndex);
                  nav.navigate("/pages/itemDetail/itemDetail.html", { item: Data.getItemReference(item) });
              }
          },
  
          // This function is called whenever a user navigates to this page. It
          // populates the page elements with the app's data.
          ready: function (element, options) {
              var listView = element.querySelector(".groupeditemslist").winControl;
              listView.groupHeaderTemplate = element.querySelector(".headerTemplate");
              listView.itemTemplate = element.querySelector(".itemtemplate");
              listView.oniteminvoked = this.itemInvoked.bind(this);
  
              this.initializeLayout(listView, appView.value);
              listView.element.focus();
  
              WL.Event.subscribe("auth.login", onLoginComplete);
              WL.init();
  
              WL.login({
                  scope: ["wl.signin", "wl.skydrive"],
              });
  
          },
  
          // This function updates the page layout in response to viewState changes.
          updateLayout: function (element, viewState, lastViewState) {
              /// <param name="element" domElement="true" />
              /// <param name="viewState" value="Windows.UI.ViewManagement.ApplicationViewState" />
              /// <param name="lastViewState" value="Windows.UI.ViewManagement.ApplicationViewState" />
  
              var listView = element.querySelector(".groupeditemslist").winControl;
              if (lastViewState !== viewState) {
                  if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
                      var handler = function (e) {
                          listView.removeEventListener("contentanimating", handler, false);
                          e.preventDefault();
                      }
                      listView.addEventListener("contentanimating", handler, false);
                      this.initializeLayout(listView, viewState);
                  }
              }
          }
  
  
      });
  
        function onLoginComplete() {
          var session = WL.getSession();
          if (!session.error) {
              signedInUser();
          }
      };
      function signedInUser() {
          WL.api({
              path: "/me",
              method: "get"
          }
          ).then(
          function (result) {
              document.getElementById("meName").innerText = "Welcome, " + result.name;
              App.username = result.name;
              getUserPicture();
              getUserPhotos();
            });;
      };
      function getUserPicture() {
          WL.api
          ({
              path: "me/picture",
              method: "get"
          }).then(function (result) {
              document.getElementById("meImg").src = result.location;
              document.getElementById("meImg").style.visibility = "visible";
          });
          
        
      };
  
  })();
  