var ClassPromo = new Class({
	Implements: [Events, Chain], 						  
	
	log: function(){
		console.log.apply(null, arguments);
	},
	// this function runs whenever a new instance of this class is made.
	initialize: function(){ 
		// Dynamically generate navigation links from promo links
		
		//get all links
		var allLinks = $('promo-arts-portal').getElements('a');
		
		this.currentLink = 0;
		
		var totalLinks =  allLinks.length;
		
		if(totalLinks>0){
			
			var myUL = new Element('ul',{'id':'promo-arts-nav'});
			this.allNavLinks = new Array();
			
			for(var i=0;i<totalLinks;i++){
				//create nav for each article
				var myLI = new Element('li');
				var myLink = new Element('a',{
						'href':'#',
						'html':i+1,
						'id': 'promo-navigator-'+i
				});
				//first link is active by default
				myLink.addClass(i==0 ? 'active':'');
				//add clicky event. http://mootools.net/docs/core/Native/Function/#Function:bindWithEvent
				myLink.addEvent('click',this.ClassPromoScroll.bindWithEvent(this, myLink));
				//put link inside LI
				myLI.grab(myLink);
				//put LI inside UL
				myUL.grab(myLI);
				//$('media').getElement('ul.navigator').grab(myLI);
				this.allNavLinks[i] = myLink;
				
				if(i==1){
					//begin timer
					this.StartPeriodical(myLink);
				}

			}
			
			// put UL inside promo-arts
			$('promo-arts').grab(myUL);
			
			
		}
		$('promo-arts-portal').getElement('div.all-links').tween('left',0);
		
	},
	
	ClassPromoScroll:function(event,anchorLink){
		// 'this' == ClassPromo
		
		if(event) event.stop();
		
		var allPromos = $('promo-arts-portal').getElement('div.all-links');
		var dest = anchorLink.id;
		
		
		dest = Number(dest.substring(16));
		this.currentLink = dest;
		
		//280 is the width of article-viewport
		allPromos.tween('left',dest * -280);
		var activeNav = $('promo-arts-nav').getElement('a.active')
		if(activeNav ) activeNav.removeClass('active');
		anchorLink.addClass('active');
		
		
		//clear timer
		this.periodID = $clear(this.periodID);
		//start timer
		if(this.currentLink == this.allNavLinks.length-1){
			//reset to 0
			nextLink = 0;
		}else{
			nextLink = this.currentLink+1
		}
		this.StartPeriodical(this.allNavLinks[nextLink]);
		
	},
	
	StartPeriodical:function(anchorLink){
		this.periodID = this.ClassPromoScroll.bindWithEvent(this,anchorLink).periodical(8000);
	}
});




var Slideshow = new Class({
	// home page slideshow
	Implements: [Events, Chain], 						  
	
	log: function(){
		console.log.apply(null, arguments);
	},
	// this function runs whenever a new instance of this class is made.
	initialize: function(){ 
		// Dynamically generate navigation links from promo links
		
		//get all img
		this.slides = $('home-slideshow-viewport').getElements('img');
		this.delayms = 3000;
		this.currentImg = 0;
		
		this.totalImg =  this.slides.length;
		
		this.nextButton = $('home-slideshow-button-next');
		this.prevButton = $('home-slideshow-button-prev');
		
		//add clicky event. http://mootools.net/docs/core/Native/Function/#Function:bindWithEvent
		//var myParams = new Array(true, true);
		
		this.nextButton.addEvent('click',this.NextSlide.bindWithEvent(this, {'isNext':true,'clickIsFromUser':true}));
		//var params = new Array(false, true);
		this.prevButton.addEvent('click',this.NextSlide.bindWithEvent(this, {'isNext':false,'clickIsFromUser':true}));
		
		if(this.totalImg>0){
			for(var i=0;i<this.totalImg;i++){
				
				var img = this.slides[i];
				
				if(i>0){
					// make all except 1st img transparent
					img.setStyle('opacity',0);
				}
				
				// create functions for 
				function fadeOut(){
					//fades out a slide img. must bind to img.
					this.tween('opacity',0);
				}
				function fadeIn(){
					//fades in a slide img. must bind to img.
					this.tween('opacity',1);
				}
				

			}
			
			this.StartPeriodical(this.delayms);
		}
		//$('article-viewport').getElement('div.articles').tween('left',0);
		
	},
	
	NextSlide:function(event,paramArray){
		// 'this' == ClassPromo
		// boolean isNext determines if moving forwards or back
		if(event) event.stop();
		//console.log($type(paramArray));
		var isNext = paramArray['isNext'];
		var clickIsFromUser = paramArray['clickIsFromUser'];
		//clear timer
		if(clickIsFromUser) {
			//console.log(this.periodID);
			$clear(this.periodID);
			//console.log(this.periodID);
			//console.log('click');
		}
		//start timer
		var nextImg;
		
		if(isNext){
			//forward
			if(this.currentImg == this.totalImg-1){
				//reset to 0
				nextImg = 0;
			}else{
				nextImg = this.currentImg+1;
				
			}
		}else{
			//backwards
			if(this.currentImg == 0){
				//reset to 0
				nextImg = this.totalImg-1;
			}else{
				nextImg = this.currentImg-1;
				
			}
		}
		
		
		
		//fadeout
		this.slides[this.currentImg].tween('opacity',0);
		//fadein
		this.slides[nextImg].tween('opacity',1);
		
		this.currentImg = nextImg;

		if(clickIsFromUser) {
			this.periodID = this.StartPeriodical.delay(this.delayms*2, this, this.delayms);
			
		}
		

		//return false;
	},
	
	StartPeriodical:function(delayms){
		//console.log(delayms);
		this.periodID = this.NextSlide.bindWithEvent(this,{'isNext':true,'clickIsFromUser':false}).periodical(delayms);
		
	}
	
	
});



window.addEvent('domready', function() {
	var myClassPromo = new ClassPromo();
});
