Форум

<?$APPLICATION->IncludeComponent("custom:form.select1", ".default", array(
   "REGION_ID" => "14",
   "SELECT_BY" => array(
   "METRO" => "Y",
   "ROOMS" => "Y",
   "ROOM" => "Y",
   "STUDIO" => "Y",
   "PRICE" => "Y",
   "M_PRICE" => "N",
   "SQUARE" => "Y",
   "KITCHEN" => "Y",
   "BUSINESS_CENTER" => "N",
   "DEADLINE" => "N",
   "TYPE" => "N",
   )
   ),
   false,
   array(
   "ACTIVE_COMPONENT" => "Y"
   )
);?> 

<div id="map2selectDistr">
   <p class="closeIt">закрыть X</p>
   <div id="border2Distr" style="display: inline-block;">
   <? echo CFile::ShowImage($arResult["MAP_IMAGE"],0,0,"usemap='#districtselect'");?>
<map name='districtselect'>

<? foreach ($arResult["DIST_DATA"] as $key => $val) {
   echo "<area 
shape='poly' 
coords='{$val['COORDS']}' 
alt='{$val['NAME']}' 
title='{$val['NAME']}' 
href=#  
onclick='CustomSelect($key,\"{$val['NAME']}\",\"Distr\"); $(\"#district".$key."image\").addClass(\"active\"); return false;'
onmouseover='$(\"#district".$key."image\").fadeIn(200);'
onmouseout='if (!$(\"#district".$key."image\").hasClass(\"active\")) $(\"#district".$key."image\").fadeOut(200);'
/>";
}?>

</map>

<?    $selDistr = explode(',', $_REQUEST["d"]);
   foreach ($arResult["DIST_DATA"] as $key => $val) {
      $coords = explode(",", $val["CODE"]);
      echo  "<img src='/upload/images/Distr-sel.png' 
style='left: ".($coords[0]-8)."px; top: ".($coords[1]-14)."px' 
class='".(in_array($key, $selDistr) ? "selected" : "noselected")."' 
id='Distr$key'/>";
      if (@is_file($_SERVER['DOCUMENT_ROOT'].'/images/districts/'.$key.'.gif')) 
         echo '<img src="/images/districts/'.$key.'.gif" 
style="position: absolute; left: 0; top: 0; '.(in_array($key, $selDistr) ? '' : 'display: none;').'"
id="district'.$key.'image" '.(in_array($key, $selDistr) ? ' class="active"' : '').'/>';
      }?>

   </div> 
</div>

<? if($arParams["SELECT_BY"]["METRO"]=="Y"):?>
<div id="map2selectMetro">
<p class="closeIt">закрыть X</p>
   <div id="border2Metro">
   <? echo CFile::ShowImage($arResult["METRO_IMAGE"],0,0,"usemap='#metroselect'");?>
<map name='metroselect'>

   <? foreach ($arResult["METRO_DATA"] as $key => $val) {
   echo "<area 
shape='circle' 
coords='{$val['COORDS']},11' 
alt='{$val['NAME']}' 
title='{$val['NAME']}' 
href=#  
onclick='CustomSelect($key,\"{$val['NAME']}\",\"Metro\"); return false;'/>";
   }?>

</map>
<?    $selMetro = explode(',', $_REQUEST["m"]);
   foreach ($arResult["METRO_DATA"] as $key => $val) {
      $coords = explode(",", $val["COORDS"]);
      echo  "<img src='/upload/images/Metro-sel.png' style='left: ".($coords[0]-11)."px; top: ".($coords[1]-11)."px' class='".(in_array($key, $selMetro) ? "selected" : "noselected")."' id='Metro$key'/>";
      }?>
   </div>
</div>
<? endif;?>


<form method="get" id="selectorForm">
<input type="hidden" name="d" value="<?echo $_REQUEST['d']?>" id="CustomDistrInput">
<input type="hidden" name="m" value="<?echo $_REQUEST['m']?>" id="CustomMetroInput">
<table id="selectorTab">

<tr>
   <td class="left1"><a href=# id="selDistrHref">Выберите район</a></td>
   <td id="CustomSelectedDistr">
<? if ($_REQUEST["d"]) {

$selDistricts = explode(',', $_REQUEST["d"]);
   foreach ($selDistricts as $sd) 
      echo  "<span id='inDistr$sd'><a href=# onclick='CustomDelete(\"$sd\",\"Distr\")' title='удалить'>X</a> {$arResult['DIST_DATA'][$sd]['NAME']} </span> ";

}?>

   </td>
