/* main.js

	Dargaville.ORG
	
	requires: mootools.js Element
*/


/*
later

window.addEvent('domready',function() {	
	//first, apply a class to each of your menu element
	//$$('.links') puts every element wearing the .links class into an array
	//$$('.links').each is to browse the array an apply a funtion to... each of them
	$$('.links').each(function(el, i) {
		//there comes exactly your former fx statement except for
		var ExampleFx = new Fx.Style(el, 'opacity', { //the fact i apply the effect on el
			wait: false, //and wait: false which make the effect not waiting (very useful on the mouseout or mouseleave function...
			duration: 500,
			transition: Fx.Transitions.Quart.easeInOut
		});
		//and there i apply (always on el) the effect on mouseenter (similar in this case but often better than mouseover)
		//and mouseleave (same for mouseenter but concerning mouesout)
		el.addEvent('mouseenter', function() { ExampleFx.start(1, 0.5); });
		el.addEvent('mouseleave', function() { ExampleFx.start(0.5, 1); });
	});
});
*/

if(!window.JOE){var JOE={};}
JOE.img={
	el:{
		img1:{},	// original image el
		img2:{},	// new top image el
		opt:{}	// select el
	},
	timer:0,
	focus:false,	// on img1
	selectionIdx:0,	// selection index
	selection:['Images - Paused','All images','Outdoors','Churchs','Parks'],
	listIdx:3,	// list index
	list:[ // selection index, title, url
		[2,'Fishing','img/outdoors/fishing.jpg'],
		[2,'Planting','img/outdoors/planting.jpg'],
		[2,'Climbing','img/outdoors/rockclimber.jpg'],
		[2,'Backyard','img/outdoors/backyard.jpg'],
		[3,'Anglican Church','img/church/anglican.jpg'],
		[3,'Baptist Church','img/church/baptist.jpg'],
		[3,'Catholic Church','img/church/catholic.jpg'],
		[3,'Gospel','img/church/gospel.jpg'],
		[3,'Church of Jesus Christ of Latter-day Saints','img/church/lds.jpg'],
		[3,'Methodist Church','img/church/methodist.jpg']
	],
	init:function(div){
		var	showcase=document.getElementById(div),
			newDiv=document.createElement('div'),	// div for select
			oldImg=showcase.getElementsByTagName('img')[0],	// existing image
			newImg=oldImg.cloneNode(true),	// clone image
			html='';
		showcase.appendChild(newImg);
		showcase.appendChild(newDiv);
		// front image
		newImg.zindex=99;
		// build selection
		for(var i=0,l=this.selection.length;i<l;i++){
			html+='<option value="'+i+'">'+this.selection[i]+'</option>';
		}
		newDiv.innerHTML='<select>'+html+'</select>';
		// pointers
		this.el.img1=oldImg;
		this.el.img2=newImg;
		this.el.opt=newDiv.getElementsByTagName('select')[0];
		// change selection
		this.el.opt.onchange=this.next;
		// start transition
		this.timer=setTimeout(this.next,5000);
	},
	next:function(){
		var	the=JOE.img,	// this object
			selection=the.el.opt.selectedIndex,	// all images index 1
			orginalListIndex=the.listIdx,
			img1=the.el.img1,
			img2=the.el.img2,
			imgNew,
			imgOld;
		// ensure timer stopped
		clearTimeout(the.timer);
		// image carousel paused
		if(selection==0) return;
		// focus
		imgNew=the.focus?img2:img1;
		imgOld=the.focus?img1:img2;
		the.focus=!the.focus;
		// next
		do{
			the.listIdx=++the.listIdx%the.list.length;	// increment and modulus array size
		}
		while(selection!=1&&the.list[the.listIdx][0]!=selection&&the.listIdx!=orginalListIndex)
		// load next image
		imgNew.onload=function(e){
			this.alt=the.list[the.listIdx][1];
			this.title=the.list[the.listIdx][1];
			if($(imgOld).fx){$(imgOld).fx.stop();}
			if($(imgNew).fx){$(imgNew).fx.stop();}
			$(imgOld).fx=$(imgOld).effect('opacity',{duration:3000}).start(0);
			$(imgNew).fx=$(imgNew).effect('opacity',{duration:3000}).start(1);
			the.timer=setTimeout(the.next,10000);
		}
		imgNew.src=the.list[the.listIdx][2];
	}
}

window.onload=function(){
	JOE.img.init("showcase");

	// accordion
	var accordion=new Accordion('h3.atStart','div.atStart',{
		opacity:false,
		onActive:function(toggler, element){
			toggler.setStyle('color','#008080');
			},
		onBackground:function(toggler, element){
			toggler.setStyle('color','#222');
			}
		},
		$('accordion'));
	// link
	document.getElementById('groups').onclick=function(){accordion.display(0);}
	document.getElementById('events').onclick=function(){accordion.display(1);}
	document.getElementById('free').onclick=function(){accordion.display(2);}

}