{assign var="page_title" value=#brands#}
{assign var="nav_id" value="10"}
{include file="header.html"}
<style type="text/css">
@import url({$theme_img_path}general.css);
@import url({$theme_img_path}effect.css);
@import url({$theme_img_path}style.css);
</style>
<script src="static/scripts/jquery.hover.js"></script>
<script src="static/scripts/jquery.scrollTo.js"></script>
<div class="wrapper">
	<div class="banner">{ads typeid=2}<span><a href="{$item.link}">{$item.src}</a></span>{/ads}</div>
	<div class="content">
		<div class="main_left_w180">
			<div class="cornerbox">
				<div class="title_bar_s1">
					
					<h2>{lang brands} {lang categories}</h2>
				</div>
				<div class="brand_category_list">
					<ul>
										<!-- {get from="type" name="brandtype" var="Items"} -->
					{foreach from=$Items name=brandtype item=brandtype}
						<li>
						   <h3><a href="index.php?do=brand&action=lists&catid={$brandtype.id}">{$brandtype.title}</a></h3>
						   <ul>
							{foreach from=$brandtype.child item=item_child}
							   <li><a href="index.php?do=brand&action=lists&catid={$item_child.id}">{$item_child.title}</a></li>
							{/foreach}
						   </ul>
						</li>
					  {/foreach}
					</ul>
				</div>
			   <div class="corner_bottom">
					<div class="corner_bottom_l"></div>
					<div class="corner_tottom_r"></div>
				</div>
			</div><!--end-->
			<div class="blank6"></div>
			<div class="cornerbox">
				<div class="title_bar_s1">
					
					<h2>{lang brands} {lang information}</h2>
				</div>
				<div class="corner_content_s6">
				   <ul>
					 {pb:news row=10 name="item"}
					 <li><a href="{$item.url}">{$item.title}</a></li>
					 {/pb:news}
				   </ul>
				</div>
			   <div class="corner_bottom">
					<div class="corner_bottom_l"></div>
					<div class="corner_tottom_r"></div>
				</div>
			</div><!--end-->
		</div>
		<div class="main_right_w770">
		   
			<div class="brand_recommend">
				<h2>{lang commend} {lang brands}</h2>
				<div class="brand_list clearfix">
				{pb:brand row=6 col=2 type="image,commend" name="item"}
					<ul>
					 <li><div><span><a href="{$item.url}"><img src="{$item.src}" alt="{$item.title}" /></a></span></div>
					<p>{$item.link}</p>
					 </li>
				  </ul>
				  {/pb:brand}
				</div>
			</div><!--end-->
			<div class="blank6"></div>
			<div class="brand_hot">
				<div class="title">
					<h2><span class="corner_t_l"></span><span class="corner_t_m title_mouse">{lang new_added} {lang brands}</span><span class="corner_t_r"></span></h2>
				</div>
				<div class="letter_content clearfix">
				<!-- {get from="type" name="brandtype" var="BrandTypes" multi=true} -->
					<!--{foreach from=$LatestBrands item=item_sort key=key_brand}-->
					  <div class="brand_letter {cycle values="bg_base,bg_yellow"}">
						   <div class="letter_title" id="BrandId{$key_brand}"><span>{$BrandTypes[$item_sort.type_id].name} {lang brands}</div>
						   <div class="brand_list clearfix">
								<ul>
									<!--{foreach from=$item_sort.brands item=item_brand_child key=key_brand_child}-->
									 <li>
									<div><span><a href="index.php?do=brand&action=detail&id={$item_brand_child.id}"><img src="attachment/{$item_brand_child.picture}.small.jpg" /></a></span></div>
									<p>{$item_brand_child.name}</p>
									</li>  
									<!-- {/foreach} -->
							  </ul>
							</div>
					  </div>
					  <!-- {/foreach} -->
				</div>                     
			</div><!--end-->
		 
		</div>
		<div class="clear"></div>
	</div>
</div>
<!-- {literal} -->
<script type="text/javascript">
$(document).ready(function() {

	function megaHoverOver(){
		$(this).find(".sub").stop().fadeTo('fast', 10000).show();
			
		//Calculate width of all ul's
		(function($) { 
			jQuery.fn.calcSubWidth = function() {
				rowWidth = 0;
				//Calculate row
				$(this).find("ul").each(function() {					
					rowWidth += $(this).width(); 
				});	
			};
		})(jQuery); 
		
		if ( $(this).find(".row").length > 0 ) { //If row exists...
			var biggestRow = 0;	
			//Calculate each row
			$(this).find(".row").each(function() {							   
				$(this).calcSubWidth();
				//Find biggest row
				if(rowWidth > biggestRow) {
					biggestRow = rowWidth;
				}
			});
			//Set width
			$(this).find(".sub").css({'width' :biggestRow});
			$(this).find(".row:last").css({'margin':'0'});
			
		} else { //If row does not exist...
			
			$(this).calcSubWidth();
			//Set Width
			$(this).find(".sub").css({'width' : rowWidth});
			
		}
	}
	
	function megaHoverOut(){ 
	  $(this).find(".sub").stop().fadeTo('fast', 1, function() {
		  $(this).hide(); 
	  });
	}


	var config = {    
		 sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)    
		 interval: 100, // number = milliseconds for onMouseOver polling interval    
		 over: megaHoverOver, // function = onMouseOver callback (REQUIRED)    
		 timeout: 0, // number = milliseconds delay before onMouseOut    
		 out: megaHoverOut // function = onMouseOut callback (REQUIRED)    
	};

	$("ul#letternav li .sub").css({'opacity':'0'});
	$("ul#letternav li").hoverIntent(config);


});
</script>
<!-- {/literal} -->
<script>
$("#SearchFrm").attr("action","index.php");
$("#topMenuProduct").addClass("search_tag_a");
</script>
{include file="footer.html"}