document.onclick = toggleLogin;

function toggleLogin(e){
	var expandedClass = "expanded";
	var toggleElement = document.getElementById('login-div');
	var toggleSwitch = document.getElementById('login-toggle');
	var focusElement = document.getElementById('edit-name');

	var target = (e && e.target) || (event && event.srcElement);
	
	if( !checkParent(target, toggleElement) && target != toggleSwitch ){
		toggleOff(toggleElement, toggleSwitch, expandedClass);
	}
	
	if( target == toggleSwitch ) {
		if( ! hasClass(toggleSwitch, expandedClass) ) {
			toggleOn(toggleElement, toggleSwitch, expandedClass, focusElement);
		} else {
			toggleOff(toggleElement, toggleSwitch, expandedClass);
		}
		return false; // cancels link action
	}
}

function toggleOn(toggleElement, toggleSwitch, expandedClass, focusElement) {
	addClass(toggleSwitch, expandedClass);
	toggleElement.style.display = 'block';
	focusElement.focus();
}
function toggleOff(toggleElement, toggleSwitch, expandedClass) {
	toggleElement.style.display = 'none';
	removeClass(toggleSwitch, expandedClass);
}

function checkParent(target, parent){
	while(target.parentNode) {
		if(target == parent) {
			return true;
		}
		target = target.parentNode;
	}
	return false;
} 


function addClass(element, value) {
	if (!element.className) {
		element.className = value;
	} else {
		if( ! hasClass(element, value) ) {
			element.className = element.className + " " + value;
		}
	}
}
function removeClass(element, value) {
	if( hasClass(element, value) ) {
		var classes = element.className.split(" ");
		var newClasses = "";
		for (var i in classes) {
			if( classes[i] != value ) {
				if( newClasses != "" ) {
					newClasses += " ";
				}
				newClasses += classes[i];
			}
		}
		element.className = newClasses;
	}
}
function hasClass(element, value) {
	if (element.className) {
		var classes = element.className.split(" ");
		for (var i in classes) {
			if( classes[i] == value ) {
				return true;
			}
		}
	}
	return false;
}