function load() {
	Accordion.init(0, 200, content_response);

	Selectboxes.init(
		document.getElementById('sort_by_options'),
		document.getElementById('show_cols_options')
	);

	Filter.init(
		document.getElementById('filter_text'),
		document.getElementById('sort_by_text'),
		document.getElementById('show_cols_text')
	);
}



Filter = {
	// request object
	http_req : null,

	// dom elems
	filter_text : null,
	sort_by : null,
	show_cols : null,

	showing_columns : [ ],
	sort_col : 0,
	sort_dir : '',

	init : function(text, sort, show) {
		this.filter_text = text;
		this.sort_by = sort;
		this.show_cols = show;
		document.getElementById('sort_notice').innerHTML = "Sorted by " + document.getElementById('sort_by_0').innerHTML.toLowerCase();
		this.reset_elems();
	},

	apply : function() {
		if (this.http_req) {  // only do one request at a time.  cancel the current one and let the new one run
			this.http_req.abort();
		}

		document.getElementById('loading').style.display = 'block';
		document.getElementById('list_container').style.opacity = 0.5;
		document.getElementById('list_container').style.filter = 'alpha(opacity=50)';

		var filter_text = this.filter_text.value;
		if (filter_text.length < 3) filter_text = '';

		var getstr = '?generate=1';
		getstr += '&filter_text=' + filter_text;
		getstr += '&sort=' + this.sort_col;
		getstr += '&dir=' + this.sort_dir;
		for (var i=0, j=this.showing_columns.length; i<j; ++i)
			getstr += '&' + i + '=' + this.showing_columns[i];

		this.http_req = request('../includes/list_data.php' + getstr, this.write);
	},

	write : function(list) {
		Filter.http_req = null;
		document.getElementById('loading').style.display = 'none';
		document.getElementById('list_container').style.opacity = 1.0;
		document.getElementById('list_container').style.filter = 'alpha(opacity=100)';
		document.getElementById('sort_notice').innerHTML = "Sorted by " + document.getElementById('sort_by_' + Filter.sort_col).innerHTML.toLowerCase();
		document.getElementById('list_container').innerHTML = list;
	},
	
	text : function(e) {
		if (!e) e = window.event;
		if ((e.keyCode ? e.keyCode : e.which) == 9) return; // ignore if key pressed was tab (9)
		var filter_text = this.filter_text.value;
		if (filter_text.length < 3 && filter_text.length > 0) return;
		this.apply();
	},

	sort : function(b, hide_sort_str) {
		document.getElementById('sort_by_' + this.sort_col).className = 'unselected';
		document.getElementById('sort_by_' + b).className = 'selected';
		this.sort_by.innerHTML = hide_sort_str ? "&nbsp;" : document.getElementById('sort_by_'+b).innerHTML;
		this.set_sort_dir(b);
		this.sort_col = b;
		this.showing_columns[b] = 1;  // if list is to be sorted by this column, this column should be showing
		if (b != 0)  // b=0 (photograph name) is not in the show_cols list
			document.getElementById('show_cols_' + b).className = 'selected';
		this.apply();
	},

	resort : function(b) {
		this.sort(b, true);
	},

	set_sort_dir : function(b) {
		if (this.sort_col == b) // if sort by column is the same as current sorted column, toggle sort direction
			this.sort_dir = (this.sort_dir == 'ASC' ? 'DESC' : 'ASC');
		else
			this.sort_dir = 'ASC';
	},

	show : function(b) {
		document.getElementById('show_cols_' + b).className = this.showing_columns[b] ? 'unselected' : 'selected';
		this.showing_columns[b] = 1 - this.showing_columns[b];
		this.apply();
	},

	reset : function() {
		for (i=1; i<this.showing_columns.length; ++i) {
			document.getElementById('show_cols_' + i).className = i < 5 ? 'selected' : 'unselected';
			this.showing_columns[i] = i < 5 ? 1 : 0;
		}
		document.getElementById('sort_by_' + this.sort_col).className = 'unselected';
		document.getElementById('sort_by_0').className = 'selected';
		this.sort_col = 0;
		this.sort_dir = 'ASC';
		this.reset_elems();
		this.apply();
	},

	reset_elems : function() {
		this.sort_by.innerHTML = "&nbsp;";  // don't make it completely empty, because something needs to fill out the div height
		this.show_cols.innerHTML = "&nbsp;";
		this.filter_text.value = "";
	}
};



