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

.cuadro{
	background-color: #FFFFFF;
	border: 1px solid #ccc;
	position: relative;
	width: 20px;
	height: 15px;
	left: 45px;
	top:2px;

}



.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: 45px !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: 45px;
    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="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>
	</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>