<?php
                // some helpers
                $_helper = $this->helper('catalog/output');
                $storeId = Mage::app()->getStore()->getId();
                $catalog = $this->getLayout()->createBlock('catalog/product_list')->setStoreId($storeId);
                $productCount = $this->getData('num_products');

$visibility = array(
                      Mage_Catalog_Model_Product_Visibility::VISIBILITY_BOTH,
                      Mage_Catalog_Model_Product_Visibility::VISIBILITY_IN_CATALOG
                  );
$collection = Mage::getResourceModel('reports/product_collection')
                        ->addAttributeToSelect('*')    
                        ->setStoreId($storeId)
                        ->addStoreFilter($storeId)    
                        ->addAttributeToFilter('visibility', $visibility)             
                        ->addOrderedQty()
                        ->setOrder('ordered_qty', 'desc')
                        ->setPageSize($productCount);
Mage::getSingleton('cataloginventory/stock')->addInStockFilterToCollection($collection);


/* To display product by category id */
  if($categoryId=$this->getData('category_id')){
        $category = Mage::getModel('catalog/category')->load($categoryId);
        $collection->addCategoryFilter($category);
      }
                // if no products are currently sell, display some text
                 if (!$collection->count()) :
        ?>
        <p class="note-msg"><?php echo $this->__('There are no products sell at the moment.') ?></p>
        <?php else : ?>

<div class="best-sales-slider">
    <div class="new_title center">
        <h2><span><?php echo $this->__('Best Sales') ?></span></h2>
    </div> <!--new_title center-->
<a href="#" class="jcarousel-prev-horizontal1" id="products_slider_prev1"></a>
<a href="#" class="jcarousel-next-horizontal1" id="products_slider_next1"></a>
<div class="jcarousel-skin-tango5">
    <div style="position: relative; display: block;" class="jcarousel-container jcarousel-container-horizontal">
      <div style="overflow: hidden; position: relative;" class="jcarousel-clip jcarousel-clip-horizontal">
      <ul id="products_slider" class="products-grid jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 2436px;">
        <?php
                $_collectionSize = $collection->count();
                $_columnCount = 4;
                $i = 0;                
                foreach ($collection as $_product) :
                        $_product = Mage::getModel('catalog/product')->setStoreId($storeId)->load($_product->getId());

        ?>
        <?php if ($i++%$_columnCount==0): ?>            
        <?php endif ?>
<li class="item jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal <?php if(($i-1)%$_columnCount==0): ?>first1<?php elseif($i%$_columnCount==0): ?> last1<?php elseif($i%$_columnCount!==0): ?> odd1<?php endif; ?>">
   <div class="item-inner">
     <div class="product-block">
        <div class="product-image">
          <a href="<?php echo $_product->getProductUrl() ?>">
            <figure class="product-display">
          <?php echo $this->helper('amazesettings')->getLabel($_product);  ?>
          <img class="lazyOwl product-mainpic" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(268,325) ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
          <img class="product-secondpic" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(268,325) ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
            </figure>
          </a>
        </div> <!--product-image-->
        <div class="product-meta">
           <div class="product-action">
              <?php if($_product->isSaleable()): ?>
                <a href="<?php echo $this->getAddToCartUrl($_product) ?>" class="addcart"> <i class="icon-shopping-cart">&nbsp;</i> <?php echo $this->__('Add to Cart') ?></a>
              <?php else: ?>
                <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
              <?php endif; ?>
              <a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="wishlist" title="<?php echo $this->__('Add to Wishlist');?>"><i class="icon-heart">&nbsp;</i></a>
              <?php if(Mage::app()->getStore()->getConfig('amazesettings/amazesettings_quickview/enable')==1){?>
                  <a data-fancybox-type="ajax" onclick="callQuickView('<?php echo Mage::getUrl('amazesettings/index/view/id/'.$_product->getId());?>');" title="<?php echo $this->__('Quick View') ?>" class="quickview"><i class="icon-zoom">&nbsp;</i></a>                    
              <?php }  ?>  
           </div> <!--product-action-->
        </div> <!--product-meta-->
     </div> <!--product-block-->

     <div class="item-info">
       <div class="info-inner">
          <div class="item-title">
            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
                  <?php $prod_name = $this->htmlEscape($_product->getName()) ; 
                  if(strlen($prod_name) > 30) {echo substr($prod_name,0,30)."...";}else {echo $prod_name;}?>
            </a>
          </div> <!--item-title-->
          <div class="item-content">
            <div class="item-price">
              <?php echo $this->getPriceHtml($_product, true) ?>
            </div> <!--item-price-->
                    <?php
                        $summaryData = Mage::getModel('review/review_summary')
                                ->setStoreId($storeId)
                                ->load($_product->getId());
                        if($summaryData->getRatingSummary()) { ?>
                          <div class="rating">
                            <div class="ratings">
                                <div class="rating-box">
                                        <div class="rating" style="width: <?php echo $summaryData->getRatingSummary().'%'; ?>"></div>
                                </div> <!--rating-box-->
                            </div> <!--ratings-->
                          </div> <!--rating-->
                    <?php } else { ?>  
                            <div class="rating"><div class="ratings"><div class="rating-box"><div style="width:0%" class="rating"></div></div></div></div>
                    <?php } ?>
          </div> <!--item-content-->
       </div> <!--info-inner-->
     </div> <!--item-info-->
   </div> <!--item-inner-->
</li> <!--item jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal-->      
            <?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>            
            <?php endif ?>
            
                <?php endforeach ?>
 
        </ul> <!--products-grid jcarousel-list jcarousel-list-horizontal-->
      </div>  <!--jcarousel-clip jcarousel-clip-horizontal-->
    </div> <!--jcarousel-container jcarousel-container-horizontal-->
  </div> <!--jcarousel-skin-tango5-->
</div> <!--best-sales-slider-->

<script type="text/javascript">
jQuery(document).ready(function($) {

        function mycarousel_initCallback(carousel) {
            $('#products_slider_next1').bind('click', function() {
                carousel.next();
                return false;
            });
            $('#products_slider_prev1').bind('click', function() {
                carousel.prev();
                return false;
            });
        };

    $('#products_slider').jcarousel({
            scroll: 1,
        initCallback: mycarousel_initCallback,
            buttonNextHTML: null,
            buttonPrevHTML: null
    });
});
</script>

        <?php endif ?>  <!--Endif !$collection->count() -->

<div id="mgkquickview">
<div id="magikloading" style="display:none;text-align:center;margin-top:400px;"><img src="<?php echo $this->getSkinUrl('images/mgkloading.gif');?>" alt="loading">
</div></div>
<script type="text/javascript">
function callQuickView(qurl) { 
    jQuery('#mgkquickview').show();
    jQuery('#magikloading').show();
    jQuery.get(qurl, function(data) {
      jQuery.fancybox(data);
      jQuery('#magikloading').hide();
jQuery('#mgkquickview').hide();
    });
 }
 
</script>
