<script type="text/javascript">
function con_dbg_toggle(myItem) {
    var myItemObj = document.getElementById(myItem);
    if (myItemObj) {
        if (myItemObj.style.display == '') {
            myItemObj.style.display = 'none';
        } else {
            myItemObj.style.display = '';
        }
    }
}
function con_dbg_hide(myItem) {
    var myItemObj = document.getElementById(myItem);
    if (myItemObj) {
        myItemObj.style.display = 'none';
    }
}
</script>

<style type="text/css">
    #conDbgBox { position:absolute; z-index:100000; left:5px; top:5px; margin:0; border:1px solid #ccc;padding:5px; background-color:#f6f6f6; text-align: left;color: #000000; }
    #conDbgBox a { text-decoration:none; color: #000000; margin-top: 6px; }
    #dbg_item_block { margin: 0 0 0 20px; color: #000000; }
    #dbg_item_block textarea, #dbg_item_block pre { font-size:11px; margin: 0; padding: 5px; color: #000000; border: 1px solid #6c6c6c; background-color: #ffffff; }
    #dbg_item_block a { display:block; color: #000000; }
    #conDbgClose { padding-left:10px; }
</style>

<div id="conDbgBox">
    <a href="javascript:void(0);" title="Toggle Debug Output" onclick="con_dbg_toggle('dbg_item_block');">con dbg</a>
    <a id="conDbgClose" href="javascript:void(0);" title="Hide Debug Output" onclick="con_dbg_hide('conDbgBox');">(x)</a>
    <div id="dbg_item_block" style="display:none;">
        <!-- BEGIN:BLOCK -->
        <a href="javascript:void(0);" title="Toggle Item" onclick="con_dbg_toggle('dbg_item_{DBG_ITEM_COUNT}');">{DBG_ITEM_NAME}</a>
        <div id="dbg_item_{DBG_ITEM_COUNT}" style="display:none;margin-left:20px;">{DBG_ITEM_VALUE}</div>
        <!-- END:BLOCK -->
    </div>
</div>