var Gallery = Class.create();
Gallery.prototype = {

	initialize: function(sets, leadSet, perPage, perPageSet) {
		this.sets = sets;
		this.leadSet = leadSet;
		this.perPage = perPage;
		this.perPageSet = perPageSet;
		
		this.page = 0;
		this.maxPage = $H(this.sets).keys().size()-this.perPage;
		if (this.maxPage <= 0) {
			$('uparrow').hide();
			$('downarrow').hide();
		}

		this.selectedSet = -1;
		this.selectedImage = -1;
		this.dark = true;
		this.locked = false;
		this.fadeOutFinished = true;
		this.imageLoadFinished = false;

		var leadSet = this.drawThumbs(0);
		this.selectSet(leadSet);

		Event.observe('uparrow', 'click', this.upArrowClick.bindAsEventListener(this));
		Event.observe('downarrow', 'click', this.downArrowClick.bindAsEventListener(this));
//		Event.observe('moreuparrow', 'click', this.upArrowClickSet.bindAsEventListener(this));
//		Event.observe('moredownarrow', 'click', this.downArrowClickSet.bindAsEventListener(this));
	},

	upArrowClick: function() {
		if (this.page > 0) this.page = this.page - 1;
		this.drawThumbs();
	},
	downArrowClick: function() {
		if (this.page < this.maxPage) this.page = this.page + 1;
		this.drawThumbs();
	},

	drawThumbs: function() {
		var sets = $H(this.sets);
		var setKeys = sets.keys();
		var thumbContainer = $('mainthumbs');
		thumbContainer.innerHTML = '';
		for (var index=(this.page); ((index<setKeys.size()) && (index<(this.page+this.perPage))); ++index) {
			var setKey = setKeys[index];
			if ((this.selectedSet != -1) && (setKey == this.selectedSet.setKey)) {
				var thumb = this.selectedSet;
			} else {
				var set = sets[setKey];
				var thumb = document.createElement('img');
				thumb.src = set.thumb[set.leadThumb];
				thumb.setKey = setKey;
			}
			thumbContainer.appendChild(thumb);
			Event.observe(thumb, 'click', function(event) {
				this.selectSet(Event.element(event))
			}.bindAsEventListener(this));
			if (setKey == this.leadSet)
				var leadSet = thumb;
		}
		return leadSet;
	},
	
	selectSet: function(element) {
		if (this.locked) return;
		if (this.selectedSet.setKey == element.setKey) return;

		if (this.selectedSet != -1)
			this.selectedSet.className = '';

		element.className = 'selected';
		this.selectedSet = element;
		this.selectedImage = -1;

		this.pageSet = 0;
		this.maxPageSet = this.sets[element.setKey].thumb.size()-this.perPageSet;
/*		if (this.maxPageSet >= 0) {
			$('moreuparrow').show();
			$('moredownarrow').show();
		} else {
			$('moreuparrow').hide();
			$('moredownarrow').hide();
		}
*/

		var leadImage = this.drawSet();
		this.selectImg(leadImage);
	},

	drawSet: function() {
		var set = this.sets[this.selectedSet.setKey];
		var thumbContainer = $('morethumbs');
		thumbContainer.innerHTML = '';
		for (var index=this.pageSet; ((index<set.thumb.size()) && (index<(this.pageSet+this.perPageSet))); ++index) {			
			if ((this.selectedImage != -1) && (index == this.selectedImage.imgNumber)) {
				var thumb = this.selectedImage;
			} else {
				var thumb = document.createElement('img');
				thumb.src = set.thumb[index];
				thumb.imgNumber = index;
			}
			thumbContainer.appendChild(thumb);
			Event.observe(thumb, 'click', function(event) {
				this.selectImg(Event.element(event));
			}.bindAsEventListener(this));
			if (index == set.leadImage)
				var leadImage = thumb;
		}
		return leadImage;
	},
	
	upArrowClickSet: function() {
		if (this.pageSet > 0) this.pageSet = this.pageSet - 1;
		this.drawSet();
	},
	downArrowClickSet: function() {
		if (this.pageSet < this.maxPageSet) this.pageSet = this.pageSet + 1;
		this.drawSet();
	},

	selectImg: function(element) {
		if (this.selectedImage.imgNumber == element.imgNumber) return;
		if (this.locked && !this.dark) return;

		var set = this.sets[this.selectedSet.setKey];
		
		this.newImage = document.createElement('img');
		this.newImage.src = set.image[element.imgNumber];
		this.newDescr = document.createElement('p');
		if (set.title) {
			this.newDescr.innerHTML = '<b>' + set.title + '</b>';
		} else { 
			this.newDescr.innerHTML = 'Agency: <b>' + set.agency + '</b> &nbsp; Client: <b>' + set.client + '</b>';
		}

		if (this.dark) 
			this.switchImage()
			else this.fadeOut();

		// de-select old thumb		
		if (this.selectedImage != -1) 
			this.selectedImage.className = ''; 
		// select new thumb
		element.className = 'selected';
		this.selectedImage = element;

		this.imageLoadFinished = false;
		Event.observe(this.newImage, 'load', this.imageLoadDone.bindAsEventListener(this));
	},
	imageLoadDone: function() {
		if (this.fadeOutFinished) return this.fadeIn();
		this.imageLoadFinished = true;
	},
	
	fadeOut: function() {
		this.locked = true;
		this.fadeOutFinished = false;
		new Effect.Opacity('image', {
			duration: 0.2,
			transition: Effect.Transitions.linear,
			from: 0.99, to: 0.0,
			afterFinish: this.fadeOutDone.bindAsEventListener(this),
			'queue':'start'
		});
	},
	fadeOutDone: function() {
		$('image').hide();
		$('loading').show();
		this.switchImage();
		if (this.imageLoadFinished) return this.fadeIn();
		this.fadeOutFinished = true;
	},

	switchImage: function() {
		this.dark = true;
		var imageContainer = $('image');
		imageContainer.innerHTML = '';
		imageContainer.appendChild(this.newImage.cloneNode(false));
		imageContainer.appendChild(this.newDescr.cloneNode(true));
	},

	fadeIn: function() {
		$('loading').hide();
		$('image').show();
		if (this.fadingIn) return;
		this.dark = false;
		this.fadingIn = true;
		new Effect.Opacity('image', {
			duration: 0.5,
			transition: Effect.Transitions.linear,
			from: 0.0, to: 0.99,
			afterFinish: function() {
				this.locked = false;
				this.fadingIn = false;
			}.bindAsEventListener(this),
			'queue':'end'
		});	
	}
	
}