// bytefx - resizable container demo script - Andrea Giammarchi

// unobtrusive way to hide directly resizable container
document.write('<style type="text/css">#bytefx{overflow: hidden; height: 18px} #bytefx h3{cursor: pointer}</style>');

// onload event to add container resizing
bytefx.$event(window, "onload", function() {
	var	div = document.getElementById("bytefx"),		// one div
		h3 = div.getElementsByTagName("H3").item(0),		// its header
		subdiv = div.getElementsByTagName("DIV").item(0),	// its content
		bg = "backgroundColor",					// header property to change
		realheight = 0;						// real div size
	
	div.style.overflow = "";		// temporary showed as is
	div.style.height = "auto";		// without overflow 
	realheight = bytefx.$size(div).height;	// to get real div height
	div.style.overflow = "hidden";		// then hide and
	div.style.height = "18px";		// resize
	
	// header changes color onmouse over and come back to original color on mouse out
	bytefx.$event(h3, "onmouseover", function(){bytefx.color(h3, bg, "#EFEFEF", "#FFF", 1)});
	bytefx.$event(h3, "onmouseout", function(){bytefx.color(h3, bg, "#FFF", "#EFEFEF", 1)});
	
	// header opens the div on click
	bytefx.$event(h3, "onclick", function(){
		
		// header wasn't clicked ? it's closed, size to new height, otherwise come back to old height
		var newsize = {width:260, height:(!this.bytefx.clicked ? realheight : 18), $width:2, width$:2};
		bytefx.size(div, newsize, 7);
		this.bytefx.clicked = !this.bytefx.clicked
	});
});