Ext.namespace('fcbm.component.ImageAnnotation');

/*
 * fcbm.component.ImageAnnotation
 *   Extends Ext.util.Observable
 *   
 *   config object must have the following properties :
 *   - id: String
 *   - ctId: String (container Id) 
 *   - imgContainerType: int {fcbm.model.ImageAnnotationConfig.GRID|fcbm.model.ImageAnnotationConfig.ZOOM}
 *   - documentType: int (fcbm.model.ImageAnnotationConfig.TRAINING|fcbm.model.ImageAnnotationConfig.ATLAS)
 *   - solutionMode: boolean
 *   - imgAnnotationMgr; ImageAnnotationManager
 *   
 */

fcbm.component.ImageAnnotation = function (config) {
	
	// Properties
	//////////////////////////////////////////////////////////////////////////////////

	this.initialConfig = Ext.apply(config);
	this.annotations = null;
	//this.imgWidth = 0;
	//this.imgHeight = 0;
	this.rapportThumbs = 0.2;
	this.jg = null; // graphic component
	this.mode = 2;

	
	// Methods
	//////////////////////////////////////////////////////////////////////////////////

	// init
	this.init = function () {
		// en fonction du mode d'affichage on défini la taille de l'image
		if (this.initialConfig.imgContainerType == fcbm.model.ImageAnnotationConfig.GRID) {
			//this.imgWidth = imgWallDefaultTinyWidth;
			//this.imgHeight = imgWallDefaultTinyHeight;
			this.fontSize = 10;
		} else if (this.initialConfig.imgContainerType == fcbm.model.ImageAnnotationConfig.ZOOM) {
			//this.imgWidth = imgWallDefaultWidth;
			//this.imgHeight = imgWallDefaultHeight;
			this.fontSize = 40;
		} else {
			alert('Error: fcbm.component.ImageAnnotation imgContainerType unknow type !');
		}
		
		// creation de l'espace de dessin
		var canvas = document.getElementById (this.initialConfig.ctId);
		this.jg = new jsGraphics(canvas);
	};
	
	// setSolutionMode
	this.setSolutionMode = function (isSolution) {
		this.initialConfig.solutionMode = isSolution;
		this.draw();
	}
	
	// set annotations
	this.setAnnotations = function (annotations) {
		this.annotations = annotations;
		this.draw ();
	};

	// draw method, clean all and draw/redraw
	this.draw = function () {
		var docType = this.initialConfig.documentType;
		this.jg.clear();
		
		if (docType == fcbm.model.ImageAnnotationConfig.TRAINING) {
			var iam = this.initialConfig.imgAnnotationMgr;
			
			if (this.initialConfig.imgContainerType == fcbm.model.ImageAnnotationConfig.GRID)
				var m = this.rapportThumbs;
			else
				var m = 1;
				
			// Training
			if (this.initialConfig.solutionMode) {
				// mode solution
				this.jg.setColor("#000000");
				for (var i=0; i<this.annotations.length; i++) {
					var cur = this.annotations[i];
					var userAnswer = (cur.userAnswerId == "" ? "UNC" : cur.userAnswerId);
					this.jg.setFont ('Arial', this.fontSize);
					this.jg.setColor("#000000");
					this.jg.drawString(iam.getCellAbbrevById(userAnswer), cur.xText*m, cur.yText*m+this.fontSize);
					if (userAnswer != cur.id) {
						this.jg.setColor("#ff0000");
						this.jg.drawString(iam.getCellAbbrevById(cur.id), cur.xText * m, cur.yText * m);
					}
					//this.jg.setDivComplement(''); 
					//this.jg.drawEllipse(cur.x*m, cur.y*m, cur.w*m, cur.h*m);
					
				}
			} else {
				// mode reponse
				for (var i=0; i<this.annotations.length; i++) {
					var cur = this.annotations[i];
					this.jg.setColor("#ffff00");
					this.jg.setDivComplement('id="'+ (this.initialConfig.ctId + '_' + i) +'" class="ovRep" onmouseover="rollOver(this)" onmouseout="rollOut(this)" onclick="assignCell(this)"');
					if (this.mode == 1)
						this.jg.fillEllipse(cur.x*m, cur.y*m, cur.w*m, cur.h*m);
					else
						this.jg.fillRect(cur.x*m, cur.y*m, cur.w*m, cur.h*m);
					if (cur.userAnswerId != "") {
						this.jg.setFont('Arial', this.fontSize);
						this.jg.setColor("#000000");
						this.jg.drawString(iam.getCellAbbrevById(cur.userAnswerId), cur.xText * m, cur.yText * m);
					}
				}
			}			
		} else {
			// Atlas
			this.jg.setColor("#000000");
			for (var i=0; i<this.annotations.length; i++) {
				var cur = this.annotations[i];
				this.jg.setDivComplement('');
				this.jg.drawEllipse(cur.x*m, cur.y*m, cur.w*m, cur.h*m);
				this.jg.setFont ('Arial', this.fontSize);
				this.jg.drawString(iam.getCellAbbrevById(cur.id), cur.xText*m, cur.yText*m);	
			}
		}
		this.jg.paint();
		
	};
	
	// user has assigned a cell =>
	//  send the complete annotations to the ImageAnnotationManager
	this.setCellId = function (id) {
		var cellId = this.initialConfig.imgAnnotationMgr.getCellIdSelected();
		var idx = id.substring(id.lastIndexOf("_")+1);
		this.annotations[idx].userAnswerId = cellId;
		this.initialConfig.imgAnnotationMgr.updateAnnotations (this.initialConfig.id, this.annotations);
	};
	
	
	
	this.init();
	
};

Ext.extend(fcbm.component.ImageAnnotation, Ext.util.Observable);