// JavaScript Document

// bug if go back from About 4 items, offset incorrect.

// create all content areas in correct places and columns + basic HTML pages
// design NON js option, switching style sheets dynamically
// sub html pages, create design with hidden class to be used dynamically
// CSS/JS browser detect show post it note for IE.

// speed adjuster, change scroll speed variable, possibly a settings box drops down under "tennisons", change speed/colours/etc.
// redesign content elements

window.addEvent('domready', function() {

// all navigation
var navCurrent, navPrevious, offsetBack, contFuture, content, navBackTo, offset, offsetTop, loadContent;
var childX, childY, oldX, oldY, newX, newY, offsetX, offsetY, scroll;
var doorSpeed;

var navStart = $$('a.enter');
var navLinks = $$('a.navItem');
var navContent = $$('a.navContent');
var navBack = $$('a.navBack');
var navBackTop = $$('a.navBackTop');
var loader = $$('div#popupInner');
var ajaxContainer = $('innerInner');
var deadlink = $('a.deadlink');
var quicklink = $$('#quicklink a');
var content1 = $('contentElement1'); // used in ajax window


offsetX = -(((window.getWidth() / 2)-77).toInt());
offsetY = -((window.getHeight() / 2)-100);


window.onresize = function changeSize() {
	opacityOn.delay(0);
	
	offsetX = -(((window.getWidth() / 2)-77).toInt());
	offsetY = -((window.getHeight() / 2)-100);
	
	scroll = new Fx.Scroll('navigation', {
		wait: false,
		duration: 1000,
		offset: {'x': offsetX, 'y': offsetY},  
		transition: Fx.Transitions.Quad.easeInOut
	});
	
	scroll.scrollTo(childX, childY);
	opacityOff.delay(1000);
};

// scrolls to other links ------------------------------------------------------------------------- scrolls to other links
navLinks.each (function(el) {
	$(el).addEvent('click', function(event) {
		event = new Event(event).stop();

		var children = el.getNext('ol').getChildren();
		var childNo = children.length;
		var childId = $(el.getNext('ol').getFirst().getFirst()).getProperty('id');

		offset = calcOffset(childNo);
		offsetTop = calcOffsetTop(childNo);

		var currentX = $(el).offsetLeft;  // get current X coordinate
		var currentY = $(el).offsetTop;   // get current Y coordinate
		childX = ($(childId).offsetLeft)-offset;
		childY = ($(childId).offsetTop)-offsetTop;

		opacityOn.delay(0);
		hideBack.delay(400)
		
		if (childX == currentX) {
			scroll.scrollTo(childX, childY); 
			opacityOff.delay(1000);
			showBack.delay(1000); 
		}
		else {
			scroll.scrollTo(childX, currentY).chain(function(){scroll.scrollTo(childX, childY)}); 
			showBack.delay(2000);
			opacityOff.delay(2000);
		}
		
		
		navBackTo = $(el.getParent().getParent().getFirst().getFirst()).getProperty('id');	
		navPrevious = childId;
		offsetBackX = offset;
		offsetBackY = offsetTop;
	});
});


// scrolls to content links ------------------------------------------------------------------------- scrolls to content links
navContent.each (function(el) {
	$(el).addEvent('click', function(event) {
		event = new Event(event).stop();

		ajaxContainer.setStyle('opacity', 0);
		loader.addClass('ajax-loading');

		loadContent = ($(el).getProperty('href'));
		classes = ($(el).getProperty('class'));
		
		opacityOn.delay(0);
		hideBack.delay(400); 

		var navCurrent = $(el).getProperty('id');
		var num = navCurrent.substring(4,15);
		var contFuture = ('content' + num);
		
		var currentX = $(navPrevious).offsetLeft;
		var currentY = $(navPrevious).offsetTop;
		
		childX = ($(contFuture).offsetLeft) + 400;
		childY = ($(contFuture).offsetTop) + ((window.getHeight() / 3) - 40);

		if (childX == currentX - offsetBackX) {
			scroll.scrollTo(childX, childY);
			toggleDoorSlow.delay(1000);
			loadAjax.delay(1200);		
		}
		else {
			scroll.scrollTo(childX, currentY-offsetTop).chain(function(){scroll.scrollTo(childX, childY)});
			toggleDoorSlow.delay(2000);
			loadAjax.delay(2200);		
		}
		content = contFuture;
	})
});

// Back button on content pages ------------------------------------------------------------------------- Back button on content pages
navBack.each (function(el) {	
	$(el).addEvent('click', function(event) {
		event = new Event(event).stop();

		toggleDoorFast.delay(0);

		var parentX = ($(navPrevious).offsetLeft)-offsetBackX;
		var parentY = ($(navPrevious).offsetTop)-offsetBackY;
		childX = ($(content).offsetLeft) + 400;
		childY = ($(content).offsetTop) + ((window.getHeight() / 3) - 40);	
		
		if (parentX == childX) {
			opacityOff.delay(1300);
			showBack.delay(1300);
			scroll.scrollTo(parentX, parentY);
		}
		else {
			opacityOff.delay(2300);
			showBack.delay(2300);
			scroll.scrollTo(childX, parentY).chain(function() {scroll.scrollTo(parentX, parentY)});		
		}

		$('innerInner').empty().innerHTML;
		ajaxContainer.setStyle('opacity', 0);
	});
});


// back button above navigation ------------------------------------------------------------------------- back button above navigation
navBackTop.each (function(el) {
	var navCurrent = $(el).getProperty('id');
	$(el).addEvent('click', function(event) {
		event = new Event(event).stop();
		
		var parents = $(navBackTo).getParent().getParent().getChildren();
		var parentNo = parents.length;
		offset = calcOffset(parentNo);
		offsetTop = calcOffsetTop(parentNo);
		
		var siblings = $(navBackTo).getNext('ol').getChildren();
		var siblingNo = siblings.length;
		offsetBackX = calcOffset(siblingNo);

		var parentX = ($(navBackTo).offsetLeft)-offset;
		var parentY = ($(navBackTo).offsetTop)-offsetTop;
		childX = ($(navPrevious).offsetLeft)-offsetBackX;
		childY = ($(navPrevious).offsetTop)-offsetBackY;	
		hideBack.delay(0);
	
//		alert(parentX + ' = ' + childX + ' + ' + offset);
		if (navBackTo == 'link') {
			scroll.scrollTo(28400, 2050);
		}
		else if (parentX == childX+offset) {
			showBack.delay(1100);
			scroll.scrollTo(parentX, parentY);
		}
		else {
			showBack.delay(2200);
			scroll.scrollTo(childX, parentY).chain(function() {scroll.scrollTo(parentX, parentY)});		
		}
		var navHold = navBackTo;
		navPrevious = navHold;
		navBackTo = $($(navHold).getParent().getParent().getParent().getParent().getFirst().getFirst()).getProperty('id');

	});
});

// scroll function ------------------------------------------------------------------------- scroll function
scroll = new Fx.Scroll('navigation', {
	wait: false,
	wheelStops: false,
	duration: 1000,
	offset: {'x': offsetX, 'y': offsetY}, 
	transition: Fx.Transitions.Quad.easeInOut
});



// open \ close content ------------------------------------------------------------------------- open \ close content
var toggleSlow = new Fx.Style('contentElement1', 'height',{duration: 400}); //doorSpeed 400
var toggleFast = new Fx.Style('contentElement1', 'height',{duration: 200});

function toggleDoorSlow (){
	if(content1.getStyle('height').toInt() > 0){
		toggleSlow.start(0);
	}
	else{
		toggleSlow.start(c1Height);
	}
	//return false;
};

function toggleDoorFast (){
	if(content1.getStyle('height').toInt() > 0){
		toggleFast.start(0);
	}
	else{
		toggleFast.start(c1Height);
	}
	//return false;
};

//set css display:block for the contentElements
content1.setStyle('display','block');
//get the scrollSize of the contentElements
var c1Height = content1.getSize().scrollSize.y;



// load AJAX ------------------------------------------------------------------------- load AJAX
function loadAjax(e) {
	new Ajax(loadContent, {
		method: 'get',
		update: ajaxContainer,
		onComplete: function() {
			loader.removeClass('ajax-loading');
		}
	}).request();

	var showAjax = new Fx.Style(ajaxContainer, 'opacity', {duration: 1000, transition: Fx.Transitions.quadOut});
	showAjax.start(1);
	
	if (classes.contains('gallery')) {
		var galleryJS = loadGallery.delay(500);
	};


};

function loadGallery (){
//alert('oi doe this work')
	var startItem = 0;
	var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*37-582)+'px').setOpacity(0.5);
	var fxOptions7 = {duration:1000, transition:Fx.Transitions.Quad.easeInOut, wait:false}
	var thumbsFx = new Fx.Style(thumbs_mask7,'left',fxOptions7);
	var hs7 = new noobSlide({
		box: $('box7'),
		items: [0,1,2,3,4,5,6,7],
		handles: $ES('span','thumbs_handles7'),
		fxOptions: fxOptions7,
		onWalk: function(currentItem){
			thumbsFx.start(currentItem*37-582);
		},
		startItem: startItem
	});
	hs7.walk(0);
};


