stlsmiths/gist:970023

## gistfile1.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Dialog Quickstart Example - Roll-up Toggle</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/button/button-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/container/container-min.js"></script>


<!--begin custom header content for this example-->
<script type="text/javascript">
document.documentElement.className = "yui-pe";
</script>

<style type="text/css">
#example {
    height:30em;
}

label {
    display:block;
    float:left;
    width:45%;
    clear:left;
}

.clear {
    clear:both;
}

#resp {
    margin:10px;
    padding:5px;
    border:1px solid #ccc;
    background:#fff;
}

#resp li {
    font-family:monospace
}

.yui-pe .yui-pe-content {
    display:none;
}

/*    Added new CSS to show DOWN caret or UP caret   */

.yui-skin-sam .rollup-hide {
    background: url("http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/sprite.png") no-repeat scroll -8px -952px transparent;
    cursor: pointer;
    height: 12px;
    position: absolute;
    right: 40px;
    top: 5px;
    width: 20px;
}
.yui-skin-sam .rollup-show {
    background: url("http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/sprite.png") no-repeat scroll -8px -852px transparent;
    cursor: pointer;
    height: 12px;
    position: absolute;
    right: 40px;
    top: 5px;
    width: 20px;
}


</style>

<!--end custom header content for this example-->

</head>

<body class="yui-skin-sam">


<h1>Dialog Quickstart Example - Roll-up Toggle</h1>

<div class="exampleIntro">
	<p>This is an exact duplicate of the <a href="http://developer.yahoo.com/yui/examples/container/dialog-quickstart_clean.html" target="_blank">YUI 2 Dialog Quickstart Example</a> MODIFIED to provide a dialog roll-up capability.
	<br/><br/>If you click on the "Up / Down" caret symbol in the title bar in the far right side it will toggle the Dialog body and footer visibility.

	</p>

</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<script>
YAHOO.namespace("example.container");

YAHOO.util.Event.onDOMReady(function () {

	var Dom = YAHOO.util.Dom,
		Event = YAHOO.util.Event;

	// Define various event handlers for Dialog
	var handleSubmit = function() {
		this.submit();
	};
	var handleCancel = function() {
		this.cancel();
	};
	var handleSuccess = function(o) {
		var response = o.responseText;
		response = response.split("<!")[0];
		document.getElementById("resp").innerHTML = response;
	};
	var handleFailure = function(o) {
		alert("Submission failed: " + o.status);
	};

    // Remove progressively enhanced content class, just before creating the module
    YAHOO.util.Dom.removeClass("dialog1", "yui-pe-content");

	// Instantiate the Dialog
	YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1",
							{ width : "30em",
							  fixedcenter : true,
							  visible : false,
							  constraintoviewport : true,
							  buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
								      { text:"Cancel", handler:handleCancel } ]
							});

	// Validate the entries in the form to require that both first and last name are entered
	YAHOO.example.container.dialog1.validate = function() {
		var data = this.getData();
		if (data.firstname == "" || data.lastname == "") {
			alert("Please enter your first and last names.");
			return false;
		} else {
			return true;
		}
	};

	// Wire up the success and failure handlers
	YAHOO.example.container.dialog1.callback = { success: handleSuccess,
						     failure: handleFailure };

	// Render the Dialog
	YAHOO.example.container.dialog1.render();

	//  YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
	YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.dialog1.hide, YAHOO.example.container.dialog1, true);


//=========    ADD Dialog Roll-up capability   =====================


	YAHOO.util.Event.addListener("show", "click", function(){

		var dl = YAHOO.example.container.dialog1;
		dl.myVisible = true;
		dl.show();

	//
	//  Check if roll-up hotspot exists,
	//    if not, create it!
	//
		if ( !Dom.get( dl.id + '_viz_toggle') ) {

		//
		//  add a roll-up link <a> element in titlebar
		//
			var rollup = document.createElement("a");
			rollup.id = dl.id + '_viz_toggle';
			Dom.addClass( rollup, 'rollup-hide' );

		// Insert the rollup link in the Dialog just before the header element
			var dl_hd = Dom.getElementsByClassName( 'hd', 'div', dl.id )[0];
			Dom.insertBefore( rollup, dl_hd );

		//
		//  Get this dialog's Body and Footer elements
		//
			var bd = Dom.getElementsByClassName( 'bd', 'div', dl.id )[0];
			var ft = Dom.getElementsByClassName( 'ft', 'div', dl.id )[0];

		//
		//  Attach a 'click' listener to the roll-up link to toggle the body and footer
		//
			Event.addListener( rollup, 'click', function( evt, obj ){
				// note, 'this' context is the roll-up link Dom element

				if ( obj.dialog.myVisible ) {

					Dom.setStyle(obj.body,'display','none');
					Dom.setStyle(obj.footer,'display','none');
					obj.dialog.myVisible = false;

					if ( Dom.hasClass(this,'rollup-hide') ) Dom.removeClass(this,'rollup-hide')
					Dom.addClass(this,'rollup-show')

				} else {

					Dom.setStyle(obj.body,'display','');
					Dom.setStyle(obj.footer,'display','');
					obj.dialog.myVisible = true;

					if ( Dom.hasClass(this,'rollup-show') ) Dom.removeClass(this,'rollup-show')
					Dom.addClass(this,'rollup-hide')

				}

		//		if ( obj.dialog.myVisible ) {
		//		} else {
		//		}

			}, {dialog:dl, body:bd, footer:ft} );

		}

	}, YAHOO.example.container.dialog1, true);

});
</script>

