new Element('img',{'src':'images/arrow_left_on.png'});
new Element('img',{'src':'images/arrow_right_on.png'});

var current = 1;
var TOTAL_FRAMES = $$('.frame').length;
var EFFECT_DURATION = 150;

Fx.Horiz = new Class({
	Extends: Fx,				
	initialize: function(element, options) {
		this.element = $(element);
		this.parent(options);
	},	
	set: function(now) {
		this.element.scrollLeft = now.toInt();
	},
	goToFrame: function(number) {
		var from = this.element.scrollLeft;
		var to = (number - 1) * this.element.getSize().x;
		this.start(from,to);
	}
});

var scroller = new Fx.Horiz('container',{
	transition: Fx.Transitions.Sine.easeOut,
	duration: EFFECT_DURATION,
	link: 'cancel',
	onComplete: refigure				
});

var slow_scroller = new Fx.Horiz('container',{
	transition: Fx.Transitions.Sine.easeOut,
	duration: EFFECT_DURATION * 3,
	link: 'cancel',
	onComplete: refigure				
});			

function frame(number) {
	if (number && number <= TOTAL_FRAMES) {
		(function() {
			$('arrows_black').setStyle('display',number == 1 || number == TOTAL_FRAMES ? 'none' : 'block');
			$('arrows_white').setStyle('display',number == 1 || number == TOTAL_FRAMES ? 'block' : 'none');
			$$('.left').setStyle('display',number == 1 ? 'none' : 'block');
			$$('.right').setStyle('display',number == TOTAL_FRAMES ? 'none' : 'block');
		}).delay(EFFECT_DURATION / 2);

		if (current != number) {
			if (number == 1 && current == TOTAL_FRAMES) {
				slow_scroller.goToFrame(number);
			} else {
				scroller.goToFrame(number);
			}						
			current = number;
		}
	}
}

function previous_frame() {
	frame(current - 1);
}			

function next_frame() {
	frame(current + 1);
}			

function refigure() {
	var height = window.getHeight();
	var width = window.getWidth();
	
	var frames = $$('li.frame');
	$('frames').setStyle('width',width * frames.length);
	frames.setStyle('width',width);
	frames.setStyle('height',height);	
				
	$('container').setStyle('width',width);
	$('container').scrollLeft = (current * width) - width;
	
	$$('div.brendan').each(function(div) {
		var img = div.getElement('img');
		var imgsize = img.getSize();
		var over = imgsize.x / imgsize.y;
		var under = imgsize.y / imgsize.x;
	
		div.setStyle('width',width);
		div.setStyle('height',height);
	
		if ((width / height) >= over) {
			img.setStyle('width',width);
			img.setStyle('height',under*width);
		} else {
			img.setStyle('width',over*height);
			img.setStyle('height',height);
		}		
	});
}			
		
window.addEvent('resize',function() {
	refigure();
	if (Browser.Engine.gecko) {
		setTimeout(refigure,100);
	}
});

window.addEvent('load',function() {				
	$$('.arrow').each(function(arrow) {
		arrow.addEvent('mouseover',function(e) {
			var c = e.target.hasClass('left') ? '.left' : '.right';
			$$(c).each(function(a) {
				a.src = 'images/' + a.id + '_on.png';
			});
		});
		arrow.addEvent('mouseout',function(e) {
			var c = e.target.hasClass('left') ? '.left' : '.right';
			$$(c).each(function(a) {
				a.src = 'images/' + a.id + '.png';
			});			
		});			
	});
	
	var max_height = 0;
	$$('.window img').each(function(img) {
		var h = img.getSize().y;
		if (h > max_height) max_height = h;
	});
	$$('.window img').each(function(img,i) {
		var h = img.getSize().y;
		img.setStyle('margin-top', (max_height - h) / 2);
	});
	
	refigure();
	$('container').setStyle('visibility','visible');				
});