// teinte de base pour 'hommes'
var obsat_hr = 21;
var obsat_hg = 95;
var obsat_hb = 167;

// teinte de base pour 'femmes'
var obsat_fr = 244;
var obsat_fg = 103;
var obsat_fb = 163;

// teinte de base pour 'satisfaction'
var obsat_sr = 0;
var obsat_sg = 0;
var obsat_sb = 0;

// teinte de base pour 'haute satisfaction'
var obsat_shr = 236;
var obsat_shg = 0;
var obsat_shb = 101;

function ob_drawGraphOtherNuage(id,w,h,keyx,keyy) {
	// en global : asat , un tableau js avec toutes les données
	var canvas = document.getElementById(id);
	var context;

	if (canvas) {
		canvas.height = h;
		canvas.width = w;
		context = canvas.getContext("2d");
	}

	if (context) {

		var taux_marge = 0.075;  // 7.5%
		var marge = Math.round( Math.min(w,h) * taux_marge );
		var taux_texte = 0.7; // 70% de la marge
		var taille_texte = 8;
		
		// dessin du bord et de l'axe central
	    context.strokeStyle = '#666666';
		context.lineWidth = 1;
		// context.strokeRect(marge,marge,w-(marge*2),h-(marge*2));
		context.beginPath();
		context.lineWidth = 1;
		context.moveTo(marge,marge);
		context.lineTo(marge,h-marge);
		context.moveTo(marge,h-marge);
		context.lineTo(w-marge,h-marge);
		context.stroke();
		
		// reste à faire : indiquer la signification des axes
		
		// on définit les min & max pour chaque série
		var xmin=-1,xmax=-1,ymin=-1,ymax=-1;
		for (var i=0; i<asat.length; i++) {
			xmin = (xmin==-1)?asat[i][keyx]:Math.min(xmin,asat[i][keyx]);
			xmax = (xmax==-1)?asat[i][keyx]:Math.max(xmax,asat[i][keyx]);
			ymin = (ymin==-1)?asat[i][keyy]:Math.min(ymin,asat[i][keyy]);
			ymax = (ymax==-1)?asat[i][keyy]:Math.max(ymax,asat[i][keyy]);
		}
		xmin=0;
		ymin=0;
		// on dessine le nuage
		var xamp = xmax-xmin;
		var yamp = ymax-ymin;
		context.fillStyle = 'rgba('+obsat_sr+','+obsat_sg+','+obsat_sb+',0.2)';
		for (var i=0; i<asat.length; i++) {
			var x = ( (asat[i][keyx]-xmin) * (w-(2*marge)) ) / xamp;
			var y = ( (asat[i][keyy]-ymin) * (h-(2*marge)) ) / yamp;
			context.fillRect(marge+x-1, marge+((h-(2*marge))-y)-1, 3, 3);
		}

	}
	
}


