var baseUrl = "/images/gallery_images/";

var PhotoGallery = {
	initialize: function() {
		this.thumbTable = $('thumbtable');
		this.photoarea = $('photoarea');
		this.titlearea = $('titlearea');
		//this.showgraphic = $('photo');
		this.children = new Array();
		this.selected = null;
		this.fade = null;
		this.appear = null;
	},
	add: function(picture) {
		this.children.push(picture);
	},
	show: function(picture) {
		// deselect current
		Effect.Appear('clicktozoom');
		if(this.selected) this.selected.deselect();
		// select new
		picture.select();
		
		if(this.selected == picture) return false;
		
		// start combo transition
		if(this.selected) {
			this.fade = new Effect.Fade(this.selected.fullsize);
			this.appear = new Effect.Appear(picture.fullsize);

			Effect.Fade(this.selected.bigname);
			Effect.Appear(picture.bigname);			
			
		}
		// fade in the picture
		else {
			Effect.Appear(picture.fullsize);
			Effect.Appear(picture.bigname);
		}
		
		// do something fancy to the titlearea
		//this.titlearea.innerHTML = picture.name;
		
		this.selected = picture;
	},
	prev: function() {
		// find the index of the selected picture
		var index = this.children.indexOf(this.selected);
		var prev = (index == 0) ? this.children.length - 1 : index - 1;
		this.show(this.children[prev]);
	},
	next: function() {
		// find the index of the selected picture
		var index = this.children.indexOf(this.selected);
		var next = (index == (this.children.length - 1)) ? 0 : index + 1;
		this.show(this.children[next]);
	}
};

var Picture = Class.create();
Picture.prototype = {
	initialize: function(id, name, image) {
		this.id = id;
		this.name = name;
		this.image = image;
		
		// create the thumbnail
		this.element = document.createElement('div');
		Element.addClassName(this.element, 'thumbframe');
		this.element.onmouseover = function() { Element.addClassName(this.element, 'hover'); }.bind(this);
		this.element.onmouseout =  function() { Element.removeClassName(this.element, 'hover'); }.bind(this);
		this.element.onclick = function() { PhotoGallery.show(this); }.bind(this);
		
		this.thumbnail = document.createElement('img');
		this.thumbnail.src = baseUrl + this.image.thumb;
		Element.addClassName(this.thumbnail, 'thumb');

		this.element.appendChild(this.thumbnail);

		// create the fullsize
		this.fullsize = document.createElement('img');
		this.fullsize.src = baseUrl + this.image.full;
		this.fullsize.onclick = this.zoom.bind(this);
		Element.addClassName(this.fullsize, 'full');
		Element.hide(this.fullsize);
		
		// append thumbnail to thumbTable
		PhotoGallery.thumbTable.appendChild(this.element);
		
		// append fullsize to photoarea
		PhotoGallery.photoarea.appendChild(this.fullsize);
		
		this.bigname = document.createElement('span');
		this.bigname.innerHTML = this.name;
		Element.hide(this.bigname);
		
		PhotoGallery.titlearea.appendChild(this.bigname);
		
		// add to Picture System
		PhotoGallery.add(this);
	},
	select: function() {
		Element.addClassName(this.element, 'hover');
	},
	deselect: function() {
		Element.removeClassName(this.element, 'hover');
	},
	zoom: function() {
		if(PhotoGallery.window && PhotoGallery.window.closed == false) PhotoGallery.window.location.href = baseUrl + this.image.zoom;
		else
			PhotoGallery.window = window.open(baseUrl + this.image.zoom, "Zoom", "width=1040,height=560,toolbar=no,status=no,titlebar=no,menubar=no");
	}
};

window.onload = function() {
	
	PhotoGallery.initialize();
	PictureList.children.each( function(p) { new Picture(p.id, p.name, p.image); } );
	PhotoGallery.show(PhotoGallery.children[0]);

};