{if $system_configuration.item_image_server_uri}
	{assign var=SHOP_DIR value="{$system_configuration.item_image_server_uri}"}		
{/if}

<div class="content_box_manufacturer_slider">
	<div class="image_slider_title"><span class="text">Unsere Marken im &Uuml;berblick</span></div>
	<div class="image_slider_content_outer_wrapper">
		<div class="image_slider_content_inner_wrapper">
			{foreach name=ManufacturerList item=manufacturer from=$manufacturers}
				<div class="slider_item_box">
					<a class="slider_item_box_info" href="{$serverProtocol}://{$servername}/kaufen/{$manufacturer->short_uri}/">{$manufacturer->name|truncate:27:"...":true}</a>

					<div class="slider_item_box_image">
						<a class="slider_image" href="{$serverProtocol}://{$servername}/kaufen/{$manufacturer->short_uri}/" style="background-image:url({$SHOP_DIR}images/manufacturers/{$manufacturer->logo});"></a>
					</div>

					<div class="slider_item_box_price">
						<div class="slider_item_box_info_bull"></div>
						
					</div>
				</div>
			{/foreach}
		</div>
	</div>

	<a class="slider_image_slider_trigger_left">&lt;&lt;</a>
	<a class="slider_image_slider_trigger_right">&gt;&gt;</a>
	<div style="clear:both;"></div>
</div>
<script type="text/javascript">
	var ManufacturersMax = {$manufacturers|@count};
	
	$(document).ready(function() {
	// Slider
	var ItemWidth = $('.content_box_manufacturer_slider .slider_item_box').outerWidth(true);
	var ItemMargin = parseInt($('.content_box_manufacturer_slider .slider_item_box').css('marginLeft').replace('px',''));
	
	var HolderW = $('.content_box_manufacturer_slider .image_slider_content_outer_wrapper').width();

	var ScrollMaxLeft = -(((ItemWidth + ItemMargin) * ManufacturersMax) - HolderW);

	$('.content_box_manufacturer_slider .image_slider_content_inner_wrapper').css({
		'width': ((ItemWidth + ItemMargin) * ManufacturersMax) + 'px'
	});

	var ScrollPosition = 0;

	$('.content_box_manufacturer_slider .slider_image_slider_trigger_right').click(function() {
		++ScrollPosition;
		++ScrollPosition;
		++ScrollPosition;

		var scrollTo = -((ItemWidth + ItemMargin) * ScrollPosition);
		if (scrollTo < ScrollMaxLeft) {
			scrollTo = ScrollMaxLeft - ItemMargin;

			--ScrollPosition;
			--ScrollPosition;
			--ScrollPosition;
		}

		$('.content_box_manufacturer_slider .image_slider_content_inner_wrapper').animate({
			'left': scrollTo + 'px'
		});
	}).unbind('mouseenter').bind('mouseenter', function() {
		$(this).css({
			'opacity': '0.8'
		});
	}).unbind('mouseleave').bind('mouseleave', function() {
		$(this).css({
			'opacity': '1.0'
		});
	});

	$('.content_box_manufacturer_slider .slider_image_slider_trigger_left').click(function() {
		--ScrollPosition;
		--ScrollPosition;
		--ScrollPosition;

		var scrollTo = -((ItemWidth + ItemMargin) * ScrollPosition);
		if (scrollTo > 0) {
			scrollTo = 0;

			++ScrollPosition;
			++ScrollPosition;
			++ScrollPosition;
		}

		$('.content_box_manufacturer_slider .image_slider_content_inner_wrapper').animate({
			'left': scrollTo + 'px'
		});
	}).unbind('mouseenter').bind('mouseenter', function() {
		$(this).css({
			'opacity': '0.8'
		});
	}).unbind('mouseleave').bind('mouseleave', function() {
		$(this).css({
			'opacity': '1.0'
		});
	});

	
	
});

</script>


{*
<div class="content_box_manufacturers">
	<div class="header"><h3>Unsere Hersteller in der &Uuml;bersicht</h3></div>
	<div class="content">
		{foreach item=manufacturer from=$manufacturers}
			<a style="float:left;width:25%;color:#000000;" href="/Kaufen/{$manufacturer->short_uri}/">{$manufacturer->name}</a>
		{/foreach}
		<br style="clear:left;" />
	</div>
</div>*}