function ob_drawGraphStruNuage(id,w,h,part_h,part_j) {
	// en global : asat , un tableau js avec toutes les données
	var canvas = document.getElementById(id);
	var context;

	if (canvas) {
		canvas.height = h;
		canvas.width = w;
		context = canvas.getContext("2d");
	}

	if (context) {

		var taux_marge = 0.075;  // 7.5%
		var marge = Math.round( Math.min(w,h) * taux_marge );
		var taux_texte = 0.7; // 70% de la marge
		var taille_texte = 8;

		// part_h et part_j sont des moyennes
		var part_f = 100 - part_h;
		var part_v = 100 - part_j;

		// cadre exterieur et axes
		ob_drawGraphBase(context,w,h,marge,taille_texte,part_h,part_f,part_j,part_v);
		
		// dessin des panneaux de part de marché
		
		part_h=50;
		part_f=50;
		part_j=50;
		part_v=50;

		// panneau hommes / vieux
		var ph = Math.round((h-(2*marge))*(part_v/100));
		var pw = Math.round((w-(2*marge))*(part_h/100)); 
		var gradient1 = context.createLinearGradient(0,0,0,ph);
		gradient1.addColorStop(0, 'rgba('+obsat_hr+','+obsat_hg+','+obsat_hb+',0.6)' ); 
		gradient1.addColorStop(1, 'rgba('+obsat_hr+','+obsat_hg+','+obsat_hb+',0.6)' ); 
		context.fillStyle = gradient1;
		context.fillRect(marge, marge, pw, ph);
		
		// panneau femmes / vieux
		var ph = Math.round((h-(2*marge))*(part_v/100));
		var pw = Math.round((w-(2*marge))*(part_f/100)); 
		var gradient1 = context.createLinearGradient(0,0,0,ph);
		gradient1.addColorStop(0, 'rgba('+obsat_fr+','+obsat_fg+','+obsat_fb+',0.6)' ); 
		gradient1.addColorStop(1, 'rgba('+obsat_fr+','+obsat_fg+','+obsat_fb+',0.6)' ); 
		context.fillStyle = gradient1;
		context.fillRect(w-marge-pw, marge, pw, ph);

		// panneau hommes / jeunes
		var ph = Math.round((h-(2*marge))*(part_j/100));
		var pw = Math.round((w-(2*marge))*(part_h/100)); 
		var gradient1 = context.createLinearGradient(0,0,0,ph);
		gradient1.addColorStop(0, 'rgba('+obsat_hr+','+obsat_hg+','+obsat_hb+',0.2)' ); 
		gradient1.addColorStop(1, 'rgba('+obsat_hr+','+obsat_hg+','+obsat_hb+',0.2)' ); 
		context.fillStyle = gradient1;
		context.fillRect(marge, h-marge-ph, pw, ph);
		
		// panneau femmes / jeunes
		var ph = Math.round((h-(2*marge))*(part_j/100));
		var pw = Math.round((w-(2*marge))*(part_f/100)); 
		var gradient1 = context.createLinearGradient(0,0,0,ph);
		gradient1.addColorStop(0, 'rgba('+obsat_fr+','+obsat_fg+','+obsat_fb+',0.2)' ); 
		gradient1.addColorStop(1, 'rgba('+obsat_fr+','+obsat_fg+','+obsat_fb+',0.2)' ); 
		context.fillStyle = gradient1;
		context.fillRect(w-marge-pw, h-marge-ph, pw, ph);

		
		// dessin du bord et de l'axe central
	    context.strokeStyle = '#FFFFFF';
		context.lineWidth = 1;
		// context.strokeRect(marge,marge,w-(marge*2),h-(marge*2));
		context.beginPath();
		context.lineWidth = 2;
		context.moveTo(marge+((w-(marge*2))/2),marge);
		context.lineTo(marge+((w-(marge*2))/2),h-marge);
		context.moveTo(marge,marge+((h-(marge*2))/2));
		context.lineTo(w-marge,marge+((w-(marge*2))/2));
		context.stroke();
		
		// on fait 2 passes pour s'assurer que les points rouges sont visibles
		context.fillStyle = 'rgba('+obsat_sr+','+obsat_sg+','+obsat_sb+',0.5)';
		for (var i=0; i<asat.length; i++) {
			var x = ( (100-asat[i]['ob_part_h']) * (w-(2*marge)) ) / 100;
			var y = ( asat[i]['ob_part_j'] * (h-(2*marge)) ) / 100;
			if (asat[i]['ob_type_sat']==1) {
				context.fillRect(marge+x-1, marge+y-1, 2, 2);
			}
		}
		context.fillStyle = 'rgba('+obsat_shr+','+obsat_shg+','+obsat_shb+',0.9)';
		for (var i=0; i<asat.length; i++) {
			var x = ( (100-asat[i]['ob_part_h']) * (w-(2*marge)) ) / 100;
			var y = ( asat[i]['ob_part_j'] * (h-(2*marge)) ) / 100;
			if (asat[i]['ob_type_sat']==2) {
				context.fillRect(marge+x-1, marge+y-1, 3, 3);
			}
		}
		
	}
	
}

