/**
 * Base class for the pushbox
 * 
 * @class Base class for the pushbox
 * @author Rocco Janse <a href="mailto:rocco@efocus.nl">rocco@efocus.nl</a>
 * @version 1.0
 */
var Pushbox = new Class({
	
	Implements: [Events, Options],
	
	options: {
		viewport: false,
		slides: [],
		showNavigation: false,
		progressBar: false,
		interval: 5,
		showProgress: true,
		prevNext: true
	},	
	
	/**
	 * Initialises pushbox
	 * @constructor
	 */
	initialize: function(container, options) {
		this.setOptions(options);
		this.container = container;

		this.progressfx = false;
		this.currentSlide = null;
		
		if(this.options.slides.length > 0) {
			this.initNavigation();
		}
		
		this.currentTrail = 0;
		if(this.options.progressBar) this.resetProgress();
		this.hideSlides();
		this.prevNextSlides();		
		this.showSlide(0);
	},
	
	/**
	 * initialises click events on navigation
	 */
	initNavigation: function() {
		
		if(this.options.showNavigation){
			var i = 0;
			var elNavList  = new Element('ul');
			elNavList.addClass('nav');

			for(i; i<this.options.slides.length; i++){
				var elNavListItem = new Element('li');
				var elNavListItemLink = new Element('a');
				elNavListItemLink.set('html',i);
				elNavListItem.addClass('nav')
				elNavListItemLink.inject(elNavListItem);
				elNavListItem.inject(elNavList);
			};
			
			elNavList.inject(this.options.viewport);
			
			this.options.navigation = elNavList.getChildren('li.nav');
		} else {
			this.options.navigation = $$('ul.nav')[0].getChildren('li');
		}
		
		this.options.navigation.each(function(nav, index) {
			nav.removeEvents();
			nav.addEvents({
				'click': function(event) {
					event.stop();
					this.showSlide(index);
				}.bind(this)
			});
		}.bind(this));
	},

	/**
	 * position slides, hides slides and add functionality
	 */
	hideSlides: function() {
		this.options.slides.each(function(slide) {
			slide.fade('hide');
			slide.setStyles({
				'position': 'absolute',
				'top': 0,
				'left': 0
			});
			
			if(this.options.progressBar) {
				slide.removeEvents();
				slide.addEvents({
					'mouseenter': function() {
						this.progressfx.pause();
					}.bind(this),
					'mouseleave': function() {
						this.progressfx.resume();
					}.bind(this)	
				});
			}
		}.bind(this));
	},
	
	/**
	 * shows slide
	 * @param {int} index of slide
	 */
	showSlide: function(slideindex) {
				
		if(this.options.progressBar) this.progressfx.cancel();
		
		if(this.options.navigation.length > 0) {
			this.options.navigation[slideindex].getElement('a').addClass('active');
			if($defined(this.currentSlide)) {
				this.options.navigation[this.currentSlide].getElement('a').removeClass('active');
			}
		}
		
		if (this.currentSlide == null) {
			this.options.slides[slideindex].fade('show');
			this.currentSlide = slideindex;
			if(this.options.progressBar) this.startProgress();
		} else {
			this.options.slides[this.currentSlide].fade(0);
			this.options.slides[slideindex].fade(1).get('tween').chain(function() {
				this.currentSlide = slideindex;
				if(this.options.progressBar) this.startProgress();
			}.bind(this));				
		}
		
	},
	
	resetProgress: function() {
		if(this.options.progressBar) {
			this.options.progressBar.setStyle('left', -this.options.viewport.getWidth());
			if(this.progressfx) {
				this.progressfx.cancel();
			}
		
			this.progressfx = new Fx.Tween(this.options.progressBar, {
				duration: (this.options.interval*1000).toInt(), 
				property: 'left'
			});	
		}
	
	},
	
	startProgress: function() {
		this.showNextTrail();
		this.progressfx.start(-this.options.viewport.getWidth(),'0').chain(function() {
			if (this.currentSlide+1 >= this.options.slides.length) {
				newslide = 0;
			} else {
				newslide = this.currentSlide+1;
			}
			this.showSlide(newslide);
		}.bind(this));
	}
	
});


/**
 * Sliding pushbox
 * 
 * @class Sliding pushbox
 * @author Rocco Janse <a href="rocco@efocus.nl">rocco@efocus.nl</a>
 * @version 1.0
 * @date 20/09/2010
 * @requires Base pushbox
 */
var Pushbox_Slide = new Class({
	
	Extends: Pushbox,
	
	options: {
		direction: 'right'
	},
	
	initialize: function(container, options) {
		this.parent(container, options);
	},
	
	hideSlides: function() {
		
		// get parent ul
		this.parentlist = this.options.slides[0].getParent('ul');
		
		// get total slides width
		newWidth = this.options.viewport.getWidth()*this.options.slides.length+'px';
		
		// set newwidth
		this.parentlist.setStyle('width', newWidth);
		
		this.options.slides.each(function(slide) {
			slide.setStyles({
				'float': 'left',
				'margin': 0
			});
			
			if(this.options.progressBar) {
				slide.removeEvents();
				slide.addEvents({
					'mouseenter': function() {
						this.progressfx.pause();
					}.bind(this),
					'mouseleave': function() {
						this.progressfx.resume();
					}.bind(this)	
				});
			}
		}.bind(this));
	},

	showSlide: function(slideindex) {
		if(this.options.progressBar) this.progressfx.cancel();
		
		if(this.options.navigation.length > 0) {
			this.options.navigation[slideindex].getElement('a').addClass('active');
			if($defined(this.currentSlide)) {
				this.options.navigation[this.currentSlide].getElement('a').removeClass('active');
			}
		}
		
		var slideFx = new Fx.Tween(this.parentlist);
		
		if (this.currentSlide == null) {
			slideFx.set('margin-left', 0);
			this.currentSlide = slideindex;
			if(this.options.progressBar) this.startProgress();
		} else {
			oldPos = -this.options.viewport.getWidth()*this.currentSlide+'px';
			newPos = -this.options.viewport.getWidth()*slideindex+'px';
			this.showTrail(slideindex);
			slideFx.start('margin-left', oldPos, newPos).chain(function() {
				this.currentSlide = slideindex;
				if(this.options.progressBar) this.startProgress();
			}.bind(this));
		}
	},

	showTrail: function(slideindex){
		var trailIndex = Math.floor(slideindex / 6);
		$$('ul.nav')[0].tween('margin-left', -trailIndex * 540);
	},

	prevNextSlides: function(){		
		if(this.options.prevNext){			
			var elPrev = new Element('a');
			var elNext = new Element('a');
			elPrev.addClass('prev');
			elNext.addClass('next');
			elPrev.set('html', '<');
			elNext.set('html', '>');
			
			elPrev.inject(this.options.viewport);
			elNext.inject(this.options.viewport);
			
			elPrev.addEvents({
				'click': function(event) {
					event.stop();
					if (this.currentSlide - 1 >= 0) {
						this.showSlide(this.currentSlide - 1);
					} else {
						this.currentSlide == this.options.navigation.length;
						this.showSlide(this.options.navigation.length-1);
					}
				}.bind(this)
			});
			elNext.addEvents({
				'click': function(event) {					
					event.stop();
					if (this.currentSlide + 1 < this.options.navigation.length) {
						this.showSlide(this.currentSlide + 1);
					} else {
						this.currentSlide == 0;
						this.showSlide(0);
					}
				}.bind(this)
			});
		}
	}
});