window.addEvent('domready', function() {
	var hero_wrapper = document.id('hero_wrapper');
	var hero_frames = hero_wrapper.getElements('.hero');
	var cur_frame = 0;
	var cur = hero_frames[cur_frame];
	var interval, fx;

	var time = 5000;
	var height = '490px', width='980px';
	var hero_bottom = height;

	hero_frames.setStyles({
		'visibility': undefined,
		'display': undefined,
		'width': width,
		'height': height,
		'left': width,
		'position': 'absolute',
		'opacity': 1,
	});

	hero_wrapper.setStyles({
		'height': height,
		'width': width,
		'overflow-y': 'hidden',
		'overflow-x': 'hidden',
		'position': 'absolute'

	});
	cur.setStyle('left',0);

	hero_frames.set('tween', {duration: 1500, transition: Fx.Transitions.Quad.easeInOut});

	var overlay;
	hero_frames.each(function(hero_frame) {
		overlay = hero_frame.getElement('.overlay');
		overlay.setStyle('width', '880px');
	});

	document.id('footer').setStyles({
		'margin-top': height,
		'z-index': 9999
	});
	cur.setStyles({
		'visibility': undefined,
		'opacity': 1
	});
	cur.fade('in');

	var next_hero = function() {
		var nxt;
		cur_frame++;
		nxt = hero_frames[cur_frame];
		if (!nxt) {
			nxt = hero_frames[0];
			cur_frame = 0;
		}

		// Make sure the next element is below the current one
		nxt.setStyle('left', width);

		cur.tween('left', '-' + width);
		cur.getElement('.overlay').tween('opacity', 0.1);
		nxt.getElement('.overlay').setStyle('opacity', 1);
		nxt.tween('left', 0);


		cur = nxt;

		// Queue up the next transition.
		setTimeout(next_hero, time);
	};

	setTimeout(next_hero, time);
});