function fnFormatDetails (oTableQuery, nTrQuery, data )
{
    var aDataQuery = oTableQuery.fnGetData( nTrQuery );
  //  var rowIndexQuery =  parseInt(aDataQuery[1])-1;//get the index of the clicked row from index-column text value - which is 1 based
    return buildProjectTreeViewChildrenContent(data);
}

function Active(indicator){
    return indicator > 0? 'No':'Yes';
}

function loadTree(){
    var projectname = sessionStorage.getItem('projectname');
    var projectPriority =  sessionStorage.getItem('projectpriority');
    var status = sessionStorage.getItem('status');   
    if (projectname!==null || projectPriority !==null || status!==null){
        $("#txtSearch").val(projectname.trim());
        $("#priorityTxt").val(projectPriority.trim());
        $("#statusOpt").val(status.trim()).change();
       searchProjects(projectname.trim(),projectPriority.trim(),status.trim());
    }
    else{
       getTreeViewProjects();
    }
}

function loadContentData(data){
   sessionStorage.setItem('projects', JSON.stringify(data));
   var contentBody = document.getElementById("contentBody");
   contentBody.innerHTML = buildProjectTreeViewMainContent(data);
   RunTableBuilder(); 
}

function getTreeViewProjects(){
    $.ajax({               
       headers: { 
            'Accept': 'application/json',
            'Content-Type': 'application/json' 
          },
        Accept : "application/json",
        contentType: "application/json",
         method: "GET",
         url: "projects/treeviewprojects",
         dataType:'json',

          success: function(data) {
           loadContentData(data);
          },
           error: function(xhr,err,thrownError){
                alert("Error: "+err +
                        "\nResponse Text: "+xhr.responseText +
                        "\nMessage: "+thrownError +
                         "\nready State: "+xhr.readyState +
                        "\nStatus: "+xhr.status);
           }
     });        
            
        }
       
 function buildProjectTreeViewMainContent(data){
    var queryTblRows = ''; 
        for(i = 0; i < data.length; i++){
           var project =  data[i];
            if (project.children > 0){
                queryTblRows +=  "<tr style='background:#CDF1FE'>";
                }else{
                queryTblRows +=  "<tr>";
            }
            var projectId = i+1
            queryTblRows += "<td>#</td>" +
                            "<td>"+ projectId +"</td>"+
                            "<td>" +
                            "<a style=\"cursor:pointer\" href=\"projects/id/"+ project.id +"\"><b>"+ project.name +"</b></a>" +
                            "<br/>" +
                            "<small>"+ project.createdDate +" by "+ project.createdBy +"</small>" +
                            "</td>" +
                            "<td>" + project.resources.length 
                            +"</td>"
                            +"<td>"+ project.systems.length

                var taskProgress = 0;
                if(project.systems != null){
                   for(j = 0; j < project.tasks.length; j++){
                       var task = project.tasks[j];
                        if(task.status === 2){
                           complete = complete +1;
                      }
                    }
               }
                if(project.tasks != null && project.tasks.length > 0){
                 taskProgress =  (complete)/(project.tasks.length)*100;
                }else{
                    taskProgress = 0;
                }
//                                                        queryTblRows += "</ul>"
                queryTblRows+= "</td>" 
                               +"<td class=\"project_progress\">"
                               +"<div class=\"progress progress_sm\">"
                               +"<div class=\"progress-bar bg-green\" role=\"progressbar\" data-transitiongoal="+ taskProgress +"></div>"
                               +"</div>"
                               +"<small>"+ taskProgress +"% Complete</small>"
                               +"</td>"
                               +"<td>";
               var btnStatus = '';
               var status = '';
               switch(taskProgress){
                   case 0: 
                        btnStatus="danger";
                        status="Not Started";
                        break;
                   case 100:
                        btnStatus="success";
                        status="Complete";
                        break;
                   default:
                       btnStatus="warning";
                       status="In Progress";
               }

                queryTblRows += "<button type=\"button\" class=\"btn btn-"+ btnStatus+" btn-xs\">"+status.toUpperCase()+"</button>"
                                +"</td>"
                                +"<td>"
                                + Active(project.deactivate)
                                +"</td>";

                if (project.deactivate > 0){
                    queryTblRows +=  "<td>"
                        +"<a onclick='confirmDeactivate("+ project.id +",\""+ project.name +"\",$.cookie(\"userData\"),false);' href=\"#\" class=\"btn btn-danger btn-xs\"><i class=\"fa fa-plus\"></i> Activate </a>"
                        +"</td>";
                }
                else{
                 queryTblRows +=  "<td>"
                        +"<a onclick='confirmDeactivate("+ project.id +",\""+ project.name +"\",$.cookie(\"userData\"),true);' href=\"#\" class=\"btn btn-danger btn-xs\"><i class=\"fa fa-trash-o\"></i> Deactivate </a>"
                        +"</td>";
                }
                queryTblRows +=   "</tr>";  
                 }                  
           return queryTblRows;              
    }
       

 function buildProjectTreeViewChildrenContent(data){
    
    var queryTblRows = ''; 
          var str ='<table  cellpadding="0" cellspacing="0" border="0" class="display table table-bordered">' +
                   '<thead>' +
                   '<tr>' +
                   '<th style="width: 1%">#</th>' +
                   '<th style="width: 20%">Major Tasks</th>' +
                   '<th>Team Members</th>' +
                   '<th>Systems</th>' +
                   '<th>Project Progress</th>'+
                   '<th>Status</th>' +
                   '<th>Active</th>' +
                   '<th style="width: 20%">#Edit</th>' +
                   '</tr>' +
                   '</thead>' +
                   '<tbody class="selects">';
                      
    for(i=0; i < data.length;i++){
       var project =  data[i];
        queryTblRows += "<tr style='background:#D3F7DE'>"
                        +"<td>#</td>"
                        +"<td>"
                        +"<a style=\"cursor:pointer\" href=\"projects/id/"+ project.id +"\"><b>"+ project.name +"</b></a>"
                        +"<br/>"
                        +"<small>"+ project.createdDate +" by "+ project.createdBy +"</small>"
                        +"</td>"
                        +"<td>" + project.resources.length

                        +"</td>"
                        +"<td>" + project.systems.length

            var complete = 0;
           var taskProgress = 0;
           if(project.systems != null){
               for(j = 0; j < project.tasks.length; j++){
                   var task = project.tasks[j];
                    if(task.status === 2){
                        complete = complete +1;
                   }
               }
           }
            if(project.tasks != null && project.tasks.length > 0){
             taskProgress =  (complete)/(project.tasks.length)*100;
            }else{
                taskProgress = 0;
            }
                                                        //queryTblRows += "</ul>"
            queryTblRows+="</td>" 
                         +"<td class=\"project_progress\">"
                         +"<div class=\"progress progress_sm\">"
                         +"<div class=\"progress-bar bg-green\" role=\"progressbar\" data-transitiongoal="+ taskProgress +"></div>"
                         +"</div>"
                         +"<small>"+ taskProgress +"% Complete</small>"
                         +"</td>"
                         +"<td>";
            var btnStatus = '';
            var status = '';
            switch(taskProgress){
             case 0: 
                  btnStatus="danger";
                  status="Not Started";
                  break;
             case 100:
                  btnStatus="success";
                  status="Complete";
                  break;
             default:
                 btnStatus="warning";
                 status="In Progress";
            }
                                                        
            queryTblRows += "<button type=\"button\" class=\"btn btn-"+btnStatus+" btn-xs\">"+status.toUpperCase()+"</button>"
                            +"</td>"
                            +"<td>"
                            + Active(project.deactivate)
                            +"</td>";

                   if (project.deactivate > 0){
                        queryTblRows += "<td>"
                            +"<a onclick='confirmDeactivate("+ project.id +",\""+ project.name +"\",$.cookie(\"userData\"),false);' href=\"#\" class=\"btn btn-danger btn-xs\"><i class=\"fa fa-plus\"></i> Activate </a>"
                            +"</td>";
                    }
                    else{
                     queryTblRows += "<td>"
                            +"<a onclick='confirmDeactivate("+ project.id +",\""+ project.name +"\",$.cookie(\"userData\"),true);' href=\"#\" class=\"btn btn-danger btn-xs\"><i class=\"fa fa-trash-o\"></i> Deactivate </a>"
                            +"</td>";
                    }
                    queryTblRows += "</tr>";
                 }
                  
    var returnString =  str + queryTblRows + '</tbody></table>';                  
    return   returnString;
}
       

