<!-- brands slider -->

{if ($pageInfo.Key == 'home' && $types.0 == 'listings' && $categories[$types.0]) || ($pageInfo.Key == 'lt_listings' && $categories)}

{if $pageInfo.Key == 'home' && $types.0 == 'listings' && $categories[$types.0]}
	{assign var='brands' value=$categories[$types.0]}
{elseif $pageInfo.Key == 'lt_listings' && $categories}
	{assign var='brands' value=$categories}
{/if}

<table id="brands-slider">
<tr>
	<td class="left"><div><img src="{$rlTplBase}img/blank.gif" alt="" /></div></td>
	<td class="center">
		<div>
			<ul>
			{foreach from=$brands item='brand'}
				{assign var='cat_lower' value=$brand.name|lower}
				{assign var='logo_path' value=$smarty.const.RL_ROOT|cat:$samrty.const.RL_DS|cat:'templates'|cat:$smarty.const.RL_DS|cat:$config.template|cat:$smarty.const.RL_DS|cat:'img'|cat:$smarty.const.RL_DS|cat:'brands'|cat:$smarty.const.RL_DS|cat:$cat_lower|replace:" ":"-"|cat:'.png'}
				{if $logo_path|is_readable}
					<li>
						<a title="{$brand.name}" href="{$rlBase}{if $config.mod_rewrite}{$pages[$listing_type.Page_key]}/{$brand.Path}{if $listing_type.Cat_postfix}.html{else}/{/if}{else}?page={$pages[$listing_type.Page_key]}&amp;category={$brand.ID}{/if}">
							<span style="background-image: url('{$rlTplBase}img/brands/{$brand.name|lower|replace:' ':'-'}.png')"></span>
						</a>
					</li>
				{/if}
			{/foreach}
			</ul>
		</div>
	</td>
	<td class="right"><div><img src="{$rlTplBase}img/blank.gif" alt="" /></div></td>
</tr>
</table>

<script type="text/javascript">
{literal}

var brandSlider = function(){
	this.config = new Array();
	this.ul;
	this.pos = 0;
	this.perSlide = 4;
	
	var self = this;
	
	this.init = function(){
		this.ul = $('#brands-slider td.center > div > ul');
		this.config['ul_width'] = 0;
		this.config['div_width'] = $('#brands-slider td.center > div').width();
		this.config['li_width'] = $(this.ul).find('> li:first').outerWidth();
		this.config['li_count'] = $(this.ul).find('li').length;
		
		$(this.ul).find('> li').each(function(){
			self.config['ul_width'] += parseInt($(this).outerWidth());
		});
		$(this.ul).width(self.config['ul_width']);
		
		this.config['visible'] = Math.floor(this.config['div_width'] / this.config['li_width']);
		
		this.listeners();
	}
	
	this.listeners = function(){
		$('#brands-slider td.left').click(function(){
			self.prev();
		});
		$('#brands-slider td.right').click(function(){
			self.next();
		});
	}
	
	this.prev = function(){
		if ( this.pos > 0 )
		{
			this.pos -= this.perSlide;
			this.slide();
		}
	}
	
	this.next = function(){
		if ( this.pos < (this.config['li_count'] - this.config['visible']))
		{
			this.pos += this.perSlide;
			this.slide();
		}
	}
	
	this.slide = function(){
		var px = this.pos * this.config['li_width'] * -1;
		if ( rlLangDir == 'ltr' )
		{
			$(this.ul).animate({
				left: px
			});
		}
		else
		{
			$(this.ul).animate({
				right: px
			});
		}
	}
}

$(document).ready(function(){
	var bSlider = new brandSlider();
	bSlider.init();
});

{/literal}
</script>

{/if}

<!-- brands slider end -->