var dataTemplate = 
		{	 
			INDEX :		{name: "index", value: null}, 
			LABEL :		{name: "label", value: null},
			SELECTED :	{name: "selected", value: null},
			TEXT :		{name: "text", value: null},
			QUANTITY :	{name: "quantity", value: 0},
			VALUE :		{name: "value", value: null}		
		}; 	
$(document).ready(function() {	
		$("div.ui-htmllist-container").htmllist();						
		});
(function($)
{
$.widget("ui.htmllist", {
	init: function() {
			 //Get the templates		    
		     //var templates = $($.ui.htmllist.UI.HTML_LIST_TEMPLATES); 
		     		    
		     //Get  the Conatiners
		     var $self = this;
		     
		     var templates = this.element.find(".template")		     		     
		     
		     //Set the no.of models selected to zero
		     $.ui.htmllist.UI.SUM = 0;

		     //Create HTML List
		     createHtmlList($self,templates);
		     
		     var isMultiple = true;		    
		     var xArray = $self.element[0].className.split(" ");
		     for(var i = 0; i < xArray.length; i++)
		     {		        
		        if(xArray[i] == $.ui.htmllist.UI.HTML_LIST_CONTAINER_SINGLE)isMultiple = false;
		     }
		     
		     //Get all the containers i,e Open Container, Closed Container and the DataContainer(select)		     
		     var $container = $($self.element[0]);     
			 var $dataContainer = $($container.find($.ui.htmllist.UI.HTML_LIST_SELECT));
			 var $openContainer = $($container.find($.ui.htmllist.UI.HTML_LIST_CONTAINER_OPEN));
			 var $closedContainerSum = $($container.find($.ui.htmllist.UI.HTML_LIST_CONTAINER_CLOSED_SUM));
			 var $closedContainerList = $($container.find($.ui.htmllist.UI.HTML_LIST_CONTAINER_CLOSED_LIST));				 
			 
			 //Make sure that the html list is closed initially	
			 $openContainer.hide();				 	
			 
			 //This function closes the already open htmllist when clicked anywhere on the document
			 $(document).click(function() { 
			       if(isMultiple){			        
                    if($closedContainerSum.length > 0)
                        updateHtmlList($openContainer,$closedContainerSum,true);
                       else
                        updateHtmlList($openContainer,$closedContainerList,false);
                        }
                    else if(!isMultiple){
                        //alert("TO DO: Update Single List"); 
                        if (!$($openContainer).is(":hidden")){
                        $($openContainer).hide();                          
                        }                                                                      
                    }
                }); 		    			                                   
	    
	         //This function opens the htmllist when clicked on the header
		    $self.element.click(function(event) {                
                  event.stopPropagation();                                                
                      if ($($openContainer).is(":hidden")){
                        $($openContainer).show();  
                        //Hide Templates                                              
                        templates.hide();	
                        }    
           });                     
	}	
});

//This function updates the header of the html list with the no.ofmodels selected. 
function updateHtmlList($openContainer,$closedContainer,flag){
    var sum = 0;
    var list = "";
    var $classArray = new Array();
    $classArray = $openContainer.find(":checkbox");
    for(var i = 0; i <  $classArray.length; i++){
        if($classArray[i].checked == true && $classArray[i].value != "{VALUE}" ){
                sum+=1; 
                var isAlreadySelected = selectedClasses($classArray[i]);
                if(!isAlreadySelected)
                $classArray[i].parentNode.className = $classArray[i].parentNode.className + " selected";                                                     
                } 
        else if($classArray[i].checked == false && $classArray[i].value != "{VALUE}" ) {
                var isAlreadySelected = selectedClasses($classArray[i]);
                if(isAlreadySelected)
                $classArray[i].parentNode.className = $classArray[i].parentNode.className.replace(/[selected]+$/, '');
                }                                                                      
              }
    if(flag){                   
    var closedContainerHtml =  $closedContainer.html();   
    $closedContainer.html("You have "+ sum.toString() + " model(s) selected");                 	 
    }
    else{
    //TO DO:: LIST
    sum =   $openContainer.find(":checkbox");    
    var closedContainerHtml =  $closedContainer.html();   
    $closedContainer.html("You have selected "+ list.toString() + " model(s)");  
    }           
    $($openContainer).hide(); 
          
}

//This function checks to see if the model is already selected.
function selectedClasses(item){
    var classArray = item.parentNode.className.split(" "); 
    var selected = 0;
    for( var i = 0; i < classArray.length; i++){
    if(classArray[i] == "selected")
        selected += 1;                    
    }
    if(selected > 0) return true;
    else return false;          
}

//This function creates the html list form the html select and the supplied templates.
function createHtmlList($containers,templates){
    var isMultiple;
    var xArray = $containers.element[0].className.split(" ");
     for(var i = 0; i < xArray.length; i++){
        if(xArray[i] == $.ui.htmllist.UI.HTML_LIST_CONTAINER_MULTIPLE)isMultiple = true;
        if(xArray[i] == $.ui.htmllist.UI.HTML_LIST_CONTAINER_SINGLE)isMultiple = false;	                    
     }						
    if (isMultiple){ 
        var multipleContainer = $($containers.element[0]);     
        var multipleDataContainer = $(multipleContainer.find($.ui.htmllist.UI.HTML_LIST_SELECT));
        var multipleOpenContainer = $(multipleContainer.find($.ui.htmllist.UI.HTML_LIST_CONTAINER_OPEN));		
        var multipleClosedContainerSum = $(multipleContainer.find($.ui.htmllist.UI.HTML_LIST_CONTAINER_CLOSED_SUM));
        var multipleClosedContainerList = $(multipleContainer.find($.ui.htmllist.UI.HTML_LIST_CONTAINER_CLOSED_LIST));								    						    		
        if(multipleClosedContainerSum.length > 0){		 
        generateHTMLList(templates,multipleOpenContainer,multipleDataContainer,multipleClosedContainerSum, true, isMultiple); 
        }
        else if(multipleClosedContainerList.length > 0){
        generateHTMLList(templates,multipleOpenContainer,multipleDataContainer,multipleClosedContainerList, false, isMultiple); 
        }         
    }
    else if(!isMultiple){                        
        var singleContainer = $($containers.element[0]); 
        var singleDataContainer = $(singleContainer.find($.ui.htmllist.UI.HTML_LIST_SELECT));				    		
        var singleOpenContainer = $(singleContainer.find($.ui.htmllist.UI.HTML_LIST_CONTAINER_OPEN));
        var singleClosedContainerSum = $(singleContainer.find($.ui.htmllist.UI.HTML_LIST_CONTAINER_CLOSED_SUM));							
        var singleClosedContainerList =  $(singleContainer.find($.ui.htmllist.UI.HTML_LIST_CONTAINER_CLOSED_LIST));					    														
        if(singleClosedContainerSum.length > 0){		 
        generateHTMLList(templates,singleOpenContainer,singleDataContainer,singleClosedContainerSum, true, isMultiple); 
        }
        else if(singleClosedContainerList.length > 0){
        generateHTMLList(templates,singleOpenContainer,singleDataContainer,singleClosedContainerList, false, isMultiple); 
        }  	        								       
    }
    templates.hide();    
}
//This function generates the actual nodelist of the html list.
function generateHTMLList(templates,openContainer,dataContainer,closedContainer,flag,isMultiple){      
    var generatedNode;    
    var optionClass; 
    var $template;       	                    
    var $childNodes = new Array();
    $childNodes =  $(dataContainer.children());       	       
    if (dataContainer.children().length > 0){                                                  
        for (var i = 0; i < dataContainer.children().length; i++ ){	                
            if($childNodes[i].tagName ==  "OPTGROUP"){ 
                var $childNode = $($childNodes[i]);
                var groupClass = $childNode[0].className;
                var groupLabel = $childNode[0].label;
                $template = $(getTemplate(groupClass,templates));
                dataTemplate.LABEL.value = $childNode[0].label;
                var node = generateNodeBasedOnTemplateNode($template,dataTemplate,isMultiple);
                if(openContainer.find($.ui.htmllist.UI.HTML_LIST_CONTAINER_OPEN_LIST_CONTAINER).length > 0)
                {
					var listContainer = $(openContainer.find($.ui.htmllist.UI.HTML_LIST_CONTAINER_OPEN_LIST_CONTAINER));
					listContainer.append(node);
                }
                else
                {
					openContainer.append(node); 
                }
                
                var innerChildNodesOfSelectLength = parseInt($childNode.children().length);                    
                var $innerChildren = new Array();
                $innerChildren = $($childNode.children());                                              
                for( var j = 0; j < innerChildNodesOfSelectLength;j++){                        
                    if($innerChildren[j].tagName ==  "OPTION"){
                          var node = generateNode($($innerChildren[j]),templates,isMultiple);
						  if(openContainer.find($.ui.htmllist.UI.HTML_LIST_CONTAINER_OPEN_LIST_CONTAINER).length > 0)
							{
								var listContainer = $(openContainer.find($.ui.htmllist.UI.HTML_LIST_CONTAINER_OPEN_LIST_CONTAINER));
								listContainer.append(node);
							}
						   else
							{
								openContainer.append(node); 
							}                                                                                                  
                        }                                   
                   }
                }
                else if($childNodes[i].tagName ==  "OPTION"){                               
                       var node = generateNode($($childNodes[i]),templates,isMultiple);
                       if(openContainer.find($.ui.htmllist.UI.HTML_LIST_CONTAINER_OPEN_LIST_CONTAINER).length > 0)
						{
							var listContainer = $(openContainer.find($.ui.htmllist.UI.HTML_LIST_CONTAINER_OPEN_LIST_CONTAINER));					
							listContainer.append(node);
						}
					   else
						{
							openContainer.append(node); 
						} 
                      }
                }                                                                                                                            
         }             
     dataContainer.hide();
     if(navigator.userAgent.toLowerCase().indexOf("safari")!= -1){dataContainer[0].style.display = "none";}
     var closedContainerHtml = closedContainer.html(); 
     if(isMultiple){
         if(flag)     
         closedContainer.html(closedContainerHtml.replace("{NUMBER}",$.ui.htmllist.UI.SUM.toString()));
         else            
         closedContainer.html(closedContainerHtml.replace("{NUMBER}",$.ui.htmllist.UI.LIST.toString().replace(/[\s,]+$/g, '') ));                 
     }
     else{
         if(flag)     
         closedContainer.html(closedContainerHtml.replace("{NUMBER}",$.ui.htmllist.UI.SINGLE_SUM.toString()));
         else            
         closedContainer.html(closedContainerHtml.replace("{NUMBER}",$.ui.htmllist.UI.SINGLE_LIST.toString().replace(/[\s,]+$/g, '') )); 
     }
    }

//This function generates the actual nodes of the html list.	
function generateNode($childNode,templates,isMultiple)
{   
    //Get the template of interest                               
	$template = $(getTemplate($childNode[0].className,templates));	
	//Get all the available properties
	dataTemplate.INDEX.value = $childNode[0].index;	
	dataTemplate.LABEL.value = $childNode[0].label;	
	dataTemplate.SELECTED.value = $childNode[0].selected;
	dataTemplate.TEXT.value = $childNode[0].text;
	dataTemplate.QUANTITY.value = 0;
	dataTemplate.VALUE.value = $childNode[0].value;
	var node = generateNodeBasedOnTemplateNode($template,dataTemplate,isMultiple);
	return node;
}

//This function gets the associated template for the class suppplied	
function getTemplate(groupClass,templates)
{
    //loop through templates and identify the correct template that matches the supplied class.
	for(i = 0; i < templates.length; i++){
		var cArray = templates[i].className.split(" "); 
		for( j = 0; j < cArray.length; j++){
			if(cArray[j] == groupClass)
			return templates[i];
		} 
    }
}

//This function generated the htmllist node based on the template node supplied.
function generateNodeBasedOnTemplateNode($template,dataTemplate,isMultiple)
{      
	var $uiTemplate = $template.clone(true);
	var xArray = $template[0].className.split(" ");     					   
	$uiTemplate[0].className = xArray[0]; 
	//Call the data replace method to put in correct data.          
	var node = replaceData($uiTemplate,dataTemplate,isMultiple);   
	return node;    
}

//This function places the data in the html list node.
function replaceData($uiTemplate,dataTemplate,isMultiple)
{ 
	//Set the properties											
	setProperties($uiTemplate,dataTemplate,isMultiple); 
	//Set the checkbox status
	setCheckBoxStatus($uiTemplate,dataTemplate,isMultiple);						 				
	return $uiTemplate;	
}

//This function sets the Checkbox status.    
function  setCheckBoxStatus($uiTemplate,dataTemplate,isMultiple){
    if(isMultiple){                
        if($uiTemplate.find(":checkbox").length > 0){
            if(dataTemplate.SELECTED.value == true){
                $uiTemplate.find(":checkbox")[0].checked = true;
                $uiTemplate.find(":checkbox")[0].defaultChecked = true;// need to set this for ie6
                //Update the count of no.of models selected
                setCounterandText(dataTemplate.TEXT.value,isMultiple); 
                $uiTemplate[0].className = $uiTemplate[0].className + " selected";       
                }
            else $uiTemplate.find(":checkbox")[0].checked = false;                     
        }                       
    }
    else if(!isMultiple){
        $uiTemplate.find(":checkbox").hide();
        if(navigator.userAgent.toLowerCase().indexOf("safari")!= -1){$uiTemplate.find(":checkbox")[0].style.display = "none";}
        if(dataTemplate.SELECTED.value == true){ 
            if(!isMultiple){$uiTemplate[0].style.backgroundColor = "blue";}           
            $uiTemplate[0].className = $uiTemplate[0].className + " selected"; 
            setCounterandText(dataTemplate.TEXT.value,isMultiple); 
            }
        }          
          }	
          
//This function calculates the no.of selected models.
function  setCounterandText(text,isMultiple) {	
    if(isMultiple){
        //Update the count of no.of models selected			
        $.ui.htmllist.UI.LIST = $.ui.htmllist.UI.LIST + text + "," ;
        $.ui.htmllist.UI.SUM += 1;
       }
    else{
        //Update the count of no.of models selected			
        $.ui.htmllist.UI.LIST = $.ui.htmllist.UI.SINGLE_LIST + text + "," ;
        $.ui.htmllist.UI.SINGLE_SUM += 1;
       }
  }  

//This functions sets remianing properties of the html list node.           
function setProperties ($uiTemplate,dataTemplate,isMultiple){           
    var uiHtml = $uiTemplate.html();   
    //Update the html  
		$uiTemplate.html(uiHtml.replace(
			"{VALUE}",dataTemplate.VALUE.value)
		   .replace("{LABEL}",dataTemplate.LABEL.value)
		   .replace("{NAME}",dataTemplate.TEXT.value)
		   .replace("{IMGNAME}",dataTemplate.TEXT.value)
		   .replace("%7BIMGNAME%7D",dataTemplate.TEXT.value));
	/*		   
	if($.browser.msie && $.browser.version == 6) 
	{
		$uiTemplate.html(uiHtml.replace(
			"{VALUE}",dataTemplate.VALUE.value)
		   .replace("{LABEL}",dataTemplate.LABEL.value)
		   .replace("{NAME}",dataTemplate.TEXT.value));
	}
	else
	{
		$uiTemplate.html(uiHtml.replace(
			"{VALUE}",dataTemplate.VALUE.value)
		   .replace("{LABEL}",dataTemplate.TEXT.value)
		   .replace("{NAME}",dataTemplate.LABEL.value)				   
		   .replace("%7BNAME%7D",dataTemplate.TEXT.value));
	}  
	*/      	                       	        
}   
         
//	
$.ui.htmllist.UI = {
	HTML_LIST_CONTAINERS : ".ui-htmllist-container",	
    HTML_LIST_CONTAINER_MULTIPLE : "ui-htmllist-multiple",	       
    HTML_LIST_CONTAINER_SINGLE : "ui-htmllist-single",		       	
    HTML_LIST_TEMPLATES : ".template",
    LIST : "", 
    SUM : 0,
    SINGLE_LIST : "", 
    SINGLE_SUM : 0,
    HTML_LIST_CONTAINER_CLOSED_LIST : ".ui-htmllist-closed.list",
    HTML_LIST_CONTAINER_CLOSED_SUM : ".ui-htmllist-closed",
    HTML_LIST_CONTAINER_OPEN : ".ui-htmllist-open",  
    HTML_LIST_CONTAINER_OPEN_BUTTON_CONTAINER : ".ui-htmllist-open-button-container",  
    HTML_LIST_CONTAINER_OPEN_LIST_CONTAINER : ".ui-htmllist-open-list-container",            
    HTML_LIST_SELECT : "select" 
	}; 


$.extend($.ui.htmllist);

})(jQuery);