<div>
<button id="show">Show dialog1</button>
<button id="hide">Hide dialog1</button>
</div>

<div id="dialog1" class="yui-pe-content">
<div class="hd">Please enter your information</div>

<div class="bd">
<form method="POST" action="assets/post.php">
	<label for="firstname">First Name:</label><input type="textbox" name="firstname" />
	<label for="lastname">Last Name:</label><input type="textbox" name="lastname" />
	<label for="email">E-mail:</label><input type="textbox" name="email" />

	<label for="state[]">State:</label>
	<select multiple name="state[]">
		<option value="California">California</option>

		<option value="New Jersey">New Jersey</option>
		<option value="New York">New York</option>
	</select>

	<div class="clear"></div>

	<label for="radiobuttons">Radio buttons:</label>
	<input type="radio" name="radiobuttons[]" value="1" checked/> 1
	<input type="radio" name="radiobuttons[]" value="2" /> 2

	<div class="clear"></div>

	<label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1

	<div class="clear"></div>

	<label for="textarea">Text area:</label><textarea name="textarea"></textarea>

	<div class="clear"></div>

	<label for="cbarray">Multi checkbox:</label>

	<input type="checkbox" name="cbarray[]" value="1" /> 1
	<input type="checkbox" name="cbarray[]" value="2" /> 2
</form>
</div>
</div>

<div id="resp"></div>

