<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>
	<script src="js/jquery.js"></script>
	<script src="js/jscolor.js"></script>
    <style>
	
	#kolory_content {
		width: 800px;
		height: 530px;
		background: #888;
		margin: 10px auto;
		overflow-y: auto;
	}
	
    #kolory_kolo_tlo {
		width: 500px;
		height: 120px;
		background: #006;
		margin: 10px auto;
	}
	
	#kolory_kolo1, #kolory_kolo2, #kolory_kolo3 {
		width: 90px;
		height: 90px;
		background: #488;
		margin: 10px 15px;
		border: 1px ridge #000;
		border-radius: 50%;
		float: left;
	} 
	 
    </style>
  </head>

  <body>
  <div id="kolory_content">
	<div id="kolory_kolo_tlo">
		<div id="kolory_kolo1">
		</div>
		<div id="kolory_kolo2">
		</div>
		<div id="kolory_kolo3">
		</div>
		<input type="button" id="kol_start" value="Start">
	</div>
	<div id="kolory_kolo_tlo">
		<input type="text" id="strona_cp1" class="jscolor" value="#CCC"/>
		<input type="button" id="jsk" value="Add 100 pickers"/>
	</div>
	<p id="container"></p>
<?php 
	for ($i=0; $i<255; $i++) {
		$k = dechex($i);
		$ks=str_pad($k, 1, 0, STR_PAD_LEFT);
		echo '<div class="r" id="kr'.$i.'" style="width: 3px; height: 10px; background: rgb('.$i.', 0, 0); float: left"></div>';
	}
	for ($i=0; $i<255; $i++) {
		$k = dechex($i);
		$ks=str_pad($k, 1, 0, STR_PAD_LEFT);
		echo '<div class="g" id="kg'.$i.'" style="width: 3px; height: 10px; background: rgb(0,'.$i.', 0); float: left"></div>';
	}
	for ($i=0; $i<255; $i++) {
		$k = dechex($i);
		$ks=str_pad($k, 1, 0, STR_PAD_LEFT);
		echo '<div class="b" id="kb'.$i.'" style="width: 3px; height: 10px; background: rgb(0, 0,'.$i.'); float: left"></div>';
	}
?>
</div>


  </body>
</html>

<script type="text/javascript">
	
	$(document).ready(function(){
		
		$('#jsk').on("click", function(){
			add();
		 });
		
	function add() {
    for(var i = 0; i < 100; i++) {
        var input = document.createElement('INPUT')
        var picker = new jscolor(input)
        picker.fromHSV(360 / 100 * i, 100, 100)
    
        document.getElementById('container').appendChild(input)
    }
}
		$('.r').on("click", function(){
			var tid = $(this).attr('id');
			var nrk = tid.slice(2, tid.length);
			alert(nrk);
		});
		
	});	
</script>