<h2>{$lang.cards.select_user}</h2>
<div class="ecards_user">
	<!-- central part -->
	<div style="margin-top:20px;">
		<span class="text_head  float_left">{$lang.cards.by_login}</span>
		<span>
			<input type="text" id="user_name" name="user_name" style="width: 100px;" onKeypress="if (event.keyCode==13 && this.length != '') ajaxRequest('{$site_root}/{$seo.ecards}?sel=check_user&login='+document.getElementById('user_name').value+'&', 'null', document.getElementById('result_div_user'), '<div style=\'text-align: center\'>{$lang.cards.admin.loading}...&nbsp;<img src=\'{$site_root}{$template_root}{$template_images_root}/ajax-loader.gif\'></div>', true);" >
		</span>
		<span>
			<input style="margin-top:-7px;" type="submit" value="{$lang.button.check}" onclick="ajaxRequest('{$site_root}/{$seo.ecards}?sel=check_user&login='+document.getElementById('user_name').value+'&', 'null', document.getElementById('result_div_user'), '<div style=\'text-align: center\'>{$lang.cards.admin.loading}...&nbsp;<img src=\'{$site_root}{$template_root}{$template_images_root}/ajax-loader.gif\'></div>', true);">
		</span>
		<span style="display: none; padding-{$default_left}:10px;" id="hide_image" >
			<a class="arr-up-icon" href="#" onclick="ShowSearchForm('2'); return false;" title="{$lang.button.hide_search_form}">&nbsp;</a>
		</span>
		<span style="display: inline; padding-{$default_left}:10px;" id="show_image">
			<a class="arr-down-icon" href="#"  onclick="ShowSearchForm('1'); return false;" title="{$lang.button.show_search_form}">&nbsp;</a>
		</span>
		<span style="display: none; " id="hide_link" ><a href="#" onclick="ShowSearchForm('1'); return false;">{$lang.users.hide_search_form}</a></span>
		<span style="display: inline;" id="show_link" ><a href="#" onclick="ShowSearchForm('2'); return false;">{$lang.users.show_search_form}</a></span>
	</div>
    <div class="ecards_user_select_form" style="width:670px;">    
        <form action="{$form.search_action}" method="post" name="search_form" id="search_form">
           <div class="index_quick_search quick_search_form" id="id_index_quick_search" style="display: none;width:95%;">
				<div style="display:table;width:100%;">
				<div class="float_left" style="width:50%;">
					<dl>
						<dt style="width:80px;">{$lang.home_page.seeking_a_big}</dt>
						<dd>
							<select name="gender" id="gender" class="index_select" style="width: 150px;">
								<option value="0">{$lang.home_page.select_default}</option>
								{section name=s loop=$user_types_val}
								<option value="{$user_types_val[s].id}">{$user_types_val[s].name}</option>
								{/section}
							</select>
					   </dd> 
					</dl>
					<dl>
						<dt style="width:80px;">{$lang.cards.between_the_ages_of}</dt>
						<dd style="width:200px;">						
							<select name="age_min" class="index_select float_left" id="age_min">
								{section name=a loop=$age_min}
								<option value="{$age_min[a]}" >{$age_min[a]}</option>
								{/section}
							</select>
							{$lang.home_page.and}
							<select name="age_max" class="index_select float_left" id="age_max" style="margin-left:10px;">
								{section name=a loop=$age_max}
								<option value="{$age_max[a]}" >{$age_max[a]}</option>
								{/section}
							</select>
						</dd>
					</dl>
					<dl>
						<dt style="width:80px;">{$lang.cards.status}</dt>
						<dd style="width:200px;">
							<input type="checkbox"  name="online_only" value="1" id="online_only">&nbsp;{$lang.home_page.online_now}
						</dd>
					</dl>
				</div>
				<div class="float_left" style="width:50%;">
					<dl>
						<dt style="width:80px;">{$lang.home_page.country}</dt>
						<dd>
							<div id="country_div">
							<select name="country" class="index_select" style="width: 150px;" id="id_country">
								<option value="0">{$lang.home_page.select_default}</option>
								{section name=s loop=$countries}
								<option value="{$countries[s].id}" >{$countries[s].name}</option>
								{/section}
							</select>
							</div>
						</dd>
					</dl>
					<dl>
						<dt style="width:80px;">{$lang.home_page.region}</dt>
						<dd>
							<div id="region_div">
								<select name="region"  class="index_select" style="width: 150px;" id="region_id">
									<option value="0">{$lang.home_page.select_default}</option>
									{foreach item=item from=$regions}
									<option value="{$item.id}" >{$item.name}
									{/foreach}
								</select>
							</div>
						</dd>
					</dl>
					<dl>
						<dt style="width:80px;">{$lang.home_page.city}</dt>
						<dd>
							<div id="city_div">
								<select name="city"  class="index_select" style="width: 150px;" id="city_id">
									<option value="0">{$lang.home_page.select_default}</option>
									{foreach item=item from=$cities}
									<option value="{$item.id}" >{$item.name}
									{/foreach}
								</select>
						   </div>
					   </dd>
					</dl>					
				</div>
				</div>
				<p style="margin-top:10px;">
					<input type="button" value="{$lang.button.search}" onclick="javascript:SearchUserByParam();" />
				</p>
				
           </div>
        </form>
   </div>
   <div>&nbsp;</div>
	<div id="result_div_user">
		{if $hot_list or $cards_for_you or $cards_from_you}
			<!-- hot list -->
			{if  $hot_list}					
				<div class="content">							
					<h3 class="p-b5" style="margin-bottom:5px;">{$lang.cards.hot_list} </h3>
					{foreach item=item from=$hot_list}
						<div class="content_div" 
							{if $item.icon_path}
                            onmouseover="$(this).removeClass('inactive_select').addClass('active_select');" onmouseout="$(this).removeClass('active_select').addClass('inactive_select');"
							onclick="ChooseUserAct('{$item.id}','{$item.login}','{$item.age}','{$item.icon_path}');"{/if}
						>&nbsp;
							<div {if $item.icon_path}class="text imgcanvas_container"{else}class="text"{/if} style="position:relative;">
								{if $item.icon_path}<img src="{$item.icon_path}" class="icon imgcanvas" alt="">{/if}
							</div>
							<div class="text">
								<div>
									{if $item.login}<font class="text_head">{$item.login}</font>&nbsp;{/if}
								</div>
								<div>
									{if $item.age}{$item.age}&nbsp;{$lang.home_page.ans}{/if}
								</div>
							</div>
						</div>
					{/foreach}
					<div class="div_href">
						<a href="#" onclick="javascript:ajaxRequest('{$site_root}/{$seo.ecards}?sel=hot_list&', 'null', document.getElementById('result_div_user'), '<div style=\'text-align: center\'>{$lang.cards.admin.loading}...&nbsp;<img src=\'{$site_root}{$template_root}{$template_images_root}/ajax-loader.gif\'></div>', true);">{$lang.search.view_all}</a>
					</div>
				</div>
			{/if}
			<!-- /hot list -->

			<!-- cards for you -->
			{if $cards_for_you}
				<div class="content">						
					<h3 class="p-b5">{$lang.cards.cards_for_you}</h3>
					{foreach item=item from=$cards_for_you}
						<div class="content_div"
							{if $item.icon_path}
                             onmouseover="$(this).removeClass('inactive_select').addClass('active_select');" onmouseout="$(this).removeClass('active_select').addClass('inactive_select');"
                             onclick="ChooseUserAct('{$item.id}','{$item.login}{if $item.couple.login}&nbsp;+&nbsp;{$item.couple.login}{/if}','{$item.age}{if $item.couple.age}&nbsp;+&nbsp;{$item.couple.age}{/if} ','{$item.icon_path}');"{/if}
						>
							<div {if $item.icon_path}class="text imgcanvas_container"{else}class="text"{/if} style="position:relative;">
								{if $item.icon_path}<img src="{$item.icon_path}" class="icon imgcanvas" alt="">{/if}
							</div>
							<div class="text">
								<div>
									{if $item.login || $item.couple.login}<font class="text_head">{$item.login}{if $item.couple.login}&nbsp;+&nbsp;{$item.couple.login}{/if}</font>&nbsp;{/if}
								</div>
								<div>
									{if $item.age || $item.couple.age}{$item.age}{if $item.couple.age}&nbsp;+&nbsp;{$item.couple.age}{/if}&nbsp;{$lang.home_page.ans}{/if}
								</div>
							</div>
						</div>
					{/foreach}
				</div>
			{/if}
			<!-- /cards for you -->

			<!-- cards from you -->
			{if $cards_from_you}
				<div class="content">							
					<h3 class="p-b5">{$lang.cards.cards_from_you}</h3>								
					{foreach item=item from=$cards_from_you}
						<div class="content_div" {if $item.icon_path} 
                        onmouseover="$(this).removeClass('inactive_select').addClass('active_select');" onmouseout="$(this).removeClass('active_select').addClass('inactive_select');"
                        onclick="ChooseUserAct('{$item.id}','{$item.login}{if $item.couple.login}&nbsp;+&nbsp;{$item.couple.login}{/if}','{$item.age}{if $item.couple.age}&nbsp;+&nbsp;{$item.couple.age}{/if} ','{$item.icon_path}');"{/if}>
							<div {if $item.icon_path}class="text imgcanvas_container"{else}class="text"{/if} style="position:relative;">
								{if $item.icon_path}<img src="{$item.icon_path}" class="icon imgcanvas" alt="">{/if}
							</div>
							<div class="text">
								<div>
									{if $item.login || $item.couple.login}<font class="text_head">{$item.login}{if $item.couple.login}&nbsp;+&nbsp;{$item.couple.login}{/if}</font>&nbsp;{/if}
								</div>
								<div>
									{if $item.age || $item.couple.age}{$item.age}{if $item.couple.age}&nbsp;+&nbsp;{$item.couple.age}{/if}&nbsp;{$lang.home_page.ans}{/if}
								</div>
							</div>
						</div>
					{/foreach}
				</div>
				
			{/if}
			<!-- /cards from you -->
		{/if}
	</div>
	<div id="result_div1" style="padding-top: 5px;" align="{$default_left}">
	</div>
