var Pane = Class.create();

Pane.prototype = {

	initialize: function(prefix) {
		this.currentPane = ''; // either 'front' or 'back'
		this.currentPage = ''; // either 'main', 'spots', ....
		this.prefix = prefix;
	},

	showContent: function(page,html,after) {
		if (!this.currentPane) {
			this.currentPane = 'front'; 
			$(this.pane(this.currentPane)).innerHTML = html;
			
			show(this.pane(this.currentPane));
			//hide(this.pane('back'));
			if (after) after();
		} else if (this.currentPane == 'back') {
			this.showPage('back','front',page,html,after);
		} else if (this.currentPane == 'front') {
			this.showPage('front','back',page,html,after);
		} else {
			alert('Invalid current page: ' + this.currentPane);
		}
	},

	showPage: function(front,back,page,html,after) {
		var b = this.pane(back);
		$(b).innerHTML = html;
		hide(this.pane(front));
		show(this.pane(back));
		this.currentPane = back;
		this.currentPage = page;
		if (after) after();
	},

	pane: function(page) {
		return this.prefix + '_' + page;
	},

	backPane: function() {
		return this.currentPane=='front' ? 'back': 'front';
	},

	frontPane: function() {
		return this.pane(this.currentPane);
	},

	currentHTML: function() {
		var t = this.frontPane;
		return $(t).innerHTML;
	}

};