function obj(id)
{
	return document.getElementById(id);
}

function toggle_box(id)
{
	if(obj(id).style.display == "block")
		obj(id).style.display = "none";
	else
		obj(id).style.display = "block";
}

//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);
	
	assignDropDownHover(objTarget)
	
	//assign the button click to open/hide the dropdown
	//assignButtonHover(objTarget)

	//assign click functionality to each of individual child nodes
	assignChildNodeClick(objTarget, targetEl, resultsEl)

	obj('one').onclick = function()
	{
		obj('flex_box1').style.display = 'none';
		toggle_box('flex_box');
	};
	
	obj('two').onclick = function()
	{
		obj('flex_box').style.display = 'none';
		toggle_box('flex_box1');
	};

}

//function to hide the drop down menu.
function hideDropDown(target)
{

	objEL = document.getElementById(target);
	
	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 assignButtonHover(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;
				}

				document.getElementById('flex_box').style.display = 'none';
				document.getElementById('flex_box1').style.display = 'none';

				target.style.display = 'block';
			}
		}
	}
}

function assignDropDownHover(target)
{
	
	
	target.onmouseover = function ()
	{
		/*
		document.getElementById('flex_box').style.display = 'none';
		document.getElementById('flex_box1').style.display = 'none';
		target.style.display = 'block';
		*/
	}
	target.onmouseout = function () {
		//target.style.display = 'none';
	}
	for(i=0;i<target.childNodes.length;i++)
	{
		curr = target.childNodes[i];
		
		curr.onmouseover = function ()
		{
			/*
			document.getElementById('flex_box').style.display = 'none';
			document.getElementById('flex_box1').style.display = 'none';
			target.style.display = 'block';
			*/
		}
		curr.onmouseout = function () {
			if(curr.parentNode.nodeName != 'DIV')
			{
				target.style.display = 'none';
			}
		}
	}
}

//function will bind each of the child nodes with the function to process clicks
function assignChildNodeClick(target, targetEl, resultsEl)
{
	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);
}

if (window.document.addEventListener){
  window.document.addEventListener('mousemove', captureMouseMove, false); 
} else if (window.document.attachEvent){
  window.document.attachEvent('mousemove', captureMouseMove);
}
function captureMouseMove(e)
{
	if (window.event) 
	{
		target = window.event.srcElement;
	} 
	else 
	{
		target = e.target ? e.target : e.srcElement;
	} 
	if(target.id == 'flex_button' || target.id =='flex_box' ||  target.id =='flexbox_results' || target.id =='flexbox_results' )
	{
		var newTarget = document.getElementById(target.id);
		tarGetChild = newTarget.parentNode.childNodes;
		for(i=0; i<tarGetChild.length; i++)
		{
			if(tarGetChild[i].id == 'flex_box' || tarGetChild[i].id == 'flex_box1')
			{
				displayStatus = document.getElementById(tarGetChild[i].id).style.display;
				if(displayStatus == 'block')
				{
					//alert(target);
				}
			}
			
		}
		
	}
	else
	{
		//alert("a");
	}
	 
	/*
	if(document.getElementById('openDropDown').value != '')
	{
		arrValues = document.getElementById('openDropDown').value.split(';;')
		
		if(target.id != arrValues[1])
		{
			hideDropDown(arrValues[0])
			document.getElementById('openDropDown').value = '';
		}
	}
*/

}


//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') && document.getElementById('openDropDown').value != '')
	{
		arrValues = document.getElementById('openDropDown').value.split(';;')
		
		if(target.id != arrValues[1])
		{
			hideDropDown(arrValues[0])
			document.getElementById('openDropDown').value = '';
		}
	}
}

function extraCallback()
{
	var objAnchor = arguments[0];
	var resultElement = arguments[1];
		
	arrListItems = objAnchor.parentNode.parentNode.getElementsByTagName('A');
	
	for(i=0; i<arrListItems.length;i++)
	{
		children = arrListItems[i].childNodes;
		if(children[0].nodeName == 'SPAN')
		{
			arrListItems[i].innerHTML = arrListItems[i].innerHTML.replace(/\<span\>/ig, '');
			arrListItems[i].innerHTML = arrListItems[i].innerHTML.replace(/\<\/span\>/ig, '')
		}
	}

	var originalHTML = objAnchor.innerHTML;
	objAnchor.innerHTML = '<span>' + originalHTML + '</span>';
	
	arrImgItems = document.getElementById(resultElement).getElementsByTagName('IMG');
	arrImgItems[0].src = arrImgItems[0].src.replace(/flag(.*).gif/ig, 'flag_' + objAnchor.className + '.gif');
}



function checkParent(objEl, parentID)
{
	if(objEl.parentNode.id == parentID)
	{
		return true;
	}
	else if(objEl.parentNode.nodeName == 'BODY')
	{
		return false;
	}
	else
	{
		return checkParent(objEl.parentNode, parentID);
	}
}

function addMultipleLoadEvents(func)
{
	var oldonload = window.onload;
	if (typeof window.onload != 'function')
	{
		window.onload = func;
	}
	else
	{
		window.onload = function() {
			if (oldonload)
			{
				oldonload();
			}
			func();
		}
	}
}

window.onload = function()
{
	//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 loadEvents()
{
	//Load the drop down function as the script loads
	//the syntax for calling drop down is dropDown(dropDownListBox, dropDownResultsBox, dropDownActionButton);
	//you can also pass additional callback function as the fourth parameter. This additional callback can process the action clicks for the list items.	
	dropDown('flex_box', 'flexbox_results', 'flex_button');
	dropDown('flex_box1', 'flexbox_results1', 'flex_button1');

}

//addMultipleLoadEvents(loadEvents);
loadEvents();