// bytefx - resizable container demo script - Andrea Giammarchi

// unobtrusive way to hide directly resizable container
document.write('<style type="text/css">#bytefx{overflow: hidden; height: 20px; margin-left: 5px; width: 230px} #bytefx_ h2{cursor: pointer}</style>');

// onload event to add container resizing
bytefx.$event(window, "onload", function() {
	var	div = document.getElementById("bytefx"),		// one div
		h2 = div.getElementsByTagName("H2").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.width = "230";
	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
	//div.style.border = "2px dashed #D6DDE4";
	
	
	// header changes color onmouse over and come back to original color on mouse out
	bytefx.$event(h2, "onmouseover", function(){bytefx.color(h2, bg, "#FFF", "#d03601", 2)});
	bytefx.$event(h2, "onmouseout", function(){bytefx.color(h2, bg, "#d03601", "#FFF", 2)});
	
	// header opens the div on click
	bytefx.$event(h2, "onclick", function(){
		
		// header wasn't clicked ? it's closed, size to new height, otherwise come back to old height
		var newsize = {width:231, height:(!this.bytefx.clicked ? realheight : 18), $width:2, width$:2};
		bytefx.size(div, newsize, 12);
		this.bytefx.clicked = !this.bytefx.clicked
	});
});

// unobtrusive way to hide directly resizable container
document.write('<style type="text/css">#bytefx2{overflow: hidden; height: 20px; margin-left: 5px; width: 230px} #bytefx2_ h2{cursor: pointer}</style>');

// onload event to add container resizing
bytefx.$event(window, "onload", function() {
	var	div = document.getElementById("bytefx2"),		// one div
		h2 = div.getElementsByTagName("H2").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.width = "230";
	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
	//div.style.border = "2px dashed #D6DDE4";
	
	
	// header changes color onmouse over and come back to original color on mouse out
	bytefx.$event(h2, "onmouseover", function(){bytefx.color(h2, bg, "#FFF", "#d03601", 2)});
	bytefx.$event(h2, "onmouseout", function(){bytefx.color(h2, bg, "#d03601", "#FFF", 2)});
	
	// header opens the div on click
	bytefx.$event(h2, "onclick", function(){
		
		// header wasn't clicked ? it's closed, size to new height, otherwise come back to old height
		var newsize = {width:231, height:(!this.bytefx.clicked ? realheight : 18), $width:2, width$:2};
		bytefx.size(div, newsize, 12);
		this.bytefx.clicked = !this.bytefx.clicked
	});
});

// unobtrusive way to hide directly resizable container
document.write('<style type="text/css">#bytefx3{overflow: hidden; height: 20px; margin-left: 5px; width: 230px} #bytefx3_ h2{cursor: pointer}</style>');

// onload event to add container resizing
bytefx.$event(window, "onload", function() {
	var	div = document.getElementById("bytefx3"),		// one div
		h2 = div.getElementsByTagName("H2").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.width = "230";
	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
	//div.style.border = "2px dashed #D6DDE4";
	
	
	// header changes color onmouse over and come back to original color on mouse out
	bytefx.$event(h2, "onmouseover", function(){bytefx.color(h2, bg, "#FFF", "#d03601", 2)});
	bytefx.$event(h2, "onmouseout", function(){bytefx.color(h2, bg, "#d03601", "#FFF", 2)});
	
	// header opens the div on click
	bytefx.$event(h2, "onclick", function(){
		
		// header wasn't clicked ? it's closed, size to new height, otherwise come back to old height
		var newsize = {width:231, height:(!this.bytefx.clicked ? realheight : 18), $width:2, width$:2};
		bytefx.size(div, newsize, 12);
		this.bytefx.clicked = !this.bytefx.clicked
	});
});

// unobtrusive way to hide directly resizable container
document.write('<style type="text/css">#bytefx4{overflow: hidden; height: 20px; margin-left: 5px; width: 230px} #bytefx4_ h2{cursor: pointer}</style>');

// onload event to add container resizing
bytefx.$event(window, "onload", function() {
	var	div = document.getElementById("bytefx4"),		// one div
		h2 = div.getElementsByTagName("H2").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.width = "230";
	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
	//div.style.border = "2px dashed #D6DDE4";
	
	
	// header changes color onmouse over and come back to original color on mouse out
	bytefx.$event(h2, "onmouseover", function(){bytefx.color(h2, bg, "#FFF", "#d03601", 2)});
	bytefx.$event(h2, "onmouseout", function(){bytefx.color(h2, bg, "#d03601", "#FFF", 2)});
	
	// header opens the div on click
	bytefx.$event(h2, "onclick", function(){
		
		// header wasn't clicked ? it's closed, size to new height, otherwise come back to old height
		var newsize = {width:231, height:(!this.bytefx.clicked ? realheight : 18), $width:2, width$:2};
		bytefx.size(div, newsize, 12);
		this.bytefx.clicked = !this.bytefx.clicked
	});
});