<!--
<style type="text/css">
  .category-span {
  padding: 10px 30px 10px 30px;
  background-color: red;
  -webkit-clip-path: polygon(100% 0, 85% 100%, 15% 100%, 0 0);
}
</style>
<div class="row" style="width: 100%; border:1px solid black; text-align: center;">
  <span class="category-span">Ecommerce</span>
</div>
-->

<style type="text/css">
	.diente{
	position: relative;
	width: 0px;
	height: auto;
	margin-left: 50px;
	display: inline-block;
}

.cuadro{
	background-color: #e7e2e2;
	border: 1px solid #ccc;
	position: relative;
	width: 20px;
	height: 15px;
	left: 44px;
	top:2px;
	box-sizing: border-box;
	padding-left: 19px; padding-right: 19px;
	-webkit-clip-path: polygon(100% 0, 70% 100%, 30% 100%, 0 0);
	clip-path: polygon(100% 0, 70% 100%, 30% 100%, 0 0);
}



.cuadro:hover{
	 background:rgba(117, 198, 243, 0.4);

	cursor: pointer;
}
.izquierdo{
	top: 1px !important;
    left: 29px !important;
    width: 18px;

	
	
	top: 1px !important;
	left: 28px !important;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
	
}
.debajo{
	top: 0px !important;
	left: 44px !important;
	
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	
}
.derecha{
	top: -29px !important;
    left: 63px !important;
    width: 18px;

	
	
	top: -29px !important;
	left: 60px !important;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	
}



.centro{

	background: #F3F3F3;
    border: 1px solid #ccc;
    width: 20px;
    height: 15px;
    top: -43.9px;
    left: 54px;
    position: relative;

}
.centro:hover{
	border: 1px solid rgba(117, 198, 243, 0.4);
	background-color:rgba(117, 198, 243, 0.4);
	cursor: pointer;
}
.color{
	width: 200px;
	height: 200px;
	position: relative;
	margin: 0 auto;
	padding: 3px;
}
.ui-dialog .ui-dialog-titlebar-close {
   outline: 0;
 }
.select{
	width: 40px;
	height: 40px;
	margin: 2px;
	background-color: #ccc;
	display: inline-block;
	cursor: pointer;
}
.select:hover{
	border: 1px solid rgba(117, 198, 243, 0.4);
}
.content{
	position: absolute;
}
.ui-dialog{
	position: relative !important;
}



</style>




<!--
M 250 200 L 200 300 L 300 300 L 400 300 L 350 200 L 250 200 
-->

<div style="position: absolute; color:grey; margin-top: 20px; margin-left: 65px">18</div>
<div style="position: absolute; color:grey; margin-top: 20px; margin-left: 120px">17</div>
<div style="position: absolute; color:grey; margin-top: 20px; margin-left: 175px">16</div> 
<div style="position: absolute; color:grey; margin-top: 20px; margin-left: 229px">15</div>
<div style="position: absolute; color:grey; margin-top: 20px; margin-left: 280px">14</div>
<div style="position: absolute; color:grey; margin-top: 20px; margin-left: 335px">13</div>
<div style="position: absolute; color:grey; margin-top: 20px; margin-left: 387px">12</div>
<div style="position: absolute; color:grey; margin-top: 20px; margin-left: 441px">11</div>

<div style="position: absolute; color:grey; margin-top: 20px; margin-left: 535px">21</div>
<div style="position: absolute; color:grey; margin-top: 20px; margin-left: 589px">22</div>
<div style="position: absolute; color:grey; margin-top: 20px; margin-left: 642px">23</div> 
<div style="position: absolute; color:grey; margin-top: 20px; margin-left: 697px">24</div>
<div style="position: absolute; color:grey; margin-top: 20px; margin-left: 750px">25</div>
<div style="position: absolute; color:grey; margin-top: 20px; margin-left: 803px">26</div>
<div style="position: absolute; color:grey; margin-top: 20px; margin-left: 856px">27</div>
<div style="position: absolute; color:grey; margin-top: 20px; margin-left: 910px">28</div>



