odontograma

by yamidvo

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div class="diente"><!--diente 1-->
	<input name="valor" type="hidden" value="1">
	<div class="cuadro click"><input name="cuadro" type="hidden" value="1"></div>
	<div class="cuadro izquierdo click"><input name="cuadro" type="hidden" value="2"></div>
	<div class="cuadro debajo click"><input name="cuadro" type="hidden" value="3"></div>
	<div class="cuadro derecha click"><input name="cuadro" type="hidden" value="hola"></div>
	<div class="centro click"><input name="cuadro" type="hidden" value="5"></div>
</div>
        <div id="color">
	<div class="select"></div>
	<div class="select"></div>
	<div class="select"></div>
	<div class="select"></div>
	<div class="select"></div>
	<div class="select"></div>
</div>

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;
	-webkit-border-radius: 80px 80px 0px 15px;
	-moz-border-radius: 80px 80px 0px 15px;
	border-radius: 80px 80px 0px 15px;
}
.cuadro:hover{
	 background:rgba(117, 198, 243, 0.4);
	cursor: pointer;
}
.izquierdo{
	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: 2px !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: -33px !important;
	left: 61px !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: 18px;
	top:-51px;
	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;
}
.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;
}

JavaScript

$(document).ready(function() {
			$('#color').dialog({
				autoOpen: false,
			});	 
				$(".click").click(function(event) {
				var cuadro = $(this).find("input[name=cuadro]:hidden").val();//obtenemos el valor del cuadro al que le dimos click
				$( "#color" ).dialog( "option", "position", [event.pageX,event.pageY]);//posicionamos el elemento donde dimos click			
				$('#color').dialog('open');
				$(".select").click(function(event){
					var color = $(this).css('background-color');
					$("input[name=cuadro]:hidden").val(cuadro).parent(".cuadro").css('background-color', color);//establecemos el background a la clase cuadro
				});
				return false;
			});
				return false;			
		});