function PaneSliderConfig()
{
	// when is_wrapper_auto_height is true, the wrapper node height will be automatically set to the foreground content size
	this.is_wrapper_auto_height = true;

	// when is_wrapper_animate_height is true, changes to the wrapper node height animated
	this.is_wrapper_animate_height = true;
	
	// height sets the wrapper node height before any other animations or changes occur.  If is_wrapper_auto_height is enabled,
	//	the height will change and this will act like an initial height
	this.height = 500;

	// duration of the wrapper height change animation
	this.height_duration = 600;
	
	// delay before wrapper height change animation
	this.height_delay = 10;

	// duration of pane's moving into the foreground
	this.in_duration = 600;
	
	// delay of pane's moving into the foreground
	this.in_delay = 10;
	
	// duration of pane's moving out of the foreground
	this.out_duration = 600;
	
	// delay of pane's moving out of the foreground
	this.out_delay = 10;
	
	this.transition_gap = 10;
}

function PaneSlider(wrapper_node, pane_slider_config)
{
	this.wrapper_node = wrapper_node;
	this.pane_slider_config = pane_slider_config?pane_slider_config:new PaneSliderConfig();
	this.foreground_content = document.createElement('div');
	this.background_content = document.createElement('div');
	
	this.wrapper_node.innerHTML = '';
	this.wrapper_node.style.height = this.pane_slider_config.height + 'px';
	
	this.foreground_content.style.top = '0px';
	this.foreground_content.style.left = '0px';
	this.foreground_content.style.width = this._WrapperClientWidth() + 'px';
	this.foreground_content.style.height = 'auto';
	this.foreground_content.style.position = 'absolute';
	//this.foreground_content.style.backgroundColor = 'green';
	this.background_content.style.top = '0px';
	this.background_content.style.left = '0px';
	this.background_content.style.width = this._WrapperClientWidth() + 'px';
	this.background_content.style.height = 'auto';
	this.background_content.style.position = 'absolute';
	//this.background_content.style.backgroundColor = 'red';
	
	this._ShowForeground();
	this._ShowBackground();
	
	this.wrapper_node.appendChild(this.background_content);
	this.wrapper_node.appendChild(this.foreground_content);

}
PaneSlider.prototype.SetBackgroundContent = function(content)
{
	this.background_content.innerHTML = content;
}
PaneSlider.prototype.SetForegroundContent = function(content)
{
	this.foreground_content.innerHTML = content;	
}
PaneSlider.prototype.DoTransition = function(is_going_right)
{
	var tmp_data1, tmp_data2, tmp_left1, tmp_left2;
	
	// switch the foreground and background positions and content
	tmp_data1 = this.background_content.innerHTML;
	tmp_data2 = this.foreground_content.innerHTML;
	this.SetForegroundContent(tmp_data1);
	this.SetBackgroundContent(tmp_data2);
	tmp_left1 = this.background_content.style.left
	tmp_left2 = this.foreground_content.style.left
	this.background_content.style.left = tmp_left2;
	this.foreground_content.style.left = tmp_left1;
	
	// position foreground content node to the right or left of the foreground
	this.foreground_content.style.left = (is_going_right? -1 * 	(this.background_content.clientWidth + this.pane_slider_config.transition_gap) :  (this.wrapper_node.clientWidth + this.pane_slider_config.transition_gap)) + 'px';

	// animate background content out
	var bg_out_anim = dojo.animateProperty( 
	{
		node: this.background_content,
		duration: this.pane_slider_config.out_duration, // ms to run animation
		delay: this.pane_slider_config.out_delay, // ms to stall before playing
		properties:{left: {end: (is_going_right?this.wrapper_node.clientWidth + this.pane_slider_config.transition_gap:(-1 * (this.wrapper_node.clientWidth + this.pane_slider_config.transition_gap)))}}
	});
	bg_out_anim.play();

	// animate foreground content in
	var fg_in_anim = dojo.animateProperty( 
	{
		node: this.foreground_content,
		duration: this.pane_slider_config.in_duration, // ms to run animation
		delay: this.pane_slider_config.in_delay, // ms to stall before playing
		properties:{left: {end: this._WrapperClientLeft()}}
	});
	fg_in_anim.play();
	
	// animate height change if needed
	var additional_height = 0;
	if(dojo.isIE)
	{
		additional_height = this.wrapper_node.offsetHeight - this.wrapper_node.clientHeight;
	}	
	var new_wrapper_height = this.pane_slider_config.is_wrapper_auto_height?this.foreground_content.offsetHeight + additional_height:this.pane_slider_config.height;
	if(parseInt(this.wrapper_node.style.height.replaceAll('px', '')) != parseInt(new_wrapper_height) && this.pane_slider_config.is_wrapper_animate_height && this.pane_slider_config.is_wrapper_auto_height)
	{
		var wrapper_height_anim = dojo.animateProperty( 
		{
			node: this.wrapper_node,
			duration: this.pane_slider_config.height_duration, // ms to run animation
			delay: this.pane_slider_config.height_delay, // ms to stall before playing
			properties:{height: (new_wrapper_height)}
		});
		wrapper_height_anim.play();
	}
	else if(this.pane_slider_config.is_wrapper_auto_height)
	{
		this.wrapper_node.style.height = (this.foreground_content.offsetHeight + additional_height) + 'px';
	}

}

PaneSlider.prototype._HideForeground = function()
{
	this.foreground_content.style.display = 'none';
}
PaneSlider.prototype._ShowForeground = function()
{
	this.foreground_content.style.display = '';
}
PaneSlider.prototype._HideBackground = function()
{
	this.background_content.style.display = 'none';
}
PaneSlider.prototype._ShowBackground = function()
{
	this.background_content.style.display = '';
}
PaneSlider.prototype._WrapperClientLeft = function()
{
	var left = 0;
	
	return left;
}
PaneSlider.prototype._WrapperClientWidth = function()
{
	var width = 0;
	
	width += this.wrapper_node.clientWidth;

	return width;
}
PaneSlider.prototype._WrapperClientHeight = function()
{
	return this.wrapper_node.clientHeight;
}