//////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////
//last update - 02/10/08
// version 1.0.1
/////////////////////
/*
	Colapsing / Expanding elements
*/

var Colapse = {}
	
Colapse.arr = new Array(); 
Colapse.maxHeightChange = 10;


///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
/***
	Colapsing Element object
***/
Colapse.element = function(params)
{
	/* 
		params : 
			params.element = element 
			params.controllerElement = controllerElement
			params.colapseImg = colapseImg
			params.expandImg = expandImg
			params.state = primary state (colapse / expand)
			params.timeoutSpeed = timeoutSpeed
	*/
	
	/**  The Object **/
	this.id = Colapse.arr.length;
	this.element = null;
	this.controllerElement = null;
	this.colapseImg = params.colapseImg || null;
	this.expandImg = params.expandImg || null;
	this.timeoutSpeed = params.timeoutSpeed || 10;
	this.primaryState = params.state || "colapse";
	this.state = null;
	
	/////////// checking the element and the controllerElement parameter ////////////////
	if (typeof(params.element) === 'string')
		this.element = document.getElementById(params.element);
	else if (typeof(params.element) === 'object')
		this.element = params.element;
	
	if (typeof(params.controllerElement) === 'string')
		this.controllerElement = document.getElementById(params.controllerElement);
	else if (typeof(params.controllerElement) === 'object')
		this.controllerElement = params.controllerElement;
		
	if (this.element === null || this.controllerElement === null)
	{
		alert('Error using Colapse object : ' + params.element + "," + params.controllerElement);
		return;
	}
	
	// setting Element's overflow to Hidden
	this.element.style.overflow = "hidden";
	this.element.style.overflowX = "hidden";
	this.element.style.overflowY = "hidden";
	
	// setting controllerElement to trigger the colapse/expand
	this.controllerElement.style.cursor = "pointer";
	this.controllerElement.colapseObject = this;
	this.controllerElement.onclick = function()
	{
		this.colapseObject.calcSizes();
		if (this.colapseObject.state === "colapse")
			this.colapseObject.expand();
		else
			this.colapseObject.colapse();	
		this.colapseObject.calcSizes();
	}
	
	this.numOfImages = 0;
	
	/////////// important attributes ////////////////
	this.calcSizes();
	/*
	this.maxHeight = this.element.scrollHeight;
	if (navigator.appName.indexOf("Microsoft") === 0)
		this.maxHeight += 14;
	this.minHeight = this.controllerElement.offsetHeight + 2;
	this.maxWidth = this.element.scrollWidth;
	this.minWidth = this.controllerElement.offsetWidth + 2;
	this.border = this.getBorderWidth();
	*/
	
	
	
	/////////// checking the images ////////////////
	/*
	if (this.colapseImg !== null)
	{
		this.numOfImages++;
		var img = new Image();
		img.src = this.colapseImg;
		img.onload = this.imagesOnLoad;
		
	}
	if (this.expandImg !== null)
	{
		this.numOfImages++;
		var img = new Image();
		img.src = this.colapseImg;
		img.onload = this.imagesOnLoad;
	}
	*/
	
	Colapse.arr.push(this);
	
	
	if (this.primaryState === "colapse")
	{
		this.element.style.height = this.minHeight  + "px";	
		this.state = "colapse";
	}
	else
	{
		this.element.style.height = this.maxHeight  + "px";	
		this.state = "expand";
	}
	
}

/***** CSS MANIPULATIONS *****/

Colapse.element.prototype.getBorderWidth = function()
{
	var border = this.element.style.border.replace(/^\s+|\s+$/g,"");
	if (border === 0 || border === '')
	{
		var idClass = "#" + this.element.id;
		var border = this.getCss(idClass,"border") || 0;
	}
	if (border === 0 || border === '')
	{
		var elementClass = this.element.className || 0;
		if (elementClass !== '')
			var border = this.getCss(elementClass,"border") || 0;
	}
	if (border !== '' && border !== 0)
	{
		border = border.toString();
		var borderAr = border.split(" ");
		var l = borderAr.length;
		var part = '';
		var _index;
		var borderWidth = 0;
		for (var i=0;i<l;i++)
		{
			part = borderAr[i];
			_index = part.indexOf("px");
			if (_index !== -1)	
			{
				borderWidth = parseInt(part.substring(0,_index));
				//alert(borderWidth);
				return borderWidth;
			}
		}
	}
	return 0;
}

Colapse.element.prototype.getCss = function(myclass,element)
{
	//gets the CSS rules' attributes

	var CSSRules; 
	var selectorText;
	var i = 0;
	var max;
	if (navigator.userAgent.toLowerCase().indexOf("firefox") === -1)
	{ CSSRules = 'rules'; }
	else 
	{ CSSRules = 'cssRules'; }
	for (var csss =0 ; csss<document.styleSheets.length;csss++)
	{
		i=0;
		try
		{
			max = document.styleSheets[csss][CSSRules].length
			for (i = 0; i < max; i++)
			{
				selectorText = document.styleSheets[csss][CSSRules][i].selectorText;
				if (selectorText === myclass)
				{
					return document.styleSheets[csss][CSSRules][i].style[element] || 0;
				}
			}
		}
		catch(e)
		{}
	}
}

/***** More object methods *****/

Colapse.element.prototype.calcSizes = function()
{
	this.maxHeight = this.element.scrollHeight;
	if (navigator.appName.indexOf("Microsoft") === 0)
		this.maxHeight += 14;
	this.minHeight = this.controllerElement.offsetHeight + this.controllerElement.offsetTop;
	this.maxWidth = this.element.scrollWidth;
	this.minWidth = this.controllerElement.offsetWidth;
	this.border = this.getBorderWidth();
}


Colapse.element.prototype.colapse = function()
{
	var currentHeight = this.element.offsetHeight - (this.border*2);
	if (currentHeight > this.minHeight)
	{
		var _self = this;
		setTimeout(function(){
			//calculating the change of height
			var change = 1;
			if (currentHeight-_self.minHeight > Colapse.maxHeightChange)
				change = Colapse.maxHeightChange;
				
			_self.element.style.height = (currentHeight-change) + "px";
			_self.colapse();
		}, this.timeoutSpeed);	
	}
	else
	{
		this.state = "colapse";
		this.controllerElement.src = this.colapseImg;
		
	}
}

Colapse.element.prototype.expand = function()
{
	var currentHeight = this.element.offsetHeight - (this.border*2);
	if (currentHeight < this.maxHeight)
	{
		var _self = this;
		setTimeout(function(){
			//calculating the change of height
			var change = 1;
			if (_self.maxHeight-currentHeight > Colapse.maxHeightChange)
				change = Colapse.maxHeightChange;
			
			_self.element.style.height = (currentHeight+change) + "px";
			_self.expand();
		}, this.timeoutSpeed);	
	}
	else
	{
		//alert("max:" + this.maxHeight + ", cur: " + currentHeight);
		this.state = "expand";
		this.controllerElement.src = this.expandImg;
		//this.element.style.height = "300px";
		
	}
}

/***** Images *****/
Colapse.element.prototype.numOfImages = 0;
Colapse.element.prototype.loadedImages = 0;
Colapse.element.prototype.imagesOnLoad = function()
{
	/*
	if (this.loadedImages === this.numOfImages)
	{
		if (this.primaryState === "colapse")
		{
			this.element.style.height = this.minHeight  + "px";	
			this.state = "colapse";
		}
		else
		{
			this.element.style.height = this.maxHeight  + "px";	
			this.state = "expand";
		}
	}
	*/
	
}