//
// Custom Scripts for simplicIT solutions website
//

var ANIM_DURATION = 500; // defines the length of the transitions
var HIDE_DELAY = 200; // amount of time the mouse can leave the nav before it's hidden
var timer;

function init() { // initializes the navigation and and toggleable feature areas (if any)
	var body = $$('body')[0];
	var nav = $$('#nav ul.menu li');
	var subnav = $$('#nav .subnav');
	var footer = $$('#footer .subnav');	
	var active = ($$('#nav ul.menu li.active').length > 0) ? String($$('#nav ul.menu li.active')[0].getChildren('a').getProperty('href')).replace('/index.php/', '') : '';
	var show = 'default';
	
	for (i=0; i < footer.length; i++) { // loop through the footer subnavigation and see if anything is marked as active
		if (active.indexOf(footer[i].getProperty('id')) > -1) show = footer[i].getProperty('id');
	}
	for (i=0; i < footer.length; i++) { // loop through again and dispose of any footer subnavigation that's not active
		if (footer[i].getProperty('id') != show) footer[i].dispose();
	}
	for (i=0; i < subnav.length; i++) { // clean up some left over code we have if the default subnav menu is still around by now
		if (subnav[i].getProperty('id') == 'default') subnav[i].getParent('div.moduletable').dispose();
	}
	subnav.fade('hide'); // hide the subnav menus
	for (i=0; i < nav.length; i++) { // NOTE: remove the -1 if a submenu for charity is added
		nav[i].addEvent('mouseenter', function() { // event handler for the main nav
			var active = $(new String (this.getChildren('a')[0].getProperty('href')).replace('/index.php/', '')); // figure out which subnav to show and do the proper fades
			subnav.fade('out');
			console.log(this);
			console.log(this.getChildren('a'));
			active.fade('in');
			clearInterval(timer); // clear the timer in case it was set to hide the menu, i.e. we slipped off the nav briefl but have re-entered
		});
		nav[i].addEvent('mouseleave', function() {
			timer = setTimeout("$$('#nav .subnav').fade('out');", HIDE_DELAY); // once we leave the nav set the timer that will hide the nav if we don't re-enter first
		});
	}
	subnav.addEvent('mouseenter', function() {
		clearInterval(timer); // same goes for subnav, if we re-enter it clear any timers so it's not hidden
	});
	subnav.addEvent('mouseleave', function() {
		timer = setTimeout("$$('#nav .subnav').fade('out');", HIDE_DELAY); // and again same for subnav, if we leave set the timer to hide the nav
	});
	if ($$('.columns.features').length > 0) { // if we have any feature lists on the page set them up
		var headers = $$('.columns.features h1','.columns.features h2','.columns.features h3');
		var link;
		var paragraphs = $$('.columns.features p');
		for (i=0; i < headers.length; i++) { // loop through all the headers in the features list...
			link = new Element('a', { 
				href: '#',
				html: headers[i].innerHTML
			});
			link.addEvent('click', function(e) { // create the click handler for the link that will trigger hiding/showing content NOTE: we'll figure out later if this gets used
				var content = this.getParent().getNext();
				var morphContent = new Fx.Morph(content, {
					duration: ANIM_DURATION,
					transition: Fx.Transitions.Quad.easeOut
				});
				/*var others = $$('.columns.features .column > div');
				for (j=0; j < others.length; j++) {
					if (others[j] != content) {
						new Fx.Morph(others[j], {
							duration: ANIM_DURATION,
							transition: Fx.Transitions.Quad.easeOut
						}).start({
							opacity: 0,
							height: 0
						}).chain(function(){
							this.element.setStyle('visible', 'hidden');
						});
					}
				}*/
				if (content.getStyle('visibility') == 'hidden') { // if the content to show is hidden we need to briefly show it so we know what size to expand it to
					content.setStyles({
						visible: 'visible',
						height: 'auto'
					});
					var height = content.getSize().y;
					content.setStyle('height', 0);
					morphContent.start({
						opacity: 1,
						height: height
					});
				}
				else { // otherwise we just need to retract/fade out the content and hide it once it has finished transitioning
					morphContent.start({
						opacity: 0,
						height: 0
					}).chain(function() {
						this.element.setStyle('visibility', 'hidden');
					});
				}
				return false;
			});
			if (headers[i].getNext()) { // determine if the header has eligible content following it to be toggled and if so...
				if (headers[i].getNext().match('p') || headers[i].getNext().match('ul') || headers[i].getNext().match('ol')) {
					headers[i].innerHTML = ''; // clear out the header's existing innerHTML...
					link.inject(headers[i]); // and replace it with the link we created earlier
					var next = new Array(); // create an array to hold the elements following the header
					next[0] = headers[i].getNext(); // add the first following element to the array
					var j=1;
					while (j != 0) { // loop through adding eligible elements to the array until no more are found
						if (next[j-1].getNext()) {
							if (next[j-1].getNext().match('p') || next[j-1].getNext().match('ul') || next[j-1].getNext().match('ol')) {
								next[j] = next[j-1].getNext();
								j++;
							}
							else j=0;
						}
						else j=0;
					}
					var container = new Element('div'); // create a container for the eligible elements and inject them into 
					for (j=0; j < next.length; j++) {
						next[j].inject(container);
					}
					container.inject(headers[i], 'after'); // add the container after the header and hide it
					container.setStyles({
						opacity: 0,
						height: 0
					});
				}
			}
		}
	}
	body.fade('hide'); // now reveal the body
	body.setStyle('margin-left', 0);
	body.fade('in');
}