/*
new Hero Panel crossfade
2009-07-15
Requires MooTools 1.2.1 core and more libraries
*/
var HeroFade = new Class({
	heros: [],
	images: [],
	pagination: [],
	active: 0,
	next: 1,
	fadetime:2,
	period:5,
	fadeCount:0,
 
	initialize: function(){
		var self=this;
		var params = Array.link(arguments, {panelid:String.type, panel:Element.type, panels:Array.type});
		self.heros = $pick(params.panels,[$pick(params.panelid,params.panel)],[]).map(function(p,i){
			self.images[i] = self.collect($(p));
			return $(p);
		});
		self.heros.each(function(hero,index){
			self.setup(hero,index); // setup each hero panel
			self.timer = (function(){
				self.fadeCount++;
				
				if (self.fadeCount == ($$('#devices-hero ul li a img').length - 1)) {
					$clear(self.timer);
				}
				
			  	//hero.getElement('.rightnav').fireEvent('click');
			  	try {					
					self.images[index][self.active].get('tween').removeEvent("complete");
									
					self.active = $pick(self.pagination[index].indexOf(true),0);
					self.next = $pick(self.active+1,1);
					self.fade(index);
				} catch(e) {
				
				}
			}).periodical(self.period*1000,self);
		});
	},
	
	setup: function(hero,index){
		if(this.images[index]){
			this.setupPagination(index); //set up pagination
			this.setupImages(index);  //set items at start, first visible
		}
	},
	
	setupPagination: function(index){
		var self=this;
		self.heros[index].getElements('span').each(function(span){ //set controls for fader
			span.addEvent('click',function(ev){
				try {
					$try(function(){ ev.stop(); });
					
					self.images[index][self.active].get('tween').removeEvent("complete");
					//kill the last 10 second timer that was ongoing
					$clear(self.timer);
									
					self.active = $pick(self.pagination[index].indexOf(true),0);
					self.next = $pick(self.active+(span.hasClass('rightnav')?1:-1),1);
					self.fade(index, true);
					//restart the 10 second timer from its beginning
					
					//commenting out so that it does not rotate again after they click a control
					//self.timer = (function(){
					//  	self.heros[index].getElement('.rightnav').fireEvent('click');
					//}).periodical(self.period*1000,self);
				} catch(e) {
				}
			});
		});
		self.pagination[index] = self.images[index].map(function(li,i){ //set pagination index
			li.addClass(li.hasClass('first')?'active':'');
			return li.hasClass('first');
		});
		self.heros[index].getElements('.pagination').each(function(page){ //add pagination elements
			var pgs = new Element('ul').adopt(self.pagination[index].map(function(pg,i){
				return new Element('li',{
					'id':"panel"+index+"\u002d"+i,
					'class':pg?'active':''
				}).grab(new Element('a',{
					'href':'javascript\u003a\u003b',
					'rel':self.images[index][i].getElement('img').getProperty('src'),
					'events': {
						'click': function(ev){
							try {
							$try(function(){ ev.stop(); });
													
							if(i!=self.next){
								//stop the last tween, kill that darned complete routine that will interrupt the new one we're trying to get going
								self.images[index][self.active].get('tween').removeEvent("complete");
								//kill the last 10 second timer that was ongoing
								$clear(self.timer);
								self.active = $pick(self.pagination[index].indexOf(true),0);
								self.next = i;
								self.fade(index,true);
								//restart the 10 second timer from its beginning
								
								//commenting out so that it does not rotate again after they click a control
								//self.timer = (function(){
								//  	self.heros[index].getElement('.rightnav').fireEvent('click');
								//}).periodical(self.period*1000,self);
							}
							
							} catch (e) {
								//if they click during the first portion of the fade 'A' is undefined
							}
						}
					}
				}).set('html',i+''));
			})).inject(page);
			if(page.getStyle('display')=='none'){
				page.setStyles({'display':'block'});
			}
		});
	},
	
	setupImages: function(index){
		var self=this;
		self.images[index].each(function(li){
			li.set('tween',{
				duration:self.fadetime*1000,
				link:'chain'
			});
			if(!li.hasClass('first')){ li.fade('hide'); }
			else { li.fade('show').addClass('active').inject(li.getParent(),'top'); }
		});
	},
	
	fade: function(index,atonce){
		var self=this;
		if(self.next<0){ self.next = self.pagination[index].length+self.next; }
		else if(self.next>(self.pagination[index].length-1)){ self.next = 0; }
		self.active = (self.active).limit(0, self.pagination[index].length);
		
		if(atonce){
			self.images[index][self.active].get('tween',{duration:self.fadetime*100});
		}
		
		self.images[index][self.active].get('tween').addEvent('complete',function(el){
			el.removeClass('active').removeEvents('complete').setStyle('z-index',5);
				
			self.images[index][self.next].addClass('active').setStyle('z-index',10);
			self.pagination[index][self.next]=true;
			self.pagination[index][self.active]=false;
			self.images[index][self.active].get('tween',{duration:self.fadetime*1000});
		}).addEvent('start',function(el){
			//set pagination links (if exist)
			self.heros[index].getElements('.pagination li').each(function(li,i){
				li.removeClass('active');
			});
			$try(function(){ self.heros[index].getElements('.pagination li')[self.next].addClass('active'); });
		});
 
		self.images[index][self.next].fade('show');
		
		self.images[index][self.active].tween('opacity',0);		
	},
 
	collect: function(panel){
		if(panel){
			var images = panel.getElements('li').filter(function(li){
				var img = li.getElement('img');
				return $pick(img.get('src').contains("hero"), img.get('alt').contains("hero"));
			});
			return images;
		} else { return false; }
	}
 
});
 
window.addEvent('load',function(){ new HeroFade(heros,{page:true}); });