Displaying the Account with associated contacts and cases in tree view using jquery

Controller Code:
================
public class treenodes {

/* Wrapper class to contain the nodes and their children */
public class cNodes
{

 public List<Contact> parent {get; set;}
 Public Account gparent {get;set;}

 public cNodes(Account  gp, List<Contact> p)
 {
     parent = p;
     gparent = gp;
 }
}
/* end of Wrapper class */

Public List<cNodes> hierarchy;

Public List<cNodes> getmainnodes()
{
    hierarchy = new List<cNodes>();
    List<Account> tempparent = [Select Id,Name from Account];
    for (Integer i =0; i< tempparent.size() ; i++)
    {
        List<Contact> tempchildren = [Select Id,FirstName,LastName,(Select Id,CaseNumber,Subject from Cases) from Contact where AccountId = :tempparent[i].Id];
        hierarchy.add(new cNodes(tempparent[i],tempchildren));
     }
    return hierarchy;
}
}

=========================
Page Code:
=====================
<apex:page sidebar="false" controller="treenodes" showheader="false">
<!-- Include the Jquery Script files -->

   <apex:stylesheet value="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.css')}"/>
   <apex:includeScript value="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.js')}"/>
   <apex:includeScript value="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.cookie.js')}"/>
   <apex:includeScript value="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.js')}"/>
 
<!-- End of Javascript files -->
<script type="text/javascript">
        $(function() {
            $("#tree").treeview({
                collapsed: false,
                animated: "medium",
                control:"#sidetreecontrol",
                persist: "location"
            });
        })
</script>
<br/> <br/> <br/>
<!-- Tree -->
<div class="treeheader" style="height:0px;">&nbsp;</div>
<div id="sidetreecontrol"><a href="?#"><font style="color:blue;">Collapse All</font></a> | <a href="?#"><font style="color:blue;">Expand All</font></a></div>
<ul id="tree">
    <apex:repeat value="{!mainnodes}" var="parent">
        <li><strong><apex:outputtext style="color:blue;" escape="false" value="{!parent.gparent.Name}"/></strong>
             <ul>
                 <apex:repeat value="{!parent.parent}" var="child">
                    <li><span class="formattextcon"><apex:outputtext style="color:green;" escape="false" value="{!child.LastName}"/></span>
                        <ul>
                            <apex:repeat value="{!child.Cases}" var="gchildren">
                               <li> <span class="formattextcon"> <apex:outputtext escape="false" style="color:red;" value="{!gchildren.CaseNumber}"/> <b>||</b> &nbsp;<apex:outputtext escape="false" value="{!gchildren.Subject}"/> </span> </li>
                            </apex:repeat>
                        </ul>    
                    </li>
                 </apex:repeat>
             </ul>
        </li>
    </apex:repeat>
</ul>
<!-- End of Tree -->    
</apex:page>