</tr>

<? if($arParams["SELECT_BY"]["METRO"]=="Y"):?>
<tr>
   <td class="left1"><a href=# id="selMetroHref">Выберите метро</a></td>
   <td id="CustomSelectedMetro">
<? if ($_REQUEST["m"]) {

$selMetro = explode(',', $_REQUEST["m"]);
   foreach ($selMetro as $sm) 
      echo  "<span id='inMetro$sm'><a href=# onclick='CustomDelete(\"$sm\",\"Metro\")' title='удалить'>X</a> {$arResult['METRO_DATA'][$sm]['NAME']} </span> ";

}?>

   </td>
</tr>
<? endif;?>
 

function CustomSelect(id,name,type) {
   if (document.getElementById('Custom' + type + 'Input').value > "") var SelArr = document.getElementById('Custom' + type + 'Input').value.split(','); 
   else var SelArr = new Array();
   for(var i=0; i<SelArr.length; i++) {
      if (SelArr[i]==id) return;}
   SelArr.push(id);
   var selected = document.getElementById('CustomSelected' + type).innerHTML;
   selected += ' <span id="in' + type + id + '"><a href=# onclick="CustomDelete(' + id + ', \'' + type + '\')">X</a> ' + name + ' </span>';
   document.getElementById('CustomSelected' + type).innerHTML = selected; 
   document.getElementById('Custom' + type + 'Input').value = SelArr.join(',');
   document.getElementById(type + id).className = "selected";
}

function CustomDelete(id,type) {
   if (type == 'Distr') {
      $('#district' + id + 'image').hide();
      $('#district' + id + 'image').removeClass('active');
   }
   if (document.getElementById('Custom' + type + 'Input').value > "") var SelArr = document.getElementById('Custom' + type + 'Input').value.split(','); 
   else var SelArr = new Array();
   document.getElementById('in' + type + id).innerHTML = '';
   for(var i=0; i<SelArr.length; i++) {
      if (SelArr[i]==id) {
         SelArr.splice(i,1);}
   }
   document.getElementById(type + id).className = 'noselected';
   document.getElementById('Custom' + type + 'Input').value = SelArr.join(',');
}

function checkDeadline(obj) {
   if (obj.checked) {
      document.getElementById('dtokv').disabled = false;
      document.getElementById('dtoyear').disabled = false;
   }
   else {
      document.getElementById('dtokv').disabled = true;
      document.getElementById('dtoyear').disabled = true;
   }
}

function ClearSelectorForm() {
//var field1, field2;
   if (field = document.getElementById('CustomSelectedMetro')) {
      field.innerHTML = "";}
   if (field = document.getElementById('CustomSelectedDistr')) field.innerHTML = "";
   if (field = document.getElementById('dtokv')) field.disabled = true;
   if (field = document.getElementById('dtoyear')) field.disabled = true;
   var inputes = document.getElementById("selectorForm").getElementsByTagName("input");
   for (var i in inputes) {
      if (inputes[i].type == "text") inputes[i].value = "";
      if (inputes[i].type == "hidden") inputes[i].value = "";
      else if (inputes[i].type == "checkbox") inputes[i].checked = false; }

   var imgs = document.getElementById('border2Distr').getElementsByTagName('img') 
   for (var i=1; i<imgs.length; i++) imgs[i].className = 'noselected';
   var imgs = document.getElementById('border2Metro').getElementsByTagName('img') 
   for (var i=1; i<imgs.length; i++) imgs[i].className = 'noselected';
   }

$( function() {

if ($('#select-type').val() == 2227 || $('#select-type').val() == 3390) $('#select-business-center-tr').show();

   $('#selDistrHref').click(function(){
      $('#map2selectDistr').slideDown(600);
   });

   $('#selMetroHref').click(function(){
      $('#map2selectMetro').slideDown(600);
   });

   $('#map2selectDistr p.closeIt').click(function(){
      $('#map2selectDistr').slideUp(600);
   });

   $('#map2selectMetro p.closeIt').click(function(){
      $('#map2selectMetro').slideUp(600);
   });

   $('#select-type').change(function(){
      if ($(this).val() == 2227 || $(this).val() == 3390) $('#select-business-center-tr').show(400);
      else $('#select-business-center-tr').hide(400);
   });


   })