X-Git-Url: https://vcs.fsf.org/?a=blobdiff_plain;f=templates%2FCRM%2FCase%2FForm%2FCaseView.tpl;h=97d653462c7ff07e0b46044abf4ea044e8e64e68;hb=66cae70584f43f4d98a9a08b686487f9a0353d00;hp=1b4c0a191a3f7d7b3ec75c7f19828738003e0745;hpb=a755b1785b561f65aca4115b3c81209c2816435d;p=civicrm-core.git

diff --git a/templates/CRM/Case/Form/CaseView.tpl b/templates/CRM/Case/Form/CaseView.tpl
index 1b4c0a191a..783d68342c 100644
--- a/templates/CRM/Case/Form/CaseView.tpl
+++ b/templates/CRM/Case/Form/CaseView.tpl
@@ -1,8 +1,8 @@
 {*
  +--------------------------------------------------------------------+
- | CiviCRM version 4.4                                                |
+ | CiviCRM version 4.5                                                |
  +--------------------------------------------------------------------+
- | Copyright CiviCRM LLC (c) 2004-2013                                |
+ | Copyright CiviCRM LLC (c) 2004-2014                                |
  +--------------------------------------------------------------------+
  | This file is a part of CiviCRM.                                    |
  |                                                                    |
@@ -25,29 +25,17 @@
 *}
 {* CiviCase -  view case screen*}
 
-{* here we are showing related cases w/ jquery dialog *}
 <div class="crm-block crm-form-block crm-case-caseview-form-block">
-{if $showRelatedCases}
-<table class="report">
-  <tr class="columnheader">
-    <th>{ts}Client Name{/ts}</th>
-    <th>{ts}Case Type{/ts}</th>
-    <th></th>
-  </tr>
 
-  {foreach from=$relatedCases item=row key=caseId}
-    <tr>
-      <td class="crm-case-caseview-client_name label">{$row.client_name}</td>
-      <td class="crm-case-caseview-case_type label">{$row.case_type}</td>
-      <td class="label">{$row.links}</td>
-    </tr>
-  {/foreach}
-</table>
+{* here we are showing related cases w/ jquery dialog *}
+{if $showRelatedCases}
+  {include file="CRM/Case/Form/ViewRelatedCases.tpl"}
 
-  {else}
+{* Main case view *}
+{else}
 
 <h3>{ts}Summary{/ts}</h3>
-<table class="report">
+<table class="report crm-entity case-summary" data-entity="case" data-id="{$caseID}" data-cid="{$contactID}">
   {if $multiClient}
     <tr class="crm-case-caseview-client">
       <td colspan="5" class="label">
@@ -55,11 +43,14 @@
         {foreach from=$caseRoles.client item=client name=clients}
           <a href="{crmURL p='civicrm/contact/view' q="action=view&reset=1&cid=`$client.contact_id`"}" title="{ts}view contact record{/ts}">{$client.display_name}</a>{if not $smarty.foreach.clients.last}, &nbsp; {/if}
         {/foreach}
-        <a href="#" title="{ts}add new client to the case{/ts}" onclick="addClient( );return false;">
-          <span class="icon edit-icon"></span>
+        <a href="#addClientDialog" class="crm-hover-button case-miniform" title="{ts}Add Client{/ts}" data-key="{crmKey name='civicrm/case/ajax/addclient'}">
+          <span class="icon add-icon"></span>
         </a>
+        <div id="addClientDialog" class="hiddenElement">
+          <input name="add_client_id" placeholder="{ts}- select contact -{/ts}" class="huge" />
+        </div>
         {if $hasRelatedCases}
-          <div class="crm-block relatedCases-link"><a href='#' onClick='viewRelatedCases( {$caseID}, {$contactID} ); return false;'>{ts}Related Cases{/ts}</a></div>
+          <div class="crm-block relatedCases-link"><a class="crm-hover-button crm-popup medium-popup" href="{$relatedCaseUrl}">{$relatedCaseLabel}</a></div>
         {/if}
       </td>
     </tr>
@@ -85,7 +76,7 @@
           {/foreach}
         </table>
         {if $hasRelatedCases}
-          <div class="crm-block relatedCases-link"><a href='#' onClick='viewRelatedCases( {$caseID}, {$contactID} ); return false;'>{ts}Related Cases{/ts}</a></div>
+          <div class="crm-block relatedCases-link"><a class="crm-hover-button crm-popup medium-popup" href="{$relatedCaseUrl}">{$relatedCaseLabel}</a></div>
         {/if}
       </td>
     {/if}
@@ -93,13 +84,13 @@
       <span class="crm-case-summary-label">{ts}Subject{/ts}:</span>&nbsp;{$caseDetails.case_subject}
     </td>
     <td class="crm-case-caseview-case_type label">
-      <span class="crm-case-summary-label">{ts}Type{/ts}:</span>&nbsp;{$caseDetails.case_type}&nbsp;<a href="{crmURL p='civicrm/case/activity' q="action=add&reset=1&cid=`$contactId`&caseid=`$caseId`&selectedChild=activity&atype=`$changeCaseTypeId`"}" title="{ts}Change case type (creates activity record){/ts}"><span class="icon edit-icon"></span></a>
+      <span class="crm-case-summary-label">{ts}Type{/ts}:</span>&nbsp;{$caseDetails.case_type}&nbsp;<a class="crm-hover-button crm-popup"  href="{crmURL p='civicrm/case/activity' q="action=add&reset=1&cid=`$contactId`&caseid=`$caseId`&selectedChild=activity&atype=`$changeCaseTypeId`"}" title="{ts}Change case type (creates activity record){/ts}"><span class="icon edit-icon"></span></a>
     </td>
     <td class="crm-case-caseview-case_status label">
-      <span class="crm-case-summary-label">{ts}Status{/ts}:</span>&nbsp;{$caseDetails.case_status}&nbsp;<a href="{crmURL p='civicrm/case/activity' q="action=add&reset=1&cid=`$contactId`&caseid=`$caseId`&selectedChild=activity&atype=`$changeCaseStatusId`"}" title="{ts}Change case status (creates activity record){/ts}"><span class="icon edit-icon"></span></a>
+      <span class="crm-case-summary-label">{ts}Status{/ts}:</span>&nbsp;{$caseDetails.case_status}&nbsp;<a class="crm-hover-button crm-popup"  href="{crmURL p='civicrm/case/activity' q="action=add&reset=1&cid=`$contactId`&caseid=`$caseId`&selectedChild=activity&atype=`$changeCaseStatusId`"}" title="{ts}Change case status (creates activity record){/ts}"><span class="icon edit-icon"></span></a>
     </td>
     <td class="crm-case-caseview-case_start_date label">
-      <span class="crm-case-summary-label">{ts}Open Date{/ts}:</span>&nbsp;{$caseDetails.case_start_date|crmDate}&nbsp;<a href="{crmURL p='civicrm/case/activity' q="action=add&reset=1&cid=`$contactId`&caseid=`$caseId`&selectedChild=activity&atype=`$changeCaseStartDateId`"}" title="{ts}Change case start date (creates activity record){/ts}"><span class="icon edit-icon"></span></a>
+      <span class="crm-case-summary-label">{ts}Open Date{/ts}:</span>&nbsp;{$caseDetails.case_start_date|crmDate}&nbsp;<a class="crm-hover-button crm-popup"  href="{crmURL p='civicrm/case/activity' q="action=add&reset=1&cid=`$contactId`&caseid=`$caseId`&selectedChild=activity&atype=`$changeCaseStartDateId`"}" title="{ts}Change case start date (creates activity record){/ts}"><span class="icon edit-icon"></span></a>
     </td>
     <td class="crm-case-caseview-{$caseID} label">
       <span class="crm-case-summary-label">{ts}ID{/ts}:</span>&nbsp;{$caseID}
