{include file="$gentemplates/$header_tpl"}
{literal}
<script type="text/javascript">
$(function() {
$('#tool_tip_4 *').tooltip();
});
</script>
{/literal}
<!--:&nbsp;{$date}-->
<div style="display:table;width:100%;">
	<h2 class="float_left">{$lang.section.events}</h2>
	<div class="float_right" style="margin:0">
		<a href="{$add_event_link}" class="add-icon float_right" title="{$lang.events.add}" alt="{$lang.events.add}">&nbsp;</a>
	</div>
</div>
<h3 class="p-b5">{$lang.events.search_form}
	<ins id="hide_image" onclick="ShowSearchForm('1'); return false;" class="hide_search_form sub_icon" style="display: none;" title="{$lang.button.hide_search_form}">&nbsp;</ins>
	<ins id="show_image" onclick="ShowSearchForm('2'); return false;" class="show_search_form sub_icon" style="display: inline;" title="{$lang.button.show_search_form}">&nbsp;</ins>
</h3>

	<!--<div class="float_right" style="padding-bottom: 20px;">
		<a href="{$calendar_link}" >{$lang.section.calendar}</a>
	</div>
	 class="search_form_hide_show"-->
	<div style="display:table;width:100%;">	
		<div id="index_quick_search" class="calendar_form_search" style="display: inline;">
			<div class="float_left events_location" >
				<form action="{$site_root}/{$seo.events}?sel=search" method="post" id="s_form" style="height:292px;">
					<div class="event_text">{$lang.events.location}</div>
					<div style=" padding-top:5px;">
						<select style="width: 150px;" name="id_country" class="index_select" onchange="SelectRegion('mp', this.value, document.getElementById('region_div'), document.getElementById('city_div'));">
							<option value="0">{$lang.home_page.select_default}</option>
							{section name=s loop=$form.countries}
							<option value="{$form.countries[s].id}" {if $form.countries[s].sel}selected="selected"{/if}>{$form.countries[s].name}</option>
							{/section}
						</select>
						<div id="region_div">
						<select style="width: 150px" name="id_region" class="index_select" onchange="SelectCity('mp', this.value, document.getElementById('city_div'));">
							<option value="0">{$lang.home_page.select_default}</option>
							{section name=s loop=$form.regions}
							<option value="{$form.regions[s].id}" {if $form.regions[s].sel}selected="selected"{/if}>{$form.regions[s].name}</option>
							{/section}
						</select>
						</div>
						<div id="city_div">
						<select style="width: 150px" class="index_select" name="id_city">
							<option value="0">{$lang.home_page.select_default}</option>
							{section name=s loop=$form.cities}
							<option value="{$form.cities[s].id}" {if $form.cities[s].sel}selected="selected"{/if}>{$form.cities[s].name}</option>
							{/section}
						</select>
						</div>
					</div>
					<div style="padding-top:20px;">
						<div class="event_text">{$lang.events.type}</div>
						<div>
							<select style="width: 150px" class="index_select" name="type">
								<option value="0">{$lang.home_page.select_default}</option>
								{section name=s loop=$form.types}
								<option value="{$form.types[s].id}" {if $form.types[s].sel}selected="selected"{/if}>{$form.types[s].name}</option>
								{/section}
							</select>
						</div>
					</div>
					<div style="padding-top:40px;">
						<input type="submit" value="{$lang.button.search}">
					</div>
				</form>
			</div>
			<div class="float_right" style="height:345px;">
				<div id="calendar" class="float_right">{$calendar_out_put}</div>
			</div>
		</div>
	</div>
	<h3 class="p-b5">{$lang.events.event_today}</h3>
	{if $events}
	<!--<div style="padding-top:20px; padding-{$default_right}:0px; padding-bottom:10px; padding-{$default_left}:0px">
		{section name=e loop=$events}
			<div style="padding-top:0px; padding-{$default_right}:0px; padding-bottom:5px; padding-{$default_left}:0px" class="link">&raquo;&nbsp;&nbsp;<a href="#{$events[e].id_event}">{$events[e].name}</a></div>
		{/section}
	</div>-->
	{section name=e loop=$events}
		<div style="padding-top:5px; padding-{$default_right}:0px; padding-bottom:0px; padding-{$default_left}:0px" class="text_head">
			<a name="{$events[e].id_event}" href="{$event_path}?sel=event&id_event={$events[e].id_event}"><b>{$events[e].name}</b></a>&nbsp;&nbsp;
			<span class="text_hidden">{$events[e].type}</span>
		</div>
		<div style="padding:5px 0;"></div>
		<div style="overflow:hidden;padding:5px 0;">
			<div style="width:100px;" class="float_left text_hidden">{$lang.events.event_date_begin}:</div>			
			<div class="float_left">{$events[e].date_begin};</div>
		</div>
		<div style="overflow:hidden;padding:5px 0;">
			<div style="width:100px;" class="float_left text_hidden">{$lang.events.event_date_end}:</div>
			<div class="float_left">{$events[e].date_end};</div>
		</div>
		<div style="overflow:hidden;padding:5px 0;">
			<div style="width:100px;" class="float_left text_hidden">{$lang.events.event_periodicity}:</div>
			<div class="float_left">{$events[e].periodicity} </div>
		</div>
		{if $events[e].date_die}
		<div style="overflow:hidden;padding:5px 0;">
			<div style="width:100px;" class="float_left text_hidden">{$lang.events.until}</div>
			<div class="float_left">{$events[e].date_die}</div>
		</div>
		{/if}
		<div style="overflow:hidden;padding:5px 0;">
			<div style="width:100px;" class="float_left text_hidden">{$lang.events.location}:</div>
			<div class="float_left">{if $events[e].location ne " "}{$events[e].location};{else}...{/if}</div>
		</div>
		<div style="overflow:hidden;padding:5px 0;">
			<div style="width:100px;" class="float_left text_hidden">{$lang.events.event_place}:</div>
			<div class="float_left">{$events[e].place}</div>
		</div>
		<div style="overflow:hidden;padding:5px 0;">
			<div style="width:100px;" class="float_left text_hidden">{$lang.events.event_descr}:</div>
			<div class="float_left">{if $events[e].description eq " "}{$events[e].description}{else}...{/if}</div>
		</div>
		{if $events[e].joined}
			<div style="overflow:hidden;padding:5px 0;">
				<div style="width:100px;" class="float_left"><b>{$events[e].num_users}&nbsp;{$lang.events.joined}.&nbsp;&nbsp;</b></div>
				<div class="float_left"><a href="{$events[e].leave_link}">{$lang.events.leave_event}</a></div>
			</div>
		{else}
			<div style="overflow:hidden;padding:5px 0;">
				<div style="width:100px;" class="float_left"><b>{$events[e].num_users}&nbsp;{$lang.events.joined}.&nbsp;&nbsp;</b></div>
				<div class="float_left"><a href="{$events[e].join_link}">{$lang.events.join_event}</a></div>
			</div>
		{/if}
		<br>
	{/section}
	{else}
	<div class="error_msg" style="padding-top:15px; padding-{$default_right}:0px; padding-bottom:5px; padding-{$default_left}:0px">{$lang.events.no_events}</div>
	{/if}
	{literal}
	<script type="text/javascript">		$(window).load(function () 	{  			ShowSearchForm(0);		});
		function ShowSearchForm(par) {
			if (par == '1') {
				document.getElementById('hide_image').style.display = 'none';
				document.getElementById('show_image').style.display = 'inline';
				//document.getElementById('show_link').style.display = 'inline';
				document.getElementById('index_quick_search').style.display = 'none';
			} else {
				document.getElementById('hide_image').style.display = 'inline';
				document.getElementById('show_image').style.display = 'none';
				//document.getElementById('show_link').style.display = 'none';
				document.getElementById('index_quick_search').style.display = '';
				{/literal}
				LoadCalendar(document.getElementById('calendar'), '&id_country={$form.id_country}&id_region={$form.id_region}&id_city={$form.id_city}&type={$form.type}');
				{literal}
			}
		}

		function showToolTip(par,text){
			//if(document.all)e = event;
			var obj = document.getElementById('tooltip');
			obj.innerHTML = text;
			obj.style.display = 'block';
			//var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
			//if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=62;
			//var leftPos = e.clientX - 780;//533-409+280
			//if(leftPos<0)leftPos = 0;
			//obj.style.left = leftPos + 'px';
		//	obj.style.top = e.clientY - obj.offsetHeight -140 + st + 'px';
			if($('#top_'+par).position().left > 350 && $('#top_'+par).position().left <=400)
				obj.style.left = ($('#top_'+par).position().left-17) + 'px';
			else if($('#top_'+par).position().left > 400)
				obj.style.left = ($('#top_'+par).position().left-90) + 'px';
			else
			obj.style.left = $('#top_'+par).position().left + 'px';
			obj.style.top = $('#top_'+par).position().top+'px';
			//obj.style.top = e.clientY - 90  +  'px';
		}
		function hideToolTip(){
			document.getElementById('tooltip').style.display = 'none';
		}

		function LoadCalendar(destination, param) {
			InitXMLHttpRequest();
			// Load the result from the response page
			if (req) {
				req.onreadystatechange = function() {
					if (req.readyState == 4) {
						destination.innerHTML = req.responseText;
					} else {
						destination.innerHTML = "Loading data...";
					}
				}
				req.open("GET", "{/literal}{$site_root}/{$seo.events_calendar}{literal}?act=ajax" + param, true);
				req.send(null);
			} else {
				destination.innerHTML = 'Browser unable to create XMLHttp Object';
			}
		}
	</script>
	{/literal}
{include file="$gentemplates/$footer_tpl"}