</div>
{literal}
<script type="text/javascript">
$('select').live("change",(function(){ 
	val = $(this).val();
	name = $(this).attr('name');
	if (name == "country") {
		$.post(SEO_SITE_ROOT+"/location.php",{sec:'rp',sel:'region', id_country:val}, 
			function(data){
				$("div #region_div").html(data);
				$("div #region_div select").addClass("index_select");
				$("div #city_div select").val(0);
				$("div #city_div select").text('');
			}
		);
	} else if(name == "id_region") {
		$.post(SEO_SITE_ROOT+"/location.php",{sec:'rp',sel:'city', id_region:val}, 
			function(data){
				$("div #city_div").html(data);
				$("div #city_div select").addClass("index_select");
			}
		);
	}
}));

function SearchUserByParam() {
   var strparam = '{/literal}{$site_root}/{$seo.ecards}{literal}?sel=search_user';
   if (document.getElementById('gender').value != 0)  strparam = strparam + '&gender='+document.getElementById('gender').value;
   var min = document.getElementById('age_min').value;
   var max = document.getElementById('age_max').value;
   if (min < max)  strparam = strparam + '&age_min='+min+'&age_max='+max;
   if (document.getElementById('online_only').checked)  strparam = strparam + '&online_only=1';
   var country = document.getElementById('id_country');
   if (country != null && country.value != 0)  strparam = strparam + '&id_country='+document.getElementById('id_country').value;
   var region = document.getElementById('id_region');
   if (region != null && region.value != 0)  strparam = strparam + '&id_region='+region.value;
   var city = document.getElementById('id_city');
   if (city != null && city.value != 0)  strparam = strparam + '&id_city='+city.value;
   ajaxRequest(strparam+'&', 'null', document.getElementById('result_div_user'), '<div style=\'text-align: center\'>{/literal}{$lang.cards.admin.loading}{literal}...&nbsp;<img src=\'{/literal}{$site_root}{$template_root}{$template_images_root}{literal}/ajax-loader.gif\'></div>', true);
}


