<% /*
    $Revision$
    $Id$

    File:        pda/iface.inc
    Description: Vergeljk ../shared/iface.inc maar dan voor Mobile
    Parameters:
    Context:
    Note:
        data-theme configureerbaar maken

*/
FCLTHeader.Requires({ plugins: ["jQuery"], js: ["iface.js"]})

jQDataTheme = "c";
jQHeaderTheme = "b";
jQButtonTheme = "e";
jQButtonIconpos = "notext";
jQFrontEndTheme = "e";
// The mobile version of FCLTHeader
FCLTMHeader =
{
    Generate: function (params)
    {
        if (!params) params = {};
        params.mobile = true;
        FCLTHeader.Requires({ plugins: ["jQuery"],
                              js: [rooturl + "/appl/pda/mobile.js"],
                              css: [rooturl + "/appl/pda/default.css"]
                            })
        if (typeof Session("Logging")=="undefined" || Session("Logging") == 0)
            FCLTHeader.Requires({ js: ["jquery.mobile-1.4.5.min.js"] })
        else
            FCLTHeader.Requires({ js: ["jquery.mobile-1.4.5.js"] });
        var theme = S("cssformobile") || rooturl + "/appl/localscripts/theme/cust.mobile.min.css";
        FCLTHeader.Requires({ css: [theme,
                                    rooturl + "/appl/localscripts/theme/jquery.mobile.icons.min.css",
                                    rooturl + "/appl/localscripts/theme/jquery.mobile.structure.min.css"
                                   ]
                            })

        FCLTHeader.Generate(params);
        return;
   }
}

function HEADER(params)
{
   if (!params) params = {};
   if (getQParamInt("modal", 0) == 1 || params.modal) // Dan params.title in de modal-dialog titel stoppen en geen buttons
   {
        if (params.title)
        {
            %><title><%=safe.html(params.title)%></title>
            <script>
                if (parent && parent.$)
                {
                    parent.$('span.ui-dialog-title').html("<%=safe.jsstring(params.title)%>");
                }
              </script><%
        }
        return;
   }

   %><div data-role="header" data-theme="<%= params.datatheme ? params.datatheme : jQHeaderTheme%>" data-position="fixed">
    <div class="ui-btn-left">
<%
      if (params.back) {
          %><a onclick="window.history.back(1)" data-role="button" data-icon="back" data-iconpos="<%=jQButtonIconpos%>" data-direction="reverse"><%=L("lcl_back")%></a><%
      }
      if (params.search) {
          %><a href="productsearch.asp" data-role="button" data-icon="search" data-iconpos="<%=jQButtonIconpos%>" data-direction="reverse"><%=L("lcl_search")%></a><%
      }
      if (params.useraction) {
          %><a onclick="<%=params.useraction.action%>" data-role="button" data-icon="<%=params.useraction.icon%>" data-iconpos="<%=jQButtonIconpos%>" data-direction="reverse"><%=params.useraction.label%></a><%
      }
%>
    </div><!-- ui-btn-left -->
    <div class="ui-title"><%= (params.title ? params.title : L("lcl_mobile_title"))%></div>
    <div class="ui-btn-right">
<%
      // nog kiezen wat het leukst is
      if (params.home) {
          %><a href="<%=rooturl + "/appl/pda/"%>Facilitor.asp" data-role="button" data-icon="home" data-iconpos="<%=jQButtonIconpos%>" data-direction="reverse" ><%=L("lcl_home")%></a><%
      }
      if (params.refresh) {
          %><a onclick="FcltMgr.reload()" data-role="button" data-icon="refresh" data-iconpos="<%=jQButtonIconpos%>" data-direction="reverse"><%=L("lcl_refresh")%></a><%
      }
      if (params.location) {
          %><a href="<%=rooturl + "/appl/pda/"%>setlocation.asp" data-role="button" data-icon="location" data-iconpos="<%=jQButtonIconpos%>" data-direction="reverse" data-ajax='false'><%=L("lcl_mobile_setlocation")%></a><%
      }
      if (params.addaction) {
          %><a href="<%=params.addaction%>" data-role="button" data-icon="plus" data-iconpos="<%=jQButtonIconpos%>" data-ajax='false'><%=L("lcl_add")%></a><%
      }
      if (params.delaction) {
          %><a href="<%=params.delaction%>" data-role="button" data-icon="delete" data-iconpos="<%=jQButtonIconpos%>" data-ajax='false'><%=L("lcl_delete")%></a><%
      }
%>
    </div><!-- ui-btn-right -->
<%
      if (params.banner) {
          %><div id="hbanner">&nbsp;</div><%
      }
%>
  </div><!-- data-role=header -->
<%
}