</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>

	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Dialog Quickstart Example - Roll-up Toggle</title>

	<style type="text/css">
	/*margin and padding on body element
	can introduce errors in determining
	element position and are not recommended;
	we turn them off as a foundation for YUI
	CSS treatments. */
	body {
	margin:0;
	padding:0;
	}
	</style>

	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/button/assets/skins/sam/button.css" />
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/container/assets/skins/sam/container.css" />
	<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

	<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/connection/connection-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/button/button-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/container/container-min.js"></script>


	<!--begin custom header content for this example-->
	<script type="text/javascript">
	document.documentElement.className = "yui-pe";
	</script>

	<style type="text/css">
	#example {
	height:30em;
	}

	label {
	display:block;
	float:left;
	width:45%;
	clear:left;
	}

	.clear {
	clear:both;
	}

	#resp {
	margin:10px;
	padding:5px;
	border:1px solid #ccc;
	background:#fff;
	}

	#resp li {
	font-family:monospace
	}

	.yui-pe .yui-pe-content {
	display:none;
	}

	/* Added new CSS to show DOWN caret or UP caret */

	.yui-skin-sam .rollup-hide {
	background: url("http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/sprite.png") no-repeat scroll -8px -952px transparent;
	cursor: pointer;
	height: 12px;
	position: absolute;
	right: 40px;
	top: 5px;
	width: 20px;
	}
	.yui-skin-sam .rollup-show {
	background: url("http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/sprite.png") no-repeat scroll -8px -852px transparent;
	cursor: pointer;
	height: 12px;
	position: absolute;
	right: 40px;
	top: 5px;
	width: 20px;
	}



	</style>

	<!--end custom header content for this example-->

	</head>

	<body class="yui-skin-sam">


	<h1>Dialog Quickstart Example - Roll-up Toggle</h1>

	<div class="exampleIntro">
	<p>This is an exact duplicate of the <a href="http://developer.yahoo.com/yui/examples/container/dialog-quickstart_clean.html" target="_blank">YUI 2 Dialog Quickstart Example</a> MODIFIED to provide a dialog roll-up capability.
	<br/><br/>If you click on the "Up / Down" caret symbol in the title bar in the far right side it will toggle the Dialog body and footer visibility.

	</p>

	</div>

	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	<script>
	YAHOO.namespace("example.container");

	YAHOO.util.Event.onDOMReady(function () {

	var Dom = YAHOO.util.Dom,
	Event = YAHOO.util.Event;

	// Define various event handlers for Dialog
	var handleSubmit = function() {
	this.submit();
	};
	var handleCancel = function() {
	this.cancel();
	};
	var handleSuccess = function(o) {
	var response = o.responseText;
	response = response.split("<!")[0];
	document.getElementById("resp").innerHTML = response;
	};
	var handleFailure = function(o) {
	alert("Submission failed: " + o.status);
	};

	// Remove progressively enhanced content class, just before creating the module
	YAHOO.util.Dom.removeClass("dialog1", "yui-pe-content");

	// Instantiate the Dialog
	YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1",
	{ width : "30em",
	fixedcenter : true,
	visible : false,
	constraintoviewport : true,
	buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
	{ text:"Cancel", handler:handleCancel } ]
	});

	// Validate the entries in the form to require that both first and last name are entered
	YAHOO.example.container.dialog1.validate = function() {
	var data = this.getData();
	if (data.firstname == "" \|\| data.lastname == "") {
	alert("Please enter your first and last names.");
	return false;
	} else {
	return true;
	}
	};

	// Wire up the success and failure handlers
	YAHOO.example.container.dialog1.callback = { success: handleSuccess,
	failure: handleFailure };

	// Render the Dialog
	YAHOO.example.container.dialog1.render();

	// YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
	YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.dialog1.hide, YAHOO.example.container.dialog1, true);


	//========= ADD Dialog Roll-up capability =====================


	YAHOO.util.Event.addListener("show", "click", function(){

	var dl = YAHOO.example.container.dialog1;
	dl.myVisible = true;
	dl.show();

	//
	// Check if roll-up hotspot exists,
	// if not, create it!
	//
	if ( !Dom.get( dl.id + '_viz_toggle') ) {

	//
	// add a roll-up link <a> element in titlebar
	//
	var rollup = document.createElement("a");
	rollup.id = dl.id + '_viz_toggle';
	Dom.addClass( rollup, 'rollup-hide' );

	// Insert the rollup link in the Dialog just before the header element
	var dl_hd = Dom.getElementsByClassName( 'hd', 'div', dl.id )[0];
	Dom.insertBefore( rollup, dl_hd );

	//
	// Get this dialog's Body and Footer elements
	//
	var bd = Dom.getElementsByClassName( 'bd', 'div', dl.id )[0];
	var ft = Dom.getElementsByClassName( 'ft', 'div', dl.id )[0];

	//
	// Attach a 'click' listener to the roll-up link to toggle the body and footer
	//
	Event.addListener( rollup, 'click', function( evt, obj ){
	// note, 'this' context is the roll-up link Dom element

	if ( obj.dialog.myVisible ) {

	Dom.setStyle(obj.body,'display','none');
	Dom.setStyle(obj.footer,'display','none');
	obj.dialog.myVisible = false;

	if ( Dom.hasClass(this,'rollup-hide') ) Dom.removeClass(this,'rollup-hide')
	Dom.addClass(this,'rollup-show')

	} else {

	Dom.setStyle(obj.body,'display','');
	Dom.setStyle(obj.footer,'display','');
	obj.dialog.myVisible = true;

	if ( Dom.hasClass(this,'rollup-show') ) Dom.removeClass(this,'rollup-show')
	Dom.addClass(this,'rollup-hide')

	}

	// if ( obj.dialog.myVisible ) {
	// } else {
	// }

	}, {dialog:dl, body:bd, footer:ft} );

	}

	}, YAHOO.example.container.dialog1, true);

	});
	</script>

	<div>
	<button id="show">Show dialog1</button>
	<button id="hide">Hide dialog1</button>
	</div>

	<div id="dialog1" class="yui-pe-content">
	<div class="hd">Please enter your information</div>

	<div class="bd">
	<form method="POST" action="assets/post.php">
	<label for="firstname">First Name:</label><input type="textbox" name="firstname" />
	<label for="lastname">Last Name:</label><input type="textbox" name="lastname" />
	<label for="email">E-mail:</label><input type="textbox" name="email" />

	<label for="state[]">State:</label>
	<select multiple name="state[]">
	<option value="California">California</option>

	<option value="New Jersey">New Jersey</option>
	<option value="New York">New York</option>
	</select>

	<div class="clear"></div>

	<label for="radiobuttons">Radio buttons:</label>
	<input type="radio" name="radiobuttons[]" value="1" checked/> 1
	<input type="radio" name="radiobuttons[]" value="2" /> 2

	<div class="clear"></div>

	<label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1

	<div class="clear"></div>

	<label for="textarea">Text area:</label><textarea name="textarea"></textarea>

	<div class="clear"></div>

	<label for="cbarray">Multi checkbox:</label>

	<input type="checkbox" name="cbarray[]" value="1" /> 1
	<input type="checkbox" name="cbarray[]" value="2" /> 2
	</form>
	</div>
	</div>

	<div id="resp"></div>

	</body>
	</html>