<%@ include file="/jsp/init.jsp" %>

<c:set var="portletImgFolder" value="${pageContext.request.contextPath}/images/preview-dispositivos"/>

<div id="preview-dispositivos" class="">
	<aui:input name="htmlPreviewParametro" value='<%=ParamUtil.getString(request, "html")%>' type="hidden"/>
	<div class="titulo" style="font-family:Verdana;font-size:10.0pt;">
		<c:set var="tituloPreviewPadrao">
			<liferay-ui:message key='preview.titulo-padrao'/>
		</c:set>
		<c:set var="tituloParam">
			<%=ParamUtil.getString(request, "tituloPreview")%>
		</c:set>
		${empty tituloParam ? tituloPreviewPadrao : tituloParam}
	</div>
	
	<div class="corpo">
		<div class="tipos-wrapper">
			<div class="dispositivo desktop" data-tipo="desktop">
				<div class="icone-wrapper">
					<img src="${portletImgFolder}/desktop.png" class="icone">
				</div>
				<span class="nome" style="font-family:Verdana;font-size:10.0pt;"><liferay-ui:message key="preview.dispositivo.desktop"/></span>
			</div>
			<div class="dispositivo mobile" data-tipo="mobile">
				<div class="icone-wrapper">
					<img src="${portletImgFolder}/mobile.png" class="icone">
				</div>
				<span class="nome" style="font-family:Verdana;font-size:10.0pt;"><liferay-ui:message key="preview.dispositivo.mobile"/></span>
			</div>
			<div class="dispositivo tablet" data-tipo="tablet">
				<div class="icone-wrapper">
					<img src="${portletImgFolder}/tablet.png" class="icone">
				</div>
				<span class="nome" style="font-family:Verdana;font-size:10.0pt;"><liferay-ui:message key="preview.dispositivo.tablet"/></span>
			</div>
			<div style="clear: both;"></div>
		</div>
		
		<div style="clear: both;"></div>
		
		<div id="preview-conteudo">
			
		</div>
	</div>
</div>

<aui:script use="node">
	var containerPreview = A.one("#preview-dispositivos");
	var objConteudo = A.one("#preview-conteudo");
	var botoesDispositivos = A.all(".tipos-wrapper .dispositivo");
	var hiddenHtmlParametro = A.one("#<portlet:namespace />htmlPreviewParametro");
	var tipoSelecionado;
	//atributos com dimensoes de cada dispositivo
	var dispositivos = [
    			{
    				nome : 'desktop',
    				largura : '100%',
    				altura : '1024px'
    			},
    			{
    				nome : 'mobile',
    				largura: '480px',
    				altura : '640px'
    			},
    			{
    				nome : 'tablet',
    				largura: '768px',
    				altura : '1024px'
    			}
    	 ];
	
	//define o evento para cada icone que representa um dispositivo
	//executando a funcao previewConteudo, passando como parametro definido
	//no atributo data-tipo.
	botoesDispositivos.each(function(){
		var obj = this;

		obj.on('click', function(){
			<portlet:namespace />previewConteudo(obj.attr("data-tipo"));
		});
	});
	
	function getDispositivo(nome) {
		if (nome == undefined) {
			nome = tipoSelecionado;
		}
		if (nome != undefined) {
			for (var i = 0; i < dispositivos.length; i++) {
				if (dispositivos[i].nome == nome) {
					return dispositivos[i];
				}
			}
		}
		return undefined;
	}

	function definirTipoSelecionado(nomeDispositivo) {
		if (nomeDispositivo == undefined) return;
		//desmarcar o ativo
		botoesDispositivos.removeClass('ativo');
		
		//definir o ativo de acordo com o dispositivo atual
		A.one('.tipos-wrapper .dispositivo.' + nomeDispositivo).addClass('ativo');
		tipoSelecionado = nomeDispositivo;
	}

	//funcao para atualizar o preview, a partir do click de algum dispositivo ou outro elemento
	Liferay.provide(
			window,
			'<portlet:namespace />previewConteudo',
			function(nomeDispositivo, conteudo) {
				definirTipoSelecionado(nomeDispositivo);
				
				var dispositivo = getDispositivo(nomeDispositivo);
				
				if (dispositivo != undefined) {
					//obter valor numerico da configuracao do dispositivo, de acordo com o tipo: % ou px
					var valLarguraDisposivo = dispositivo.largura.indexOf('%') >= 0 ? containerPreview.width() : parseInt(dispositivo.largura, 10);
					
					//verifica se o container principal, com os componentes de pre-visualizacao, comportara a largura do dispostivo
					//sem exceder sua largura, caso contrario, define o tamanho do corpo do preview para 100%
					objConteudo.setStyle('width', (containerPreview.width() >= valLarguraDisposivo ? dispositivo.largura : '100%'));
					//objConteudo.setStyle('height', dispositivo.altura);
					objConteudo.setStyle('max-height', dispositivo.altura);
					
					if (conteudo != undefined) {
						objConteudo.html(conteudo);
					}
					else if (window.definirConteudoPreview != undefined) {
						conteudo = window.definirConteudoPreview();
						if (conteudo != undefined) {
							objConteudo.html(conteudo);
						}
					}
					else if (hiddenHtmlParametro.val() != '') {
						objConteudo.html(hiddenHtmlParametro.val());
					}
					else {
						console.error('Conteúdo não definido!')
					}
					
				}
				else {
					console.error('Dispositivo não encontrado!');
				}				
			}
		);

	//versao da funcao sem prefixo com portletnamespace.
	Liferay.provide(
		window,
		'previewConteudo',
		function(nomeDispositivo, conteudo) {
			<portlet:namespace />previewConteudo(nomeDispositivo, conteudo);
		}
	);

	//funcao para ser executado a partir de eventos definidos no CKEditor atraves da tag
	//aui:input-editor, evitando utilizar o valor no parametro da funcao, que eh definido
	//por padrao pelo proprio evento disparado pelo editor, com o valor do campo.
	//Neste caso, esta informacao nao eh necessaria e pode causar problemas nas funcionalidades do preview,
	//ja que o parametro padrao do preview eh o nome do dispositivo, e o evento disparado pelo editor manda todo
	//o conteudo do campo!
	Liferay.provide(
			window,
			'<portlet:namespace />previewConteudoEventoEditor',
			function(conteudoEditor) {
				//executa a funcao para pre-visualizar o conteudo com base nos editores HTML da pagina,
				//e nao apenas o conteudo do editor que disparou o evento
				<portlet:namespace />previewConteudo();
		}
	);	

	//inicializar com o dispositivo padrao: desktop
	<portlet:namespace />previewConteudo('desktop');
</aui:script>

