/**
 * RokHeadRotator - A header rotator with prev/next implementation, ability to play/stop and autoplay option.
 * 
 * @version		1.1
 * 
 * @license		MIT-style license
 * @author		Djamil Legato <djamil [at] djamil.it>
 * @client		Andy Miller @ Rockettheme
 * @copyright	Author
 */
 
 
var RokHeadRotator = new Class({
	options: {
		duration: 1000,
		delay: 9000,
		blank: 'images/blank.png',
		autoplay: false
	},
	
	initialize: function (container, headers, options) {
		this.container = $(container), this.headers = headers;
		this.setOptions(options);
		
		this.current = 0;
		this.transitioning = false;		
		this.status = 'stop';
				
		this.build().attachEvents();
				
		return this;
	},
	
	build: function() {
		var self = this;
		
		this.content = [];
		this.container.setStyle('background', 'none');
		this.headers.each(function(header) {
			new Asset.image(header);
		});
		
		var size = this.container.getSize().size;
		var header = new Element('div', {'styles': {'position': 'absolute'}}).inject(this.container, 'top');
		(this.headers.length).times(function(i) {
			self.content[i] = new Element('div', {
				'styles': {
					'opacity': (!i) ? 1 : 0,
					'width': size.x,
					'height': size.y,
					'position': 'absolute',
					'background': 'url(' + self.headers[i] + ') no-repeat'
				}
			}).inject(header);
		});
		if (this.options.start) {
			self.content[0].setStyle('opacity', 0);
			self.content[this.options.start].setStyle('opacity', 1);
			this.current = this.options.start;
		}
		
		var controls = new Element('div', {'class': 'controls'}).inject(this.container);
		this.arrowPrev = new Element('img', {'alt': 'prev', 'class': 'control-prev'}).inject(controls);
		this.arrowNext = new Element('img', {'alt': 'next', 'class': 'control-next'}).inject(controls);
		this.arrowPause = new Element('img', {'alt': 'play/pause', 'class': 'control-play'}).inject(controls);
		$$([this.arrowPrev, this.arrowNext, this.arrowPause]).setProperty('src', this.options.blank);
		
		// fx
		this.fx = [];
		(this.content.length).times(function(i) {
			this.fx[i] = [
				new Fx.Style(this.content[i], 'opacity', {	
					duration: this.options.duration,
					onStart: function() { self.transitioning = true; },
					onComplete: function() { self.transitioning = false; }
				}),
				new Fx.Style(this.content[i], 'opacity', {duration: this.options.duration})
			];
		}.bind(this));
		
		return this;
	},
	
	attachEvents: function() {
		this.arrowPrev.addEvent('click', this.previous.bind(this));
		this.arrowNext.addEvent('click', this.next.bind(this));
		this.arrowPause.addEvent('click', this.play.bind(this));
		
		if (this.options.autoplay) this.play();
		
		return this;
	},
	
	previous: function() {
		if (this.transitioning) return this;
		
		var prev = (!this.current) ? this.content.length - 1 : this.current - 1;
		this.fx[this.current].each(function(fx) { fx.start(0); });
		this.fx[prev].each(function(fx) { fx.start(1); });
		
		this.current = prev;
		
		return this;
	},
	
	next: function() {
		if (this.transitioning) return this;
	
		var next = (this.current == this.content.length - 1) ? 0 : this.current + 1;
		this.fx[this.current].each(function(fx) { fx.start(0); });
		this.fx[next].each(function(fx) { fx.start(1); });
		
		this.current = next;
		
		return this;
	},
	
	play: function() {
		if (this.status == 'play') return this.stop();
		
		this.arrowPause.setProperty('class', 'control-pause');
		this.status = 'play';
		this.timer = this.next.periodical(this.options.delay + this.options.duration, this);
		
		return this;
	},
	
	stop: function() {
		this.status = 'stop';
		this.arrowPause.setProperty('class', 'control-play');
		$clear(this.timer);
		
		return this;
	
	}
});

RokHeadRotator.implement(new Events, new Options);