<webscript>
  <shortname>Global Header Component</shortname>
  <description>Header component used across the whole application</description>
  <url>/components/header</url>
</webscript>

<#-- Header Assets -->
<link rel="stylesheet" type="text/css" href="${page.url.context}/components/header/header.css" />
<script type="text/javascript" src="${page.url.context}/components/header/header.js"></script>
<link rel="stylesheet" type="text/css" href="${page.url.context}/modules/create-site.css"/>
<script type="text/javascript" src="${page.url.context}/modules/create-site.js"></script>
<script type="text/javascript" src="${page.url.context}/yui/menu/menu-patch.js"></script>

<#assign siteActive><#if page.url.templateArgs.site??>true<#else>false</#if></#assign>
<#assign isGuest = (user.name=='guest') />
<#if !isGuest>
<script type="text/javascript">//<![CDATA[
   var thisHeader = new Alfresco.Header("${args.htmlid}").setOptions(
   {
      siteId: "${page.url.templateArgs.site!""}",
      searchType: "${page.url.templateArgs.site!'all'}", // default search type
      favouriteSites: {<#list favouriteSites as site>'${site.shortName}': '${site.title?js_string}'<#if site_has_next>,</#if></#list>}
   }).setMessages(
      ${messages}
   );
//]]></script>
</#if>

<div class="header">
   <div class="logo-wrapper">
      <div class="logo">
         <img src="${url.context}/themes/${theme}/images/app-logo.png" alt="Alfresco Share" />
      </div>
   </div>

   <div class="menu-wrapper">
      <#if !isGuest>
      <div class="personal-menu">   
         <span class="menu-item-icon my-dashboard"><a href="${url.context}/page/user/${user.name?url}/dashboard">${msg("link.myDashboard")}</a></span>
         <span class="menu-item-icon my-profile"><a href="${url.context}/page/user/${user.name?url}/profile">${msg("link.myProfile")}</a></span>
         <span id="${args.htmlid}-sites-linkMenuButton" class="link-menu-button">
            <span class="menu-item-icon sites link-menu-button-link"><a href="${url.context}/page/site-finder">${msg("link.sites")}</a></span>
            <input id="${args.htmlid}-sites" type="button"/>
         </span>
         <span class="menu-item-icon people"><a href="${url.context}/page/people-finder">${msg("link.people")}</a></span>
      </div>
      </#if>

      <div class="util-menu" id="${args.htmlid}-searchcontainer">
         <span class="menu-item"><a href="http://www.alfresco.com/help/3/labs/DMShareHelp" rel="_blank">${msg("link.help")}</a></span>
         <#if !isGuest>
         <span class="menu-item-separator">&nbsp;</span>
         <#if !context.externalAuthentication>
         <span class="menu-item"><a href="${url.context}/logout" title="${msg("link.logout.tooltip", user.name?html)}">${msg("link.logout")}</a></span>
         <span class="menu-item-separator">&nbsp;</span>
         </#if>
         <span class="menu-item">
            <span class="search-container">
               <label for="${args.htmlid}-searchtext" style="display:none">${msg("header.search.inputlabel")}</label>
               <input type="text" class="search-tinput" name="${args.htmlid}-searchtext" id="${args.htmlid}-searchtext" value="" />
               <span id="${args.htmlid}-search-tbutton" class="search-site-icon"><a href="#">&nbsp;&nbsp;</a></span>
            </span>
         </span>
         </#if>
      </div>
   </div>

   <div id="${args.htmlid}-sites-menu" class="yui-overlay">
      <div class="bd">
         <#assign favDisplay><#if favouriteSites?size &gt; 0>block<#else>none</#if></#assign>
         <ul id="${args.htmlid}-favouritesContainer" class="favourite-sites" style="display: ${favDisplay}">
            <li class="header">
               ${msg("header.site.favouriteSites")}
            </li>
         </ul>
         <ul id="${args.htmlid}-favouriteSites" class="favourite-sites-list separator" style="display: ${favDisplay}">
         <#list favouriteSites as site>
            <li>
               <a href="${url.context}/page/site/${site.shortName}/dashboard">${site.title?html}</a>
            </li>
         </#list>
         </ul>
         <ul class="<#if !isGuest>separator</#if>">
            <li>
               <a href="${url.context}/page/site-finder">${msg("header.sites.findSites")}</a>
            </li>
         </ul>
         <#if !isGuest>
         <ul>
            <li>
               <a href="#" onclick="thisHeader.showCreateSite(); return false;">${msg("header.sites.createSite")}</a>
            </li>
         </ul>
         </#if>
      </div>
   </div>

   <#if !isGuest>
   <div id="${args.htmlid}-searchtogglemenu" class="hidden">
      <div class="bd">
         <ul class="last">
            <li>
               <a href="#" <#if siteActive == 'false'>class="disabled"<#else>onclick="thisHeader.doToggleSearchType('site'); return false;"</#if>>${msg("header.search.searchsite", page.url.templateArgs.site!"")}</a>
            </li>
            <li>
               <a href="#" onclick="thisHeader.doToggleSearchType('all'); return false;">${msg("header.search.searchall")}</a>
            </li>
         </ul>            
      </div>
   </div>	
   </#if>
</div>
<script type="text/javascript">//<![CDATA[
(function()
{
   var links = YAHOO.util.Selector.query("a[rel]", "${args.htmlid}");
   for (var i = 0, ii = links.length; i < ii; i++)
   {
      links[i].setAttribute("target", links[i].getAttribute("rel"));
   }
})();
//]]></script>

const PREF_FAVOURITE_SITES = "org.alfresco.share.sites.favourites";

function sortByTitle(site1, site2)
{
   return (site1.title > site2.title) ? 1 : (site1.title < site2.title) ? -1 : 0;
}

function main()
{
   var favouriteSites = [];

   // Call the repo for sites the user is a member of - we only want to show favourites that the user is a current member of
   // TODO: Clean-up old favourites here?
   var result = remote.call("/api/people/" + stringUtils.urlEncode(user.name) + "/sites");
   if (result.status == 200)
   {
      var i, ii;

      // Create javascript objects from the server response
      var sites = eval('(' + result + ')'), site, favourites = {};

      if (sites.length > 0)
      {
         // Sort the sites by title
         sites.sort(sortByTitle);

         // Call the repo for the user's favourite sites
         result = remote.call("/api/people/" + stringUtils.urlEncode(user.name) + "/preferences?pf=" + PREF_FAVOURITE_SITES);
         if (result.status == 200)
         {
            var prefs = eval('(' + result + ')');
            try
            {
               // Populate the favourites object literal for easy look-up later
               favourites = eval('(prefs.' + PREF_FAVOURITE_SITES + ')');
               if (typeof favourites != "object")
               {
                  favourites = {};
               }
               for (i = 0, ii = sites.length; i < ii; i++)
               {
                  site = sites[i];

                  // Is this site a user favourite?
                  if (!!(favourites[site.shortName]))
                  {
                     favouriteSites.push(site);
                  }
               }
            }
            catch (e)
            {
            }
         }
      }
   }

   // Prepare the model for the template
   model.favouriteSites = favouriteSites;
}

main();

link.myDashboard=My Dashboard
link.myProfile=My Profile
link.sites=Sites
link.people=People
link.help=Help
link.search=Search
label.searchTip=All Sites
link.logout=Logout
link.logout.tooltip=Currently logged in as: {0}

header.search.searchsite=Search This Site
header.search.searchall=Search All Sites
header.search.inputlabel=Site Search
header.site.favouriteSites=My Favourites
header.sites.findSites=Search for Sites
header.sites.createSite=Create Site