function FOOTER(params)
{
   if (!params) params = {};
   // no footer at all when used modal (as a popup somewhere)
   if (getQParamInt("modal", 0) == 1 || params.modal)
    return;
   %><div data-role="footer" data-theme="<%= params.datatheme ? params.datatheme : jQHeaderTheme%>" data-position="fixed"><%  /* ff proberen */
   if (params.banner) {
%>    <div id="fbanner">&nbsp; <%
      if (params.thisuser)
      {
%>      <a href="../pda/user_info.asp" data-ajax="false">
          <img id="photo" src="<%=params.thisuser.photopath%>" class="footerphoto">
        </a>
<%    }
%>    </div> <%
    }
    if (params.back) {%><a data-role="button" data-icon="back" data-iconpos="<%=jQButtonIconpos%>" onclick="window.history.back(1)"><%=L("lcl_back")%></a><%}%>
   <div class="f1">
<%= (params.title ? params.title : L("lcl_mobile_footer"))%>
<%
    if (params.mswitch)
        var txt = "<span class='mobile2touch'>"
                + "<a href='../../default.asp?touch=1' target=_top>"+L("lcl_mobile_classicmode")+"</a>"
                + "</span>";
    else
        var txt = "<span style='float:right'><small>"+toDateTimeString(new Date)+"</small></span>";
    Response.Write(txt)
%>
   </div>
   <span class="f2">
<% = !params.nousername && user_key > 0 ? safe.html(user.naam()) : "" %>
<% = !params.noplaats && user.alg_locatie_key({withcurrent:true}) >-1 ? L("lcl_mobile_currentpos") + safe.html(CurrentPosition) : "" %>
   </span></div><!-- data-role=footer --><%
}

function PAGE_START(params)
{
   if (!params) params = {};
   %><div data-role="page" id="<%=params.id ? params.id : 'page'%>" data-theme="<%= params.datatheme ? params.datatheme : jQDataTheme%>"
      <%= params.pclass?" class='"+params.pclass+"'":"" %> ><%
}
function PAGE_END()
{
   %></div><!-- data-role=page --><%
}
function CONTENT_START(params)
{
   if (!params) params = {};
   %><div data-role="content" data-theme="<%= params.datatheme ? params.datatheme : ""%>"
      <%= params.pclass?" class='"+params.pclass+"'":"" %> ><%
}
function CONTENT_END()
{
   %></div><!-- data-role=content --><%
}

function CONTROLGROUP_START(params)
{
params = params || {};
   %><div data-role="controlgroup" data-mini="true" <%= params.id?" id='" + params.id + "'":"" %>
     <%= params.horizontal?" data-type='horizontal'":"" %> style="text-align:center"><%
}
function CONTROLGROUP_END()
{
   %></div><!-- data-role=content --><%
}
function BLOCK_START(params)
{
   if (!params) params = {};
   %><div data-role="collapsible" data-theme="b" data-inset=false data-content-theme="d" data-collapsed="<%=params.collapsed? 'true': 'false'%>" data-mini="<%=params.mini? 'true': 'false'%>"><h3><%=params.title%></h3><%
}
function BLOCK_END()
{
   %></div><!-- data-role=collapsible --><%
}
function CONTAINER_START()
{
   %><div data-role="fieldcontain"><%}
function CONTAINER_END()
{
   %></div><!-- data-role=fieldcontain --><%
}

function GRID_START(columns, params)
{
   params = params||{};
   var vgridclass = '';
   switch (columns)
   { // maximaal 5 kolommen. 1 kolom bestaat niet.
     case 1: break;
     case 2: vgridclass = ' class="ui-grid-a"'; break;
     case 3: vgridclass = ' class="ui-grid-b"'; break;
     case 4: vgridclass = ' class="ui-grid-c"'; break;
     case 5: vgridclass = ' class="ui-grid-d"'; break;
   }
   %><div<%=vgridclass%>><%
}

function GRID_END()
{
   %></div><!-- GRID --><%
}

function COL_START(column, params)
{
   params = params||{};
   var vcolclass = '';
   var vcolwidth = (params.width ? ' style="width:'+params.width+'%"' : '');
   switch (column)
   { // maximaal 5 kolommen
     case 1: vcolclass = ' class="ui-block-a"' + vcolwidth; break;
     case 2: vcolclass = ' class="ui-block-b"' + vcolwidth; break;
     case 3: vcolclass = ' class="ui-block-c"' + vcolwidth; break;
     case 4: vcolclass = ' class="ui-block-d"' + vcolwidth; break;
     case 5: vcolclass = ' class="ui-block-e"' + vcolwidth; break;
   }
   %><div<%=vcolclass%>><%
}

function COL_END()
{
   %></div><!-- COL --><%
}

function LISTCOUNTER(p)
{
  return "<span class='ui-li-count'>"+ p + "</span>"
}

function ROFIELD(pclass, plabel, pvalue, params)
{
  params = params||{};
  if (!pvalue && (params && params.suppressEmpty))
    return; // snel klaar
  params.disabled = true;
  if (!plabel)
  { // Heel simpel
    Response.Write("<div class='" + pclass + "' style='margin-bottom:5px;'>" + safe.fclthtml(pvalue )+ "</div>");
    return;
  }

  if (pclass) params.pclass = pclass;
  RWFIELD (null, plabel, pvalue, params);
}