// show \ hide back button ------------------------------------------------------------------------- show \ hide back button
function hideBack() {	//move back button off screen
	var switchOff = new Fx.Style($('navBack'), 'margin-top', {duration: 400, transition: Fx.Transitions.quadIn});
	switchOff.start(-200);
};
function showBack() {	//move back button on screen
	var switchOn = new Fx.Style($('navBack'), 'margin-top', {duration: 600, transition: Fx.Transitions.quadOut});
	switchOn.start(0);
};
function opacityOff() {	//fade out back button
	var hideOff = new Fx.Style($('navBack'), 'opacity', {duration: 200, transition: Fx.Transitions.quadIn});
	hideOff.start(1);
};
function opacityOn() {	//fade in back button
	var showOn = new Fx.Style($('navBack'), 'opacity', {duration: 200, transition: Fx.Transitions.quadOut});
	showOn.start(0);
};


// calculate offsets ------------------------------------------------------------------------- calculates offset
function calcOffset (itemNo) {
	if (itemNo == 1) {var offset = 0}
		else if (itemNo == 2) {var offset = -100;} // 2 cols
		else if (itemNo == 3 || itemNo == 6 || itemNo == 9) {var offset = -200;} // 3 cols
		else if (itemNo == 4 || itemNo == 7 || itemNo == 8 || itemNo == 12 || itemNo == 16) {var offset = -300;}  // 4 cols
		else if (itemNo == 5 || itemNo == 9 || itemNo == 10 || itemNo == 11 || itemNo == 13 || itemNo == 14 || itemNo == 15 || itemNo == 17 || itemNo == 18 || itemNo == 19 || itemNo == 20) {var offset = -400;} // 5 cols
	return offset;
};
function calcOffsetTop (itemNo) {
	if (itemNo == 1) {var offset = 0}
		else if (itemNo == 2 || itemNo == 3 || itemNo == 4 || itemNo == 5) {var offsetTop = 0;} // row 1
		else if (itemNo == 6 || itemNo == 7 || itemNo == 8 || itemNo == 10) {var offsetTop = -30;} // row 2
		else if (itemNo == 9 || itemNo == 11 || itemNo == 12 || itemNo == 13 || itemNo == 14 || itemNo == 15) {var offsetTop = -60;} // row 3 60
		else if ( itemNo == 16 || itemNo == 17 || itemNo == 18 || itemNo == 19 || itemNo == 20) {var offsetTop = -90;} // row 4 90
	return offsetTop
};


