<?php echo $this->render('module/header.phtml'); ?>

<div class="conBox">
<div class="container widthDiv">
	<div class="row categoryStrap">
			<?php 
				if( $this->idCategory > 0 ){
					$Lib_Category = new Lib_Category();
					$dataCategoryParent = $Lib_Category->parentListO($this->idCategory,4);
					echo "<a><i class='fa fa-home'></i></a> >> ";
					foreach($dataCategoryParent as $k => $v):
						echo "<a>".@Lib_Lang::consta(category_name_.$v['category_id']).'</a> >> ';
					endforeach;
				}
			?>
	</div>
	<div class="row">
		<div class="col-xs-12 categoryBox">
	
	
<script type="text/javascript" language="javascript">

	$(document).ready(function () {		

		$('.element').click(function(){			
			$('.elementBig').hide();
			$('#element'+$(this).attr('cmd')).show();
			$('#elementText'+$(this).attr('cmd')).show();
			$('.element').removeClass('activElement');
			$('.element').removeClass('noElement');
			$('.element').addClass('noElement');
			$('[cmd="'+$(this).attr('cmd')+'"]').removeClass('noElement');
			$('[cmd="'+$(this).attr('cmd')+'"]').addClass('activElement');
		});

		$('.page').click(function(){			
			$('.elementBig').hide();
			$('#element'+$(this).attr('page')).show();
			$('#elementText'+$(this).attr('page')).show();
			$('.element').removeClass('activElement');
			$('.element').removeClass('noElement');
			$('.element').addClass('noElement');
			$('[cmd="'+$(this).attr('page')+'"]').removeClass('noElement');
			$('[cmd="'+$(this).attr('page')+'"]').addClass('activElement');
		});
	
	});

</script>
	
<table width="100%" style="">	
	<tr>
		<td style="width:370px;vertical-align:top;">
			<div style="max-height:400px;width:365px;overflow-y:scroll;margin-bottom:10px;">
				<?php $i = 0; foreach ($this->dataTable as $key => $val): $i++; ?>
					<div class="element<?php if($i==1)echo" activElement";else echo" noElement";?>" cmd="<?php echo$i; ?>" style="display:inline-block;margin:3px;cursor:pointer;"><img src="<?php echo $this->escape($this->baseUrl); ?>/public/uploads/color/<?php echo$val['color_img']; ?>_w100.jpeg" /></div>
				<?php endforeach; ?>
			</div>
			
		</td>	
		<td style="vertical-align:top;padding-bottom:15px;">

		
			<?php $i = 0; foreach ($this->dataTable as $key => $val): $i++; ?>
				<div id="element<?php echo$i; ?>" class="elementBig" style="<?php if($i>1)echo"display:none;"; ?>width:100%;height:400px;margin:3px;background:url('<?php echo $this->escape($this->baseUrl); ?>/public/uploads/color/<?php echo$val['color_img']; ?>.jpeg') no-repeat center center;background-size: cover;">
				
				
				<?php if( $i>1 ){ ?>
					<div class="page" page="<?php echo$i-1;?>" style="position:absolute;margin-left:10px;top:180px;cursor:pointer;"><i class='fa fa-arrow-left fa-3x'></i></div>
				<?php } ?>
					
				<?php if( $i < count($this->dataTable) ){ ?>
					<div class="page" page="<?php echo$i+1;?>" style="position:absolute;right:20px;top:180px;cursor:pointer;"><i class='fa fa-arrow-right fa-3x'></i></div>
				<?php } ?>
				
				
				
				</div>
				<div id="elementText<?php echo$i; ?>" class="elementBig" style="<?php if($i>1)echo"display:none;"; ?>width:100%;padding:10px;margin:3px;border:2px solid #000;">
				<h3 style="margin:0px;"><?php
					echo @Lib_Lang::consta(color_name_.$val['color_id']);
				?></h3>
				<?php
					echo @Lib_Lang::consta(color_description_.$val['color_id']);
				?>				
				</div>
			<?php endforeach; ?>


		
		</td>	
	</tr>
</table>
		
		</div>
	</div>
</div>
</div>

<?php echo $this->render('module/footer.phtml'); ?>