function RunTableBuilder(){
     /*
    * Insert a 'details' column to the table
    */
   var nCloneThQuery = document.createElement('th');   
   var nCloneTdQuery = document.createElement('td');
    nCloneTdQuery.innerHTML = '<img src="../plugins/advanced-datatable/images/details_open.png">';
    nCloneTdQuery.className = "center";
    

   $('#queriesTable thead tr').each( function () {
        this.insertBefore(nCloneThQuery, this.childNodes[0] );
    });

   $('#queriesTable tbody tr').each(function () {
       this.insertBefore(nCloneTdQuery.cloneNode( true ), this.childNodes[0]);
    } );

    /*
     * Initialse DataTables, with no sorting on the 'details' column
     */ 
    
   var oTableQuery = $('#queriesTable').dataTable({"paging": true,"searching": true,
        "aoColumnDefs": [
            { "bSortable": false, "aTargets": [ 0 ] },
            { "width": "2%", "targets": 0 }
        ],
        "aaSorting": [[1, 'asc']] //asc
    });

    /* Add event listener for opening and closing details
     * Note that the indicator for showing which row is open is not controlled by DataTables,
     * rather it is done here
     */
    $('#queriesTable').on("click", ".center",function () {
        var nTrQuery = $(this).parents('tr')[0];
        if ( oTableQuery.fnIsOpen(nTrQuery) )
        {
            /* This row is already open - close it */
            this.children[0].src = "../plugins/advanced-datatable/images/details_open.png";
            oTableQuery.fnClose( nTrQuery );
        }
        else
        {
            /* Open this row */
            this.children[0].src = "../plugins/advanced-datatable/images/details_close.png";
            var aDataQuery = oTableQuery.fnGetData(nTrQuery);
            var rowIndexQuery =  parseInt(aDataQuery[2]);//get the index of the clicked row from index-column text value - which is 1 based
            var projects = JSON.parse(sessionStorage.getItem('projects'));
            var projectId = projects[rowIndexQuery].id;
            
           $.ajax({
               method: "GET",
               url: "projects/treeviewprojectchildren/"+ projectId
            })
           .done(function(dataResults) {
                var dynClass = 'details_odd';
                if(rowIndexQuery%2 !== 0)
                    dynClass = 'details';
               oTableQuery.fnOpen( nTrQuery, fnFormatDetails(oTableQuery, nTrQuery,dataResults), dynClass );
            });

        }
    } );
    
}