@@ -114,45 +105,35 @@
   </div>
   {/if}
 
-<table class="form-layout">
-<tr class="crm-case-caseview-form-block-activity_type_id">
-  <td>{$form.activity_type_id.label}<br />{$form.activity_type_id.html}&nbsp;<input type="button" accesskey="N" value="{ts}Go{/ts}" name="new_activity" onclick="checkSelection( this );"/></td>
-  {if $hasAccessToAllCases}
-    <td>
-      <span class="crm-button"><div class="icon print-icon"></div><input type="button"  value="{ts}Print Report{/ts}" name="case_report_all" onclick="printCaseReport( );"/></span>
-    </td>
-  </tr>
-  <tr>
-    <td class="crm-case-caseview-form-block-timeline_id">{$form.timeline_id.label}<br />{$form.timeline_id.html}&nbsp;{$form._qf_CaseView_next.html}</td>
-    <td class="crm-case-caseview-form-block-report_id">{$form.report_id.label}<br />{$form.report_id.html}&nbsp;<input type="button" accesskey="R" value="Go" name="case_report" onclick="checkSelection( this );"/></td>
-    {else}
-    <td></td>
-  {/if}
-</tr>
+<div class="case-control-panel">
+  <div>
+    <p>
+      {$form.add_activity_type_id.html}
+      {if $hasAccessToAllCases} &nbsp;
+        {$form.timeline_id.html}{$form._qf_CaseView_next.html} &nbsp;
+        {$form.report_id.html}
+      {/if}
+    </p>
+  </div>
+  <div>
+    <p>
+      {if $hasAccessToAllCases}
+        <a class="crm-hover-button action-item no-popup" href="{crmURL p='civicrm/case/report/print' q="all=1&redact=0&cid=$contactID&caseID=$caseId&asn=standard_timeline"}"><span class="icon print-icon"></span> {ts}Print Report{/ts}</a>
+      {/if}
 
-  {if $mergeCases}
-    <tr class="crm-case-caseview-form-block-merge_case_id">
-      <td colspan='2'><a href="#" onClick='cj("#merge_cases").toggle( ); return false;'>{ts}Merge Case{/ts}</a>
-        <span id='merge_cases' class='hide-block'>
-          {$form.merge_case_id.html}&nbsp;{$form._qf_CaseView_next_merge_case.html}
+      {if $mergeCases}
+        <a href="#mergeCasesDialog" class="action-item no-popup crm-hover-button case-miniform"><span class="icon ui-icon-copy"></span>{ts}Merge Case{/ts}</a>
+        {$form._qf_CaseView_next_merge_case.html}
+        <span id="mergeCasesDialog" class="hiddenElement">
+          {$form.merge_case_id.html}
         </span>
-      </td>
-    </tr>
-  {/if}
-
-  {if call_user_func(array('CRM_Core_Permission','giveMeAllACLs'))}
-    <tr class="crm-case-caseview-form-block-change_client_id">
-      <td colspan='2'><a href="#" onClick='cj("#change_client").toggle( ); return false;'>{ts}Assign to Another Contact{/ts}</a>
-          <span id='change_client' class='hide-block'>
-            {$form.change_client_id.html|crmAddClass:twenty}&nbsp;{$form._qf_CaseView_next_edit_client.html}
-          </span>
-      </td>
-    </tr>
-  {/if}
-</table>
+      {/if}
 
-<div id="view-related-cases">
-  <div id="related-cases-content"></div>
+      {if call_user_func(array('CRM_Core_Permission','giveMeAllACLs'))}
+        <a class="action-item crm-hover-button medium-popup" href="{crmURL p='civicrm/contact/view/case/editClient' h=1 q="reset=1&action=update&id=$caseID&cid=$contactID"}"><span class="icon ui-icon-person"></span> {ts}Assign to Another Client{/ts}</a>
+      {/if}
+    </p>
+  </div>
 </div>
 
 <div class="clear"></div>
@@ -166,11 +147,22 @@
 
     {if $hasAccessToAllCases}
       <div class="crm-submit-buttons">
-        <a class="button" href="#" onclick="addRole();return false;"><span><div class="icon add-icon"></div>{ts}Add new role{/ts}</span></a>
+        <a class="button case-miniform" href="#addCaseRoleDialog" data-key="{crmKey name='civicrm/ajax/relation'}" rel="#caseRoles-selector-{$caseID}"><div class="icon add-icon"></div>{ts}Add new role{/ts}</a>
+      </div>
+      <div id="addCaseRoleDialog" class="hiddenElement">
+        <div>{$form.role_type.label}</div>
+        <div>{$form.role_type.html}</div><br />
+        <div><label for="add_role_contact_id">{ts}Assign To{/ts}:</label></div>
+        <div><input name="add_role_contact_id" placeholder="{ts}- select contact -{/ts}" class="huge" /></div>
       </div>
     {/if}
 
-    <table id="caseRoles-selector"  class="report-layout">
+    <div id="editCaseRoleDialog" class="hiddenElement">
+      <div><label for="edit_role_contact_id">{ts}Change To{/ts}:</label></div>
+      <div><input name="edit_role_contact_id" placeholder="{ts}- select contact -{/ts}" class="huge" /></div>
+    </div>
+
+    <table id="caseRoles-selector-{$caseID}"  class="report-layout">
       <thead><tr>
         <th>{ts}Case Role{/ts}</th>
         <th>{ts}Name{/ts}</th>
@@ -182,309 +174,75 @@
       </tr></thead>
     </table>
 
+    <div id="deleteCaseRoleDialog" class="hiddenElement">
+     {ts}Are you sure you want to delete this case role?{/ts}
+    </div>
+
   {literal}
   <script type="text/javascript">
   var oTable;
 
