/* ======================================================================

JS Controls

=======================================================================*/
/*
root vars
------------------------------------*/
var sections = new Array('start', 'press', 'it')
var startup = 'start'

/* ======================================================================

DOM Ready

=======================================================================*/
window.addEvent('domready', function(){
	/*		re-assign lhs links		*/
	$$('#lhs a').each(function(el,i){
		/*		start with no active selection		*/
		if(el.hasClass('active')){el.removeClass('active')}
		/*		assign related content block		*/
		el.page = $(sections[i])
		/*		set initial style and position for related content		*/
		el.page.setStyle('position', 'absolute')
		el.page.fade('hide')
		/*		set morph animation control content block		*/
		el.page.mph = new Fx.Morph(el.page, {duration: 'normal', transition: Fx.Transitions.linear, link: 'cancel'});
		el.page.mph.start({'right': (el.page.getSize().x)*-1})
		/*		setup click action		*/
		el.addEvents({
			'click': function(e){ e.stop(); if(!this.hasClass('active')){showPage.delay(100, this)} }, 
			'mouseleave': function(){} 
		});
		/*		fire up start page		*/
		if(sections[i]==startup){ showPage.delay(500, el) }
	});
	
	/*		setup morphing on wrapper		*/
	document.body.mph = new Fx.Morph('wrapper', {duration: 'short', transition: Fx.Transitions.linear, link: 'cancel'});
	
	/*		setup the QA default state		*/
	//$('QA').def = $('QA').get('html')
	
	
});

/* ======================================================================

Functions

=======================================================================*/

/*
Function Name / Title
-----------------------------------------------------------------------

Function Call
-----------------------------------------------------------------------
	showPage.delay(200, el)

Parameters
-----------------------------------------------------------------------
	el:	element bound as 'this' 

-----------------------------------------------------------------------

Purpose
-----------------------------------------------------------------------
	to swap out content blocks

-----------------------------------------------------------------------

-----------------------------------------------------------------------*/
function showPage(){
	/*		iterate through menu items		*/
	$$('#lhs a').each(function(el,i){
		/*		hide unselected blocks		*/
		if(el!=this){
			el.page.mph.start({'right': (el.page.getSize().x)*-1})
			el.page.fade(0)
			el.removeClass('active')
		}
		/*		show selection		*/
		else{
			/*if(i==2){
				/*		setup Q&A section		
				$('QA').set('html', $('QA').def)
				start_QA.delay(100, $('QA'))
			}
			if(i==3){
				/*		load flash movie		
				var flashObj = new Swiff('player.swf', {
					id: 'swiff_test',width: 525,height: 370,container: $('vidHolder'), params: {allowFullScreen: "true"},events: {onLoad: function() {}}
				});
			}
			/*		remove flash movie		
			else{killFlash.delay(200, $('vidHolder'))}
			/*		set active class on menu item		*/
			if(!el.hasClass('active')){el.addClass('active')}
			/*		load the selected page		*/
			show.delay(500, el.page)
		}
	}.bind(this));
}

/*
empty out html of flash page
------------------------------------*/
function killFlash(){
	this.set('html', '')
}

