<?php
    $_zoom_w = Mage::getStoreConfig('prozoom/prozoom_config/zoom_w');
    $_zoom_h = Mage::getStoreConfig('prozoom/prozoom_config/zoom_h');
	$_border_w = Mage::getStoreConfig('prozoom/prozoom_config/zoom_border_w');
	$_border_color = Mage::getStoreConfig('prozoom/prozoom_config/zoom_border_color');
    $_lightbox_w = Mage::getStoreConfig('prozoom/prozoom_config/lightbox_w');   
    $_lightbox_h = Mage::getStoreConfig('prozoom/prozoom_config/lightbox_h');
    $_thumbnail_qty = Mage::getStoreConfig('prozoom/prozoom_config/thumbnail_qty');   
    $_thumbnail_w = Mage::getStoreConfig('prozoom/prozoom_config/thumbnail_w');
    $_thumbnail_h = Mage::getStoreConfig('prozoom/prozoom_config/thumbnail_h');
	$_scroll_qty = Mage::getStoreConfig('prozoom/prozoom_config/scroll_qty');
	$_auto = Mage::getStoreConfig('prozoom/prozoom_config/auto_scroll');
?>
<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
?>
<p class="product-image">
    <?php
        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize().'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
    ?>
	<!-- images for lightbox -->
	<a href="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize($_lightbox_w, $_lightbox_h); ?>" class = "ma-a-lighbox" rel="lightbox[rotation]"></a>
	<!--++++++++++++-->
	<a href="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(1200,1200); ?>" class = "cloud-zoom" id="ma-zoom1" style="position: relative; display: block;" rel="adjustX:10, adjustY:-2, zoomWidth:<?php echo $_zoom_w; ?>, zoomHeight:<?php echo $_zoom_h; ?>">
		<?php echo $_helper->productAttribute($_product, $_img, 'image'); ?>
	</a>
</p>
<?php if ( count($this->getGalleryImages()) > 0 ): ?>
	<?php if( (!Mage::getStoreConfig('prozoom/prozoom_config/enabled_thumbnail')) || ( count($this->getGalleryImages()) < $_thumbnail_qty )|| ( count($this->getGalleryImages()) == $_thumbnail_qty )) { ?>
		<div class="more-views ma-more-img">
			<h2><?php echo $this->__('More Views') ?></h2>
			<ul>
			<?php foreach ($this->getGalleryImages() as $_image): ?>
				<li>
					<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(1200,1200); ?>" class="cloud-zoom-gallery" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" name="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($_lightbox_w, $_lightbox_h); ?>"
										rel="useZoom: 'ma-zoom1', smallImage: '<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(); ?>'">
					<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($_thumbnail_w, $_thumbnail_h); ?>" width="<?php echo $_thumbnail_w ?>" height="<?php echo $_thumbnail_h ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
				</li>
			<?php endforeach; ?>
			</ul>
			<!-- thumbnail for lighbox-->
				<ul class="mt-thumb-light" style="display:none;">
					<?php foreach ($this->getGalleryImages() as $_image): ?>
						<li>
							<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($_lightbox_w, $_lightbox_h); ?>" rel="lightbox[rotation]" title="<?php echo $_product->getName();?>"></a>
						</li>
					<?php endforeach; ?>                                                                
				</ul>
			<!--##########-->
			<script type="text/javascript">
				//<![CDATA[
					$jq(document).ready(function(){
						$jq('head').append('<style type="text/css"> .cloud-zoom-big { border:<?php echo $_border_w ?>px solid <?php echo $_border_color ?> }</style>');
					});
				//]]>
			</script>
		</div>
	<?php } else { ?>
		<?php if( Mage::getStoreConfig('prozoom/prozoom_config/scroll_style')=='horizontal' ) { ?>
			<div class="more-views ma-thumbnail-container">
				<h2><?php echo $this->__('More Views') ?></h2>
				<div class="flexslider carousel">
					<ul class="slides">
					<?php foreach ($this->getGalleryImages() as $_image): ?>
						<li class="thumbnail-item">
							<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(1200,1200); ?>" class="cloud-zoom-gallery" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" name="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($_lightbox_w, $_lightbox_h); ?>"
												rel="useZoom: 'ma-zoom1', smallImage: '<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(); ?>'">
							<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($_thumbnail_w, $_thumbnail_h); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
						</li>
					<?php endforeach; ?>
					</ul>
				</div>
				<?php //thumbnail for lighbox ?>
					<ul class="mt-thumb-light" style="display:none;">
						<?php foreach ($this->getGalleryImages() as $_image): ?>
							<li>
								<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($_lightbox_w, $_lightbox_h); ?>" rel="lightbox[rotation]" title="<?php echo $_product->getName();?>"></a>
							</li>
						<?php endforeach; ?>                                                                
					</ul>
				<?php //--##########-- ?>
				<script type="text/javascript">
					//<![CDATA[
						$jq('.ma-thumbnail-container .flexslider').flexslider({
							<?php if( !$_auto ) { ?>
							slideshow: false,
							<?php } ?>
							itemWidth: <?php echo $_thumbnail_w ?>,
							itemMargin: 5,
							minItems: 2,
							maxItems: 4,
							<?php if (count($this->getGalleryImages()) < 5 ) { ?>
							directionNav: false,
							<?php } ?>
							controlNav: false,
							slideshowSpeed: 3000,
							animationSpeed: 500,
							animation: "slide"
						});		
					//]]>
				</script>
			</div>
		<?php } else { ?>
			
			<div class="more-views ma-more-img ma-thumbnail-vert visible-desktop">
				<h2><?php echo $this->__('More Views') ?></h2>
				<div class="ma-thumb-vert">
					<ul id="ma-thumb-vert-slider" class="jcarousel jcarousel-skin-tango thumb-vertscroller">
					<?php foreach ($this->getGalleryImages() as $_image): ?>
						<li>
							<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(1200,1200); ?>" class="cloud-zoom-gallery" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" name="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($_lightbox_w, $_lightbox_h); ?>"
												rel="useZoom: 'ma-zoom1', smallImage: '<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(265); ?>'">
							<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($_thumbnail_w, $_thumbnail_h); ?>"  alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
						</li>
					<?php endforeach; ?>
					</ul>
				</div>
				<?php //thumbnail for lighbox ?>
					<ul class="mt-thumb-light" style="display:none;">
						<?php foreach ($this->getGalleryImages() as $_image): ?>
							<li>
								<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($_lightbox_w, $_lightbox_h); ?>" rel="lightbox[rotation]" title="<?php echo $_product->getName();?>"></a>
							</li>
						<?php endforeach; ?>                                                                
					</ul>
				<?php //--##########-- ?>
				<script type="text/javascript">
					//<![CDATA[
						$jq(document).ready(function(){
							$jq('#ma-thumb-vert-slider').jcarousel({
								<?php if( $_auto ) { ?>
								auto: 1,
								<?php } else { ?>
								auto: 0,
								<?php } ?>
								vertical: true,
								wrap: 'circular',
								scroll: <?php echo $_scroll_qty ?>
							});
							$jq('head').append('<style type="text/css"> .cloud-zoom-big { border:<?php echo $_border_w ?>px solid <?php echo $_border_color ?> }</style>');
						});
					//]]>
				</script>
			</div>
		<?php } ?>
	<?php } ?>

<?php endif; ?>