//Main function to generate the drop down menu
function dropDown(targetEl, resultsEl, actionButton)
{
        //assign the object
        objTarget = document.getElementById(targetEl);

        //hide the drop down by default
        hideDropDown(targetEl);
       
        //assign the button click to open/hide the dropdown
        assignButtonClick(objTarget)

        //assign click functionality to each of individual child nodes
        assignChildNodeClick(objTarget, targetEl, resultsEl)
       
        //create a hidden element on the document
        if(!document.getElementById('openDropDown'))
        {
                var hiddenElement = document.createElement('input');
                hiddenElement.setAttribute('type', 'hidden');
                hiddenElement.setAttribute('id', 'openDropDown');
                document.body.appendChild(hiddenElement);
        }
}

//function to hide the drop down menu.
function hideDropDown(target)
{
        objEL = document.getElementById(target);
        if (objEL)
		{
			if(objEL.style.display == 'block' || !objEL.style.display)     
			{
					objEL.style.display = 'none';
			}
		}
}

//this function will bind the click event to show/hide the drop down
function assignButtonClick(target)
{
		if(target)
		{
			arrChildNodes = target.parentNode.childNodes;
			for(i=0;i<arrChildNodes.length;i++)
			{
					currentNode = arrChildNodes[i];
					if(currentNode.nodeName == 'A')
					{
						   
							currentNode.onclick = function() {
								   
									currentOpenDD = document.getElementById('openDropDown').value
									if(currentOpenDD != '' && currentOpenDD == (target.id + ';;' + this.id))
									{
											document.getElementById('openDropDown').value = '';
									}
									else if(currentOpenDD != '')
									{
											values = currentOpenDD.split(';;')
											hideDropDown(values[0])
											document.getElementById('openDropDown').value = target.id + ';;' + this.id;
									}
									else
									{
											document.getElementById('openDropDown').value = target.id + ';;' + this.id;
									}
						   
									if(target.style.display == 'block' || !target.style.display)   
									{
											target.style.display = 'none';
									}
									else
									{
											target.style.display = 'block';
									}
							}
					}
			}
		}
}

//function will bind each of the child nodes with the function to process clicks
function assignChildNodeClick(target, targetEl, resultsEl)
{	if(target)
	{
        for(i=0;i<target.childNodes.length;i++)
        {
                curr = target.childNodes[i];
                if(curr.nodeName == 'UL')
                {
                        for(j=0; j<curr.childNodes.length;j++)
                        {
                                currentNode = curr.childNodes[j];
                                if(currentNode.nodeName == 'LI')
                                {
                                        for(k=0; k < currentNode.childNodes.length; k++)
                                        {
                                                if(currentNode.childNodes[k] && currentNode.childNodes[k].nodeName == 'A')
                                                {
                                                        currentNode.childNodes[k].onclick = function() {
                                                                processClick(this, targetEl, resultsEl)
                                                        }
                                                }
                                        }
                                }
                        }
                }
        }
	}
}

//function to select the current value and mark it as selected
function processClick(objAnchor, targetEl, resultsEl)
{
        document.getElementById(targetEl).style.display = 'none';
        document.getElementById(resultsEl).innerHTML = objAnchor.innerHTML;
}

//bind the click function on the window and call callback function on each click
if (window.document.addEventListener){
  window.document.addEventListener('click', captureClick, false);
} else if (window.document.attachEvent){
  window.document.attachEvent('onclick', captureClick);
}

//callback function. called on each click on window
function captureClick(e)
{
        //capture the target element on which click action is performed
        if (window.event)
        {
                target = window.event.srcElement;
        }
        else
        {
                target = e.target ? e.target : e.srcElement;
        }
       
        if(document.getElementById('openDropDown').value != '')
        {
                arrValues = document.getElementById('openDropDown').value.split(';;')
               
                if(target.id != arrValues[1])
                {
                        hideDropDown(arrValues[0])
                        document.getElementById('openDropDown').value = '';
                }
        }
}

window.onload = function () {
//Load the drop down function as the script loads
dropDown('flex_box', 'flexbox_results', 'flex_button');
dropDown('flex_box1', 'flexbox_results1', 'flex_button1');
dropDown('flex_box2', 'flexbox_results2', 'flex_button2');
};