<div style="position: absolute; color:grey; margin-top: 95px; margin-left: 229px">55</div>
<div style="position: absolute; color:grey; margin-top: 95px; margin-left: 280px">54</div>
<div style="position: absolute; color:grey; margin-top: 95px; margin-left: 335px">53</div>
<div style="position: absolute; color:grey; margin-top: 95px; margin-left: 387px">52</div>
<div style="position: absolute; color:grey; margin-top: 95px; margin-left: 441px">51</div>

<div style="position: absolute; color:grey; margin-top: 95px; margin-left: 535px">61</div>
<div style="position: absolute; color:grey; margin-top: 95px; margin-left: 589px">62</div>
<div style="position: absolute; color:grey; margin-top: 95px; margin-left: 642px">63</div> 
<div style="position: absolute; color:grey; margin-top: 95px; margin-left: 697px">64</div>
<div style="position: absolute; color:grey; margin-top: 95px; margin-left: 750px">65</div>



<div style="position: absolute; color:grey; margin-top: 240px; margin-left: 229px">85</div>
<div style="position: absolute; color:grey; margin-top: 240px; margin-left: 280px">84</div>
<div style="position: absolute; color:grey; margin-top: 240px; margin-left: 335px">83</div>
<div style="position: absolute; color:grey; margin-top: 240px; margin-left: 387px">82</div>
<div style="position: absolute; color:grey; margin-top: 240px; margin-left: 441px">81</div>

<div style="position: absolute; color:grey; margin-top: 240px; margin-left: 535px">71</div>
<div style="position: absolute; color:grey; margin-top: 240px; margin-left: 589px">72</div>
<div style="position: absolute; color:grey; margin-top: 240px; margin-left: 642px">73</div> 
<div style="position: absolute; color:grey; margin-top: 240px; margin-left: 697px">74</div>
<div style="position: absolute; color:grey; margin-top: 240px; margin-left: 750px">75</div>



<div style="position: absolute; color:grey; margin-top: 315px; margin-left: 65px">48</div>
<div style="position: absolute; color:grey; margin-top: 315px; margin-left: 120px">47</div>
<div style="position: absolute; color:grey; margin-top: 315px; margin-left: 175px">46</div> 
<div style="position: absolute; color:grey; margin-top: 315px; margin-left: 229px">45</div>
<div style="position: absolute; color:grey; margin-top: 315px; margin-left: 280px">44</div>
<div style="position: absolute; color:grey; margin-top: 315px; margin-left: 335px">43</div>
<div style="position: absolute; color:grey; margin-top: 315px; margin-left: 387px">42</div>
<div style="position: absolute; color:grey; margin-top: 315px; margin-left: 441px">41</div>

<div style="position: absolute; color:grey; margin-top: 315px; margin-left: 535px">31</div>
<div style="position: absolute; color:grey; margin-top: 315px; margin-left: 589px">32</div>
<div style="position: absolute; color:grey; margin-top: 315px; margin-left: 642px">33</div> 
<div style="position: absolute; color:grey; margin-top: 315px; margin-left: 697px">34</div>
<div style="position: absolute; color:grey; margin-top: 315px; margin-left: 750px">35</div>
<div style="position: absolute; color:grey; margin-top: 315px; margin-left: 803px">36</div>
<div style="position: absolute; color:grey; margin-top: 315px; margin-left: 856px">37</div>
<div style="position: absolute; color:grey; margin-top: 315px; margin-left: 910px">38</div>




