$(function(){
	//init();
});

function init(){
	
	var t = $("<table>").html("\
<tr>\
  <td id='controls' valign='top'></td>\
  <td id='pic1'></td>\
  <td id='pic2'></td>\
</tr><tr>\
  <td></td>\
  <td id='pic3'></td>\
  <td id='pic4'></td>\
</tr>");
	$("body").append(t);
	
	var port = 2323;
	for(i=0;i<4;i++){
		
		var url = "http://"+window.location.hostname+":"+(port+i)+"/img";
		var ref = "http://"+window.location.hostname+":"+(port+i)+"/mimg";
		
		a = $("<a>",{href:ref});
		
		img = $("<img>",{id:"chn"+i}).css({
			width: "500px"
		});
		
		img.attr("src",url);
		img.attr("src_init",url);
		
		$("#pic"+(i+1)).append($("<div>").append(a.append(img)));
		
		img.load(function(){
			d = new Date();
			n = d.getTime();
			this.src = $(this).attr("src_init")+"&"+n;
		});
		
	}
	
	ct = $("<table>");
	
	tmpstr = "<tr><td>Chn</td><td>Exposure,ms</td><td>WB</td><td>Quality,%</td></tr>";
	for(i=0;i<4;i++){
		tmpstr += "<tr>\
<td>"+(i+1)+"</td>\
<td><input type='text' id='exp"+i+"' class='exp' value='1' /></td>\
<td>\
  <input type='text' id='r"+i+"' class='gain r' value='13' />\
  <input type='text' id='gr"+i+"' class='gain g' value='10' />\
  <input type='text' id='b"+i+"' class='gain b' value='12' />\
  <input type='text' id='gb"+i+"' class='gain g' value='10' />\
</td>\
<td><input type='text' id='q"+i+"' class='exp' value='80'/></td>\
</tr>";
	}
	
	ct.html(tmpstr);
	$("#controls").append(ct);

	for(i=0;i<4;i++){
		$("#exp"+i).attr("index",i);
		$("#exp"+i).change(function(){
			var exp = Math.round(parseInt($(this).val())*1000/33.5);
			$.ajax({
				url: "imgsrv.py?expos="+exp+"&flip_x=0&flip_y=0&channel="+$(this).attr("index"),
				complete: function(){console.log("exposure set");}
			});
		});
		$("#q"+i).attr("index",i);
		$("#q"+i).change(function(){
			$.ajax({
				url: "imgsrv.py?y_quality="+$(this).val()+"&flip_x=0&flip_y=0&channel="+$(this).attr("index"),
				complete: function(){console.log("quality set");}
			});
		});
		$("#r"+i).attr("index",i);
		$("#r"+i).change(function(){
			$.ajax({
				url: "imgsrv.py?gain_r="+$(this).val()+"&flip_x=0&flip_y=0&channel="+$(this).attr("index"),
				complete: function(){console.log("gain_r set");}
			});
		});
		$("#gr"+i).attr("index",i);
		$("#gr"+i).change(function(){
			$.ajax({
				url: "imgsrv.py?gain_gr="+$(this).val()+"&flip_x=0&flip_y=0&channel="+$(this).attr("index"),
				complete: function(){console.log("gain_gr set");}
			});
		});
		$("#b"+i).attr("index",i);
		$("#b"+i).change(function(){
			$.ajax({
				url: "imgsrv.py?gain_b="+$(this).val()+"&flip_x=0&flip_y=0&channel="+$(this).attr("index"),
				complete: function(){console.log("gain_b set");}
			});
		});
        $("#gb"+i).attr("index",i);
        $("#gb"+i).change(function(){
            $.ajax({
                url: "imgsrv.py?gain_gb="+$(this).val()+"&flip_x=0&flip_y=0&channel="+$(this).attr("index"),
                complete: function(){console.log("gain_gb set");}
            });
        });
	}

}