/*
Function Name / Title
-----------------------------------------------------------------------

Function Call
-----------------------------------------------------------------------
	start_QA.delay(100, $('QA'))

Parameters
-----------------------------------------------------------------------
	bind:	element with id of QA, reffered to as 'this'

-----------------------------------------------------------------------

Purpose
-----------------------------------------------------------------------
	setup Q&A section
	building arrays from default html
	and building new layout and dynamic controls
	***its a biggie***

-----------------------------------------------------------------------

-----------------------------------------------------------------------*/
function start_QA(){
	/*		first up store contents in arrays		*/
	this.questions = new Array()
	$$('#qaList a').each(function(el,i){ this.questions[i] = el.get('text')}.bind(this));
	this.answers = new Array
	$$('#Answers li').each(function(el,i){ this.answers[i] = el.get('html')}.bind(this));
	/*		swap default lists for base structure		*/
	this.set('html', '<h1>Q&amp;A with James G McCallum</h1><div id="mailme" class="niceButt"><a href="mailto:rebecca.howard@senergyworld.com">Email James</a></div><div class="box"><div class="top"></div><div id="qaWrap"></div><div class="clear"></div><div class="base"></div></div>')
	this.wrap = $('qaWrap')
	$('mailme').fade(.5)
	$('mailme').addEvents({
		'mouseenter': function(){ this.fade(1) },
		'mouseleave': function(){ this.fade(.5) }
	});
	
	/*
		next we want to display only the 
		first four questions with some 
		pagination controls underneath
	------------------------------------*/
	
	/*		so... set split limit		*/
	var splitAt = 4
	
	/*		some title text		*/
	this.qTitle = new Element('p', {'text': 'Questions 1 - 5'}).injectInside(this.wrap);
	
	/*		create array of uls to hold new lists		*/
	this.qHolders = new Array()
	for(qh=0;qh<Math.ceil(this.questions.length/splitAt);qh++){ this.qHolders[qh] = new Element('ul', {'class': 'q5'}).injectInside(this.wrap).fade('hide'); }
	
	/*		iterate through list creating new lis in each new ul		*/
	var qhc = 0		//	qHolder[] count
	var ic=0		//	iteration count
	for(i=0;i<this.questions.length;i++){
		n=i+1		//	used to write out number beside question
		/*		create new li with click event linkiing to related answer		*/
		var temp = new Element('li', {'html': n+' : '+this.questions[i],'events': {'click': function(){showAnswer(this.nn, this.p);}}}).injectInside(this.qHolders[qhc]);
		/*		set variables for li and styles		*/
		temp.nn = i
		temp.p = this
		temp.setStyle('cursor', 'pointer')
		/*		iterate counters		*/
		if(ic<splitAt-1){ic++}else{qhc++;ic=0}
	}
	
	/*		init new uls		*/
	this.qHolders.each(function(el,i){
		/*		show first set of questions		*/
		if(i==0){
			el.fade(1)
			this.wrap.setStyles({ height: el.getSize().y+20 })
		}
		/*		set pos variable		*/
		el.pos = i	
	}.bind(this));
	/*		set current visible list		*/
	this.cPos = 0
	
	/*		build q controls		*/
	this.qback = new Element('div', {'html': '&lt; Previous','events': {'click': function(){slideQ($('QA'), 'back');}, 'mouseenter': function(){ this.fade(1) }, 'mouseleave': function(){ this.fade(.5) }}}).injectInside(this.wrap).fade(.5);
	this.qnext = new Element('div', {'html': 'Next &gt;','events': {'click': function(){slideQ($('QA'), 'next');}, 'mouseenter': function(){ this.fade(1) }, 'mouseleave': function(){ this.fade(.5) }}}).injectInside(this.wrap).fade(.5);
	/*		q controls styles		*/
	this.qback.setStyles({
		position: 'absolute',
		top: this.qHolders[this.cPos].getSize().y+120,
		left:10
	})
	this.qnext.setStyles({
		position: 'absolute',
		top: this.qHolders[this.cPos].getSize().y+120,
		right: 10
	})
	this.qback.setStyle('display', 'none')
	this.qback.addClass('niceButt')
	this.qnext.addClass('niceButt')
}


function showAnswer(opt, obj){
	/*		get question, answer and question number		*/
	var q = obj.questions[opt]
	var a = obj.answers[opt]
	var p = opt+1
	
	/*		hide question lists and controls		*/
	obj.qHolders.each(function(el,i){ el.fade(0) });
	obj.qTitle.fade(0)
	obj.qback.setStyle('display', 'none')
	obj.qnext.setStyle('display', 'none')
	
	/*		build answer box		*/
	obj.answerBox = new Element('div', {'class': 'answerBox', 'html': '<h2>Q'+p+' <span id="ttl">'+q+'</span></h2><div id="ans">'+a+'</div><p id="backtoq" class="niceButt">Back to questions</p><div class="clear"></div>'}).injectInside(obj.wrap);
	if($('ttl').getSize().y>50){ $('ans').setStyle('margin-top', $('ttl').getSize().y-30) }
	else{ $('ans').setStyle('margin-top',20) }
	
	/*		reset button		*/
	$('backtoq').p = obj
	$('backtoq').setStyle('cursor', 'pointer')
	$('backtoq').addEvents({
		'click': function(){
			this.p.opt = 'showQ'
			disposeAnswer.delay(200, this.p)
			this.p.qHolders.each(function(el,i){
				if(i==0){
					el.fade(1)
					this.wrap.setStyles({
						height: el.getSize().y
					})
				}
				el.pos = i	
			}.bind(this.p));
			this.p.pos = 1
			slideQ($('QA'), 'back');
			this.p.qTitle.fade(1)
		}
	});
	
	/*		set height of container		*/
	/* $('wrapper').setStyle('height', obj.answerBox.getSize().y+400) */
	obj.wrap.setStyle('height', obj.answerBox.getSize().y)
	document.body.mph.start({ 'height': obj.answerBox.getSize().y+400})
	
	/*		build a controls		*/
	obj.aback = new Element('div', {'class': 'niceButt','html': '&lt; Previous','events': {'click': function(){slideA(p-2, obj);}, 'mouseenter': function(){ this.fade(1) }, 'mouseleave': function(){ this.fade(.5) }}}).injectInside(obj.wrap).fade('hide');
	obj.aback.setStyles({
		position: 'absolute',
		top: obj.answerBox.getSize().y+130,
		left:10
	})
	if(opt<1){ obj.aback.setStyle('display', 'none') }
	
	obj.anext = new Element('div', {'class': 'niceButt','html': 'Next &gt;','events': {'click': function(){slideA(p, obj);}, 'mouseenter': function(){ this.fade(1) }, 'mouseleave': function(){ this.fade(.5) }}}).injectInside(obj.wrap).fade('hide');
	obj.anext.setStyles({
		position: 'absolute',
		top: obj.answerBox.getSize().y+130,
		right: 10
	})
	if(opt>12){ obj.anext.setStyle('display', 'none') }
	obj.anext.fade(.5)
	obj.aback.fade(.5)
}

