// The Sliding Tabs mootools plugin is a creation of Jenna “Blueberry” Fox!
// This isn't free software, so don't forget to give me a gift of some sort!
// some idea's include poetry, drawings, songs, doodads, whosits, fuzzy things,
// software licenses, and general free stuff. Contact me at http://creativepony.com/#contact
// and let me know where you're using Sliding Tabs!
// Documentation: http://creativepony.com/journal/scripts/sliding-tabs/
// version: 1.8

var Slideshow = new Class({
	current: null,
	buttons: false,
	slidesBox: null,
	panes: null,
	fx: null,
	activationEvent: 'click',
	wrap: true,
	activeButtonClass: 'current',
	slideEffect: { // options for effect used to animate the sliding, see Fx.Base in mootools docs
      duration: 400 // 0.4 of a second
    },
	auto: null,
	interval: 5, // Interval between slides (in seconds)
	
	initialize: function(buttonContainer, slideContainer) {
		if (buttonContainer) { this.buttons = $(buttonContainer).getChildren(); }
		this.slidesBox = $(slideContainer);
		this.panes = this.slidesBox.getChildren();
		
		this.current = 0;
		
		if(this.buttons) { this.buttons[this.current].addClass(this.activeButtonClass); }
		
		this.panes.each(function(pane, index) {
			if(index != 0){
				pane.setStyles({
					'display': 'none'
				});
			}	
			
			pane.addEvent(this.activationEvent, this.imageEventHandler.bindWithEvent(this, pane));
			
		}.bind(this));
		
		if (this.buttons) this.buttons.each( function(button) {
	    	button.addEvent(this.activationEvent, this.buttonEventHandler.bindWithEvent(this, button));
	    }.bind(this));
	
		this.startSlideshow();
	},
	
	changeTo: function(element, animate) {
		element.setStyles({'display':'block', 'opacity':'0.0'});
		this.panes[this.current].setStyles({'display':'none'});
		element.fade('in');
	
		if ($type(element) == 'number') element = this.panes[element - 1];
		if (!$defined(animate)) animate = true;
		var event = { cancel: false, target: $(element), animateChange: animate };
	    this.fireEvent('change', event);
	    if (event.cancel == true) { return; };
	
		if (this.buttons) { this.buttons[this.current].removeClass(this.activeButtonClass); };
	    this.current = this.panes.indexOf($(event.target));
	    if (this.buttons) { this.buttons[this.current].addClass(this.activeButtonClass); };
		
	},
	
	buttonEventHandler: function(event, button) {
	    if (event.target == this.buttons[this.current]) return;
	    this.changeTo(this.panes[this.buttons.indexOf($(button))]);
		this.stopSlideshow();
		this.startSlideshow();
	},
	
	imageEventHandler: function(event, button) {
	    this.next();
		this.stopSlideshow();
		this.startSlideshow();
	},
	
	next: function() {
	    var next = this.current + 1;
	    if (next == this.panes.length) {
	    	if (this.wrap == true) { next = 0 } else { return }
	    }

	    this.changeTo(this.panes[next]);
	},

	previous: function() {
		var prev = this.current - 1
		if (prev < 0) {
		  if (this.wrap == true) { prev = this.panes.length - 1 } else { return }
		}

		this.changeTo(this.panes[prev]);
	},
	
	startSlideshow: function() {
		this.auto = this.next.periodical(this.interval*1000, this);
	},
	
	stopSlideshow: function() {
		$clear(this.auto);
	}
});

Slideshow.implement(new Options, new Events);