
<?php if (Mage::getStoreConfig('roltasettings/roltasettings_products/upsell_product')): ?>

<?php if(count($this->getItemCollection()->getItems())): ?>

<div class="home-slider">
  <!-- BEGIN CATEGORY PRODUCTS -->
  <div class="category-products">
  <div class="new-arrow1">
     <h2><?php echo $this->__('Up Sell Products') ?></h2> 
  </div> <!--new-arrow1--> 
    <div id="secondary-slider" class="flexslider carousel">  
      <div class="flex-viewport" style="overflow: hidden; position: relative;">
        <div class="slides" style="width: 2400%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px); margin-left: 0px;">

    <?php // $this->setColumnCount(5); // uncomment this line if you want to have another number of columns. also can be changed in layout ?>
    <?php $this->resetItemsIterator() ?>
    <?php for($_i=0;$_i<$this->getRowCount();$_i++): ?>
        <?php for($_j=0;$_j<$this->getColumnCount();$_j++): ?>
            <?php if($_link=$this->getIterableItem()): ?>
        <ul id="upsell-product-table" class="home-grid first odd" style="margin-right: 14px; width: 295px; float: left; display: block; padding: 0px;">
            <li class="item">
              <a href="<?php echo $_link->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_link->getName()) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_link, 'thumbnail') ?>" alt="<?php echo $this->htmlEscape($_link->getName()) ?>" /></a>
             <!-- BEGIN PRODUCTGRID AREA -->
              <div class="productgrid-area">
                 <h2 class="product-name">
                    <a href="<?php echo $_link->getProductUrl() ?>"><?php //echo $this->htmlEscape($_link->getName()) ?>
                        <?php $prod_name = $this->htmlEscape($_link->getName()); if(strlen($prod_name) > 30) { echo substr($prod_name,0,30)."..."; } else { echo $prod_name; } ?>
                    </a>
                 </h2>
                 <?php echo $this->getReviewsSummaryHtml($_link) ?>
                 <?php echo $this->getPriceHtml($_link, true, '-related') ?>
                 <!-- BEGIN ACTIONS -->
                 <div class="actions">
                   <?php if($_link->isSaleable()): ?>
                     <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_link) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>                  
                   <?php else: ?>
                     <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                   <?php endif; ?>
                   <ul class="add-to-links">
                      <?php if ($this->helper('wishlist')->isAllow()) : ?>
                        <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_link) ?>" class="link-wishlist"></a></li>
                      <?php endif; ?>
                      <?php if($_compareUrl=$this->getAddToCompareUrl($_link)): ?>
                        <li><span class="separator">|</span><a href="<?php echo $_compareUrl ?>" class="link-compare"></a></li>
                      <?php endif; ?>
                   </ul> <!--add-to-links-->
                 </div> <!--actions-->
              </div> <!--productgrid-area-->                            
            </li>
        </ul>
            <?php else: ?>
            <?php /* <li class="empty">&nbsp;</li> */ ?>
            <?php endif; ?>
        <?php endfor; ?>

    <?php endfor; ?>

    <script type="text/javascript">decorateTable('upsell-product-table')</script>

        </div> <!--slides-->
      </div> <!--flex-viewport-->
    </div> <!--flexslider carousel-->

  </div> <!--category-products-->
</div> <!--home-slider-->

<script type="text/javascript">

j$('#secondary-slider').flexslider({
         selector: ".slides > ul",
          animation: "slide",
          animationLoop: false,
          itemWidth:295,
          itemMargin:18,
          minItems: 1,
          maxItems: 3,
          move:1,
          controlNav: false,
          slideshowSpeed: 7000,          
          animationSpeed: 1000,
          slideshow: false,
          start: function(slider){
            j$('div').removeClass('loading');
          }
       });
</script>

<?php endif ?>

<?php endif; ?> 