<webscript>
   <shortname>Customise Dashboard Layout</shortname>
   <description>Customise dashboard layout component</description>
   <url>/components/dashboard/customise-layout</url>
</webscript>

<!-- Customise Dashlets Assets -->
<link rel="stylesheet" type="text/css" href="${page.url.context}/components/dashboard/customise-layout.css" />
<script type="text/javascript" src="${page.url.context}/components/dashboard/customise-layout.js"></script>

<div class="customise-layout">

   <script type="text/javascript">//<![CDATA[
   new Alfresco.CustomiseLayout("${args.htmlid}").setOptions(
   {
      currentLayout:
      {
         templateId: "${currentLayout.templateId}",
         noOfColumns: ${currentLayout.noOfColumns},
         description: "${currentLayout.description}",
         icon: "${url.context}/components/dashboard/images/${currentLayout.templateId}.png"
      },
      layouts:
      {
<#list layouts as layout>
         "${layout.templateId}":
         {
            templateId: "${layout.templateId}",
            noOfColumns: ${layout.noOfColumns},
            description: "${layout.description}",
            icon: "${url.context}/components/dashboard/images/${layout.templateId}.png"
         }<#if (layout_has_next)>,</#if>
</#list>
      }
   }
   ).setMessages(${messages});
   //]]></script>

   <div id="${args.htmlid}-hideCurrentLayout-div" style="display: none;"></div>

   <div id="${args.htmlid}-currentLayout-div" class="currentLayout">

      <h2>${msg("section.currentLayout")}
         <span id="${args.htmlid}-currentLayoutDescription-span">${currentLayout.description}</span>
      </h2>
      <hr/>

      <div>
         <br />
         <img id="${args.htmlid}-currentLayoutIcon-img" class="layoutIcon" src="${url.context}/components/dashboard/images/${currentLayout.templateId}.png" alt="current layout" />
         <div id="${args.htmlid}-changeButtonWrapper-div" class="buttons">
            <input id="${args.htmlid}-change-button" type="button" value="${msg("button.showLayouts")}" />
         </div>
      </div>

   </div>

   <div id="${args.htmlid}-layouts-div" class="layouts" style="display: none;">

      <h2 class="instructions">${msg("section.selectNewLayout")}</h2>
      <hr/>

      <div>
         <div class="text">${msg("label.layoutWarning")}</div>

         <ul id="${args.htmlid}-layout-ul">
         <#list layouts as layout>
            <li id="${args.htmlid}-layout-li-${layout.templateId}">               
               <div class="layoutDescription">${layout.description}</div>
               <div class="layoutBox">
                  <span>
                     <img id="${args.htmlid}-select-img-${layout.templateId}" class="layoutIcon" src="${url.context}/components/dashboard/images/${layout.templateId}.png" alt="${layout.templateId}" />
                     <input id="${args.htmlid}-select-button-${layout.templateId}" type="button" value="${msg("button.select")}" />
                  </span>
               </div>
            </li>
         </#list>
         </ul>
      </div>

      <hr/>

      <div>
         <div class="buttons">
            <input id="${args.htmlid}-cancel-button" type="button" value="${msg("button.useCurrent")}" />
         </div>
      </div>
      
   </div>

</div>

function getNoOfColumns(template)
{
   var noOfColumns = 0;
   while (template.properties["gridColumn" + (noOfColumns + 1)] !== null)
   {
      noOfColumns++;
   }                                       
   return noOfColumns;
}


// Get current template
var dashboardId;
if (args.dashboardType == "user")
{                              
   dashboardId = "user/" + user.name + "/dashboard";
}
else if (args.dashboardType == "site")
{
   dashboardId = "site/" + page.url.templateArgs.site + "/dashboard";   
}
var currentTemplate = sitedata.findTemplate(dashboardId),
   currentNoOfColumns = getNoOfColumns(currentTemplate),
   currentLayout =
   {
      templateId: currentTemplate.id,
      noOfColumns: currentNoOfColumns,
      description: currentTemplate.description
   };

// Hardcoded templates until proper service exists
var layouts = [
   {templateId: "dashboard-1-column",             noOfColumns: 1, description: "<b>One</b> column"},
   {templateId: "dashboard-2-columns-wide-right", noOfColumns: 2, description: "<b>Two</b> columns: narrow left, wide right"},
   {templateId: "dashboard-2-columns-wide-left",  noOfColumns: 2, description: "<b>Two</b> columns: wide left, narrow right"},
   {templateId: "dashboard-3-columns",            noOfColumns: 3, description: "<b>Three</b> columns: narrow left, "},
   {templateId: "dashboard-4-columns",            noOfColumns: 4, description: "<b>Four</b> columns"}
];

// Prepare model for template
model.currentLayout = currentLayout;
model.layouts = layouts;

header.layout=Layout

section.currentLayout=Current Layout: 

button.showLayouts=Change Layout
button.hideLayouts=Hide Layouts

section.selectNewLayout=Select New Layout
label.layoutWarning=If the new layout has less columns than the current layout, \
 columns are removed from right side. Any dashlets in those columns are removed.

button.select=Select
button.useCurrent=Cancel