/*	This displays a button that will reveal the contents of a div

	Example:
	
		pax.load.onloaded( function() {
			show_example_sources( 'src_buttons1', 'inlineSource1' );
		} );
*/
function show_source( element, showElement ) {

	var tpl = "\
		<button id='toggleSource_[:= id :]' style='height: 30px;'>Show source <img src='../pax/resource/img/arrow_down_red.png' style='margin-top: 3px;'/></button>\
	";

	var id = pax.getNextId();
	pax.template.render( tpl, { value: { id: id }, target: pax.$( element ) } );
	var showButton = 'toggleSource_' + id;
	var outputID = ( showElement )? showElement: 'example_' + id + '_source';

	var originalScriptStyle = false;
	
	//	Function to show / hide the JS source
	pax.event.bind( pax.$( showButton ), 'click', function( e ) {
		var myButton = this;
		var box = pax.$( outputID );
		var type = 'source';

		if( box.style.display == 'none' ) {
			if( ! originalScriptStyle ) {
				box.style.display = '';
				originalScriptStyle = pax.util.getPosition( box );
				box.style.display = 'none';
			}
			box.style.overflow = 'hidden';
			pax.fx.init( outputID, 'reveal', { endSize: originalScriptStyle['height'] }, 500 );
			myButton.innerHTML = "Hide " + type + " <img src='../pax/resource/img/arrow_up_red.png' style='margin-top: 2px;'/>";
		} else {
			pax.fx.init( outputID, 'reveal', { endSize: originalScriptStyle['height'] }, 500, false, function() {
				box.style.display = 'none';
				box.style.height = 0;
			} );
			myButton.innerHTML = "Show " + type + " <img src='../pax/resource/img/arrow_down_red.png' style='margin-top: 2px;'/>";
		}
	} );
};