function ob_drawGraphSimpleTaux(id,w,h,txsat,txhsat) {
	
	// pour affichage sur fiche film
	
	var canvas = document.getElementById(id);
	var context;

	if (canvas) {
		canvas.height = h;
		canvas.width = w;
		context = canvas.getContext("2d");
	}

	if (context) {
				
		var taux_marge = 0;  // pas de marge
		var marge = Math.round( Math.min(w,h) * taux_marge );
		
		// simple satisfaction (sat - hsat)
		var ph = h-(marge*2);
		var pw = Math.round((w-(2*marge))*((txsat)/100)); 
		var gradient1 = context.createLinearGradient(0,0,0,ph);
		gradient1.addColorStop(0, 'rgba('+obsat_sr+','+obsat_sg+','+obsat_sb+',0.1)' ); 
		gradient1.addColorStop(1, 'rgba('+obsat_sr+','+obsat_sg+','+obsat_sb+',0.4)' ); 
		context.fillStyle = gradient1;
		context.fillRect(marge, marge, pw, ph);

		// haute satisfaction 
		var ph = Math.round((h-(marge*2))/3);
		var pw = Math.round((w-(2*marge))*(txhsat/100)); 
		var gradient1 = context.createLinearGradient(0,0,0,ph);
		gradient1.addColorStop(0, 'rgba('+obsat_shr+','+obsat_shg+','+obsat_shb+',0.8)' ); 
		gradient1.addColorStop(1, 'rgba('+obsat_shr+','+obsat_shg+','+obsat_shb+',0.8)' ); 
		context.fillStyle = gradient1;
		context.fillRect(marge+1 , marge + ((h-(h/3))/2) , pw-2, ph);

	    context.strokeStyle = '#999999';
		// dessin des reperes
		context.beginPath();
		context.lineWidth = 1;
		// ligne verticale
		for (var i=1; i<5; i++) {
			context.moveTo(marge+(i*((w-(2*marge))/5)),marge);
			context.lineTo(marge+(i*((w-(2*marge))/5)),marge+(h/8));
		}
		context.stroke();

	    context.strokeStyle = '#FFFFFF';
		// dessin des reperes
		context.beginPath();
		context.lineWidth = 1;
		// ligne verticale
		for (var i=1; i<5; i++) {
			context.moveTo(marge+(i*((w-(2*marge))/5)),h-marge);
			context.lineTo(marge+(i*((w-(2*marge))/5)),h-marge-(h/8));
		}
		context.stroke();

		// dessin du bord
		context.strokeStyle = '#999999';
		context.lineWidth = 1;
		context.strokeRect(marge,marge,w-(marge*2),h-(marge*2));

		
	
	}
}