function ChooseUserAct(id_user, login, age, icon_path) {
	var result_html = '<div style="padding: 10px;display: table;" class="active_select"><img src="' + icon_path + '" class="icon"><div style="word-wrap: break-word; width: 200px; padding: 0 10px;"><div><b>' + login + '</b>, ' + age + '{/literal}{$lang.home_page.ans}{literal}</div>';
	result_html = result_html + '</div></div>';
	{/literal}
	{if $price ne '0.00'}
	{literal}
	result_html = result_html + '<div style="padding-top: 5px;"><input type="button" value="{/literal}{$lang.button.confirm_and_send}{literal}" onclick="document.location.href=\'{/literal}{$site_root}/{$seo.ecards}{literal}?sel=order_form&id_order={/literal}{$id_order}{literal}&id_user_to='+id_user+'\'"></div>';
	{/literal}
	{else}
	{literal}
	result_html = result_html + '<div style="padding-top: 5px;"><input type="button" value="{/literal}{$lang.button.confirm_and_send}{literal}" onclick="document.location.href=\'{/literal}{$site_root}/{$seo.ecards}{literal}?sel=pay_free&id_order={/literal}{$id_order}{literal}&id_user_to='+id_user+'\'"></div>';
	{/literal}
	{/if}
	{literal}
	parent.document.getElementById('result_div').innerHTML = result_html;
	
	$('#mask').hide(); 
	$('.window').hide();
	return;
}
function ShowSearchForm(par) {
    if (par == '1') {
        document.getElementById('hide_image').style.display = 'none';
        document.getElementById('hide_link').style.display = 'none';
        document.getElementById('show_image').style.display = 'inline';
        document.getElementById('show_link').style.display = 'inline';
        document.getElementById('id_index_quick_search').style.display = 'none';
    } else {
        document.getElementById('hide_image').style.display = 'inline';
        document.getElementById('hide_link').style.display = 'inline';
        document.getElementById('show_image').style.display = 'none';
        document.getElementById('show_link').style.display = 'none';
        document.getElementById('id_index_quick_search').style.display = 'table';
    }
}

function removeClass(){
	$("#line").removeClass("inactive_select");
	$("#line").addClass("active_select");
}

function addClass(){
	$("#line").removeClass("active_select");
	$("#line").addClass("inactive_select");
}

</script>
{/literal}