var districts;
function checkboxList(instanceName, trackingElementId, containerElementId){
    this.instanceName = instanceName;
    this.add = addNode;
    this.render = renderCheckboxList;
    this.allNodes = new Object; 
    this.tracker = document.getElementById(trackingElementId);
    this.containerElementId = containerElementId;
}

function node(id, text, checked){
    this.id = id;
    this.text = text;
    this.checked = checked;
    this.parentId = null;
    this.show = expandParent;
    this.rootInstance = '';
}
function expandParent(){
    // Expands the parent node causing a node to be displayed
    // This is automatically done when rendering to ensure
    // that all checked nodes are visible
    var p = this.parent;
    while(p)
    {
        var el = document.getElementById(p.id);
        el.style.display = 'block';
        p = p.parent;        
    }
}

function renderCheckboxList(){
    // Renders all checkboxes
    var checkboxListString = '';
    for(var n in this.allNodes)
	{
		if (!this.allNodes[n].parentId){
			checkboxListString += this.allNodes[n].render(this);
		}
    }
    var container = document.getElementById(this.containerElementId);

    if (container) container.innerHTML = checkboxListString;
    this.updateValue(true);
  
}
checkboxList.prototype.updateValue = function(display){
    // "display" controls if the UI is rendered to ensure that every checked node is
    // visible. If "display" is true, a node's show() method is called.
       
    var checkedString = "";
    for(var n in this.allNodes){

        if (this.allNodes[n].checked){
            if (display) this.allNodes[n].show();
            checkedString += (checkedString == "" ? "" : "|") + this.allNodes[n].id;
            //set the style of parent node with checked child nodes as bold/italized
            if (this.allNodes[n].parentId!=null){
            	var parentText= document.getElementById('span'+ this.allNodes[n].parentId);
           		parentText.style.fontWeight = 'bold';
				parentText.style.color = '#0070be';
           		parentText.style.backgroundColor = '#e1f1ff';
				parentText.style.padding = '1px 5px';
            }
        }
    }

    //this.tracker.value = checkedString; 
    districts = checkedString;
    $("#tracker").val(checkedString);         
}

checkboxList.prototype.toggle = function(nodeId, checked){
    // If the user clicks a checkbox, the corresponding object in the associative array is updated
    for(var n in this.allNodes){ 
        if (this.allNodes[n].id == nodeId){
            this.allNodes[n].checked = checked;   
           	if(this.allNodes[n].parentId!=null){
           		//set the style of parent node with checked child nodes as bold/italized
           		if(!checked){
           			var parentText= document.getElementById('span'+ this.allNodes[n].parentId);
           			parentText.style.fontWeight = 'normal';
					parentText.style.color = '#000';
           			parentText.style.backgroundColor = '#fff';
					parentText.style.padding = '0 0';
           		}
           	}
            break;
        }           
    }
    for(var n in this.allNodes){ 
        if (this.allNodes[n].parentId == nodeId){            
            this.allNodes[n].checked = checked;
            var els=document.getElementById('cb'+ this.allNodes[n].id);
	        els.checked=checked;        
	        setBackground(els);
            //break;
        }           
    }

    // The tracking field is updated, but the nodes are not auto-expanded
    this.updateValue(true);

}
 

function addNode(id, label, checked, parentId){
    var n = new node(id, label, checked);
    // If the specified parentId node is not present, the node is
    // added to the top level
    if (this.allNodes[parentId])
        n.parentId = parentId;
    else
        n.parentId = null;
    n.rootInstance = this.instanceName;
    this.allNodes[n.id] = n;
}

node.prototype.render = function(root){
    // Renders a node to the browser
   // Obtain a list of child nodes by looking for nodes which have
   // this node's Id as their parentId
    var childNodes = new Array();
    for(var n in root.allNodes)
    {
        if (root.allNodes[n].parentId == this.id)
            childNodes[childNodes.length] = root.allNodes[n].id;
    }
    var numNodes = childNodes.length;
    // Compose the HTML string for rendering this node
    // Toggling the checkbox calls the toggle method of the root list object 
    	var nodeString = '<span class="node' + (numNodes > 0 ? ' nodeParent' : '') + '">';    	
    	nodeString += '<input type="checkbox" id="cb' + this.id + '" ';
    	nodeString += 'onClick="' + this.rootInstance + '.toggle(\'' + this.id + '\', this.checked)"';
    	nodeString += (this.checked ? ' checked' : '') + '> ';
    	nodeString += '<span id="span' + this.id + '"' + (numNodes > 0 ? ' onClick="showNode(\'' + this.id + '\')"' : '') + '>';
		var image_id;
		image_id=this.id + "-img";
		if(numNodes > 0){			
			this.text='<span id="' + image_id + '"><img src="/images/pg/open.gif" \></span>&nbsp;' + this.text;
		}else{
			this.text='<span id="' + image_id + '"><img src="/images/pg/close.gif" \></span>&nbsp;' + this.text;
		}
		
    	nodeString +=  this.text + '</span>';
    	nodeString += '</span>'; 
    	

	  
   
    

    // If any child nodes are present, recursively render them also
    if (numNodes > 0)
    {

        nodeString += '<span class="nodeChild" id="' + this.id + '">';
        for(var j=0;j<numNodes;j++)
            nodeString += root.allNodes[childNodes[j]].render(root);
	    nodeString += '</span>';

    }

   return nodeString;

}

function showNode(node)
{
    // When a user clicks on a node label
    // this function is called to toggle the display
   var objNode = document.getElementById(node).style;   
   var image_id;
   image_id=node + "-img";

    if(objNode.display=="block"){
        objNode.display="none";
        document.getElementById(image_id).innerHTML="<img src='/images/pg/open.gif' \>";
   } else{
        objNode.display="block";
        document.getElementById(image_id).innerHTML="<img src='/images/pg/close.gif' \>";
   }
		
}
function setBackground(els){
	var elParent=els.parentNode.parentNode;
	var parentText= document.getElementById('span'+ elParent.id);    
	var strBackground=els.checked?'#e1f1ff':'#fff';
	var strPadding=els.checked?'1px 5px':'0';
	var strColour=els.checked?'#0070be':'#000';
	elParent.style['backgroundColor']=strBackground;
	parentText.style['backgroundColor']=strBackground;
	parentText.style['padding']=strPadding;
	parentText.style.fontWeight = 'normal';
	elParent.style['color']=strColour;
	parentText.style['color']=strColour;
}