(function ($) {
	var Panes = {
		// setup a paneset
		create: function () {
			// setup each pane
			$(this).children('.pane').each(function () {
				var pane = $(this);
				var content = pane.children('.content:first').hide().css({
					'position': 'absolute',
					'z-index': 2
				});
				var tab = pane.children('.tab:first').css({
					'display': 'block',
					'position': 'fixed',
					'z-index': 2,
					'cursor': 'pointer'
				}).click(function () {
					tab.toggleClass('active');
					content.animate({opacity: 'toggle', height: 'toggle', duration: 'slow'});
				});
				
				if (pane.hasClass('west')) {
					tab.css({'left': 0, 'top': '80px'});
					content.css({'left': 0, 'top': '100px'});
				} else if (pane.hasClass('east')) {
					tab.css({'right': 0, 'top': '80px'});
					content.css({'right': 0, 'top': '100px'});
				} else if (pane.hasClass('south')) {
					tab.css({'left': '50%', 'bottom': 0});
					content.css({'bottom': 0, 'left': '50%', 'position': 'fixed', 'margin-left': -content.children().width()*.5 + 'px'});
				}
				// trigger open
				if (tab.hasClass('open')) {
					tab.click();
				}
			});
		}
	};
	
	// plugin
	$.fn.panes = function () {
		$(this).each(function () {
			Panes.create.call(this);
		});
	};
})(jQuery);