<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" /> 

  <link rel="shortcut icon" href="/images/favicon.ico"   type="image/x-icon"/>
  <!--<link rel="stylesheet" href="/js/jquery/css/redmond/jquery-ui-1.7.2.custom.css" type="text/css">-->
  <link rel="stylesheet" href="/js/jquery/css/smoothness/jquery-ui-1.8.17.custom.css" type="text/css">
  <link rel="stylesheet" href="/css/simplified.css" media="screen" rel="stylesheet" type="text/css" />

  <script type="text/javascript" src="/js/jquery/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="/js/jquery/jquery-ui-1.8.17.min.js"></script>
  
  {if $clientBrowser neq 'msie'}
  <style>
  {literal}
  body {
    padding-top : 40px !important;
    overflow    : hidden;
  }
  </style>
  {/literal}
  {/if}

  {literal}
  <script>
  var ux_env = {ver: '1.0'};

  function resize()
  {
    var h = $(window).height() - 42;
    $('iframe').height(h);
    //IE V8-V10-V11
    if ((navigator.appVersion.indexOf("MSIE 8") != -1) || (navigator.appVersion.indexOf("MSIE 1") != -1) || (!!(navigator.userAgent.match(/Trident/) && !navigator.userAgent.match(/MSIE/)))) {
      h = $('iframe').attr('style');
      $('iframe').attr('style', h+' padding-top : 40px;');
    }
  }

  function redirect(url)
  {
    var $iframe = $('#iframex');
    $iframe.attr('src', url);   
    return false;
  }

  function appStart(id, title)
  {
    $('#startAppTitle').html(title)

    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:160,
      modal: true,
      buttons: {
        "Start Case": function() {
          $( this ).dialog( "close" );
          redirect('home/startCase?id='+id);
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  }

  /*function setActive(o) 
  {
    if (o.id == 'inboxOp') {
      o.setAttribute('class', 'active');
    }
    else {
      o.setAttribute('class', ''); 
    }
  }*/

  //$("div.topbar ul li a").

 
  </script>
  {/literal}

</head>
<body onload="resize()" onresize="resize()" > 
  <div class="global-nav">
    <!-- start topbar -->     
    <div class="topbar" id="corpBar">
      <div class="topbar-bg"></div>
      <div class="topbar-inner">
        <div class="fixed-container clearfix">
          <!-- <a href="" title="_title / Home" accesskey="1" id="logo">_title</a> -->

          <ul class="nav primary-nav">
            <!--
            <li class="account">
              <a class="menu user-actions active" href="#" onclick="redirect('home/appList?t=todo');" title="My Inbox">
                <img alt="" src="/images/simplified/in-set-grey.png" id="inboxOp" />
            -->
                <!-- <span class="menu-label screen-name">new cases</span> -->
            <!--
              </a>
            </li>
            -->

            {if count($arrayMnuOption) > 0}
              {foreach from=$arrayMnuOption key=index item=option}
              <li class="account">
                <a class="menu user-actions" href="javascript:;" onclick="redirect('{$option.url}');" title="{$option.label}">
                  <img src="{$option.icon}" alt="" />
                </a>
              </li>
              {/foreach}
            {/if}
            
            {if $canStartCase neq false && count($mnuNewCase) > 0}
            <li class="account">
              <a class="menu user-actions" href="javascript:;" title="{$mnuNewCase.label}" id="_new">
                <img src="{$mnuNewCase.icon}" alt="" />
              </a>

              <ul class="menu-dropdown" style="width: 360px">
                {foreach from=$processList key=id item=proc}
                <li>
                  <a href="javascript:;" onclick="appStart('{$proc.uid}', '{$proc.value}')" accesskey="s" title="" id="settings_link">{$proc.value}</a>
                </li>
                {/foreach}
              </ul>
            </li>
            {/if}
          </ul> 

          <ul class="nav secondary-nav">
            <li class="account">
              <a class="menu user-photo" href="javascript:;">
                <img alt="user_avatar_mini" height="24" src="users/users_ViewPhotoGrid?pUID={$usrUid}" width="24" />
                <span class="menu-label screen-name">{$userName}</span>
              </a>

              <ul class="menu-dropdown">
                <!--<li><a href="#" accesskey="s" id="settings_link">Settings</a></li>
                <li><a href="#" accesskey="?" id="help_link">Help</a></li>-->
                {if $userUxType eq 'SWITCHABLE'}
                <li><a href="{$switchLink}" accesskey="?" id="help_link">Switch Interface</a></li>
                {/if}
                <li><a href="home/login" accesskey="l" id="sign_out_link">Sign out</a></li>
              </ul>
            </li>
          </ul>

        </div> <!-- /fixed-container -->
      </div> <!-- /topbar-inner -->
    </div>
    <!-- end topbar -->     
  </div>

  <iframe id="iframex" name="iframex" src="home/appList" width="100%" height="800" scrolling="yes" frameborder="0"></iframe>
  
  <div id="dialog-confirm" title="Confirm" style="display:none">
    <p>
    Start a new case for:<br/>
    <span class="ui-icon ui-icon-document" style="float:left; margin:0 7px 20px 0;"></span><span id="startAppTitle"/></p>
  </div>

  {literal} 
  <script type="text/javascript">
    // Javascript to toggle the dropdowns
    $(document).ready(function(){
      // Dropdowns
      $("body").bind("click", function(e) {
        $("ul.menu-dropdown").hide();
        $('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide();
      });

      $("a.menu").click(function() {
        if ($(this).parent("li").hasClass("open")) {
          $(this).parent("li").removeClass("open");
          $(this).siblings("ul.menu-dropdown").hide();
        } else {
          $(this).parent("li").addClass("open");
          $(this).siblings("ul.menu-dropdown").show();
        }
        $(this).parent("li").siblings("li").children("ul.menu-dropdown").hide();
        $(this).parent("li").siblings("li").removeClass("open");
        return false;
      });

      
      // To hide some actived menu clicking on inner iframe content
      $('iframe').load(function(){
        var iframeDoc = $('iframe').contents().get(0);
        // Bind event to iframe document
        $(iframeDoc).bind('click', function( event ) {
          $("ul.menu-dropdown").hide();
          $('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide();
        });

      })

     
      $('ul.primary-nav').children('li').children('a').click(function(i, el){
        $('ul.primary-nav').children('li').children('a').attr('class', 'menu user-actions');
        $(this).attr('class', 'menu user-actions active');
      });

    });
  </script>
  {/literal}

</body>
</html>