<script type="text/javascript">
  $(document).ready(function(){ //Когда DOM готов
       $(".block-colors a").on('click',function(){ //Нажатие на ссылку с цветами 
           var parent = $(this).closest('li'); //Обращаемся к лижайшему <li>, он будет родителем от которого искать детей
           var chk = $("input[type='checkbox']",parent); //получили нашу галку
           chk.prop('checked',!chk.prop('checked')); //Сменим состояние галки
           chk.change(); //Сгенерируем событие, что галка изменилась.
       });
  });
</script>

{addjs file="jquery.formstyler.min.js"}
{addjs file="jquery.slider.min.js"}
{addjs file="history.min.js" basepath="common"}
{addjs file="{$mod_js}jquery.filter.js" basepath="root"}
{*Подгружаем цвета*}
{modulegetvars name="\Colors\Controller\BlockValues" var="colors"}
{*Подгружаем цвета*}

<section class="filterSection">
    <div class="loadOverlay"></div>
    <a href="#" class="onemoreEmpty blackHover filterToggle rs-parent-switcher" data-cookie-id="sideFilter" data-on-text="развернуть расширенный фильтр">свернуть расширенный фильтр</a>
    <form method="GET" class="filters" action="{urlmake f=null bfilter=null p=null}">
        {if $param.show_cost_filter}
            <div class="filter typeInterval">
                <h4>{t}Цена{/t}:</h4>
                <table class="fullwidth fromToLine">
                    <tr>
                        <td>{t}от{/t}</td>
                        <td class="p50"><input type="text" class="textinp fromto" name="bfilter[cost][from]" value="{$basefilters.cost.from}" data-start-value=""></td>
                        <td>{t}до{/t}</td>
                        <td class="p50"><input type="text" class="textinp fromto" name="bfilter[cost][to]" value="{$basefilters.cost.to}" data-start-value=""></td>
                        <td>{$prop.unit}</td>
                    </tr>
                </table>
            </div>
        {/if}
        {if $param.show_brand_filter && count($brands)>1}
            <div class="filter typeMultiselect">
                <h4>{t}Производитель{/t}:</h4>
                <ul>
                    {foreach $brands as $brand}
                    <li>
                        <input type="checkbox" {if is_array($basefilters.brand) && in_array($brand.id, $basefilters.brand)}checked{/if} name="bfilter[brand][]" value="{$brand.id}" class="cb" id="cb_{$brand.id}_{$smarty.foreach.i.iteration}">
                        <label for="cb_{$brand.id}_{$smarty.foreach.i.iteration}">{$brand.title}</label>
                    </li>
                    {/foreach}
                </ul>
            </div>
        {/if}
        {foreach from=$prop_list item=item}
        {foreach from=$item.properties item=prop}

            {if $prop.title == 'Цвет'}
                    <div class="block block-colors" data-filter-id="{$prop.id}">
                        <div class="separator-text">ЦВЕТ</div>
                        <div class="separator">&nbsp;</div>
                        <ul>
                            {foreach from=$prop->getAllowedValues() key=key item=value}
                                <li {if isset($filters[$prop.id]) && in_array($value, $filters[$prop.id])}class="checked"{/if} data-filter-value="{$value}">
                                    <div class="selected"></div>                            
                                    <a href="?f[{$prop.id}][]={$value}" class="filter color{if $value=='Разноцвет'} multicolor{/if}" style="background-color:{$colors.colors[$value].color}" title="{$value}"></a>
                                    <input type="checkbox" {if is_array($filters[$prop.id]) && in_array($value, $filters[$prop.id])}checked{/if} name="f[{$prop.id}][]" value="{$value}" style="display:none;"/>
                                </li>
                            {/foreach}
                        </ul>
                    </div>
                {else}
                    <div class="block block-select" data-filter-id="{$prop.id}">
                        <div class="separator-text">{$prop.title}</div>
                        <div class="separator">&nbsp;</div>
                        <ul>
                            {assign var=prop_values value=$prop->getAllowedValues()}
                            {if $prop.title=='Скидка %' && $prop_values}
                                {php}unset($prop_values[0]);{/php}
                            {/if}
                            {foreach from=$prop_values key=key item=value name=i}
                                {if !($prop.title=='Скидка %' && $value==0)}
                                    <li {if isset($filters[$prop.id]) && in_array($value, $filters[$prop.id])}class="checked"{/if} data-filter-value="{$value}">
                                        <a class="filter checkbox" href="?f[{$prop.id}][]={$value}">{$value}</a>
                                        <input type="checkbox" {if is_array($filters[$prop.id]) && in_array($value, $filters[$prop.id])}checked{/if} name="f[{$prop.id}][]" value="{$value}" style="display:none;"/>
                                    </li>
                                {/if}
                            {/foreach}
                        </ul>
                    </div>            
                {/if}

           
        {/foreach}
        {/foreach}
        <input type="submit" value="Применить" class="onemore submitFilter">
        <a href="{urlmake f=null p=null bfilter=null}" class="onemore cleanFilter{if empty($filters) && empty($basefilters)} hidden{/if}">очистить фильтр</a>
        
        <script type="text/javascript">
            $(function() {
                $('.filter .cb, .filter .yesno').styler();
                $('.typeInterval .pluginInput').each(function() {
                    var $this = $(this);
                    
                    var fromTo = $this.siblings('.fromToLine').hide();
                    
                    $this.jslider( $.extend( $(this).data('slider'), { callback: function(value) {
                        var values = value.split(';');
                        $('input[name$="[from]"]', fromTo).val(values[0]);
                        $('input[name$="[to]"]', fromTo).val(values[1]);
                        $this.trigger('change');
                    }})
                    );
                    
                    $('input[name$="[from]"], input[name$="[to]"]', fromTo).change(function() {
                        var from = $('input[name$="[from]"]', fromTo).val();
                        var to = $('input[name$="[to]"]', fromTo).val();
                        $this.jslider('value', from, to);
                    });

                });
            });
        </script>  

        <script>
$(function() {
    
    $(function() {
        $('.side-left').productFilter({
            targetList : '.updatable' //Div в который будет обновлён
        });
    });
    
    $(window).bind('new-content', function() {
        $('.side-left .overlay').hide();
    });    
    
    $('.filter').on('click',function() {
        var wrap = $(this).closest('li');
        $(wrap).toggleClass('checked');
        if ($(wrap).hasClass('checked')){
           $('input',wrap).prop('checked',true).change();  
        }else{
           $('input',wrap).prop('checked',false).change();  
        }
        
        return false;
    });
});
</script>      
    </form>
</section>

{if $prop.title == 'Цвет'}

{*Подгружаем цвета*}
{modulegetvars name="\Colors\Controller\BlockValues" var="colors"}
{*Подгружаем цвета*}

<pre>
{var_dump($colors)}
</pre>