// JavaScript Document

/// [ content panel IDs ]
var panels = [];
	panels.push('loading', 'home', 'what', 'how', 'partners', 'about', 'news');
	
var currentPanelIndex = 0;
var customPanel;
var ready = false;
	
/// [ content panel transition options ] 
var slideDuration = 700; //ms
var fadeOutDistance = 800; //px
var fadeInDistance = 800; //px

//var bg_fadeOut = 200; //ms
//var bg_fadeIn = 400; //ms
//var contentBgOpacity = '1' /// target opacity for content area background images

var wordDuration = 300; //home page word list cycler, ms
var rand; // random home page background index
var t //timer for home page background cycler

//Image preload array
/*
images = new Array();
images.push('bg_home_01.jpg',
			'bg_home_02.jpg',
			'bg_home_03.jpg',
			'bg_home_04.jpg',
			'bg_home_05.jpg',
			'bg_home_06.jpg',
			'bg_home_07.jpg','bg_how.jpg','bg_what.jpg','bg_what_global.jpg','bg_audience.jpg','bg_partners.jpg','bg_about.jpg');

function preload(){  // Create image objects & add to DOM to ensure preload 'sticks'
     var i = 0;
	 var myEl = new Element('img');
     for(i=0; i<images.length; i++)  {  myEl.set('src', 'images/backgrounds/'+images[i] ); }
}
*/
//preload();

/// [panel manager; control navigation & initiate transitions]
function panelMan(target) {
	if(ready == true){

		ready = false; // [disable nav until current transition is done]
		var oldPanel;
		var newPanel;
		var direction;
		var newPanelIndex;
		
		if (target == currentPanelIndex){
			ready = true;
			return
		} else if (!isNaN(target)){ // if 'target' is a panel number, set the new panel to it
			newPanelIndex = target;
			direction = ((currentPanelIndex - target) < 0 ? 'right':'left' );
		} else if (target == 'next') {
			direction = 'right';
			if( currentPanelIndex == panels.length - 1){ // check for end of nav array
				newPanelIndex = 1;
			} else { 
				if (currentPanelIndex == -1) 
					newPanelIndex = 1;
				else
					newPanelIndex = currentPanelIndex + 1;
			}
		} else if (target == 'prev') {
			direction = 'left';
			if (currentPanelIndex <= 1){
				newPanelIndex = panels.length - 1; // check for end of nav array
			} else { 
				newPanelIndex = currentPanelIndex - 1;
			}
		}
		else { //load a custom panel not in nav
			direction = 'right';
			newPanelIndex = -1
			newPanel = target;
			customPanel = target;
		}
		
		if (currentPanelIndex != -1)
			oldPanel = panels[currentPanelIndex];
		else
			oldPanel = customPanel;
			
		if (newPanelIndex != -1)
			newPanel = panels[newPanelIndex];
		
		$$('#nav_bar a').removeClass('selected'); // select all anchor elements in the nav bar, set class to 'blank'
		var selected = 'nav_'+panels[newPanelIndex];
		var target = $(selected);
		if(target){
			target.set('class', 'selected'); // set class for current panel element to
		}
		
		pageResets(newPanelIndex);
		tweenNavBarPosition(newPanelIndex);
		transition(oldPanel, newPanel, direction);
		currentPanelIndex = newPanelIndex;
		
	}
	/// [could possibly AJAX-in the new panel content at this point, instead of loading all during page load]
}

/// [Move nav bar selector to new position]
function tweenNavBarPosition(i){
	
	var visibility = (i < 2 ? 0 : 1); // if loading or home panel is current, don't show selector
	var newPosition = (i - 2) * 150; // calculate new position for selector, 150px is the distance to move for each nav element
	newPosition = (newPosition < 0 ? 0 : newPosition); // prevent the selector from moving into negative 'left' values

	var myFx = new Fx.Morph('nav_selector', {duration: 900, transition: Fx.Transitions.Cubic.easeOut});
		myFx.start({
			'opacity': [visibility],
			'left': [newPosition]
		});
}

