var heroRotator = new Class({
	containerEl: null,
	foreLayer: null,
	backLayer: null,
	rotatorJSON: null,
	currentRotations: 0,
	currentPromoIdx: 0,
	Implements: Options,
	options: {
		rotationLimit: 240,
		duration: 1000,
		linger: 3000,
		setupFuncCallback: null
	},
	initialize: function(containerEl, rotatorJSONURL, options) {
		this.setOptions(options);
		this.containerEl = containerEl;
		this.result = new Request.JSON({
			url: rotatorJSONURL,
			method: 'get',
			onSuccess: function(jsonObj) {
				this.rotatorJSON = jsonObj;
				this.resetRotator();
			}.bind(this),
			onFailure: function(xhr) {
				alert("There was difficulty in retrieving the hero image data.\n" + "transport.readyState = " + xhr.readyState + " / transport.status " + xhr.status);
			}.bind(this)
		});
		this.result.headers.extend({
			'Accept': '*/*'
		});
		this.result.send("json=true");
	},
	resetRotator: function() {
		this.foreLayer = $('topLayer');
		this.backLayer = $('bottomLayer');
		var pn = $('heroNav').empty();
		for (i = 0; i < this.rotatorJSON.promoList.length; i++) {
			var a = new Element('a', {
				'class': 'advanceToFrameButton' + (i + 1),
				'id': 'advanceToFrameButton' + (i + 1),
				'events': {
					'click': (function(x, obj) {
						return function() {
							obj.view(x);
						}
					})(i, this)
				}
			}).injectTop(pn);
		}
		new Element('a', {
			'class': 'pause',
			'id': 'playToggle',
			'events': {
				'click': (function(obj) {
					return function() {
						obj.playToggle();
					}
				})(this)
			}
		}).injectTop(pn);
		this.currentPromoIdx = 0;
		new Asset.image(this.rotatorJSON.promoList[this.currentPromoIdx].image, {
			onload: function() {
				this.present();
				if (this.rotatorJSON.startOnInit) {
					this.start();
				}
			}.bind(this)
		});
	},
	present: function() {
		$$('#heroNav a').removeClass('on');
		$('advanceToFrameButton' + (this.currentPromoIdx + 1)).addClass('on');
		this.foreLayer.setStyle('background-image', 'url(' + this.rotatorJSON.promoList[this.currentPromoIdx].image + ')');
		this.foreLayer.set('html', this.rotatorJSON.promoList[this.currentPromoIdx].innerHtml);
		if (this.options.setupFuncCallback) this.options.setupFuncCallback();
	},
	step: function() {
		this.currentPromoIdx = (this.currentPromoIdx + 1) % this.rotatorJSON.promoList.length;
		this.backLayer.setStyle('background-image', this.foreLayer.getStyle('background-image'));
		this.backLayer.set('html', this.foreLayer.get('html'));
		this.foreLayer.setStyle('opacity', 0);
		new Asset.image(this.rotatorJSON.promoList[this.currentPromoIdx].image, {
			onload: function() {
				this.present();
				var tmp = function() {
					this.foreLayer.set('tween', {
						duration: this.options.duration
					});
					this.foreLayer.tween('opacity', [0, 1]);
				}.delay(20, this);
			}.bind(this)
		});
		this.currentRotations += (this.currentPromoIdx == 0) ? 1 : 0;
		if (this.currentRotations > this.options.rotationLimit) {
			this.currentRotations = 0;
			this.playToggle();
		}
	},
	start: function() {
		this.currentPromoIdx = 0;
		this.currentRotations = 0;
		this.timer = this.step.periodical(this.options.linger + this.options.duration, this);
		$('playToggle').className = 'pause';
	},
	playToggle: function() {
		if ($('playToggle').className == 'pause') {
			$('playToggle').className = 'play';
			$clear(this.timer);
		} else {
			$('playToggle').className = 'pause';
			this.timer = this.step.periodical(this.options.linger + this.options.duration, this);
		}
	},
	
view:function(idx){
		$clear(this.timer);
		this.backLayer.set('html', this.foreLayer.get('html'));
		this.foreLayer.setStyle('opacity', 0);
		this.backLayer.setStyle('background-image', this.foreLayer.getStyle('background-image'));
		this.foreLayer.set('tween', { duration: 1000});
		this.foreLayer.tween('opacity', [0, 1]);
		$('playToggle').className = 'play';
		this.currentPromoIdx = idx;
		this.present();
	}
});