// move to start ------------------------------------------------------------------------- move to start

scroll.scrollTo(28400, 0).chain (function() {scroll.scrollTo(28400, 2050)});
$('navBack').setStyle('margin-top', -200);
$('navBack').setStyle('opacity', 1);
childX = 28400;
childY = 2050;


/*
$('qLink1').addEvent('click', function(event) {
		event = new Event(event).stop();
		scroll.toElement('link111');
});
*/

// quicklink - could be combined with other js

quicklink.each (function(el) {
	$(el).addEvent('click', function(event) {
		event = new Event(event).stop();

		//loadContent = ($(el).getProperty('href'));
		//var navCurrent = $(el).getProperty('id');
		//var linkTo = loadContent.substring(1,15);

		var linkTo = ($(el).getProperty('href')).substring(1,15);
//		scroll.toElement(linkTo);
		el = linkTo;
		

		var children = $(el).getNext('ol').getChildren();
		var childNo = children.length;
		var childId = $($(el).getNext('ol').getFirst().getFirst()).getProperty('id');

		offset = calcOffset(childNo);
		offsetTop = calcOffsetTop(childNo);

		var currentX = $(el).offsetLeft;  // get current X coordinate
		var currentY = $(el).offsetTop;   // get current Y coordinate
		childX = ($(childId).offsetLeft)-offset;
		childY = ($(childId).offsetTop)-offsetTop;

		var backHide = opacityOn.delay(0);
		var backOff = hideBack.delay(400)
		
/*
		if (childX == currentX) {
			scroll.scrollTo(childX, childY); 
			var backShow = opacityOff.delay(1000);
			var backOn = showBack.delay(1000); 
		}
		else {
			scroll.scrollTo(childX, currentY).chain(function(){scroll.scrollTo(childX, childY)}); 
			var backOn = showBack.delay(2000);
			var backShow = opacityOff.delay(2000);
		}
*/		
		scroll.scrollTo(childX, childY); 
		var backShow = opacityOff.delay(1000);
		var backOn = showBack.delay(1000); 

		navBackTo = $($(el).getParent().getParent().getFirst().getFirst()).getProperty('id');	
		navPrevious = childId;
		offsetBackX = offset;
		offsetBackY = offsetTop;

	});
});



}); // close domReady