function ob_drawGraphTaux(id,w,h,taux_h,taux_f,taux_j,taux_v,txsat,txhsat) {

	var canvas = document.getElementById(id);
	var context;

	if (canvas) {
		canvas.height = h;
		canvas.width = w;
		context = canvas.getContext("2d");
	}

	if (context) {

		// détermination des marges et des tailles de texte
		var taux_marge = 0.075;  // 7.5%
		var marge = Math.round( Math.min(w,h) * taux_marge );
		var taux_texte = 0.7; // 70% de la marge
		var taille_texte = Math.round( marge * taux_texte);

		// cadre et axes
		
		// dessin du bord
	    context.strokeStyle = '#999999';
		context.lineWidth = 1;
		context.strokeRect(marge,marge,w-(marge*2),h-(marge*2));

		// réticule central
		context.beginPath();
		context.lineWidth = 0.5;
		// ligne horiz
		context.moveTo(marge,h-marge);
		context.lineTo(w-marge,h-marge);		
		//context.moveTo(marge,marge);
		//context.lineTo(w-marge,marge);

		// tx sat global
		var y = Math.round(((h-(2*marge)))*(txsat/100));
		context.moveTo((marge/2),h-marge-y);
		context.lineTo(w-(marge/2),h-marge-y);
		
		context.stroke();
		context.closePath();

		// dessin des barres verticales de taux de satisfaction détaillés
		context.font = taille_texte + 'px Verdana';
	    context.textAlign = 'center';
		context.textBaseline = 'middle';
		

		// hommes
		if (taux_h>0) {
			var offset = 0 * ((w-(2*marge))/4);
			var ph = Math.round(((h-(2*marge)))*(taux_h/100));
			var pw = ((w-(2*marge))/4); 
			var gradient1 = context.createLinearGradient(0,0,0,ph);
			gradient1.addColorStop(0, 'rgba('+obsat_hr+','+obsat_hg+','+obsat_hb+',0.7)' ); 
			gradient1.addColorStop(1, 'rgba('+obsat_hr+','+obsat_hg+','+obsat_hb+',0.9)' ); 
			context.fillStyle = gradient1;
			context.fillRect(marge+offset, h-marge-ph, pw, ph);
		    context.fillStyle = '#000000';
			context.fillText('H', marge+offset+(pw/2), h-(marge/2) );
			context.fillText(taux_h+'%', marge+offset+(pw/2), h-marge-ph-(marge/2) );
		}
	
		if (taux_f>0) {
			var offset = 1 * ((w-(2*marge))/4);
			var ph = Math.round(((h-(2*marge)))*(taux_f/100));
			var pw = ((w-(2*marge))/4); 
			var gradient1 = context.createLinearGradient(0,0,0,ph);
			gradient1.addColorStop(0, 'rgba('+obsat_fr+','+obsat_fg+','+obsat_fb+',0.7)' ); 
			gradient1.addColorStop(1, 'rgba('+obsat_fr+','+obsat_fg+','+obsat_fb+',0.9)' ); 
			context.fillStyle = gradient1;
			context.fillRect(marge+offset, h-marge-ph, pw, ph);
		    context.fillStyle = '#000000';
			context.fillText('F', marge+offset+(pw/2), h-(marge/2) );
			context.fillText(taux_f+'%', marge+offset+(pw/2), h-marge-ph-(marge/2) );
		}

		if (taux_j>0) {
			var offset = 2 * ((w-(2*marge))/4);
			var ph = Math.round(((h-(2*marge)))*(taux_j/100));
			var pw = ((w-(2*marge))/4); 
			var gradient1 = context.createLinearGradient(0,0,0,ph);
			gradient1.addColorStop(0, 'rgba('+obsat_sr+','+obsat_sg+','+obsat_sb+',0.1)' ); 
			gradient1.addColorStop(1, 'rgba('+obsat_sr+','+obsat_sg+','+obsat_sb+',0.3)' ); 
			context.fillStyle = gradient1;
			context.fillRect(marge+offset, h-marge-ph, pw, ph);
		    context.fillStyle = '#000000';
			context.fillText('-25a', marge+offset+(pw/2), h-(marge/2) );
			context.fillText(taux_j+'%', marge+offset+(pw/2), h-marge-ph-(marge/2) );
		}
	
		if (taux_v>0) {
			var offset = 3 * ((w-(2*marge))/4);
			var ph = Math.round(((h-(2*marge)))*(taux_v/100));
			var pw = ((w-(2*marge))/4); 
			var gradient1 = context.createLinearGradient(0,0,0,ph);
			gradient1.addColorStop(0, 'rgba('+obsat_sr+','+obsat_sg+','+obsat_sb+',0.3)' ); 
			gradient1.addColorStop(1, 'rgba('+obsat_sr+','+obsat_sg+','+obsat_sb+',0.5)' ); 
			context.fillStyle = gradient1;
			context.fillRect(marge+offset, h-marge-ph, pw, ph);
		    context.fillStyle = '#000000';
			context.fillText('+25a', marge+offset+(pw/2), h-(marge/2) );
			context.fillText(taux_v+'%', marge+offset+(pw/2), h-marge-ph-(marge/2) );
		}


	}

}