<div style="margin-left: -40px; width:1000px; padding-top:40px; padding-bottom: 40px">
<?php for ($i=1; $i <= 52; $i++) { ?>
	

<div class="diente"><!--diente 1-->
	<?php 
	$val1 = "div".$i."1_val";
	$val2 = "div".$i."2_val";
	$val3 = "div".$i."3_val";
	$val4 = "div".$i."4_val";
	$val5 = "div".$i."5_val";
	?>
	<div class="cuadro click div<?=$i?>1" data-id="<?=$i?>1" style='background-image: <?=$this->Content_m->get_value('bbmc_tr_odontogram','id_re_kunjungan',$id_re_kunjungan,$val1)?>; background-size: 100% 100%'>
	</div>

	<div class="cuadro izquierdo click div<?=$i?>2" data-id="<?=$i?>2" style='background-image: <?=$this->Content_m->get_value('bbmc_tr_odontogram','id_re_kunjungan',$id_re_kunjungan,$val2)?>; background-size: 100% 100%'>
	
	</div>
	<div class="cuadro debajo click div<?=$i?>3" data-id="<?=$i?>3" style='background-image: <?=$this->Content_m->get_value('bbmc_tr_odontogram','id_re_kunjungan',$id_re_kunjungan,$val3)?>; background-size: 100% 100%'>
		
		<div style="margin-top:15px; font-size:11px"><?=$this->Content_m->get_no_odontogram($i)?></div>
	</div>
	<div class="cuadro derecha click div<?=$i?>4" data-id="<?=$i?>4" style='background-image: <?=$this->Content_m->get_value('bbmc_tr_odontogram','id_re_kunjungan',$id_re_kunjungan,$val4)?>; background-size: 100% 100%'>
	</div>
	<div class="centro click div<?=$i?>5" data-id="<?=$i?>5" style='background-image: <?=$this->Content_m->get_value('bbmc_tr_odontogram','id_re_kunjungan',$id_re_kunjungan,$val5)?>; background-size: 100% 100%'>
	</div>
</div>

<textarea name="<?=$val1?>" class="<?=$val1?>" style="display: none;"><?=$this->Content_m->get_value('bbmc_tr_odontogram','id_re_kunjungan',$id_re_kunjungan,$val1)?></textarea>
<textarea name="<?=$val2?>" class="<?=$val2?>" style="display: none;"><?=$this->Content_m->get_value('bbmc_tr_odontogram','id_re_kunjungan',$id_re_kunjungan,$val2)?></textarea>
<textarea name="<?=$val3?>" class="<?=$val3?>" style="display: none;"><?=$this->Content_m->get_value('bbmc_tr_odontogram','id_re_kunjungan',$id_re_kunjungan,$val3)?></textarea>
<textarea name="<?=$val4?>" class="<?=$val4?>" style="display: none;"><?=$this->Content_m->get_value('bbmc_tr_odontogram','id_re_kunjungan',$id_re_kunjungan,$val4)?></textarea>
<textarea name="<?=$val5?>" class="<?=$val5?>" style="display: none;"><?=$this->Content_m->get_value('bbmc_tr_odontogram','id_re_kunjungan',$id_re_kunjungan,$val5)?></textarea>

<?php 
if($i == '36'){echo "<br>";}
if($i == '16' || $i == '26'){echo "<br><span style='font-size:38.4px'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>";}
if($i == '8' || $i == '21' || $i == '31' || $i == '44'){ echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"; } 
}?>
</div>






<div id="color" style="font-size:8px">
	<center>
	<div class="row" style="padding: 20px; padding-bottom: 0px">
		<div class="col-md-2">
			<div class="select" style="border:1px solid black; background-image:url('media/images/odontogram/belum_erupsi.png'); background-size: 100% 100%"></div><br>Belum Erupsi<br>
		</div>
		<div class="col-md-2">
			<div class="select" style="border:1px solid black; background-image:url('media/images/odontogram/anomali_bentuk.png'); background-size: 100% 100%"></div><br>Anomali Bentuk<br>
		</div>
		<div class="col-md-2">
			<div class="select" style="border:1px solid black; background-image:url('media/images/odontogram/karies.png'); background-size: 100% 100%"></div><br>Karies<br>
		</div>
		<div class="col-md-2">
			<div class="select" style="border:1px solid black; background-image:url('media/images/odontogram/non_vital.png'); background-size: 100% 100%"></div><br>Non Vital<br>
		</div>
		<div class="col-md-2">
			<div class="select" style="border:1px solid black; background-image:url('media/images/odontogram/tambalan_logam.png'); background-size: 100% 100%"></div><br>Tambalan Logam<br>
		</div>
		<div class="col-md-2">
			<div class="select" style="border:1px solid black; background-image:url('media/images/odontogram/tambalan_non_logam.png'); background-size: 100% 100%"></div><br>Tambalan Non Logam<br>
		</div>
	</div>
	<div class="row" style="padding: 20px">
		<div class="col-md-2">
			<div class="select" style="border:1px solid black; background-image:url('media/images/odontogram/mahkota_logam.png'); background-size: 100% 100%"></div><br>Mahkota Logam<br>
		</div>
		<div class="col-md-2">
			<div class="select" style="border:1px solid black; background-image:url('media/images/odontogram/mahkota_non_logam.png'); background-size: 100% 100%"></div><br>Mahkota Non Logam<br>
		</div>
		<div class="col-md-2">
			<div class="select" style="border:1px solid black; background-image:url('media/images/odontogram/sisa_akar.png'); background-size: 100% 100%"></div><br>Sisa Akar<br>
		</div>
		<div class="col-md-2">
			<div class="select" style="border:1px solid black; background-image:url('media/images/odontogram/gigi_hilang.png'); background-size: 100% 100%"></div><br>Gigi Hilang<br>
		</div>
		<div class="col-md-2">
			<div class="select" style="border:1px solid black; background-image:url('media/images/odontogram/jembatan.png'); background-size: 100% 100%"></div><br>Jembatan<br>
		</div>
		<div class="col-md-2">
			<div class="select" style="border:1px solid black; background-image:url('media/images/odontogram/gigi_tiruan_lepas.png'); background-size: 100% 100%"></div><br>Gigi Tiruan Lepas<br>
		</div>
	</div>
	<div class="row" style="padding: 20px">
		<div class="col-md-2">
			<div class="select" style="border:1px solid black; background-image:url('media/images/odontogram/kalkulus.png'); background-size: 100% 100%"></div><br>Kalkulus<br>
		</div>
		<div class="col-md-2">
			<div class="select" style="border:1px solid black; background-image:url('media/images/odontogram/gigi_goyang.png'); background-size: 100% 100%"></div><br>Gigi Goyang<br>
		</div>
		<div class="col-md-2">
			<div class="select" style="border:1px solid black; background-image:url('media/images/odontogram/semula.png'); background-size: 100% 100%"></div><br>Normal<br>
		</div>
	</div>
	</center>
</div>


<script type="text/javascript">
	$(document).ready(function() {
	$('#color').dialog({
		autoOpen: false,
		 width: "600px",
 
	});	 

	var click = '0';
	$(".click").click(function(event) {
		var id = $(this).attr('data-id');
		
		click = id;
		//alert(click);
		//var cuadro = $(this).find("input[name=cuadro]:hidden").val();//obtenemos el valor del cuadro al que le dimos click
		$("#color").dialog( "option");//posicionamos el elemento donde dimos click			
		$('#color').dialog('open');
		$(".select").click(function(event){
			
			var color = $(this).css('background-image');
			$('.div'+click).css('background-image', color);
			$('.div'+click).css('background-size', '100% 100%');
			$('.div'+click+'_val').val(color);
			//alert(click);
			click = '0';
			//$("input[name=cuadro1]:hidden").val(cuadro).parent(".cuadro").css('background-image', color);//establecemos el background a la clase cuadro
			$('#color').dialog('close');
			
			
			
		});
		
		//return false;
	});
		//return false;			
});
</script>