<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<!-- {if $best_goods} -->
<div id="goods_best" class="module goods_list">
  <div class="caption"><span style="color:#1354bf;"><img alt="{$lang.best_goods}" src="images/recommended_caption.jpg" /></span></div>
    <div class="top"><span></span></div>
    <div class="content">      
      <div class="cont">
        <div class="best_l" onmouseover="moveLeft()" onmousedown="clickLeft()" onmouseup="moveLeft()" onmouseout="scrollStop()"><img src="images/best_l.jpg" /></div>
        <div class="best_r" onmouseover="moveRight()" onmousedown="clickRight()" onmouseup="moveRight()" onmouseout="scrollStop()"><img src="images/best_r.jpg" /></div>
        <div style="width:676px; float:left; overflow:hidden;">
          <div id="demo">
            <div id="demo1" style="float:left;">
              <ul class="goods_grid2">
                <!--{foreach from=$best_goods item=goods}-->
                <li>        
                  <p class="img"><a href="{$goods.url}"><img src="{$goods.thumb}" alt="{$goods.name|escape:html}"/></a></p>
                  <p class="name"><a href="{$goods.url}" title="{$goods.name|escape:html}">{$goods.short_style_name}</a></p>
                  <p class="price">
                    <!-- {if $goods.promote_price neq ""} -->
                    {$goods.promote_price}
                    <!-- {else}-->
                    {$goods.shop_price}
                    <!--{/if}-->
                  </p>
                </li>
                <!--{/foreach}-->
              </ul>
            </div>
            <div id="demo2" style="display:inline; overflow:visible;"></div>
          </div>
        </div>        
      </div>      	
    </div>
    <div class="bottom"><span></span></div>
</div>
<script type="text/javascript">
      function $(id){  
        return (document.getElementById) ? document.getElementById(id): document.all[id]
      }
      
      var boxwidth=120;//¸úÍ¼Æ¬µÄÊµ¼Ê³ß´çÏà·û
      
      var box=$("demo");
      var obox=$("demo1");
      var dulbox=$("demo2");
      obox.style.width=obox.getElementsByTagName("li").length*boxwidth+'px';
      dulbox.style.width=obox.getElementsByTagName("li").length*boxwidth+'px';
      box.style.width=obox.getElementsByTagName("li").length*boxwidth*3+'px';
      var canroll = false;
      if (obox.getElementsByTagName("li").length >= 4) {
        canroll = true;
        dulbox.innerHTML=obox.innerHTML;
      }
      var step=5;temp=1;speed=50;
      var awidth=obox.offsetWidth;
      var mData=0;
      var isStop = 1;
      var dir = 1;
      
      function s(){
        if (!canroll) return;
        if (dir) {
      if((awidth+mData)>=0)
      {
      mData=mData-step;
      }
      else
      {
      mData=-step;
      }
      } else {
        if(mData>=0)
        {
        mData=-awidth;
        }
        else
        {
        mData+=step;
        }
      }
      
      obox.style.marginLeft=mData+"px";
      
      if (isStop) return;
      
      setTimeout(s,speed)
      }
      
      
      function moveLeft() {
          var wasStop = isStop;
          dir = 1;
          speed = 50;
          isStop=0;
          if (wasStop) {
            setTimeout(s,speed);
          }
      }
      
      function moveRight() {
          var wasStop = isStop;
          dir = 0;
          speed = 50;
          isStop=0;
          if (wasStop) {
            setTimeout(s,speed);
          }
      }
      
      function scrollStop() {
        isStop=1;
      }
      
      function clickLeft() {
          var wasStop = isStop;
          dir = 1;
          speed = 25;
          isStop=0;
          if (wasStop) {
            setTimeout(s,speed);
          }
      }
      
      function clickRight() {
          var wasStop = isStop;
          dir = 0;
          speed = 25;
          isStop=0;
          if (wasStop) {
            setTimeout(s,speed);
          }
      }
      </script>
<!-- {/if} -->			