Accordion = {

	to_close : null,
	to_open : null,
	min : 0,
	max : 0,
	interval : 25,
	open_busy : false,
	close_busy : false,
	handle : function() { },

	init : function(min, max, handle) {
		this.min = min;
		this.max = max;
		this.handle = handle; // function called when element is finished opening
	},

	/* three cases: 
	element is to close, at end set elem null
	element is to open, toclose is null, at end set toclose = elem, toopen = null
	element is to open, toclose not null, at end set toclose = elem, toopen = null
	*/ 
	fold : function(elem) {

		if (this.open_busy || this.close_busy) return;

		if (!elem) return;

		if (elem == this.to_close) {  // if elem is already open, close it
			this.close_busy = true;
			this.compress(this.max);
		}
		else {
			if (this.to_close) {  // if an element was already opened, set it to close so the new element can open
				this.close_busy = true;
				this.compress(this.max);
			}
			this.to_open = elem;
			this.open_busy = true;
			this.expand(this.min);
		}
	},
	

	expand : function(amt) {
		Accordion.to_open.style.height = amt + "px";
		if (amt < Accordion.max) {
			window.setTimeout("Accordion.expand(" + (amt + Accordion.interval) + ")", 1);
		}
		else {
			Accordion.to_open.style.height = Accordion.max + "px";
			Accordion.open_busy = false;
			Accordion.finish();
		}
	},


	compress : function(amt) {
		Accordion.to_close.style.height = amt + "px";
		if (amt > Accordion.min) {
			window.setTimeout("Accordion.compress(" + (amt - Accordion.interval > 0 ? amt - Accordion.interval : 0) + ")", 1);
		}
		else {
			Accordion.to_close.style.height = Accordion.min ? Accordion.min + "px" : 'auto'; // ie cant render min=0 (hasLayout), so set to auto
			Accordion.close_busy = false;
			Accordion.finish();
		}
	},


	finish : function() {
		if (Accordion.open_busy || Accordion.close_busy)
			return;  // only execute if both expand and collapse have finished, if they run simultaneously
		if (Accordion.to_open) {
			Accordion.to_close = Accordion.to_open;
			Accordion.to_open = null;
		}
		else {
			Accordion.to_close = null;
		}
		Accordion.handle();
	}
};


var http_req = null;
var req_content = '';

function fold_content(elem_id, max_height) {
	if (Accordion.open_busy || Accordion.close_busy) return;

	var elem = document.getElementById(elem_id + '-content');
	if (Accordion.to_close) {
		Accordion.to_close.innerHTML = '';
	}
	if (Accordion.to_close == elem) {
		if (http_req) http_req.abort(); // abort request if it somehow happens when item is closed (e.g. user clicks too quickly)
	}
	else {
		http_req = request('../scripts/list_item.php', content_response, 'id=' + elem_id);
		Accordion.max = max_height + 10;
	}
	Accordion.fold(elem);
}



function content_response(data) {
	if (data) {  // if request finished and data is ready
		if (Accordion.open_busy || Accordion.close_busy) {
			req_content = data;
		}
		else {
			Accordion.to_close.innerHTML = data;
			req_content = '';
		}	
		http_req = null;
	}
	else if (req_content) {  // if elem is open
		Accordion.to_close.innerHTML = req_content;
		http_req = null;
		req_content = '';
	}
}