-  cj(function() {
-    cj().crmAccordions();
+  CRM.$(function($) {
     buildCaseRoles(false);
-  });
-
-  function deleteCaseRoles(caseselector) {
-    cj('.case-role-delete').click(function(){
-      var caseID = cj(this).attr('case_id');
-      var relType  = cj(this).attr('rel_type');
-
-      CRM.confirm(function() {
-        var postUrl = {/literal}"{crmURL p='civicrm/ajax/delcaserole' h=0 }"{literal};
-        cj.post( postUrl, {
-          rel_type: relType, case_id: caseID, key: {/literal}"{crmKey name='civicrm/ajax/delcaserole'}"{literal}},
-          function(data) {
-            // reloading datatable
-            var oTable = cj('#' + caseselector).dataTable();
-            oTable.fnDraw();
-          }
-        );
-      }
-      ,{
-        title: '{/literal}{ts escape="js"}Delete case role{/ts}{literal}',
-        message: '{/literal}{ts escape="js"}Are you sure you want to delete this case role?{/ts}{literal}'
-      });
-      return false;
-    });
-  }
-
-  function buildCaseRoles(filterSearch) {
-    if(filterSearch) {
-      oTable.fnDestroy();
-    }
-    var count   = 0;
-    var columns = '';
-    var sourceUrl = {/literal}"{crmURL p='civicrm/ajax/caseroles' h=0 q='snippet=4&caseID='}{$caseID}"{literal};
-    sourceUrl = sourceUrl + '&cid={/literal}{$contactID}{literal}';
-    sourceUrl = sourceUrl + '&userID={/literal}{$userID}{literal}';
-
-    cj('#caseRoles-selector th').each( function( ) {
-      if ( cj(this).attr('id') != 'nosort' ) {
-        columns += '{"sClass": "' + cj(this).attr('class') +'"},';
-      }
-      else {
-        columns += '{ "bSortable": false },';
-      }
-      count++;
-    });
-
-    columns    = columns.substring(0, columns.length - 1 );
-    eval('columns =[' + columns + ']');
-
-    oTable = cj('#caseRoles-selector').dataTable({
-      "bFilter"    : false,
-      "bAutoWidth" : false,
-      "aaSorting"  : [],
-      "aoColumns"  : columns,
-      "bProcessing": true,
-      "bJQueryUI": true,
-      "asStripClasses" : [ "odd-row", "even-row" ],
-      "sPaginationType": "full_numbers",
-      "sDom"       : '<"crm-datatable-pager-top"lfp>rt<"crm-datatable-pager-bottom"ip>',
-      "bServerSide": true,
-      "sAjaxSource": sourceUrl,
-      "iDisplayLength": 10,
-      "fnDrawCallback": function() { setCaseRolesSelectorClass(); },
-      "fnServerData": function ( sSource, aoData, fnCallback ) {
-        cj.ajax({
-          "dataType": 'json',
-          "type": "POST",
-          "url": sSource,
-          "data": aoData,
-          "success": fnCallback
-        });
-      }
-    });
-  }
-
-  function setCaseRolesSelectorClass( ) {
-    cj("#caseRoles-selector td:last-child").each( function( ) {
-      cj(this).parent().addClass(cj(this).text() );
-    });
-
-    // also bind delete action once rows are rendered
-    deleteCaseRoles('caseRoles-selector');
-  }
-
-  function printCaseReport( ) {
-    var asn = 'standard_timeline';
-    var dataUrl = {/literal}"{crmURL p='civicrm/case/report/print' q='all=1&redact=0' h='0'}"{literal};
-    dataUrl     = dataUrl + '&cid={/literal}{$contactID}{literal}'
-    + '&caseID={/literal}{$caseID}{literal}'
-    + '&asn={/literal}' + asn + '{literal}';
-
-    window.location = dataUrl;
-  }
-</script>
-{/literal}
- </div><!-- /.crm-accordion-body -->
-</div><!-- /.crm-accordion-wrapper -->
-<div id="dialog">
-  {ts}Begin typing last name of contact.{/ts}<br/>
-  <input type="text" id="rel_contact"/>
-  <input type="hidden" id="rel_contact_id" value="">
-</div>
-
-{literal}
-<script type="text/javascript">
-  var selectedContact = '';
-  var caseID = {/literal}"{$caseID}"{literal};
-  var contactUrl = {/literal}"{crmURL p='civicrm/ajax/rest' q='className=CRM_Contact_Page_AJAX&fnName=getContactList&json=1&context=newcontact' h=0 }"{literal};
-  cj( "#change_client_id").autocomplete( contactUrl, { width : 250, selectFirst : false, matchContains:true
-  }).result( function(event, data, formatted) { cj( "#contact_id" ).val( data[1] ); selectedContact = data[0];
-    }).bind( 'click', function( ) { cj( "#contact_id" ).val(''); });
-
-  cj("#dialog").hide( );
-
-  function addClient( ) {
-    cj("#dialog").show( );
-
-    cj("#dialog").dialog({
-      title: "Add Client to the Case",
-      modal: true,
-      bgiframe: true,
-      close  : function(event, ui) { cj("#rel_contact").unautocomplete( ); },
-      overlay: { opacity: 0.5, background: "black" },
-
-      open:function() {
-      var contactUrl = {/literal}"{crmURL p='civicrm/ajax/rest' q='className=CRM_Contact_Page_AJAX&fnName=getContactList&json=1&context=caseview' h=0 }"{literal};
-        cj("#rel_contact").autocomplete( contactUrl, {
-          width: 260,
-          selectFirst: false,
-          matchContains: true
-        });
-
-        cj("#rel_contact").focus();
-        cj("#rel_contact").result(function(event, data, formatted) {
-          cj("input[id=rel_contact_id]").val(data[1]);
-        });
-      },
-
-      buttons: {
-      "Done": function() {
-        var postUrl = {/literal}"{crmURL p='civicrm/case/ajax/addclient' h=0 }"{literal};
-        var caseID        = {/literal}"{$caseID}"{literal};
-        var contactID = cj("#rel_contact_id").val( );
-
-        if ( !cj("#rel_contact").val( ) || !contactID ) {
-          cj("#rel_contact").crmError('{/literal}{ts escape="js"}Select valid contact from the list{/ts}{literal}.');
-          return false;
-        }
-        cj.post( postUrl, {contactID: contactID,caseID: caseID,
-          key: {/literal}"{crmKey name='civicrm/case/ajax/addclient'}"{literal} },
-          function( data ) {
-            //due to caching issues we use redirection rather than reload
-            document.location = {/literal}'{crmURL q="action=view&reset=1&id=$caseID&cid=$contactID&context=$context" h=0 }'{literal};
-          },
-          'json'
-        );
-        },
-
-        "Cancel": function() {
-          cj(this).dialog("close");
-          cj(this).dialog("destroy");
-        }
+    function buildCaseRoles(filterSearch) {
+      if(filterSearch) {
+        oTable.fnDestroy();
       }
-    });
-  }
-
-  function createRelationship( relType, contactID, relID, rowNumber, relTypeName ) {
-    cj("#dialog").show( );
-
-    cj("#dialog").dialog({
-      title: "Assign Case Role",
-      modal: true,
-      bgiframe: true,
-      close: function(event, ui) { cj("#rel_contact").unautocomplete( ); },
-      overlay: {
-        opacity: 0.5,
-        background: "black"
-      },
-
-      open:function() {
-        /* set defaults if editing */
-        cj("#rel_contact").val("");
-        cj("#rel_contact_id").val(null);
-        if (contactID) {
-          cj("#rel_contact_id").val(contactID);
-          var contactName = cj('#caseRoles-selector').find('tr :eq('+ rowNumber +')').children(':eq(1)').text();
-          cj("#rel_contact").val(contactName);
+      var count   = 0;
+      var columns = '';
+      var sourceUrl = {/literal}"{crmURL p='civicrm/ajax/caseroles' h=0 q='snippet=4&caseID='}{$caseID}"{literal};
+      sourceUrl = sourceUrl + '&cid={/literal}{$contactID}{literal}';
+      sourceUrl = sourceUrl + '&userID={/literal}{$userID}{literal}';
+
+      $('#caseRoles-selector-{/literal}{$caseID}{literal} th').each( function( ) {
+        if ( $(this).attr('id') != 'nosort' ) {
+          columns += '{"sClass": "' + $(this).attr('class') +'"},';
         }
-
-        var contactUrl = {/literal}"{crmURL p='civicrm/ajax/rest' q='className=CRM_Contact_Page_AJAX&fnName=getContactList&json=1&context=caseview' h=0 }"{literal};
-
-        cj("#rel_contact").autocomplete( contactUrl, {
-          width: 260,
-          selectFirst: false,
-          matchContains: true
-        });
-
-        cj("#rel_contact").focus();
-        cj("#rel_contact").result(function(event, data, formatted) {
-          cj("input[id=rel_contact_id]").val(data[1]);
-        });
-      },
-
-      buttons: {
-        "Ok": function() {
-
-          var sourceContact = {/literal}"{$contactID}"{literal};
-          var caseID        = {/literal}"{$caseID}"{literal};
-
-          var v1 = cj("#rel_contact_id").val( );
-
-          if ( !cj("#rel_contact").val( ) || !v1 ) {
-            cj("#rel_contact").crmError('{/literal}{ts escape="js"}Select valid contact from the list{/ts}{literal}.');
-            return false;
-          }
-
-          var postUrl = {/literal}"{crmURL p='civicrm/ajax/relation' h=0 }"{literal};
-          cj.post( postUrl, { rel_contact: v1, rel_type: relType, contact_id: sourceContact,
-            rel_id: relID, case_id: caseID, key: {/literal}"{crmKey name='civicrm/ajax/relation'}"{literal} },
-            function( data ) {
-              if ( data.status == 'process-relationship-success' ) {
-                // reloading datatable
-                var oTable = cj('#caseRoles-selector').dataTable();
-                oTable.fnDraw();
-              }
-              else {
-                // This is an awkward mix of smarty and javascript: the relTypeName variable is
-                // not available in smarty, could not find an i18n-correct way of doing this.
-                {/literal}
-                  {capture assign=relTypeAdminLink}{crmURL p='civicrm/admin/reltype' q='reset=1' h=0 }{/capture}
-                {literal}
-                var errorMsg = relTypeName + ': ' + '{/literal}{ts escape="js" 1="$relTypeAdminLink"}The relationship type definition for the case role is not valid for the client and / or staff contact types. You can review and edit relationship types at <a href="%1">Administer >> Option Lists >> Relationship Types</a>.{/ts}{literal}';
-
-                //display error message.
-                cj().crmError(errorMsg);
-              }
-            }, 'json'
-          );
-
-          cj(this).dialog("close");
-          cj(this).dialog("destroy");
-        },
-
-        "Cancel": function() {
-          cj(this).dialog("close");
-          cj(this).dialog("destroy");
+        else {
+          columns += '{ "bSortable": false },';
         }
-      }
-    });
-  }
-
-  function viewRelatedCases( mainCaseID, contactID ) {
-    cj("#view-related-cases").show( );
-    cj("#view-related-cases").dialog({
-      title: "Related Cases",
-      modal: true,
-      width : "680px",
-      height: 'auto',
-      resizable: true,
-      bgiframe: true,
-      overlay: {
-        opacity: 0.5,
-        background: "black"
-      },
-
-      beforeclose: function(event, ui) {
-        cj(this).dialog("destroy");
-      },
-
-      open:function() {
-        var dataUrl = {/literal}"{crmURL p='civicrm/contact/view/case' h=0 q="snippet=4" }"{literal};
-          dataUrl = dataUrl + '&id=' + mainCaseID + '&cid=' +contactID + '&relatedCases=true&action=view&context=case&selectedChild=case';
+        count++;
+      });
 
-          cj.ajax({
-            url     : dataUrl,
-            async   : false,
-            success : function(html){
-              cj("#related-cases-content" ).html( html );
-            }
+      columns    = columns.substring(0, columns.length - 1 );
+      eval('columns =[' + columns + ']');
+
+      oTable = $('#caseRoles-selector-{/literal}{$caseID}{literal}').dataTable({
+        "bFilter"    : false,
+        "bAutoWidth" : false,
+        "aaSorting"  : [],
+        "aoColumns"  : columns,
+        "bProcessing": true,
+        "bJQueryUI": true,
+        "asStripClasses" : [ "odd-row", "even-row" ],
+        "sPaginationType": "full_numbers",
+        "sDom"       : '<"crm-datatable-pager-top"lfp>rt<"crm-datatable-pager-bottom"ip>',
+        "bServerSide": true,
+        "sAjaxSource": sourceUrl,
+        "iDisplayLength": 10,
+        "fnDrawCallback": function() { setCaseRolesSelectorClass(); },
+        "fnServerData": function ( sSource, aoData, fnCallback ) {
+          $.ajax({
+            "dataType": 'json',
+            "type": "POST",
+            "url": sSource,
+            "data": aoData,
+            "success": fnCallback
           });
-        },
-
-      buttons: {
-        "Done": function() {
-          cj(this).dialog("close");
-          cj(this).dialog("destroy");
         }
-      }
-    });
-  }
+      });
+    }
 
-cj(function(){
-   cj("#view-activity").hide( );
-});
+    function setCaseRolesSelectorClass( ) {
+      $("#caseRoles-selector-{/literal}{$caseID}{literal} td:last-child").each( function( ) {
+        $(this).parent().addClass($(this).text() );
+      });
+    }
+  });
 </script>
 {/literal}
+ </div><!-- /.crm-accordion-body -->
+</div><!-- /.crm-accordion-wrapper -->
 
   {if $hasAccessToAllCases}
   <div class="crm-accordion-wrapper collapsed crm-case-other-relationships-block">
@@ -492,13 +250,13 @@ cj(function(){
       {ts}Other Relationships{/ts}
     </div><!-- /.crm-accordion-header -->
     <div class="crm-accordion-body">
-
+      {capture assign=relUrl}{crmURL p='civicrm/contact/view/rel' q="action=add&reset=1&cid=`$contactId`&caseID=`$caseID`"}{/capture}
       {if $clientRelationships}
         <div class="crm-submit-buttons">
-          <a class="button" href="#" onClick="window.location='{crmURL p='civicrm/contact/view/rel' q="action=add&reset=1&cid=`$contactId`&caseID=`$caseID`"}'; return false;">
-          <span><div class="icon add-icon"></div>{ts}Add client relationship{/ts}</a></span>
+          <a class="button" href="{$relUrl}">
+          <div class="icon add-icon"></div>{ts}Add client relationship{/ts}</a>
         </div>
-        <table id="clientRelationships-selector"  class="report-layout">
+        <table id="clientRelationships-selector-{$caseID}"  class="report-layout">
           <thead><tr>
             <th>{ts}Client Relationship{/ts}</th>
             <th>{ts}Name{/ts}</th>
@@ -509,266 +267,158 @@ cj(function(){
         {else}
         <div class="messages status no-popup">
           <div class="icon inform-icon"></div>
-          {capture assign=crmURL}{crmURL p='civicrm/contact/view/rel' q="action=add&reset=1&cid=`$contactId`&caseID=`$caseID`"}{/capture}
-          {ts 1=$crmURL}There are no Relationships entered for this client. You can <a accesskey="N" href='%1'>add one</a>.{/ts}
+          {capture assign=link}class="action-item" href="{$relUrl}"{/capture}
+          {ts 1=$link}There are no Relationships entered for this client. You can <a %1>add one</a>.{/ts}
         </div>
       {/if}
  {literal}
  <script type="text/javascript">
-   cj(function( ) {
-      buildCaseClientRelationships(false);
-   });
-
- function buildCaseClientRelationships(filterSearch) {
-   if (filterSearch) {
-     oTable.fnDestroy();
+   CRM.$(function($) {
+   buildCaseClientRelationships(false);
+   function buildCaseClientRelationships(filterSearch) {
+     if (filterSearch) {
+       oTable.fnDestroy();
+     }
+     var count   = 0;
+     var columns = '';
+     var sourceUrl = {/literal}"{crmURL p='civicrm/ajax/clientrelationships' h=0 q='snippet=4&caseID='}{$caseID}"{literal};
+     sourceUrl = sourceUrl + '&cid={/literal}{$contactID}{literal}';
+     sourceUrl = sourceUrl + '&userID={/literal}{$userID}{literal}';
+
+     $('#clientRelationships-selector-{/literal}{$caseID}{literal} th').each( function( ) {
+       if ( $(this).attr('id') != 'nosort' ) {
+         columns += '{"sClass": "' + $(this).attr('class') +'"},';
+       }
+       else {
+         columns += '{ "bSortable": false },';
+       }
+       count++;
+     });
+
+     columns    = columns.substring(0, columns.length - 1 );
+     eval('columns =[' + columns + ']');
+
+     oTable = $('#clientRelationships-selector-{/literal}{$caseID}{literal}').dataTable({
+       "bFilter"    : false,
+       "bAutoWidth" : false,
+       "aaSorting"  : [],
+       "aoColumns"  : columns,
+       "bProcessing": true,
+       "bJQueryUI": true,
+       "asStripClasses" : [ "odd-row", "even-row" ],
+       "sPaginationType": "full_numbers",
+       "sDom"       : '<"crm-datatable-pager-top"lfp>rt<"crm-datatable-pager-bottom"ip>',
+       "bServerSide": true,
+       "sAjaxSource": sourceUrl,
+       "iDisplayLength": 10,
+       "fnDrawCallback": function() { setClientRelationshipsSelectorClass(); },
+       "fnServerData": function (sSource, aoData, fnCallback) {
+         $.ajax( {
+           "dataType": 'json',
+           "type": "POST",
+           "url": sSource,
+           "data": aoData,
+           "success": fnCallback
+         });
+       }
+     });
    }
-   var count   = 0;
-   var columns = '';
-   var sourceUrl = {/literal}"{crmURL p='civicrm/ajax/clientrelationships' h=0 q='snippet=4&caseID='}{$caseID}"{literal};
-   sourceUrl = sourceUrl + '&cid={/literal}{$contactID}{literal}';
-   sourceUrl = sourceUrl + '&userID={/literal}{$userID}{literal}';
-
-    cj('#clientRelationships-selector th').each( function( ) {
-      if ( cj(this).attr('id') != 'nosort' ) {
-        columns += '{"sClass": "' + cj(this).attr('class') +'"},';
-      }
-      else {
-        columns += '{ "bSortable": false },';
-      }
-      count++;
-    });
-
-    columns    = columns.substring(0, columns.length - 1 );
-    eval('columns =[' + columns + ']');
 
-    oTable = cj('#clientRelationships-selector').dataTable({
-      "bFilter"    : false,
-      "bAutoWidth" : false,
-      "aaSorting"  : [],
-      "aoColumns"  : columns,
-      "bProcessing": true,
-      "bJQueryUI": true,
-      "asStripClasses" : [ "odd-row", "even-row" ],
-      "sPaginationType": "full_numbers",
-      "sDom"       : '<"crm-datatable-pager-top"lfp>rt<"crm-datatable-pager-bottom"ip>',
-      "bServerSide": true,
-      "sAjaxSource": sourceUrl,
-      "iDisplayLength": 10,
-      "fnDrawCallback": function() { setClientRelationshipsSelectorClass(); },
-      "fnServerData": function (sSource, aoData, fnCallback) {
-        cj.ajax( {
-          "dataType": 'json',
-          "type": "POST",
-          "url": sSource,
-          "data": aoData,
-          "success": fnCallback
-        } );
-      }
-    });
- }
-
-  function setClientRelationshipsSelectorClass( ) {
-    cj("#clientRelationships-selector td:last-child").each(function() {
-      cj(this).parent().addClass(cj(this).text());
-    });
-  }
+   function setClientRelationshipsSelectorClass( ) {
+     $("#clientRelationships-selector-{/literal}{$caseID}{literal} td:last-child").each(function() {
+       $(this).parent().addClass($(this).text());
+      });
+    }
+  });
  </script>
  {/literal}
   <br />
-
-  {if $globalRelationships}
+  {if !empty($globalGroupInfo.id)}
     <div class="crm-submit-buttons">
-      <a class="button" href="#"  onClick="window.location='{crmURL p='civicrm/group/search' q="reset=1&context=amtg&amtgID=`$globalGroupInfo.id`"}'; return false;">
-      <span><div class="icon add-icon"></div>{ts 1=$globalGroupInfo.title}Add members to %1{/ts}</a></span>
+      <a class="button case-miniform" href="#addMembersToGroupDialog" rel="#globalRelationships-selector-{$caseId}" data-group_id="{$globalGroupInfo.id}">
+        <div class="icon add-icon"></div>{ts 1=$globalGroupInfo.title}Add members to %1{/ts}
+      </a>
     </div>
-    <table id="globalRelationships-selector"  class="report-layout">
+    <div id="addMembersToGroupDialog" class="hiddenElement">
+      <input name="add_member_to_group_contact_id" placeholder="{ts}- select contacts -{/ts}" class="huge" />
+    </div>
+    <table id="globalRelationships-selector-{$caseId}"  class="report-layout">
       <thead><tr>
         <th>{$globalGroupInfo.title}</th>
         <th>{ts}Phone{/ts}</th>
         <th>{ts}Email{/ts}</th>
       </tr></thead>
     </table>
-    {elseif $globalGroupInfo.id}
-    <div class="messages status no-popup">
-      <div class="icon inform-icon"></div>&nbsp;
-      {capture assign=crmURL}{crmURL p='civicrm/group/search' q="reset=1&context=amtg&amtgID=`$globalGroupInfo.id`"}{/capture}
-      {ts 1=$crmURL 2=$globalGroupInfo.title}The group %2 has no members. You can <a href='%1'>add one</a>.{/ts}
-    </div>
   {/if}
 
  {literal}
  <script type="text/javascript">
-
- cj(function() {
-    buildCaseGlobalRelationships(false);
- });
-
- function buildCaseGlobalRelationships(filterSearch) {
-   if (filterSearch) {
-     oTable.fnDestroy();
-   }
-   var count   = 0;
-   var columns = '';
-   var sourceUrl = {/literal}"{crmURL p='civicrm/ajax/globalrelationships' h=0 q='snippet=4&caseID='}{$caseID}"{literal};
-   sourceUrl = sourceUrl + '&cid={/literal}{$contactID}{literal}';
-   sourceUrl = sourceUrl + '&userID={/literal}{$userID}{literal}';
-
-    cj('#globalRelationships-selector th').each( function( ) {
-      if (cj(this).attr('id') != 'nosort') {
-        columns += '{"sClass": "' + cj(this).attr('class') +'"},';
-      }
-      else {
-        columns += '{ "bSortable": false },';
-      }
-      count++;
-    });
-
-    columns    = columns.substring(0, columns.length - 1 );
-    eval('columns =[' + columns + ']');
-
-    oTable = cj('#globalRelationships-selector').dataTable({
-      "bFilter"    : false,
-      "bAutoWidth" : false,
-      "aaSorting"  : [],
-      "aoColumns"  : columns,
-      "bProcessing": true,
-      "bJQueryUI": true,
-      "asStripClasses" : [ "odd-row", "even-row" ],
-      "sPaginationType": "full_numbers",
-      "sDom"       : '<"crm-datatable-pager-top"lfp>rt<"crm-datatable-pager-bottom"ip>',
-      "bServerSide": true,
-      "sAjaxSource": sourceUrl,
-      "iDisplayLength": 10,
-      "fnDrawCallback": function() { setGlobalRelationshipsSelectorClass(); },
-      "fnServerData": function ( sSource, aoData, fnCallback ) {
-        cj.ajax( {
-          "dataType": 'json',
-          "type": "POST",
-          "url": sSource,
-          "data": aoData,
-          "success": fnCallback
-        } );
-      }
-    });
- }
-
-  function setGlobalRelationshipsSelectorClass( ) {
-    cj("#globalRelationships-selector td:last-child").each( function( ) {
-      cj(this).parent().addClass(cj(this).text() );
-    });
-  }
+   CRM.$(function($) {
+     buildCaseGlobalRelationships(false);
+     function buildCaseGlobalRelationships(filterSearch) {
+       if (filterSearch) {
+         oTable.fnDestroy();
+       }
+       var count   = 0;
+       var columns = '';
+       var sourceUrl = {/literal}"{crmURL p='civicrm/ajax/globalrelationships' h=0 q='snippet=4&caseID='}{$caseID}"{literal};
+       sourceUrl = sourceUrl + '&cid={/literal}{$contactID}{literal}';
+       sourceUrl = sourceUrl + '&userID={/literal}{$userID}{literal}';
+
+       $('#globalRelationships-selector-{/literal}{$caseID}{literal} th').each( function( ) {
+         if ($(this).attr('id') != 'nosort') {
+           columns += '{"sClass": "' + $(this).attr('class') +'"},';
+         }
+         else {
+           columns += '{ "bSortable": false },';
+         }
+         count++;
+       });
+
+       columns    = columns.substring(0, columns.length - 1 );
+       eval('columns =[' + columns + ']');
+
+       oTable = $('#globalRelationships-selector-{/literal}{$caseID}{literal}').dataTable({
+         "bFilter"    : false,
+         "bAutoWidth" : false,
+         "aaSorting"  : [],
+         "aoColumns"  : columns,
+         "bProcessing": true,
+         "bJQueryUI": true,
+         "asStripClasses" : [ "odd-row", "even-row" ],
+         "sPaginationType": "full_numbers",
+         "sDom"       : '<"crm-datatable-pager-top"lfp>rt<"crm-datatable-pager-bottom"ip>',
+         "bServerSide": true,
+         "sAjaxSource": sourceUrl,
+         "iDisplayLength": 10,
+         "fnDrawCallback": function() { setGlobalRelationshipsSelectorClass(); },
+         "oLanguage": {
+           "sEmptyTable": {/literal}'{ts escape='js' 1=$globalGroupInfo.title}The group %1 has no members.{/ts}'{literal}
+         },
+         "fnServerData": function ( sSource, aoData, fnCallback ) {
+           $.ajax( {
+             "dataType": 'json',
+             "type": "POST",
+             "url": sSource,
+             "data": aoData,
+             "success": fnCallback
+           });
+         }
+       });
+     }
+
+     function setGlobalRelationshipsSelectorClass( ) {
+       $("#globalRelationships-selector-{/literal}{$caseID}{literal} td:last-child").each( function( ) {
+         $(this).parent().addClass($(this).text() );
+       });
+     }
+   });
  </script>
  {/literal}
  </div><!-- /.crm-accordion-body -->
 </div><!-- /.crm-accordion-wrapper -->
 
 {/if} {* other relationship section ends *}
-
-<div id="addRoleDialog">
-{$form.role_type.label}<br />
-{$form.role_type.html}
-<br /><br />
-    {ts}Begin typing last name of contact.{/ts}<br/>
-    <input type="text" id="role_contact"/>
-    <input type="hidden" id="role_contact_id" value="">
-</div>
-
-{literal}
-<script type="text/javascript">
-
-cj("#addRoleDialog").hide( );
-function addRole() {
-  cj("#addRoleDialog").show( );
-
-  cj("#addRoleDialog").dialog({
-    title: "Add Role",
-    modal: true,
-    bgiframe: true,
-    close: function(event, ui) { cj("#role_contact").unautocomplete( ); },
-    overlay: {
-      opacity: 0.5,
-      background: "black"
-    },
-
-    open:function() {
-      /* set defaults if editing */
-      cj("#role_contact").val( "" );
-      cj("#role_contact_id").val( null );
-
-      var contactUrl = {/literal}"{crmURL p='civicrm/ajax/rest' q='className=CRM_Contact_Page_AJAX&fnName=getContactList&json=1&context=caseview' h=0 }"{literal};
-
-      cj("#role_contact").autocomplete( contactUrl, {
-        width: 260,
-        selectFirst: false,
-        matchContains: true
-      });
-
-      cj("#role_contact").focus();
-      cj("#role_contact").result(function(event, data, formatted) {
-        cj("input[id=role_contact_id]").val(data[1]);
-      });
-    },
-
-    buttons: {
-      "Ok": function() {
-        var sourceContact = {/literal}"{$contactID}"{literal};
-        var caseID        = {/literal}"{$caseID}"{literal};
-        var relID         = null;
-
-        var v2 = cj("#role_type").val();
-        if (!v2) {
-          cj("#role_type").crmError('{/literal}{ts escape="js"}Select valid type from the list{/ts}{literal}.');
-          return false;
-        }
-
-        var v1 = cj("#role_contact_id").val( );
-        if (!cj("#role_contact").val( ) || !v1) {
-          cj("#role_contact").crmError('{/literal}{ts escape="js"}Select valid contact from the list{/ts}{literal}.');
-          return false;
-        }
-
-        /* send synchronous request so that disabling any actions for slow servers*/
-        var postUrl = {/literal}"{crmURL p='civicrm/ajax/relation' h=0 }"{literal};
-        var data = 'rel_contact='+ v1 + '&rel_type='+ v2 + '&contact_id='+sourceContact + '&rel_id='+ relID
-          + '&case_id=' + caseID + "&key={/literal}{crmKey name='civicrm/ajax/relation'}{literal}";
-        cj.ajax({
-          type     : "POST",
-          url      : postUrl,
-          data     : data,
-          async    : false,
-          dataType : "json",
-          success  : function(values) {
-            if (values.status == 'process-relationship-success') {
-              // reloading datatable
-              var oTable = cj('#caseRoles-selector').dataTable();
-              oTable.fnDraw();
-            }
-            else {
-              var relTypeName = cj("#role_type :selected").text();
-              var relTypeAdminLink = {/literal}"{crmURL p='civicrm/admin/reltype' q='reset=1' h=0 }"{literal};
-              var errorMsg = '{/literal}{ts escape="js" 1="' + relTypeName + '" 2="' + relTypeAdminLink + '"}The relationship type definition for the %1 case role is not valid for the client and / or staff contact types. You can review and edit relationship types at <a href="%2">Administer >> Option Lists >> Relationship Types</a>{/ts}{literal}.';
-
-              //display error message.
-              cj().crmError(errorMsg);
-            }
-          }
-        });
-
-        cj(this).dialog("close");
-        cj(this).dialog("destroy");
-      },
-
-      "Cancel": function() {
-        cj(this).dialog("close");
-        cj(this).dialog("destroy");
-      }
-    }
-  });
-}
-
-</script>
-{/literal}
 {include file="CRM/Case/Form/ActivityToCase.tpl"}
 
 {* pane to display / edit regular tags or tagsets for cases *}
@@ -781,11 +431,11 @@ function addRole() {
  <div class="crm-accordion-body">
   {assign var="tagExits" value=0}
   {if $tags}
-    <div class="crm-block crm-content-block crm-case-caseview-display-tags">{$tags}</div>
+    <div class="crm-block crm-content-block crm-case-caseview-display-tags">&nbsp;&nbsp;{$tags}</div>
     {assign var="tagExits" value=1}
   {/if}
 
-   {foreach from=$tagsetInfo_case item=displayTagset}
+   {foreach from=$tagsetInfo.case item=displayTagset}
      {if $displayTagset.entityTagsArray}
        <div class="crm-block crm-content-block crm-case-caseview-display-tagset">
          &nbsp;&nbsp;{$displayTagset.parentName}:
@@ -803,327 +453,30 @@ function addRole() {
      </div>
    {/if}
 
-  <div class="crm-submit-buttons"><input type="button" class="form-submit" onClick="javascript:addTags()" value={if $tagExits}"{ts}Edit Tags{/ts}"{else}"{ts}Add Tags{/ts}"{/if} /></div>
+  <div class="crm-submit-buttons">
+    <a class="button case-miniform" href="#manageTagsDialog" data-key="{crmKey name='civicrm/case/ajax/processtags'}">{if $tagExits}{ts}Edit Tags{/ts}{else}{ts}Add Tags{/ts}{/if}</a>
+  </div>
 
  </div><!-- /.crm-accordion-body -->
 </div><!-- /.crm-accordion-wrapper -->
 
-<div id="manageTags">
+<div id="manageTagsDialog" class="hiddenElement">
   <div class="label">{$form.case_tag.label}</div>
   <div class="view-value"><div class="crm-select-container">{$form.case_tag.html}</div>
     <br/>
-    <div style="text-align:left;">{include file="CRM/common/Tag.tpl" tagsetType='case'}</div>
+    <div style="text-align:left;">{include file="CRM/common/Tagset.tpl" tagsetType='case'}</div>
     <br/>
     <div class="clear"></div>
   </div>
 </div>
 
-{literal}
-<script type="text/javascript">
-cj("#manageTags select[multiple]").crmasmSelect({
-  addItemTarget: 'bottom',
-  animate: true,
-  highlight: true,
-  sortable: true,
-  respectParents: true
-});
-
-cj("#manageTags").hide( );
-function addTags() {
-  cj("#manageTags").show( );
-
-  cj("#manageTags").dialog({
-    title: "{/literal}{ts escape='js'}Change Case Tags{/ts}{literal}",
-    modal: true,
-    height: 'auto',
-    width: 'auto',
-    buttons: {
-      "Save": function() {
-        var tagsChecked = '';
-        var caseID      = {/literal}{$caseID}{literal};
-
-        cj("#manageTags #tags option").each( function() {
-          if (cj(this).prop('selected')) {
-            if (!tagsChecked) {
-              tagsChecked = cj(this).val() + '';
-            }
-            else {
-              tagsChecked = tagsChecked + ',' + cj(this).val();
-            }
-          }
-        });
-
-        var tagList = '';
-        cj("#manageTags input[name^=case_taglist]").each(function( ) {
-          if (!tagsChecked) {
-            tagsChecked = cj(this).val() + '';
-          }
-          else {
-            tagsChecked = tagsChecked + ',' + cj(this).val();
-          }
-        });
-
-        var postUrl = {/literal}"{crmURL p='civicrm/case/ajax/processtags' h=0 }"{literal};
-        var data = 'case_id=' + caseID + '&tag=' + tagsChecked + '&key=' + {/literal}"{crmKey name='civicrm/case/ajax/processtags'}"{literal};
-
-        cj.ajax({ type: "POST", url: postUrl, data: data, async: false });
-        cj(this).dialog("close");
-        cj(this).dialog("destroy");
-
-        // Temporary workaround for problems with SSL connections being too
-        // slow. The relationship doesn't get created because the page reload
-        // happens before the ajax call.
-        // In general this reload needs improvement, which is already on the list for phase 2.
-        var sdate = (new Date()).getTime();
-        var curDate = sdate;
-        while(curDate-sdate < 2000) {
-          curDate = (new Date()).getTime();
-        }
-
-        //due to caching issues we use redirection rather than reload
-        document.location = {/literal}'{crmURL q="action=view&reset=1&id=$caseID&cid=$contactID&context=$context" h=0 }'{literal};
-      },
-
-      "Cancel": function() {
-        cj(this).dialog("close");
-        cj(this).dialog("destroy");
-      }
-    }
-  });
-}
-
-</script>
-{/literal}
-
 {/if} {* end of tag block*}
 
-{*include activity view js file*}
-{include file="CRM/common/activityView.tpl"}
-
-<div class="crm-accordion-wrapper crm-case_activities-accordion  crm-case-activities-block">
-  <div class="crm-accordion-header">
-    {ts}Activities{/ts}
-  </div>
-  <div id="activities" class="crm-accordion-body">
-    <div id="view-activity">
-      <div id="activity-content"></div>
-    </div>
-    <div class="crm-accordion-wrapper crm-accordion-inner crm-search_filters-accordion collapsed">
-      <div class="crm-accordion-header">
-        {ts}Search Filters{/ts}</a>
-      </div><!-- /.crm-accordion-header -->
-      <div class="crm-accordion-body">
-        <table class="no-border form-layout-compressed" id="searchOptions">
-          <tr>
-            <td class="crm-case-caseview-form-block-repoter_id"colspan="2"><label for="reporter_id">{ts}Reporter/Role{/ts}</label><br />
-              {$form.reporter_id.html|crmAddClass:twenty}
-            </td>
-            <td class="crm-case-caseview-form-block-status_id"><label for="status_id">{$form.status_id.label}</label><br />
-              {$form.status_id.html}
-            </td>
-            <td style="vertical-align: bottom;">
-              <span class="crm-button"><input class="form-submit default" name="_qf_Basic_refresh" value="Search" type="button" onclick="buildCaseActivities( true )"; /></span>
-            </td>
-          </tr>
-          <tr>
-            <td class="crm-case-caseview-form-block-activity_date_low">
-              {$form.activity_date_low.label}<br />
-            {include file="CRM/common/jcalendar.tpl" elementName=activity_date_low}
-            </td>
-            <td class="crm-case-caseview-form-block-activity_date_high">
-              {$form.activity_date_high.label}<br />
-            {include file="CRM/common/jcalendar.tpl" elementName=activity_date_high}
-            </td>
-            <td class="crm-case-caseview-form-block-activity_type_filter_id">
-              {$form.activity_type_filter_id.label}<br />
-              {$form.activity_type_filter_id.html}
-            </td>
-          </tr>
-          {if $form.activity_deleted}
-            <tr class="crm-case-caseview-form-block-activity_deleted">
-              <td>
-                {$form.activity_deleted.html}{$form.activity_deleted.label}
-              </td>
-            </tr>
-          {/if}
-        </table>
-      </div><!-- /.crm-accordion-body -->
-    </div><!-- /.crm-accordion-wrapper -->
-
-    <table id="activities-selector"  class="nestedActivitySelector">
-      <thead><tr>
-        <th class='crm-case-activities-date'>{ts}Date{/ts}</th>
-        <th class='crm-case-activities-subject'>{ts}Subject{/ts}</th>
-        <th class='crm-case-activities-type'>{ts}Type{/ts}</th>
-        <th class='crm-case-activities-with'>{ts}With{/ts}</th>
-        <th class='crm-case-activities-assignee'>{ts}Reporter / Assignee{/ts}</th>
-        <th class='crm-case-activities-status'>{ts}Status{/ts}</th>
-        <th class='crm-case-activities-status' id="nosort">&nbsp;</th>
-        <th class='hiddenElement'>&nbsp;</th>
-      </tr></thead>
-    </table>
-
-  </div><!-- /.crm-accordion-body -->
-</div><!-- /.crm-accordion-wrapper -->
-
-{literal}
-<script type="text/javascript">
-var oTable;
-
-function checkSelection( field ) {
-  var validationMessage = '';
-  var validationField   = '';
-  var successAction     = '';
-  var forceValidation   = false;
-
-  var clientName = new Array( );
-  clientName = selectedContact.split('::');
-  var fName = field.name;
-
-  switch ( fName )  {
-  case '_qf_CaseView_next' :
-    validationMessage = '{/literal}{ts escape="js"}Please select an activity set from the list.{/ts}{literal}';
-    validationField   = 'timeline_id';
-    successAction     = "confirm('{/literal}{ts escape='js'}Are you sure you want to add a set of scheduled activities to this case?{/ts}{literal}');";
-    break;
-
-  case 'new_activity' :
-    validationMessage = '{/literal}{ts escape="js"}Please select an activity type from the list.{/ts}{literal}';
-    validationField   = 'activity_type_id';
-    if ( document.getElementById('activity_type_id').value == 3 ) {
-      successAction = "window.location='{/literal}{$newActivityEmailUrl}{literal}' + document.getElementById('activity_type_id').value";
-    }
-    else {
-      successAction = "window.location='{/literal}{$newActivityUrl}{literal}' + document.getElementById('activity_type_id').value";
-    }
-    break;
-
-  case 'case_report' :
-    validationMessage = '{/literal}{ts escape="js"}Please select a report from the list.{/ts}{literal}';
-    validationField   = 'report_id';
-    successAction     = "window.location='{/literal}{$reportUrl}{literal}' + document.getElementById('report_id').value";
-    break;
-
-  case '_qf_CaseView_next_merge_case' :
-    validationMessage = '{/literal}{ts escape="js"}Please select a case from the list to merge with.{/ts}{literal}';
-    validationField   = 'merge_case_id';
-    break;
-
-  case '_qf_CaseView_next_edit_client' :
-    validationMessage = '{/literal}{ts escape="js"}Please select a client for this case.{/ts}{literal}';
-    if ( cj('#contact_id').val( ) == '{/literal}{$contactID}{literal}' ) {
-      forceValidation = true;
-      validationMessage = '{/literal}{ts 1="'+clientName[0]+'"}%1 is already assigned to this case. Please select some other client for this case.{/ts}{literal}';
-    }
-    validationField   = 'change_client_id';
-    successAction     = "confirm( '{/literal}{ts 1="'+clientName[0]+'"}Are you sure you want to reassign this case and all related activities and relationships to %1?{/ts}{literal}' )";
-    break;
-  }
-
-  if ( forceValidation || ( document.getElementById( validationField ).value == '' ) ) {
-    cj('#'+validationField).crmError(validationMessage);
-    return false;
-  }
-  else if ( successAction ) {
-    return eval( successAction );
-  }
-}
-
-cj(function( ) {
-  buildCaseActivities(false);
-});
-
-function buildCaseActivities(filterSearch) {
-  if (filterSearch) {
-    oTable.fnDestroy();
-  }
-  var count   = 0;
-  var columns = '';
-  var sourceUrl = {/literal}"{crmURL p='civicrm/ajax/activity' h=0 q='snippet=4&caseID='}{$caseID}"{literal};
-  sourceUrl = sourceUrl + '&cid={/literal}{$contactID}{literal}';
-  sourceUrl = sourceUrl + '&userID={/literal}{$userID}{literal}';
-
-  cj('#activities-selector th').each(function( ) {
-    if (cj(this).attr('id') != 'nosort') {
-      columns += '{"sClass": "' + cj(this).attr('class') +'"},';
-    }
-    else {
-      columns += '{ "bSortable": false },';
-    }
-    count++;
-  });
-
-  columns    = columns.substring(0, columns.length - 1 );
-  eval('columns =[' + columns + ']');
-
-  oTable = cj('#activities-selector').dataTable({
-    "bFilter"    : false,
-    "bAutoWidth" : false,
-    "aaSorting"  : [],
-    "aoColumns"  : columns,
-    "bProcessing": true,
-    "bJQueryUI": true,
-    "asStripClasses" : [ "odd-row", "even-row" ],
-    "sPaginationType": "full_numbers",
-    "sDom"       : '<"crm-datatable-pager-top"lfp>rt<"crm-datatable-pager-bottom"ip>',
-    "bServerSide": true,
-    "sAjaxSource": sourceUrl,
-    "iDisplayLength": 10,
-    "fnDrawCallback": function() { setSelectorClass(); },
-    "fnServerData": function ( sSource, aoData, fnCallback ) {
-
-      if ( filterSearch ) {
-        var activity_deleted = 0;
-        if ( cj("#activity_deleted:checked").val() == 1 ) {
-          activity_deleted = 1;
-        }
-        aoData.push(
-          {name:'status_id', value: cj("select#status_id").val()},
-          {name:'activity_type_id', value: cj("select#activity_type_filter_id").val()},
-          {name:'activity_date_low', value: cj("#activity_date_low").val()},
-          {name:'activity_date_high', value: cj("#activity_date_high").val() },
-          {name:'activity_deleted', value: activity_deleted }
-        );
-      }
-      cj.ajax( {
-        "dataType": 'json',
-        "type": "POST",
-        "url": sSource,
-        "data": aoData,
-        "success": fnCallback
-      } );
-    }
-  });
-}
-
-function setSelectorClass( ) {
-  cj("#activities-selector td:last-child").each( function( ) {
-    cj(this).parent().addClass(cj(this).text() );
-  });
-}
-
-function printCaseReport( ) {
-  var asn = 'standard_timeline';
-  var dataUrl = {/literal}"{crmURL p='civicrm/case/report/print' q='all=1&redact=0' h='0'}"{literal};
-  dataUrl     = dataUrl + '&cid={/literal}{$contactID}{literal}'
-  + '&caseID={/literal}{$caseID}{literal}'
-  + '&asn={/literal}' + asn + '{literal}';
-
-  window.location = dataUrl;
-}
-
-</script>
-{/literal}
+{include file="CRM/Case/Form/ActivityTab.tpl"}
 
 <div class="crm-submit-buttons">{include file="CRM/common/formButtons.tpl" location="bottom"}</div>
 
-{literal}
-<script type="text/javascript">
-  cj(function() {
-    cj().crmAccordions();
-  });
-</script>
-{/literal}
-
+  {include file="CRM/Case/Form/ActivityChangeStatusJs.tpl"}
 {/if} {* view related cases if end *}
 </div>
+