var HelloWorld = SuperWidget.extend({
    message: null,
    init: function () {
        //code
    },
    bindings: {
        local: {
            'show-message': ['click_showMessage']
        }
    },
    showMessage: function () {
        $div = $('#helloMessage_' + this.instanceId);
        $message = $('<div>').addClass('message').append(this.message);
        $div.append($message);
    }
});
 

<div class="fluig-style-guide">
    <div id="wcm_header" class="wcm-header-background wcm-header">
	        <!-- Group left -->
	        <div class="header-grouper-left">
            <a href="home" class="wcm_logo" title="${i18n.getTranslation('layout.label.pagetitle')}">
		            <#if '${imageLogo}'=='true'>
				<img src="$                <img src="${serverContextURL}/resources/images/${pageRender.user.tenantId}/logo_image.png"></img>
				<#else>
				            <#else>
                <img src="${serverContextURL}/resources/images/logo.png"></img>
		     </#if>
       </a>#if>
   	</div>
	         </a>
        </div>
        <!-- Group right -->
	        <div class="header-grouper-right">
		            <!-- Container login -->
		<div id="SlotLogin" slot            <div id="SlotLogin" slot="true" class="slot-header-actions">
			            <#list (pageRender.getInstancesIds("SlotLogin"))! as id>
				${pageRender.renderInstanceNoDecorator(id)}
			</#list>
		            </div>
	        </div>
    </div>
    <!-- WCM Wrapper content -->
<div    <div class="wcm-wrapper-content">
	        <!-- Menu esquerdo -->
	        <nav class="wcm-navigation wcm-menu-background">
		            <div id="SlotMenu" slot="true">
			            <#list (pageRender.getInstancesIds("SlotMenu"))! as id>
				${pageRender.renderInstanceNoDecorator(id)}
			</#list>
		            </div>
	        </nav>
	        <!-- Wrapper -->
	        <div class="wcm-all-content">
		            <div id="wcm-content" class="clearfix wcm-background">
	                <!--WIDGETS DO LAYOUT -->
                <link type="text/css" rel="stylesheet" href="${contextPath}/resources/css/wcm_layout.css"/>
          	      <!-- Onde deverá estar a barra de formatação -->
          	  <#if pageRender.isEditMode()=true>
                <div name="formatBar" id="formatBar"></div>
                <!-- Div geral -->
                <!-- Há CSS distinto para Edição/Visualização -->
            <div id="edicaoPagina" class="clearfix">
            <#else>
			            <div id="visualizacaoPagina" class="clearfix">
            	</#if>
			                <!-- Titulo da página -->
			                <div class="slotfull layout-1-1">
				                    <span class="titleArea">${i18n.getTranslation('wcm.layoutdefault.title')}</span>
				                    <h2 class="pageTitle">${pageTitle}</h2>
			                </div>
			                <!-- Slot 1 -->
			                <div class="editable-slot slotfull layout-1-1" id="slotFull1">
				<div id=                    <div id="SlotC" slot="true" class="slotint" decorator="false" editableSlot="true">
					                    <#list (pageRender.getInstancesIds("SlotC"))! as id>
						${pageRender.renderInstanceNoDecorator(id)}
					</#list>
				</div>				
			</div>
			                    </div>
                </div>
                <!-- Slot 2 -->
			<div class="editable-slot slotfull                 <div class="editable-slot slotfull layout-1-1" id="slotFull2">
				                    <div id="SlotB" slot="true" class="slotint" decorator="false" editableSlot="true">
					<#list (pageRender.getInstancesIds("SlotB"))! as                   <#list (pageRender.getInstancesIds("SlotB"))! as id>
						${pageRender.renderInstanceNoDecorator(id)}
					</#list>
				                    </div>				
			</div>
			
                </div>
                <!-- Slot 3 -->
			                <div class="editable-slot slotfull layout-1-1" id="slotFull3">
				<!-- Widget -->
				                    <!-- Widget -->
                    <div id="SlotA" slot="true" class="slotint" decorator="true" editableSlot="true">
					<#list (pageRender.getInstancesIds("SlotA"))!                    <#list (pageRender.getInstancesIds("SlotA"))! as id>
						${pageRender.renderInstance(id)}
					</#list>
				</div>				
			</div>
	                    </div>
			                </div>
            </div>
                <!-- FIM DAS WIDGETS DO LAYOUT -->
			<div id="wcm_footer"                <div id="wcm_footer" class="wcm_footer"></div>
		            </div>
	            </div>
        </div>
    </div>

// JavaScript Document
$(document).ready(function() {
	/*$(".wcm_config_widgets").click(function() {
		$(this).parent('li').children('ul').toggle();
	});*/
	
	//Utilizado o 'live' para que o event handler não se perca na atualização de widgets. 
	$(".wcm_config_widgets").live("click", function(){
		$(this).parent('li').children('ul').toggle();
	});
	var HelloWorld = SuperWidget.extend({
    message: null,
    init: function () {
        //code
    },
    bindings: {
        local: {
            
	$(document).bind('click', function(e'show-message': ['click_showMessage']
        }
    },
    showMessage: function () {
	       var $clicked$div = $(e.target'#helloMessage_' + this.instanceId);
	        if$message = (! $clicked.parents().hasClass("wcm_controles_widgets"))
	$('<div>').addClass('message').append(this.message);
        $(".wcm_controles_widgets ul li ul").hide($div.append($message);
    });
	
});