/**
 * Fader to support fade in / out effects to elements.
 *
 * @author tam
 */ 

Slider.MODE_TOP_BOTTOM = 1;
Slider.MODE_LEFT_RIGHT = 2;
 
function Slider(mode)
{
	var element = null;
	var innerElement = null;
	var opacity = null;
	var numSteps = null;
	var intervalId = null;
	this.mode = (mode == null ? Slider.MODE_TOP_BOTTOM : mode);
	
	var slideHeight = 0;
	var height = 0;
	var slideWidth = 0;
	var width = 0;
	
	var lastHeightDiff = 0;
	var lastWidthDiff = 0;
}

Slider.prototype.slideOutElementById = function(_elementId)
{
	var element = getElement(_elementId);
	this.slideOut(element);
}

Slider.prototype.slideOut = function(_element, _innerElement)
{
	this.element = _element;
	this.innerElement = _innerElement;
	// determine the slide height / slide width;
	
	// TODO: implement sliding horizontally
	// TODO: implement default behaviour if "clientHeight" property is
	// not supported by the useragent
	
	this.slideHeight = this.element.clientHeight;
	this.slideWidth = this.element.clientWidth;
	this.height = this.slideHeight;
	this.width = this.slideWidth;
	this.lastHeightDiff = 0;
	this.lastWidthDiff = 0;
	
	// set initial height
	this.innerElement.style.position = "relative";
	if(this.mode & Slider.MODE_TOP_BOTTOM)
	{
		this.innerElement.style.top = "0px";
	}
	if(this.mode & Slider.MODE_LEFT_RIGHT)
	{
		this.innerElement.style.left = "0px";
	}

	var _this = this;
	var sliderFunction = function() { _this.internalSlideOut() };	

	this.intervalId = window.setInterval(sliderFunction, 20);
}

Slider.prototype.slideInElementById = function(_elementId)
{
	var element = getElement(_elementId);
	this.slideId(element);
}

/**
 * Slide in an element (using mode set). To slide in an element, the element
 * is assumed to have the visibility set to "hidden" and default value of
 * display (i.e. not "none"). The width and height attributes should have a
 * value of "auto".
 */
Slider.prototype.slideIn = function(_element, _innerElement)
{
	this.element = _element;
	this.innerElement = _innerElement;
	
	// determine the slide height / slide width;
	
	// TODO: implement sliding horizontally
	// TODO: implement default behaviour if "clientHeight" property is
	// not supported by the useragent
	
	this.slideHeight = this.element.clientHeight;
	this.slideWidth = this.element.clientWidth;
	this.height = 0;
	this.width = 0;
	this.lastHeightDiff = 0;
	this.lastWidthDiff = 0;
	
	// set initial height
	/* this.element.style.height = "0px"; */
	// this.element.style.clip = "rect(auto, auto, " + this.slideHeight + "px, auto)";
	this.innerElement.style.position = "relative";
	if(this.mode & Slider.MODE_TOP_BOTTOM)
	{
		this.innerElement.style.top = "-" + this.slideHeight + "px";
	}
	if(this.mode & Slider.MODE_LEFT_RIGHT)
	{
		this.innerElement.style.left = "-" + this.slideWidth + "px";
	}
	
	this.element.style.visibility = "visible";

	var _this = this;
	var sliderFunction = function() { _this.internalSlideIn() };	

	this.intervalId = window.setInterval(sliderFunction, 20);
}
			
Slider.prototype.internalSlideOut = function()
{
	this.internalSlide(-1);
}

Slider.prototype.internalSlideIn = function()
{
	this.internalSlide(1);
}
	
Slider.prototype.internalSlide = function(inOut)
{
	// calculate new height to be set
	var heightDiff = 0;
	var widthDiff = 0;
	if(this.lastHeightDiff == 0)
	{
		heightDiff = 1;
	}
	else
	{
		heightDiff = this.lastHeightDiff + 1;
	}
	this.lastHeightDiff = heightDiff;
	this.height += (inOut) * heightDiff;
	
	// calculate new width to be set
	if(this.lastWidthDiff == 0)
	{
		widthDiff = 1;
	}
	else
	{
		widthDiff = this.lastWidthDiff + 1;
	}
	this.lastWidthDiff = widthDiff;
	this.width += (inOut) * widthDiff;
	
	if((this.height <= 0))
	{
		window.clearInterval(this.intervalId);
		this.height = 0;
		this.width = 0;
		this.element.style.visibility = "hidden";
		this.innerElement.style.top = "0px";
	}
	else if(this.height >= this.slideHeight)
	{
		window.clearInterval(this.intervalId);
		this.height = this.slideHeight;
		this.width = this.slideWidth;
		//this.element.style.clip = "auto";
		this.innerElement.style.top = "0px";
		this.innerElement.style.left = "0px";
	}
	else
	{
		if(this.mode & Slider.MODE_TOP_BOTTOM)
		{
			var innerTop = this.slideHeight - this.height;
			this.innerElement.style.top = "-" + innerTop + "px";
		}
		if(this.mode & Slider.MODE_LEFT_RIGHT)
		{
			//alert("InnerLeft: " + innerLeft + "; slideWidth: " + this.slideWidth + "; width: " + this.width);
			var innerLeft = this.slideWidth - this.width;
			this.innerElement.style.left = "-" + innerLeft + "px";
		}
	}
	
}