<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
    $now = date("Y-m-d H:m:s");
    $use_zoom = themeOptions('use_zoom');
    $use_carousel = themeOptions('use_carousel');
    $thumbs_count = count($this->getGalleryImages());
    $_i_thumbs = 0;
?>
<?php

    $_mainWidth = 350;
    $_mainHeight = 350;
    $_smWidth = 68;
    $_smHeight = 68;
    $_carWidth = 344;
    $_zoomLeft = $_mainWidth + 17;
    $_zoomWidth = 350;

?>
<style>
    .product-view .product-img-box .more-views { width:<?php echo $_carWidth ?>px; }
    #zoom-window { left: <?php echo $_zoomLeft ?>px; width: <?php echo $_zoomWidth ?>px; }
</style>
<div class="zoom-container layout_default">

    <?php include('labels.phtml') ?>
    <div class="main-image" >
        <a id="zoom" class="<?php if(!$use_zoom): ?> lightbox<?php endif;?> main-thumbnail" href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>">
            <?php
                $_img = '<img class="zoom-image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize($_mainWidth,$_mainHeight).'" width="'.$_mainWidth.'" height="'.$_mainHeight.'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
                echo $_helper->productAttribute($_product, $_img, 'image');
            ?>
        </a>
        <?php if($use_zoom): ?>
        <div class="lightbox-btn">
            <a id="zoom" class="lightbox" href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>">
                <?php echo $this->__('Enlarge') ?>
            </a>
        </div>
        <?php endif;?>
    </div>

    <div class="more-views "<?php if($use_carousel && $thumbs_count > 4): ?>style="height:80px;"<?php endif; ?>">
        <div class="zoom-gallery slider">
        <?php if($thumbs_count == 0): ?>
            <div class="slide last">
                <a class="zoom-thumbnail<?php if(!$use_zoom): ?> lightbox<?php endif;?>" href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>" data-easyzoom-source="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize($_mainWidth,$_mainHeight) ?>">
                    <?php
                        $_img = '<img class="zoom-image fade-image" src="'.$this->helper('catalog/image')->init($_product, 'thumbnail')->resize($_smWidth,$_smHeight).'" width="'.$_smWidth.'" height="'.$_smHeight.'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
                        echo $_helper->productAttribute($_product, $_img, 'image');
                    ?>
                </a>
            </div>
        <?php endif; ?>
        <?php if ($thumbs_count > 0): ?>
            <?php foreach ($this->getGalleryImages() as $_image): $_i_thumbs++; ?>
                <div class="slide <?php if($thumbs_count == $_i_thumbs) echo 'last'; ?>">
                    <a class="zoom-thumbnail<?php if(!$use_zoom): ?> lightbox<?php endif;?>"  href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" data-easyzoom-source="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($_mainWidth,$_mainHeight); ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img class="fade-image" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($_smWidth,$_smHeight); ?>" width="<?php echo $_smWidth ?>" height="<?php echo $_smHeight ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
        </div>
    </div>
    <?php if($use_carousel && $thumbs_count > 4): ?>
        <div class="more-views-arrow prev">&nbsp;</div>
        <div class="more-views-arrow next">&nbsp;</div>
    <?php endif;?>
</div>

	<script type="text/javascript">

    <?php if($use_zoom): ?>
        // Start easyZoom
    	jQuery('#zoom')
    		.easyZoom({
    			parent: 'div.zoom-container',
    			preload: '',
                lightboxBtn: '.lightbox-btn .lightbox'
    		})
    		.data('easyZoom')
    		.gallery('a.zoom-thumbnail');
    <?php endif;?>

    <?php if($use_carousel && $thumbs_count > 4): ?>
        jQuery('.more-views').iosSlider({
            desktopClickDrag: true,
            snapToChildren: true,
            infiniteSlider: false,
            navNextSelector: '.more-views-arrow.next',
            navPrevSelector: '.more-views-arrow.prev'
        });
    <?php endif;?>

     // Start lightbox
    jQuery('a.lightbox').lightBox({
        imageLoading    : '<?php echo $this->getSkinUrl('images/lightbox-ico-loading.gif') ?>',
        imageBtnClose   : '<?php echo $this->getSkinUrl('images/lightbox-btn-close.gif') ?>',
        imageBtnNext    : '<?php echo $this->getSkinUrl('images/lightbox-btn-next.gif') ?>',
        imageBtnPrev    : '<?php echo $this->getSkinUrl('images/lightbox-btn-prev.gif') ?>',
        imageBlank      : '<?php echo $this->getSkinUrl('images/lightbox-blank.gif') ?>',
        fixedNavigation : true
    });
	</script>