<template>
	<options>
		<pixelPrecise/>
	</options>

	<javascript>
		<!--leave_a_message = function (node) {
			node.appendChild(document.createElement("br"));
			node.appendChild(document.createElement("br"));
			var link = document.createElement("a");
			node.appendChild(link);
			var mailto = 'mailto:x@example.com';
			link.href = mailto;
			link.onclick = function() {
				try {
					running = false;
					window.location.href = mailto;
					setTimeout(function() { window.close(); }, 5000);
					return false;
				} catch(E) {}
			};
			link.appendChild(document.createTextNode("Leave a message"));
		};-->

		_no_operators_available = function () {
			var node = byName("_label_wait_for_operator");
			removeAllChildren(node);
			node.appendChild(document.createTextNode(ISLProntoAPI.getTr('no_supporters')));
			<!--leave_a_message(node);-->
		};
		
		_clients_before = function (count) {
			var node = byName("_label_wait_for_operator");
			removeAllChildren(node);
			node.appendChild(document.createTextNode(ISLProntoAPI.getTr('wait_for_free_op')));
			<!--node.appendChild(document.createTextNode("You are " + (count+1) + ". in line."));
			leave_a_message(node);-->
		};
		
		<!--_chatbox_light_text = function(node) {
			removeAllChildren(node);
			node.appendChild(document.createTextNode("To start remote desktop session, click here!"));
			node.style.color = "#d8562b";
			node.style.fontSize = "120%";
			node.style.fontWeight = "bold";
		};-->
		
		_login_check = function() {
			var nick = byName("_input_name").value;
			if(emptyString(nick)) {
				alert(ISLProntoAPI.getTrInline({'es':"Por favor, introduzca su nombre.", '':"Please enter your name."}));
				return false;
			}
			var company = byName('input_company').value;
			if(emptyString(company)) {
				alert(ISLProntoAPI.getTrInline({'es':"Por favor, introduzca su empresa.", '':"Please enter your company."}));
				return false;
			}
			return true;
		};
		
		_before_login = function() {
			var company = byName('input_company').value;
			setCookie('islprontocompany', company);

			updateCustomFields([
				{type:'text', title:'Company', value:company}
			]);
		};

		_toggleMessageType = function() {
			if (ISLProntoAPI.selectedMessageType == null || ISLProntoAPI.selectedMessageType != "original") {
				ISLProntoAPI.selectedMessageType = "original";
				var button = byName('_button_toggle_translation');
				removeAllChildren(button);				
				button.appendChild(document.createTextNode("Translate"));
			}
			else {
				ISLProntoAPI.selectedMessageType = "";
				var button = byName('_button_toggle_translation');
				removeAllChildren(button);
				button.appendChild(document.createTextNode("Show Original"));
			}
			<!--alert("Changing message type to '" + ISLProntoAPI.selectedMessageType + "'");-->
			select_message_type(ISLProntoAPI.selectedMessageType);
		};
	</javascript>
	
	<style class="background">
		background: {!public=background!};
	</style>
	
	<style class="poweredby">
		font-family: verdana,sans-serif;
		color: #1B7FBA;
		font-size: 60%;
	</style>
	
	<style class="poweredby" rtl="no">text-align: right;</style>
	<style class="poweredby" rtl="yes">text-align: left;</style>
	
	<style class="_chatbox_normal_text">
		font-family: verdana,sans-serif;
		color: #000;
		font-size: 80%;
	</style>

	<style class="_chatbox_operator_text">
		font-family: verdana,sans-serif;
		color: #0071b6;
		font-size: 80%;
	</style>

	<style class="_chatbox_system_text">
		font-family: verdana,sans-serif;
		color: #090;
		font-size: 80%;
	</style>

	<style class="_chatbox_comment_text">
		font-family: verdana,sans-serif;
		color: #999;
		font-size: 80%;
	</style>
	
	<style class="_chatbox_timestamp_text">
		font-family: verdana,sans-serif;
		color: #999;
		font-size: 60%;
	</style>
	
	<style class="_chatbox_timestamp_text" rtl="no">padding-right: 1em;</style>
	<style class="_chatbox_timestamp_text" rtl="yes">padding-left: 1em;</style>

	<style class="_chatbox_link_text">
		color: #00f;
	</style>
	
	<style class="_chatbox_light_text">
		color: #f60;
		font-size: 110%;
		font-weight: bold;
	</style>
	
	<style class="_chatbox_file_text">
		color: #f60;
		font-size: 110%;
		font-weight: bold;
	</style>
	
	<style class="normal_text">
		font-family: verdana,sans-serif;
		font-size: 80%;
		color: #000;
	</style>
	
	<style class="label_operator_name">
		font-family: verdana,sans-serif;
		font-size: 80%;
		color: #000;
	</style>
	
	<style class="label_operator_name" rtl="no">text-align: right;</style>
	<style class="label_operator_name" rtl="yes">text-align: left;</style>
	
	<style class="label_operator_none">
		font-family: verdana,sans-serif;
		font-size: 80%;
		color: #000;
	</style>
	
	<style class="label_operator_none" rtl="no">text-align: right;</style>
	<style class="label_operator_none" rtl="yes">text-align: left;</style>	
	
	<style class="label_wait_for_operator">
		font-family: verdana,sans-serif;
		font-size: 80%;
		color: #000;
		text-align: center;
	</style>
	
	<style class="nice_frame">
		border-style: solid;
		border-width: 1px;
		border-color: #bcbab7 #4b4644 #4b4644 #bcbab7;
		background: #fff;
	</style>
	
	<style class="blue_button">
		background: #0071b6;
		border-style: solid;
		border-width: 1px;
		border-color: #232a2e;
	</style>
	
	<style class="green_button">
		background: #090;
		border-style: solid;
		border-width: 1px;
		border-color: #232a2e;
		z-index: 1;
		cursor: pointer;
		padding: 2px;
	</style>
	
	<style class="brown_button">
		border-style: solid;
		border-width: 1px;
		border-color: #e89758;
	</style>
	
	<style class="button_white_text">
		font-family: verdana,sans-serif;
		color: #fff;
		font-size: 80%;
		font-weight: bold;
		text-decoration: none;
	</style>
	
	<style class="button_white_text" rtl="no">text-align: right;</style>
	<style class="button_white_text" rtl="yes">text-align: left;</style>
	
	<style class="button_brown_text">
		font-family: verdana,sans-serif;
		color: #e89758;
		padding-top: 0.3em;
		font-size: 60%;
		text-align: center;
		font-weight: bold;
		text-decoration: none;
	</style>
	
	<style class="send_chat_by_email">
		font-family: verdana,sans-serif;
		font-size: 70%;
		color: #000;
	</style>
	
	<style class="print_chat">
		font-family: verdana,sans-serif;
		font-size: 70%;
		color: #000;
	</style>

	<style class="filter_combobox">
		font-size: 60%;
		font-family: verdana,sans-serif;
	</style>

	<page name="bottom">
		<div class="background"><_absolute x="0" y="0" w="bodyWidth()" h="bodyHeight()"/></div>
		<div _name="poweredby" class="poweredby">powered by <strong>ISL Pronto</strong><_storeSize/><_absolute x="fromEm(0.3)" y="bodyHeight()-storedSize('poweredby').h-fromEm(0.2)" w="bodyWidth()-fromEm(0.6)"/></div>
	</page>
	
	<page name="before:login">
		<div _name="input_name_frame" class="nice_frame"/>
		<div _name="input_email_frame" class="nice_frame"/>
		<div _name="button_chat_frame" class="blue_button"/>
		
		<div _name="input_company_frame" class="nice_frame"/>
		<form _name="input_additional_form">
			<input _name="input_company" type="text" style="border:0; width: 100%"/>
		</form>

		<div _name="label_company">
			<_trInline
				es="Empresa"
			>Company</_trInline>
		</div>

		<_javascript>
			var ic = getCookie('islprontocompany');
			if(ic != null)
				byName('input_company').value = ic;

			byName('input_additional_form').onsubmit = function() { chat_login_submit(); return false; };
		</_javascript>
	</page>
	
	<page name="after:login">
		<_enclose element="_input_name" into="input_name_frame" xp="fromEm(0.3)" yp="fromEm(0.1)" x="layoutMirror(bodyWidth()/2-fromEm(7), fromEm(13), 0, bodyWidth())" y="bodyHeight()/2-fromEm(1.8)" w="fromEm(13)" h="fromEm(1.8)"/>
		<_enclose element="_input_email" into="input_email_frame" relativeTo="input_name_frame" relativeOrigin="bottom left" xp="fromEm(0.3)" yp="fromEm(0.1)" y="fromEm(0.3)" w="fromEm(13)" h="fromEm(1.8)"/>
		<_enclose element="input_company" into="input_company_frame" relativeTo="input_email_frame" relativeOrigin="bottom left" xp="fromEm(0.3)" yp="fromEm(0.1)" y="fromEm(0.3)" w="fromEm(13)" h="fromEm(1.8)"/>
		<_update _element="_label_name" class="normal_text"><_storeSize/><_relative to="input_name_frame" origin="top layoutRight" x="layoutRelativeRight(fromEm(0.6), storedSize('_label_name').w)" y="fromEm(0.9)-storedSize('_label_name').h/2"/></_update>
		<_update _element="_label_email" class="normal_text"><_storeSize/><_relative to="input_email_frame" origin="top layoutRight" x="layoutRelativeRight(fromEm(0.6), storedSize('_label_email').w)" y="fromEm(0.9)-storedSize('_label_email').h/2"/></_update>
		<_update _element="label_company" class="normal_text"><_storeSize/><_relative to="input_company_frame" origin="top layoutRight" x="layoutRelativeRight(fromEm(0.6), storedSize('label_company').w)" y="fromEm(0.9)-storedSize('label_company').h/2"/></_update>
		<_update _element="_button_chat" class="button_white_text"><_storeSize/></_update>
		<_feature name="available_filters">
			<select _name="filter_combobox" class="filter_combobox"><_relative to="input_company_frame" origin="bottom left" y="fromEm(0.3)" w="fromEm(13)" h="fromEm(1.2)"/></select>
			<_javascript>
				var combobox = byName('filter_combobox');
				var available_filters = getAvailableFilters();
				var default_filter = getDefaultFilter();
				setLoginFilter(default_filter);
				var selectedIndex = 0;
				for(i=0; i &lt; available_filters.length; i++) {
					var filter = available_filters[i];
					var filter_name = getFilterName(filter);
					var filter_supporters = getFilterSupporterCount(filter);
					var option = document.createElement("option");
					if (filter_supporters &gt; 0) {
						option.appendChild(document.createTextNode(ISLProntoAPI.getTr('filter_available').replace('{{filter}}', filter_name)));
						option.style.color = "#006600";
					} else {
						option.appendChild(document.createTextNode(ISLProntoAPI.getTr('filter_unavailable').replace('{{filter}}', filter_name)));
						option.style.color = "#990000";
					}
					option.value = filter;
					if (filter == default_filter)
						selectedIndex = i;
					combobox.appendChild(option);
				}
				combobox.selectedIndex = selectedIndex;
				combobox.onchange = function() { setLoginFilter(combobox.value); };
				
				byName('_input_name').tabIndex = 1;
				byName('_input_email').tabIndex = 2;
				byName('input_company').tabIndex = 3;
				byName('filter_combobox').tabIndex = 4;
				byName('_button_chat').tabIndex = 5;
			</_javascript>
			<_enclose element="_button_chat" into="button_chat_frame" relativeTo="filter_combobox" relativeOrigin="bottom layoutRight" xp="fromEm(0.3)" yp="fromEm(0.2)" x="layoutRelativeLeft(0, Math.max(fromEm(6), storedSize('_button_chat').w+fromEm(0.6)))" y="fromEm(1.2)" w="Math.max(fromEm(6), storedSize('_button_chat').w+fromEm(0.6))" h="storedSize('_button_chat').h+fromEm(0.4)"/>
		</_feature>
		<_no_feature name="available_filters">
			<_enclose element="_button_chat" into="button_chat_frame" relativeTo="input_company_frame" relativeOrigin="bottom layoutRight" xp="fromEm(0.3)" yp="fromEm(0.2)" x="layoutRelativeLeft(0, Math.max(fromEm(6), storedSize('_button_chat').w+fromEm(0.6)))" y="fromEm(1.2)" w="Math.max(fromEm(6), storedSize('_button_chat').w+fromEm(0.6))" h="storedSize('_button_chat').h+fromEm(0.4)"/>
			<_javascript>
				byName('_input_name').tabIndex = 1;
				byName('_input_email').tabIndex = 2;
				byName('input_company').tabIndex = 3;
				byName('_button_chat').tabIndex = 4;
			</_javascript>
		</_no_feature>

	</page>
	
	<page name="before:chat">
		<_feature name="chat_line_filtering">
			<div _name="_button_toggle_translation" class="green_button" onclick="_toggleMessageType();">Show Original</div>
		</_feature>
		<div _name="chatbox_frame" class="nice_frame"/>
		<div _name="button_send_frame" class="blue_button"/>
		<div _name="button_end_frame" class="brown_button"/>
		<_feature name="start_isl_light">
			<div _name="button_start_isl_light_frame" class="blue_button"/>
		</_feature>
		<div _name="input_send_frame" class="nice_frame"/>
	</page>
	
	<page name="after:chat">
		<_feature name="chat_line_filtering">
			<_update _element="_button_toggle_translation" class="button_white_text"><_storeSize/></_update>
			<_update _element="chatbox_frame"><_absolute x="fromEm(0.6)" y="fromEm(0.6+5.1+0.6)" w="bodyWidth()-fromEm(0.6)*2" h="bodyHeight()-fromEm(0.6+5.1+0.6+5.8)"/></_update>
			<_update _element="_chatbox"><_relative to="chatbox_frame" origin="top left" x="fromEm(0.3)" y="fromEm(0.3+1.5)" w="bodyWidth()-fromEm(0.6)*2-fromEm(0.5)" h="bodyHeight()-fromEm(0.6+5.1+0.6+5.8+2)"/></_update>
			<_update _element="_button_toggle_translation"><_storeSize/><_relative to="chatbox_frame" origin="top left" x="fromEm(0.3)" y="fromEm(0.3)"/></_update>
		</_feature>
		<_no_feature name="chat_line_filtering">
			<_enclose element="_chatbox" into="chatbox_frame" xp="fromEm(0.3)" yp="fromEm(0.3)" x="fromEm(0.6)" y="fromEm(0.6+5.1+0.6)" w="bodyWidth()-fromEm(0.6)*2" h="bodyHeight()-fromEm(0.6+5.1+0.6+5.8)"/>
		</_no_feature>
		<_enclose element="_input_send" into="input_send_frame" relativeTo="chatbox_frame" relativeOrigin="bottom left" xp="fromEm(0.3)" yp="fromEm(0.3)" y="fromEm(0.3)" w="bodyWidth()-fromEm(0.6)*2" h="fromEm(3)"/>
		
		<_update _element="_button_send" class="button_white_text"><_storeSize/></_update>
		<_enclose element="_button_send" into="button_send_frame" relativeTo="input_send_frame" relativeOrigin="bottom layoutRight" xp="fromEm(0.3)" yp="fromEm(0.2)" x="layoutRelativeLeft(0, Math.max(fromEm(4), storedSize('_button_send').w+fromEm(0.6)))" y="-fromEm(0.1)" w="Math.max(fromEm(4), storedSize('_button_send').w+fromEm(0.6))" h="storedSize('_button_send').h+fromEm(0.4)"/>
		
		<_update _element="_button_end" class="button_brown_text"><_storeSize/></_update>
		
		<_feature name="start_isl_light">
			<_update _element="_button_start_isl_light" class="button_white_text"><_storeSize/></_update>
			<_enclose element="_button_start_isl_light" into="button_start_isl_light_frame" relativeTo="button_send_frame" relativeOrigin="top layoutLeft" xp="fromEm(0.3)" yp="fromEm(0.2)" x="layoutRelativeLeft(fromEm(0.3), fromEm(0.6)+storedSize('_button_start_isl_light').w)" w="storedSize('_button_start_isl_light').w+fromEm(0.6)" h="storedSize('_button_send').h+fromEm(0.4)"/>
			<_enclose element="_button_end" into="button_end_frame" relativeTo="button_start_isl_light_frame" relativeOrigin="top layoutLeft" xp="fromEm(0.3)" yp="fromEm(0.2)" x="layoutRelativeLeft(fromEm(0.3), fromEm(0.6)+storedSize('_button_end').w)" w="storedSize('_button_end').w+fromEm(0.6)" h="storedSize('_button_send').h+fromEm(0.4)"/>
		</_feature>
		<_no_feature name="start_isl_light">
			<_enclose element="_button_end" into="button_end_frame" relativeTo="button_send_frame" relativeOrigin="top layoutLeft" xp="fromEm(0.3)" yp="fromEm(0.2)" x="layoutRelativeLeft(fromEm(0.3), fromEm(0.6)+storedSize('_button_end').w)" w="storedSize('_button_end').w+fromEm(0.6)" h="storedSize('_button_send').h+fromEm(0.4)"/>
		</_no_feature>
		
		<_update _element="_clickable_send_chat_by_email" class="send_chat_by_email"><_storeSize/><_absolute x="layoutMirror(fromEm(0.6), storedSize('_clickable_send_chat_by_email').w, 0, bodyWidth())" y="bodyHeight()-storedSize('_clickable_send_chat_by_email').h-fromEm(0.9)"/></_update>
		<_update _element="_clickable_print_chat" class="print_chat"><_storeSize/><_relative to="_clickable_send_chat_by_email" origin="top layoutRight" x="layoutRelativeRight(fromEm(0.6), storedSize('_clickable_print_chat').w)"/></_update>
	</page>
	
	<page name="after:wait_for_operator">
		<_update _element="_label_wait_for_operator" class="label_wait_for_operator"><_absolute x="fromEm(1)" y="bodyHeight()*0.45" w="bodyWidth()-fromEm(2)"/></_update>
	</page>
	
	<dynamic name="after:operator_face">
		<_update _element="_image_operator_face" class="nice_frame"><_absolute x="layoutMirror(bodyWidth()-fromEm(5.1)-fromEm(0.6), fromEm(5.1), 0, bodyWidth())" y="fromEm(0.6)" w="fromEm(5.1)" h="fromEm(5.1)"/></_update>
	</dynamic>
	
	<dynamic name="after:operator_name">
		<_update _element="_label_operator_name" class="label_operator_name"><_storeSize/><_absolute x="fromEm(0.6)+layoutIfRtl(fromEm(5.1+0.6))" y="fromEm(0.6+5.1)-storedSize('_label_operator_name').h" w="bodyWidth()-fromEm(5.1+0.6+0.6+0.6)"/></_update>
	</dynamic>
	
	<dynamic name="after:operator_none">
		<_update _element="_label_operator_none" class="label_operator_none"><_storeSize/><_absolute x="fromEm(0.6)" y="fromEm(0.6+5.1)-storedSize('_label_operator_none').h" w="bodyWidth()-fromEm(0.6+0.6)"/></_update>
	</dynamic>
	
	<dynamic name="after:operator_typing">
		<_update _element="_image_operator_typing" class="nice_frame"><_absolute x="layoutMirror2(fromEm(0.6), fromEm(3), 0, bodyWidth())" y="fromEm(0.6)+fromEm(5.1)-fromEm(3)*30/48" w="fromEm(3)" h="fromEm(3)*30/48"/></_update>
	</dynamic>
	
	<dynamic name="after:logo">
		<_no_feature name="rtl">
			<_update _element="_image_logo"><_absolute x="fromEm(0.6)" y="fromEm(0.6)"/></_update>
		</_no_feature>
		<_feature name="rtl">
			<_update _element="_image_logo"><_onLoad><_storeSize/><_absolute x="bodyWidth()-fromEm(0.6)-storedSize('_image_logo').w" y="fromEm(0.6)"/></_onLoad></_update>
		</_feature>
	</dynamic>
</template>