/*Event.observe(window, 'load', function() {			
	var galleries = $$('div.gallery');
	for (var i=0; i<galleries.length; i++)
		new Gallery(galleries[i].id, 4);
});*/

var Gallery = Class.create({
	initialize: function(id, playtime) {
		this.id = id;
		this.playtime = playtime;
		this.images = $(this.id + '_thumbnails').getElementsByTagName('img');
		this.stage = $(this.id + '_stage');
		this.thumbnails = $(this.id + '_thumbnails');
		//this.template = new Template('<div class="title">#{title}</div><img src="#{src}" height="338" style="display:none"/>');
		this.current = 0;		
		this.pe = null;
		
		for (var i=0; i<this.images.length; i++) {
			Event.observe(this.images[i], 'mouseover', this.onMouseOver.bindAsEventListener(this, i));
			Event.observe(this.images[i], 'mouseout', this.onMouseOut.bindAsEventListener(this, i));
			Event.observe(this.images[i], 'click', this.onClick.bindAsEventListener(this, i));					
		}
		this.nav = $$('div#' + this.id + ' a');
		for (var i=0; i<this.nav.length; i++) {
			switch (this.nav[i].className) {
				case 'prev':
					Event.observe(this.nav[i], 'click', this.prev.bindAsEventListener(this));
					break;
				case 'next':
					Event.observe(this.nav[i], 'click', this.next.bindAsEventListener(this));
					break;
				case 'play':
					Event.observe(this.nav[i], 'click', this.play.bindAsEventListener(this));
					break;
			}
		}
		
		this.onClick(null, 0);
		this.images[this.current].className = 'active';
	},
	onMouseOver: function(event, i) {
		this.images[i].className = this.images[i].className.substring(0, 6) == 'active' ? 'active_hover' : 'hover';
	},
	onMouseOut: function(event, i) {
		this.images[i].className = this.images[i].className.substring(0, 6) == 'active' ? 'active' : '';
	},
	onClick: function(event, i) {
		this.images[this.current].className = '';
		this.current = i;
		this.images[i].className = 'active';
		if ($(this.id + '_current'))
			$(this.id + '_current').update(this.current + 1 + ' / ' + this.images.length);
				
		this.glideTo = i * 78;
		this.mv = setInterval(this.glide.bindAsEventListener(this), 15);
		//this.thumbnails.scrollLeft = i * 78;		
		//this.stage.update(this.template.evaluate( { src : this.images[i].alt, title : this.images[i].title } ));
		
		$$('div#' + this.id + '_stage div.title')[0].update(this.images[i].title);
		$$('div#' + this.id + '_stage img.photo')[0].src = this.images[i].alt;
		new Effect.Appear($$('div#' + this.id + '_stage img.photo')[0]);		
	},
	prev: function(event) {
		i = this.current - 1;				
		if (i < 0) i = this.images.length - 1;
		this.onClick(null, i);
	},
	next: function(event) {
		i = this.current + 1;
		if (i >= this.images.length) i = 0;
		this.onClick(null, i);
	},
	play: function(event) {
		if (this.pe) {
			this.pe.stop();
			this.pe = false;
			for (var i=0; i<this.nav.length; i++) {
				if (this.nav[i].className.substring(0, 4) == 'play')
					this.nav[i].className = 'play';
			}
		} else {
			for (var i=0; i<this.nav.length; i++) {
				if (this.nav[i].className.substring(0, 4) == 'play')
					this.nav[i].className = 'play_active';
			}
			this.pe = new PeriodicalExecuter(this.next.bindAsEventListener(this), this.playtime);
		}
	},
	glide: function(event) {
		var x = 1;
		if (this.thumbnails.scrollLeft == this.glideTo) {
			clearInterval(this.mv);			
		} else if (this.thumbnails.scrollLeft < this.glideTo) {
			if (this.glideTo - this.thumbnails.scrollLeft > 100) x = 20;
			else if (this.glideTo - this.thumbnails.scrollLeft > 80) x = 15;
			else if (this.glideTo - this.thumbnails.scrollLeft > 60) x = 10;
			else if (this.glideTo - this.thumbnails.scrollLeft > 5) x = 5;
			this.thumbnails.scrollLeft = this.thumbnails.scrollLeft + x;
		} else {
			if (this.thumbnails.scrollLeft - this.glideTo > 100) x = 20;
			else if (this.thumbnails.scrollLeft - this.glideTo > 80) x = 15;
			else if (this.thumbnails.scrollLeft - this.glideTo > 60) x = 10;
			else if (this.thumbnails.scrollLeft - this.glideTo > 5) x = 5;
			this.thumbnails.scrollLeft = this.thumbnails.scrollLeft - x;
		}
	}
});