{assign var=custom_columns value=4}

<script>

var COLUMNS = {ldelim}
  'original': {$smarty.const.CONF_COLUMNS_PER_PAGE},
  'custom': {$custom_columns}
{rdelim};

var CELLS = null;

{literal}
function toggleProductsView(){
  var new_view = (getCookie('category_view') == 'custom')? 'original' : 'custom';
  document.cookie = (new_view == 'custom')? 'category_view=custom': 'category_view=';

  var products_table = document.getElementById('products');
  var products_table_cells = products_table.getElementsByTagName('td');

  CELLS = [];
  for(var i = 0, c = products_table_cells.length; i < c; i++){
    CELLS.push(products_table_cells[i].innerHTML);
  }

  products_table.innerHTML = '';
  var current_row = null;
  for(var i = 0, c = CELLS.length; i < c; i++){
    if(i == 0 || i % COLUMNS[new_view] == 0){
      current_row = products_table.insertRow(-1);
    }
    
    var cell = current_row.insertCell(-1);
    cell.innerHTML = CELLS[i];
  }

  if(new_view == 'original'){
    removeClass(products_table, 'custom_view');
  }else{
    addClass(products_table, 'custom_view');
  }
}

function addClass(element, class_name){
  var element_classes = element.className.split(' ');
  element_classes.push(class_name);
  element.className = element_classes.join(' ');
}

function removeClass(element, class_name){
  var element_classes = element.className.split(' ');
  for(var i = 0, c = element_classes.length; i < c; i++){
    if(element_classes[i] == class_name){
      element_classes.pop(element_classes[i]);
      break;
    }
  }
  element.className = element_classes.join(' ');
}

function getCookie(name){
  var cookies = document.cookie.split('; ');
  for(var i = 0, c = cookies.length; i < c; i++){
    var cookie_data = cookies[i].split('=');
    if (cookie_data[0] === name){
      return cookie_data[1];
    }
  }
  return null;
}

{/literal}
</script>

<style>
{literal}

.custom_view .prdbrief_brief_description{
  display: none;
}

{/literal}
</style>

<table cellpadding="6" border="0" width="95%">
  {foreach from=$products_to_show item=product_item name=product_brief}
    {if $smarty.foreach.product_brief.index is div by $smarty.const.CONF_COLUMNS_PER_PAGE}<tr>{/if}
    <td valign="top" width="{math equation="100 / x" x=$smarty.const.CONF_COLUMNS_PER_PAGE format="%d%%"}">
        {include file="product_brief.html" product_info=$product_item}
    </td>
    {if ($smarty.foreach.product_brief.index+1) is div by $smarty.const.CONF_COLUMNS_PER_PAGE}</tr>{elseif $smarty.foreach.product_brief.last}</tr>{/if}
  {/foreach}
</table>

<table cellpadding="6" border="0" width="95%" id="products"{if $smarty.cookies.category_view == 'custom'} class="custom_view"{/if}>
  {if $smarty.cookies.category_view == 'custom'}
    {assign var=columns value=$custom_columns}
  {else}
    {assign var=columns value=$smarty.const.CONF_COLUMNS_PER_PAGE}
  {/if}
  {foreach from=$products_to_show item=product_item name=product_brief}
    {if $smarty.foreach.product_brief.index is div by $columns}<tr>{/if}
    <td valign="top" width="{math equation="100 / x" x=$columns format="%d%%"}">
        {include file="product_brief.html" product_info=$product_item}
    </td>
    {if ($smarty.foreach.product_brief.index+1) is div by $columns}</tr>{elseif $smarty.foreach.product_brief.last}</tr>{/if}
  {/foreach}
</table>

<a href="javascript:void()" onclick="toggleProductsView(); return false;">{'change_layout'|translate}</a>