function AbstractPopup(element, opacity) {
	this.element = element;
	this.opacity = opacity;
	this.timeout = null;
};

AbstractPopup.prototype.show = function(callback) {
	if(this.opacity < 100) {
		this.opacity += 5;
		with(this.element.style) {
			opacity = this.opacity / 100;
			filter = "alpha(opacity = " + this.opacity + ")";
		}
		var self = this;
		clearTimeout(this.timeout);
		this.timeout = setTimeout(function() {
			self.show.call(self, callback);
		}, 1);
	} else {
		if(callback) {
			callback();
		}
	}
};

AbstractPopup.prototype.hide = function(callback) {
	if(this.opacity > 0) {
		this.opacity -= 5;
		with(this.element.style) {
			opacity = this.opacity / 100;
			filter = "alpha(opacity = " + this.opacity + ")";
		}
		var self = this;
		clearTimeout(this.timeout);
		this.timeout = setTimeout(function() {
			self.hide.call(self, callback);
		}, 1);
	} else {
		if(callback) {
			callback();
		}
	}
};

function IndexGallery(image, background, menu) {
	var self = this;
	this.image = image;
	AbstractPopup.call(this, background, 0);
	with(this.element.style) {
		opacity = "0";
		filter = "alpha(opacity = 0)";
	}
	this.menu = new HoverMenu(this, menu);
//	with(background) {
//		onmouseover = function() {
//			self.menu.show();
//		};
//		onmouseout = function() {
//			if(self.menu.hidemode == true) {
//				self.menu.hide();
//			}
//		};
//	}
}
IndexGallery.prototype = new AbstractPopup();

IndexGallery.prototype.changeImage = function(url, step) {
	var self = this;
	step = step || 1;
	switch(step) {
	case 1:
		this.show(function() {
			self.changeImage.call(self, url, ++step);
		});
		break;
	case 2:
		this.image.onload = function() {
			self.hide.call(self);
		};
		this.image.src = url;
		if(this.image.complete) {
			self.hide.call(self);
		}
		break;
	}
};

function HoverMenu(gallery, element) {
	var self = this;
	AbstractPopup.call(this, element, 0);
	var images = element.getElementsByTagName('img');
	for(var i = 0; i < images.length; i++) {
		images[i].onclick = function() {
			gallery.changeImage(this.longDesc);
		};
	}
	this.hidemode = false;
//	with(this.element) {
//		onmouseover = function() {
//			self.hidemode = false;
//			self.show.call(self);
//		};
//		onmouseout = function() {
//			self.hidemode = true;
//			self.hide.call(self);
//		};
//	}
//	with(this.element.style) {
//		opacity = 0;
//		filter = "alpha(opacity=" + 0 + ")";
//		zIndex = 1000;
//	}
}
HoverMenu.prototype = new AbstractPopup();