function paint_canvas(){
	var c = document.getElementById("back-canvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("oller");
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, c.width, c.height);
    ctx.putImageData(imgData, 0, 0);
}

$(document).ready(function() {
    $("#pointer_div").on("mousemove", function(event) {
        var x = event.pageX - this.offsetLeft;
        var y = event.pageY - this.offsetTop;
		draw_circle(x,y);
	});
});

function draw_circle(x,y){
	var c = document.getElementById("back-canvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("oller");
    ctx.drawImage(img, 0, 0);
    var width = x;//x
    var height = y;//y center of circle
    var radius = 100;// radius of circle
    var x1,y1;
    var x_bitmap = [];
    var y_bitmap = [];

	for(x1 = 0; x1 < radius; x1 += 1){
        for(y1 = 0; y1 < radius; y1 += 1){
        	if(((x1-(radius/2))**2 + (y1-(radius/2))**2) < (radius/2)**2){
            	x_bitmap.push(x1);//every x coordinate for circle
            	y_bitmap.push(y1);// every y coordinate for circle
            	// I need to convert this bitmap into the circle...       
            }
    	}
	}
	var imgData = ctx.getImageData(x-(radius*4.25), y-(radius), radius, radius);
	var x2,y2,index;
	var a = [];
	for(x2 = 0; x2 < x_bitmap.length; x2 += 1){
        index = (4 * x_bitmap[x2]) + (y_bitmap[x2] * 4 * radius);
		imgData.data[3 + index] = 0;

	}
	ctx.putImageData(imgData, x-(radius*4.25), y-(radius));
}

function clear_radios(){
	var fradio = document.getElementsByName('front-radio');
	var bradio = document.getElementsByName('back-radio');
	var length = fradio.length;
	for(var index = 0; index < length; index ++){
		if(fradio[index].checked){
			fradio[index].checked = false;
			bradio[index].disabled = false;
		}
		else if(bradio[index].checked){
			bradio[index].checked = false;
			fradio[index].disabled = false;

		}
	}
}

function front(){
	var radios = document.getElementsByName('front-radio');
	var length = radios.length;
	for(var index = 0; index < length; index ++){
		if(radios[index].checked){
			switch(radios[index].value){
    			case "visual":
    				document.getElementById("oller").src = "images/paisaje-frances.png";
    				var radio = document.getElementsByName('back-radio');
    				var disabled;
    				for(disabled = 0; disabled < length; disabled ++){
    					if(disabled == index){
		    				radio[disabled].checked = false;
		    				radio[disabled].disabled = true;
    					}
    					else{
    						if(radio[disabled].value == "ultraviolet" ||
    						   radio[disabled].value == "x-ray"){
	    						radio[disabled].disabled = true;
    						}
    						else{
	    						radio[disabled].disabled = false;
    						}
    					}
    				}
			        break;
			    case "infrared":
    				document.getElementById("oller").src = "images/paisaje-frances-infrared.png";
    				var radio = document.getElementsByName('back-radio');
    				var disabled;
    				for(disabled = 0; disabled < length; disabled ++){
    					if(disabled == index){
		    				radio[disabled].checked = false;
		    				radio[disabled].disabled = true;
    					}
    					else{
    						if(radio[disabled].value == "ultraviolet" ||
    						   radio[disabled].value == "x-ray"){
	    						radio[disabled].disabled = true;
    						}
    						else{
	    						radio[disabled].disabled = false;
    						}
    					}
    				}
			        break;
			    case "ultraviolet":
    				document.getElementById("oller").src = "images/paisaje-frances.png";
    				var radio = document.getElementsByName('back-radio');
    				var disabled;
    				for(disabled = 0; disabled < length; disabled ++){
    					if(disabled == index){
		    				radio[disabled].disabled = true;
    					}
    					else{
    						radio[disabled].disabled = false;
    					}
    				}
			        break;
			    case "x-ray":
    				document.getElementById("oller").src = "images/paisaje-frances.png";
    				var radio = document.getElementsByName('back-radio');
    				var disabled;
    				for(disabled = 0; disabled < length; disabled ++){
    					if(disabled == index){
		    				radio[disabled].disabled = true;
    					}
    					else{
    						radio[disabled].disabled = false;
    					}
    				}
			        break;
			    default:
			}
			break;
 		}
	}
}

function back(){
	var radios = document.getElementsByName('back-radio');
	var length = radios.length;
	for(var index = 0; index < length; index ++){
		if(radios[index].checked){
			switch(radios[index].value) {
    			case "visual":
    				document.getElementById("back-canvas").style.backgroundImage = "url('images/paisaje-frances.png')";
    				var radio = document.getElementsByName('front-radio');
    				var disabled;
    				for(disabled = 0; disabled < length; disabled ++){
        				if(disabled == index){
		    				radio[disabled].checked = false;
		    				radio[disabled].disabled = true;
    					}
    					else{
    						if(radio[disabled].value == "ultraviolet" ||
    						   radio[disabled].value == "x-ray"){
	    						radio[disabled].disabled = true;
    						}
    						else{
	    						radio[disabled].disabled = false;
    						}
    					}
    				}
			        break;
			    case "infrared":
    				document.getElementById("back-canvas").style.backgroundImage = "url('images/paisaje-frances-infrared.png')";
    				var radio = document.getElementsByName('front-radio');
    				var disabled;
    				for(disabled = 0; disabled < length; disabled ++){
    					if(disabled == index){
		    				radio[disabled].checked = false;
		    				radio[disabled].disabled = true;
    					}
    					else{
    						if(radio[disabled].value == "ultraviolet" ||
    						   radio[disabled].value == "x-ray"){
	    						radio[disabled].disabled = true;
    						}
    						else{
	    						radio[disabled].disabled = false;
    						}
    					}
    				}
			        break;
			    case "ultraviolet":
    				document.getElementById("back-canvas").style.backgroundImage = "url('images/paisaje-frances.png')";
    				var radio = document.getElementsByName('front-radio');
    				var disabled;
    				for(disabled = 0; disabled < length; disabled ++){
    					if(disabled == index){
		    				radio[disabled].disabled = true;
    					}
    					else{
    						radio[disabled].disabled = false;
    					}
    				}
			        break;
			    case "x-ray":
    				document.getElementById("back-canvas").style.backgroundImage = "url('images/paisaje-frances.png')";
    				var radio = document.getElementsByName('front-radio');
    				var disabled;
    				for(disabled = 0; disabled < length; disabled ++){
    					if(disabled == index){
		    				radio[disabled].disabled = true;
    					}
    					else{
    						radio[disabled].disabled = false;
    					}
    				}
			        break;
			    default:
			}
			break;
 		}
	}
}

function openNav() {
    document.getElementById("sidebar").style.width = "200px";
}

function closeNav() {
    document.getElementById("sidebar").style.width = "0";
}