/// [transition animation between panels]
function transition(oldPanel, newPanel, direction) {
	/// [fade-out old panel in the direction indicated]
	var myFx = new Fx.Morph(oldPanel, {duration: slideDuration, transition: Fx.Transitions.Cubic.easeIn});
	myFx.start({
		'opacity': [1, 0],
		'left': ['0', (direction == 'right' ? '-' : '' )+fadeOutDistance] // condition ? [true value] : [false value]
	});
	/// [listen for the end of fade-out]
	myFx.addEvent('complete',function(){   
		/// [make sure old panel is completely hidden]
		$(oldPanel).setStyle('display','none');
		fadeIn(newPanel, direction);
	});
	/// [fade-in new panel]
	function fadeIn(newPanel, direction) {
		/// [make sure new panel is actually rendered, but completely transparent before the tween starts]
		$(newPanel).setStyle('opacity',0);
		$(newPanel).setStyle('display','block');
		var myFx = new Fx.Morph(newPanel, {duration: slideDuration, transition: Fx.Transitions.Cubic.easeOut});
		myFx.start({
			'opacity': [0, 1],
			'left': [(direction == 'right' ? '' : '-' )+fadeInDistance, '0']
		});
		
		/// [resize container div, update content background, re-activate nav controls]
		content_bg(newPanel); // change background
	
		setHeight(newPanel);
		
		myFx.addEvent('complete',function(){   // listen for the end of transition
			ready = true; // [Re-enable nav controls]
			
		});	
	}
}

function setHeight(newPanel){		
	newHeight = $(newPanel).getStyle('height');
	var myFx = new Fx.Tween('content_container', {property: 'height', duration: 800, transition: Fx.Transitions.Sine.easeOut});
	myFx.start(newHeight);
}

function content_bg(newPanel){
	//clearTimeout(t); // kill home page background cycler
	var newBG;
	var homeBackgrounds = new Array();
		homeBackgrounds.push(
			'bg_home_01.jpg',
			'bg_home_02.jpg',
			'bg_home_03.jpg',
			'bg_home_04.jpg',
			'bg_home_05.jpg',
			'bg_home_06.jpg',
			'bg_home_07.jpg'
			);
	//pick new image
	if(newPanel == 'home'){ // home page
		
		// Make sure we get a different image
		var oldRand = rand;
		do 
		{  	rand = Math.floor(Math.random()*homeBackgrounds.length);   }
		while(rand == oldRand)
		
		newBG = 'url(images/backgrounds/'+homeBackgrounds[rand]+')';
		//t = setTimeout("content_bg('home')", 5000); // Cycle home background images
		
	} else if (newPanel == 'what' && what_status == 'global'){
		newBG = 'url(images/backgrounds/bg_what_global.jpg)';
	} else if (newPanel != 'news') {
	//} else if (newPanel) {
		newBG = 'url(images/backgrounds/bg_'+newPanel+'.jpg)';
	}
	// transition
	new Fx.Tween('content_bg')
		.start('opacity',0)
		.chain(
			function() {
				/// could also pre-load new background image and wait to start fade-in until loaded
				$('content_bg').setStyle('background-image', newBG);
				//if(console.log){console.log('chain 1')};
				this.callChain()
		},
			function() {
				this.start('opacity',1);
				//if(console.log){console.log('chain 2')};
		});
}

window.addEvent('domready', function() {
	/// [set initial opacities for IE]
	$('content_bg').setStyle('opacity', '0' );
	$('nav_selector').setStyle('opacity', '0' );
	$('right_global').setStyle('opacity', '0' );
	
	window.addEvent('load', function() {
		/// [ activate navigation, set panel to home, activate home animation loop ]
		ready = true;
		
		//check for news article to load
		if (location.hash != '')
		{
			var title = location.hash.replace(/\+/g, " ");
			title = title.replace("#", "");
			for (i = 0; i < News.length; i++)
			{
				if (News[i][2] == title)
				{
					SwitchNews(News[i][0]);
					panelMan('news');
					break;
				}
			}
		}
		SwitchNews('news_article_1');
		panelMan(1);
		wordlistAnimate();
		indexListAnimate();
	});
});