<?php
$helper = Mage::helper('cms');
$processor = $helper->getBlockTemplateProcessor();
$id = "emtabs_".md5(uniqid(rand()));
if ($this->getData('tabs_unique_id'))
    $id = $this->getData('tabs_unique_id');
?>
<div class="em-tabs-widget tabs-widget <?php echo $this->getCustomClass() ?>">
    <?php if($this->getTitle()): ?>
        <div class="widget-title em-widget-title">
    		<h3><span><?php echo $this->getTitle()?></span></h3>
    	</div>
    <?php endif;?>
    <?php if($processor->filter($this->getShortDescription())):?><div class="block-description"><?php echo $processor->filter($this->getShortDescription())?></div><?php endif;?>
    <div class="em-tabs emtabs" id="<?php echo $id ?>">
        <ul class="em-tabs-control tabs-control">
            <?php for($i = 1;$i <= 10;$i++):?>
                <?php if($this->getTitleTab($i)):?>
                    <li>
                        <a href="#tab_<?php echo $id ?>_<?php echo $i;?>" data-hover="<?php echo $this->getTitleTab($i)?>"> <span class="icon tab_<?php echo $id ?>_<?php echo $i;?>"></span><?php echo $this->getTitleTab($i)?></a>
                    </li>
                <?php endif;?>
            <?php endfor;?>
        </ul>
        <div class="em-tabs-content tab-content">
            <?php for($i = 1;$i <= 10;$i++):?>
                <?php if($this->getTitleTab($i)):?>
                    <div id="tab_<?php echo $id ?>_<?php echo $i;?>" class="<?php if($i==1) echo 'r-tabs-state-active ' ?>tab-pane tab-item content_tab_<?php echo $id ?>_<?php echo $i;?>">
                        <?php
                        //Show Static Block
                        echo $processor->filter($this->getStaticBlock($i));
                        //Show Widget Instance
                        echo $processor->filter($this->getWidgetInstance($i));
                        ?>
                    </div>
                <?php endif;?>
            <?php endfor;?>
        </div>
    </div>
</div>
<script type="text/javascript">
    jQuery(window).load(function () {
        jQuery('#<?php echo $id ?>').responsiveTabs({                                    
            animation:'slide',
            startCollapsed:false,       
            activateState: function(e,state){                  
                if(state.newState == 'tabs' && state.oldState=="accordion")
                {                     
                    var ulTab = jQuery(this).find("ul.r-tabs-nav");
                    var activeTab = jQuery(this).find("div.r-tabs-state-active");                    
                    if(activeTab.length==0)
                    {
                        jQuery(ulTab).find("li:first-child a").click();
                    }
                }
            },     
        });
    });
	jQuery(window).bind('tabs-activate',function(){
        var timeout = setTimeout(function() { jQuery("#<?php echo $id ?> img.em-img-lazy").trigger("sporty") }, 1000);
    });
</script>