// JavaScript Document

var contColor="<div class='secColor'>\
        <p class='infoColor'>Color s&oacute;lido en 3mm</p>\
        <div class='gamaColor'>\
            <img src='img/colores/blanco.gif' title='Blanco' />\
            <img src='img/colores/perla.gif' title='Perla' />\
            <img src='img/colores/negro.gif' title='Negro' />\
            <img src='img/colores/azul-cielo.gif' title='Azul Cielo' />\
            <img src='img/colores/azul-rey.gif' title='Azul Rey' />\
            <img src='img/colores/amarillo.gif' title='Amarillo Fuerte' />\
            <img src='img/colores/amarillo-claro.gif' title='Amarillo Claro' />\
            <img src='img/colores/naranja.gif' title='Naranja' />\
            <img src='img/colores/rojo.gif' title='Rojo' />\
            <img src='img/colores/verde.gif' title='Verde' style='margin:0' />\
        </div>\
    </div>\
    <div class='secColor'>\
        <p class='infoColor'>Color transparente en 3mm</p>\
        <div class='gamaColor'>\
            <img src='img/colores/humo.gif' title='Humo' />\
            <img src='img/colores/azul-rey-trans.gif' title='Azul Rey' />\
            <img src='img/colores/naranja-trans.gif' title='Naranja' />\
            <img src='img/colores/mate.gif' title='Mate' />\
            <img src='img/colores/amarillo-claro-trans.gif' title='Amarillo Claro (&Aacute;mbar)' />\
            <img src='img/colores/rojo-rubi.gif' title='Rojo (Rub&iacute;)' />\
            <img src='img/colores/verde-esmeralda.gif' title='Verde (Esmeralda)' />\
            <img src='img/colores/carey.gif' title='Carey' />\
        </div>\
    </div>\
    <div class='secColor'>\
        <p class='infoColor' style='margin-top:0;'>Color luminiscente en 3mm<br /><span>Color solo en el canto</span></p>\
        <div class='gamaColor'>\
            <img src='img/colores/amarillo.gif' title='Amarillo' />\
            <img src='img/colores/naranja.gif' title='Naranja' />\
            <img src='img/colores/rojo.gif' title='Rojo' />\
            <img src='img/colores/azul-rey.gif' title='Azul' />\
            <img src='img/colores/verde.gif' title='Verde' />\
        </div>\
    </div>\
    <div class='secColor'>\
        <p class='infoColor'>Color pastel en 3mm</p>\
        <div class='gamaColor'>\
            <img src='img/colores/azul-pastel.gif' title='Azul' />\
            <img src='img/colores/durazno.gif' title='Durazno' />\
            <img src='img/colores/rosa.gif' title='Rosa' />\
            <img src='img/colores/verde-pastel.gif' title='Verde' />\
        </div>\
    </div>\
    <div class='secColor'>\
        <p class='infoColor'>Color fluorescente en 3mm</p>\
        <div class='gamaColor'>\
            <img src='img/colores/azul-rey.gif' title='Azul' />\
            <img src='img/colores/rojo.gif' title='Rojo' />\
            <img src='img/colores/verde.gif' title='Verde' />\
        </div>\
    </div>\
    <div class='secColor'>\
        <p class='infoColor'>Color s&oacute;lido en 6mm</p>\
        <div class='gamaColor'>\
            <img src='img/colores/blanco.gif' title='Blanco' />\
            <img src='img/colores/perla.gif' title='Perla' />\
            <img src='img/colores/negro.gif' title='Negro' />\
        </div>\
    </div>\
    <div class='secColor'>\
        <p class='infoColor'>Color transparente en 6mm</p>\
        <div class='gamaColor'>\
            <img src='img/colores/humo.gif' title='Humo' />\
        </div>\
    </div>";
	
var contEspes = "<div class='secEspes'>\
					<p class='infoEspe'>Cristal Transparente</p>\
					<div class='gamaEspes'>\
						<img src='img/medidas/1-5mm.gif' alt='' />\
						<img src='img/medidas/2mm.gif' alt='' />\
						<img src='img/medidas/3mm.gif' alt='' />\
						<img src='img/medidas/4mm.gif' alt='' />\
						<img class='noMarg' src='img/medidas/4-5mm.gif' alt='' />\
						<img src='img/medidas/5mm.gif' alt='' />\
						<img src='img/medidas/6mm.gif' alt='' />\
						<img src='img/medidas/7mm.gif' alt='' />\
						<img src='img/medidas/8mm.gif' alt='' />\
						<img class='noMarg' src='img/medidas/9mm.gif' alt='' />\
						<img src='img/medidas/10mm.gif' alt='' />\
						<img src='img/medidas/12mm.gif' alt='' />\
						<img src='img/medidas/15mm.gif' alt='' />\
						<img src='img/medidas/18mm.gif' alt='' />\
						<img class='noMarg' src='img/medidas/24mm.gif' alt='' />\
					</div>\
				</div>\
				<div class='secEspes'>\
					<p class='infoEspe'>Color transparente <br />de alto impacto</p>\
					<div class='gamaEspes'>\
						<img src='img/medidas/2-5mm.gif' alt='' />\
						<img src='img/medidas/3mm.gif' alt='' />\
						<img src='img/medidas/6mm.gif' alt='' />\
					</div>\
				</div>";

$(document).ready(function(){
	$("#selColor").click( function(){
		
		$("#secInfoColor").html(contColor);
		$("#selColor").addClass("selecAct");
		$("#selEspes").removeClass();

		})
	
	$("#selEspes").click( function(){
		
		$("#secInfoColor").html(contEspes);
		$("#selEspes").addClass("selecAct");
		$("#selColor").removeClass();

		})
	
	
	});