function RWFIELD(pId, plabel, pvalue, params)
{
  params = params||{};

  var vcontain = (params.contain?" class='ui-field-contain'":"");
  var vdatarole = (params.datarole?" data-role='"+params.datarole+"'":"");
  var vlabel = plabel ? "<label"+(pId ? " for='"+pId+"'" : "")
                                +((!params.readonly&&!params.disabled) ? " class='ed'": "")+">" + plabel + ":</label>" : "";
  var vinputattr = "";
  if (pId)
  {
    vinputattr += " name='" + pId + "' id='" + pId + "'";
  }
  vinputattr += (params.disabled || params.readonly ? " readonly='readonly'" : "");
  vinputattr += (params.pclass ? " class='"+params.pclass+"'" : "");
  vinputattr += (params.datatype ? " type='"+params.datatype+"'" : " type='text'");
  vinputattr += (params.html ? " "+params.html : "");

  vinput = (params.multi
           ? (params.disabled
             ? safe.fclthtml(pvalue)
             : "<textarea " + (plabel ? "placeholder='"+plabel+"'" : "") + vinputattr + ">" + safe.textarea(pvalue) + "</textarea>"
             )
           : "<input "    + (plabel ? "placeholder='"+plabel+"'" : "") + vinputattr + " value='" + safe.htmlattr(pvalue) + "' />"
           );
  if (params.moreinfo && params.disabled)
  {
    if (params.multi && plabel)
      vlabel = "<a class='moreinfo' data-ajax='false' href='" + params.moreinfo + "'>" + vlabel + "</a>";
    else
      vinput = "<a class='moreinfo' data-ajax='false' href='" + params.moreinfo + "'>" + vinput + "</a>";
  }
  %><div<%=vdatarole%><%=vcontain%>><%=vlabel%><%=vinput%></div><%
}

function BTN_BACK(plabel)
{
  BUTTON(L("lcl_back"), {click: "window.history.back(1)", dataicon: "back"});
}

function BUTTON(plabel, params)
{
  // Merk op: dataajax is een string, geen echte boolean. En deze moet "true" zijn
  // als het een link is naar een file met meerdere pagina's!
  params = params||{};
  %><a data-role='button' data-theme='<%=jQButtonTheme%>'
   <%=1||params.mini       ? " data-mini='true'" : ""%>
   <%=params.id         ? " id='"+params.id+"'" : ""%>
   <%=params.dataicon   ? " data-icon='"+params.dataicon+"'" : ""%>
   <%=params.dataiconpos? " data-iconpos='"+params.dataiconpos+"'" : ""%>
   <%=params.dataajax   ? " data-ajax='"+params.dataajax+"'" : ""%>
   <%=params.transition ? " transition='"+params.transition+"'" : ""%>
   <%=params.datarel    ? " data-rel='"+safe.htmlattr(params.datarel)+"'" : ""%>
   <%=params.click      ? " onclick='"+safe.htmlattr(params.click)+"'" : ""%>
   <%=params.linkid     ? " href='"+safe.htmlattr(params.linkid)+"'" : ""%>><%=plabel%></a><%
}

function BTN_SUBMIT(plabel, pform)
{
  %><a data-role='button' data-icon='refresh' data-iconpos='right' onclick=\"$('#<%=pform%>').submit()\" ><%=plabel%></a><%
}

function CHB_FIELD(pId, plabel, pvalue, params)
{
  var vlabel = "";
  var vinput = "<input type='checkbox' class='custom' ";
  params = params||{};
  if (pId)
  {
    vinput += "name='" + pId + "' id='" + pId + "' ";
    vlabel += "<label class='ed' for='" + pId + "'>" + plabel + "</label>";
  }
  vinput += (pvalue && pvalue==1 ? "checked " : "");
  vinput += (params && params.disabled ? "disabled " : "");
  vinput += (params && params.onclick ? "onclick='" + params.onclick + "' " : "");
  vinput += "/>";
%>
  <%=vlabel%><%=vinput%>
<%
}
// Kopie uit ../shared/iface.inc
IFACE =
{
    FORM_END: function()
    {
        protectRequest.inputToken();
    }
}

function shorttxt(txt, len)
{
    txt = txt || "";
    txt = txt.replace(/\n\s*\n/ig, "\n"); // Geheel lege regels of met alleen whitespace

    if  (txt.length < len)
        return txt;

    // Oke, op scherm afkappen na len karakters.
    // Probeer op de eerste spatie maar die moet wel binnen 20% karakters komen
    var spatie = String(txt).substr(len).indexOf(" ");
    if (spatie < 0 || spatie > len/5)
        spatie = 0;
    return txt.substr(0, len+spatie+1) + "...";
}

%>