$(document).ready(function() {

	if ($('.module-dropdown')[0]) {
		addDropdowns('.module-dropdown', 300);
	}
	if ($('.collapsible')[0]) {
		addCollapsibles('.collapsible', 'p', 300);
	}
	
});
/////////////////////////
// function: addCollapsibles
// Adds collapsible functionality to an element or elements - Adds a 'read more' link to the end of the element to expand/collapse hidden content
// PARAMS: (str selector: css selector specifying the element or elements to apply the collapsible to, 
//					[str divider: element type - eg if set to the default, 'p',  the script seaches for p elements inside the selector div and places all but the first inside a collapsible hidden content div,
//					[int duration: the duration of the collapsible jQuery slideToggle effect in milliseconds - default 1000]])
/////////////////////////
function addCollapsibles(selector, divider, duration) {
	divider = divider ? divider : 'p';
	duration = duration ? duration : 1000;
	var hiddenDivs = new Array();
	var showHideDiv = new Array();
	var showHideLink = new Array();
	
	$(selector).each(function(i) {
		var dividers = $(this).find(divider);
		
		if (dividers.length>1) {
			hiddenDivs[i] = document.createElement('div');
			hiddenDivs[i].style.display = 'none';
			
			/*
			the jQuery slide methods have a habit of jumping if applied to JS generated DOM elements without a set pixel width. 
			Here the script attempts to set the new div's width using the offsetWidth of the parent- Obviously this won't work if the parent is hidden by default (eg inside a tab).
			To avoid this problem set the width of the JS generated collapsible div manually in CSS eg:
			.[selector] div { width:300px }
			*/
			if (this.offsetWidth) {
				hiddenDivs[i].style.width = this.offsetWidth+'px';
			} 
			
			showHideDiv[i] = document.createElement('div');
			$(showHideDiv[i]).addClass('show-hide-link');
			
			showHideLink[i] = document.createElement('a');
			showHideLink[i].innerHTML = 'read more';
			$(showHideLink[i]).attr('href', '#');
			
			showHideDiv[i].appendChild(showHideLink[i]);
			
			$(this).find(divider).each(function(j) {
				if (j>0) {
					hiddenDivs[i].appendChild($(this)[0]);
				}
			});
			
			$(showHideLink[i]).click(function() {
				$(hiddenDivs[i]).slideToggle(duration, function(){
					if ($(showHideLink[i]).hasClass('active')) {
						showHideLink[i].innerHTML = 'read more';
						$(showHideLink[i]).removeClass('active');
					}
					else {
						showHideLink[i].innerHTML = 'read less';
						$(showHideLink[i]).addClass('active');
					}
				});
				return false;	
			});
			
			$(this)[0].appendChild(hiddenDivs[i]);
			$(this)[0].appendChild(showHideDiv[i]);
		}	
	});
}

/////////////////////////
// function: addDropdowns
// Creates a jQuery dropdown from a <ul>. Each dropdown list should be wrapped in a <div> tag and preceded by an activation link in an <h4>. Another wrapper element - selected in the first param - goes around the list and the activation link.
// PARAMS: (str selector: css selector specifying the wrapper element or elements to apply the dropdown to, 
//					[int duration: the duration of the jQuery slideDown/slideUp effect in milliseconds - default 1000])
/////////////////////////
var tempElements = new Array();
var disableAction = new Array();

function addDropdowns(selector, duration) {
	duration = duration ? duration : 1000;
	tempElements[selector] =  new Array();
	disableAction[selector] =  new Array();
	
	$(selector).each(function(i) {
		this.style.display = 'block';
		$(this).find('h4 a').click(function() {
			 var parent = this.parentNode.parentNode;
			 var getHiddenDiv = parent.getElementsByTagName('div')[0];
			 
			 tempElements[selector][i] = document.createElement(parent.nodeName);
			 
			 tempElements[selector][i].innerHTML = '<h4><a href="#">'+$(this)[0].innerHTML+'</a></h4><div>'+getHiddenDiv.innerHTML+'</div>';
			 
			 $(tempElements[selector][i]).attr('class', $(parent).attr('class'));
			 $(tempElements[selector][i]).addClass('dropdown-selected');
			 
			 tempElements[selector][i].style.display = 'none';
			 tempElements[selector][i].style.position = 'absolute';
			 tempElements[selector][i].style.width = parent.offsetWidth+'px';
			 tempElements[selector][i].style.top = $(parent).offset().top+'px';
			 tempElements[selector][i].style.left = $(parent).offset().left+'px';
			 tempElements[selector][i].style.zIndex = '1000';
			 
			 document.body.appendChild(tempElements[selector][i]);
			 tempElements[selector][i].style.display = 'block';
			 
			 var hiddenChild = tempElements[selector][i].getElementsByTagName('div')[0];
			 hiddenChild.style.width = tempElements[selector][i].offsetWidth+'px';
			 
			 var contents = hiddenChild.getElementsByTagName('ul')[0];
			 contents.style.display = 'none';
			 hiddenChild.style.display = 'block';
			 
			 hiddenChild.style.display = 'block';
			 
			 $(contents).slideDown(duration);
			 
			 $(tempElements[selector][i]).find('h4 a').click(function() {
			 		 if(disableAction[selector][i]) {
						return false;
					}			 	
					disableAction[selector][i] = true;	
			 		_dropdownHide(selector, i, duration);
			 		return false; 
			 });
			 
			 
			 $(tempElements[selector][i]).mouseleave(function() {
			 		if(disableAction[selector][i]) {
					 	return false;
					}			 		
					disableAction[selector][i] = true;
			 		setTimeout('_dropdownHide(\''+selector+'\','+i+', '+duration+')', 300);
			 		
			 });
			 
			 return false;
		 });
	});
}

function _dropdownHide(s, i, duration) {

 	$(tempElements[s][i]).find('ul').slideUp((duration*2), function() {
 		
		 document.body.removeChild(tempElements[s][i]);
			tempElements[s][i] = '';
			disableAction[s][i] = '';
	 });
}