function slideA(opt, obj){
	obj.opt = opt
	obj.answerBox.fade(0)
	obj.anext.fade(0)
	obj.aback.fade(0)
	
	disposeAnswer.delay(200, obj)
}
function disposeAnswer(){
	this.answerBox.dispose()
	this.anext.dispose()
	this.aback.dispose()
	if(this.opt!='showQ'){ showAnswer(this.opt, this) }
	else{
		
	}
}


function slideQ(obj, togg){	
	if(togg=='next'){
		if(obj.cPos+1<obj.qHolders.length){
			obj.cPos++
			obj.qHolders.each(function(el,i){
				if(i!=obj.cPos){ el.fade(0) }
				else{
					el.fade(1); 
					obj.wrap.setStyles({ height: el.getSize().y+20 })
					/* $('wrapper').setStyle('height', obj.wrap.getSize().y+400) */
					document.body.mph.start({ 'height': obj.wrap.getSize().y+400 })
				}
			});
		}
	}
	else{
		if(obj.cPos-1>=0){
			obj.cPos--
			obj.qHolders.each(function(el,i){
				if(i!=obj.cPos){ el.fade(0) }
				else{
					el.fade(1); 
					obj.wrap.setStyles({ height: el.getSize().y+20 })
					/* $('wrapper').setStyle('height', obj.wrap.getSize().y+400) */
					document.body.mph.start({ 'height': obj.wrap.getSize().y+400 })
				}
			});
		}		
	}
	if(obj.cPos==obj.qHolders.length-1){ obj.qnext.setStyle('display', 'none') } else{obj.qnext.setStyle('display', 'block')}
	if(obj.cPos==0){ obj.qback.setStyle('display', 'none') } else{obj.qback.setStyle('display', 'block')}
	obj.qback.setStyles({ top: obj.qHolders[obj.cPos].getSize().y+120 })
	obj.qnext.setStyles({ top: obj.qHolders[obj.cPos].getSize().y+120 })
	
	document.body.mph.start({ 'height': obj.wrap.getSize().y+400 })
	
	/*		alter title text		*/
	var ql = 'nl'
	var qh = 'nh'
	if(obj.cPos==0){ql=1;qh=4}
	if(obj.cPos==1){ql=5;qh=8}
	if(obj.cPos==2){ql=9;qh=12}
	if(obj.cPos==3){ql=13;qh=14}
	obj.qTitle.set('text', 'Questions '+ql+' - '+qh)
}



function show(){
	document.body.mph.start({ 'height': this.getSize().y+250 });
	this.setStyle('display', 'block')
	this.setStyle('visibility', 'visible')
	
	this.mph.start({'right': 15})
	this.fade(1)
	//checkActive.delay(200)
}

function checkActive(){
	$$('#lhs a').each(function(el,i){
		if(!el.hasClass('active')){
			
			/* el.page.mph.start({'opacity': 0});} */
			el.page.fade(0)}
		
		else{
			show.delay(100, el.page)
		}
	});
}

function makeMB(cn){
	var cnc = '.'+cn
	if($$(cnc).length>0){var initMultiBox = new multiBox(cn, {descClassName: '',path: 'flash/',useOverlay: false,maxWidth: 1050,maxHeight: 576,addDownload: false,pathToDownloadScript: '',addRollover: false,addOverlayIcon: false,addChain: false,recalcTop: false });};
}



function trace(m){console.log(m)}