function ob_drawGraphStru(id,w,h,part_h,part_j) {

	var canvas = document.getElementById(id);
	var context;

	if (canvas) {
		canvas.height = h;
		canvas.width = w;
		context = canvas.getContext("2d");
	}

	if (context) {

		// détermination des marges et des tailles de texte
		var taux_marge = 0.075;  // 7.5%
		var marge = Math.round( Math.min(w,h) * taux_marge );
		var taux_texte = 0.7; // 70% de la marge
		var taille_texte = Math.round( marge * taux_texte);

		var part_f = 100 - part_h;
		var part_v = 100 - part_j;

		// cadre et axes
		if (h>50) {
			ob_drawGraphBase(context,w,h,marge,taille_texte,part_h,part_f,part_j,part_v);
		} else {
			marge=0;
		}

		// dessin des panneaux de part de marché

		// panneau hommes / vieux
		var ph = Math.round((h-(2*marge))*(part_v/100));
		var pw = Math.round((w-(2*marge))*(part_h/100)); 
		var gradient1 = context.createLinearGradient(0,0,0,ph);
		gradient1.addColorStop(0, 'rgba('+obsat_hr+','+obsat_hg+','+obsat_hb+',0.7)' ); 
		gradient1.addColorStop(1, 'rgba('+obsat_hr+','+obsat_hg+','+obsat_hb+',0.9)' ); 
		context.fillStyle = gradient1;
		context.fillRect(marge, marge, pw, ph);
		
		// panneau femmes / vieux
		var ph = Math.round((h-(2*marge))*(part_v/100));
		var pw = Math.round((w-(2*marge))*(part_f/100)); 
		var gradient1 = context.createLinearGradient(0,0,0,ph);
		gradient1.addColorStop(0, 'rgba('+obsat_fr+','+obsat_fg+','+obsat_fb+',0.7)' ); 
		gradient1.addColorStop(1, 'rgba('+obsat_fr+','+obsat_fg+','+obsat_fb+',0.9)' ); 
		context.fillStyle = gradient1;
		context.fillRect(w-marge-pw, marge, pw, ph);

		// panneau hommes / jeunes
		var ph = Math.round((h-(2*marge))*(part_j/100));
		var pw = Math.round((w-(2*marge))*(part_h/100)); 
		var gradient1 = context.createLinearGradient(0,0,0,ph);
		gradient1.addColorStop(0, 'rgba('+obsat_hr+','+obsat_hg+','+obsat_hb+',0.3)' ); 
		gradient1.addColorStop(1, 'rgba('+obsat_hr+','+obsat_hg+','+obsat_hb+',0.5)' ); 
		context.fillStyle = gradient1;
		context.fillRect(marge, h-marge-ph, pw, ph);
		
		// panneau femmes / jeunes
		var ph = Math.round((h-(2*marge))*(part_j/100));
		var pw = Math.round((w-(2*marge))*(part_f/100)); 
		var gradient1 = context.createLinearGradient(0,0,0,ph);
		gradient1.addColorStop(0, 'rgba('+obsat_fr+','+obsat_fg+','+obsat_fb+',0.3)' ); 
		gradient1.addColorStop(1, 'rgba('+obsat_fr+','+obsat_fg+','+obsat_fb+',0.5)' ); 
		context.fillStyle = gradient1;
		context.fillRect(w-marge-pw, h-marge-ph, pw, ph);

	}

}

function ob_drawGraphBase(context,w,h,marge,taille_texte,taux_h,taux_f,taux_j,taux_v) {

		context.font = taille_texte + 'px Verdana';
	    context.textAlign = 'center';
		context.textBaseline = 'middle';
		
		// textes autour du graphique
		if (taux_v>=0) context.fillText('+25a : '+taux_v+'%', (w/2), (marge/2) );
		if (taux_j>=0) context.fillText('-25a : '+taux_j+'%', (w/2), h-(marge/2) );
		context.save();
		context.translate(0, h);
		context.rotate(-Math.PI/2);
		if (taux_h>=0) context.fillText('Hommes : '+taux_h+'%', (h/2), (marge/2) );
		context.restore();
		context.save();
		context.translate(w, 0);
		context.rotate(+Math.PI/2);
		if (taux_f>=0) context.fillText('Femmes : '+taux_f+'%', (h/2), (marge/2) );
		context.restore();
		
		// dessin du bord
	    //context.strokeStyle = '#666666';
		//context.lineWidth = 1;
		//context.strokeRect(marge,marge,w-(marge*2),h-(marge*2));


}