Ext.namespace ('fcbm.component');

fcbm.component.ImageWall = function (config) {
	
	return {
		
		initialConfig: Ext.apply(config),
		
		modeSolution: false,
		
		/*
		 * 
		 */
		showGrid: function (imgWallId, imagesArray, nCol, nRow) {
			
			var paramsGrid = {imgWallId: imgWallId, imagesArray: imagesArray, nCol: nCol, nRow: nRow};
			
			if (imgWallId != 'Wall1' && imgWallId != 'Wall2' && imgWallId != 'Sol1' && imgWallId != 'Sol2' && imgWallId != 'Crobar') {
				Ext.MessageBox.show({
					title: 'Erreur',
					buttons: Ext.Msg.OK,
					icon: Ext.MessageBox.ERROR,
					msg: 'fcbm.component.showGrid: Mauvais imgWallId !'
				});
				return;
			}
			
			var panelHeight = imgWallDefaultTinyHeight * nRow + 2;
			var panelWidth = imgWallDefaultTinyWidth * nCol + 2;
			
			var curCol = 1;
			var table = '<table cellspacing="0" cellpadding="0"><tr>'
			for (var i=0; i<imagesArray.length; i++) {
				if (i > 0 && i == curCol * nCol) {
					table += '</tr><tr>';
					curCol++;
				}
				var img = imagesArray[i];
				table += '<td><div id="img'+imgWallId+'_'+img.id+'" style="position:relative;"><img src="'+img.url+'" width="'+imgWallDefaultTinyWidth+'" height="'+imgWallDefaultTinyHeight+'" border="0" /></td>';
			}
			table += '</tr></table>';
			
			var gridPanel = {
				xtype: 'panel',
				id: 'grid' + imgWallId + '_panel',
				border: false,
				html: table
			};
			var wallContent = null;
			if (imgWallId == 'Wall1') {
				wallContent = {
					xtype: 'panel',
					items: [{
						xtype: 'panel',
						html: "<div align=\"center\" id=\"mention-imageWall\">Sélectionnez le nom puis cliquez sur la cellule. Pour passer en fort grossissement, double-cliquez sur l'image hors cellule nucléée.</div>"
					},
					{
						xtype: 'panel',
						layout: 'column',
						items: [
							this.getPanelFormuleLeuco('Grid'),
							gridPanel
						]
					}]					
				};			
			} else {
				wallContent = gridPanel;
			}
			
			var panelWall = new Ext.Panel({
				xtype: 'panel',
				id: 'panel' + imgWallId,
				title: "Mur d'images",
				header: false,
				border: false,
				items: [
					wallContent
				]
			});
			
			this.gridCmp = panelWall;
			
			// Pour chaque image si on double clique on ouvre le composant de zoom sur l'image
			var dblClickAction = function () {
				for (var i = 0; i < this.params.imagesArray.length; i++) {
					var img = this.params.imagesArray[i];

					Ext.get('img'+this.params.imgWallId+'_' + img.id).on('dblclick', 
						function () {
							this.imgWallCmp.zoomTo(this.params.imgWallId, this.params.imagesArray, this.img.id)
						},
						{img: img, params: this.params, imgWallCmp: this.imgWallCmp}
					);
				}
			};
			
			var createImgAnnotations = function () {
				for (var i = 0; i < this.params.imagesArray.length; i++) {
					var img = this.params.imagesArray[i];
					this.imgWallCmp.initialConfig.imgAnnotationMgr.createImgAnnotation (img.id, 'img'+this.params.imgWallId+'_'+img.id, fcbm.model.ImageAnnotationConfig.GRID);
				}
			};
			
			this.gridCmp.on('render', function () {
				dblClickAction.defer(200, {params: this.params, imgWallCmp: this.imgWallCmp});
				if (this.params.imgWallId == 'Wall1')
					createImgAnnotations.defer(200, {params: this.params, imgWallCmp: this.imgWallCmp});
			}, {params: paramsGrid, imgWallCmp: this});
			
			return this.gridCmp;
		}, 
		
		/*
		 * 
		 */
		zoomTo: function (imgWallId, imagesArray, imgId) {
			var paramsGrid = {imgWallId: imgWallId, imagesArray: imagesArray};
			var tabPanel = this.initialConfig.parentCmp;
			var imgWallZoomId = ''; 
			var tabPos = 0;
			var imgWallZoomTitle = '';
			if (imgWallId == 'Wall1') {
				imgWallZoomId = 'tabZoom_ImgWall1';
				tabPos = 4;
				imgWallZoomTitle = "Mur d'images (Zoom)";
			} else {
				imgWallZoomId = 'tabZoom_ImgWallX';
				tabPos = tabPanel.items.length;
				imgWallZoomTitle = "Image (Zoom)";
			}
			
			var nbImg = imagesArray.length;
			var curImgIdx = 0;
			var img = null;
			for (var i=0; i<nbImg; i++) {
				if (imgId == imagesArray[i].id) {
					img = imagesArray[i];
					curImgIdx = i;
					break;
				}
			}
			
			var navigateToImg = function(){
				if (this.imgIdx < 0)
					this.imgIdx = 0;
				if (this.imgIdx > this.params.imagesArray.length-1)
					this.imgIdx = this.params.imagesArray.length-1;
				var imgId = this.params.imagesArray[this.imgIdx].id;				
				this.imgWallCmp.zoomTo(this.params.imgWallId, this.params.imagesArray, imgId);
			}
			
			// On teste si l'onglet existe déjà
			if (tabPanel.findById(imgWallZoomId) != null) {
				tabPanel.remove(imgWallZoomId);
			}
			
			var zoomPanel = {
				xtype: 'panel',
				border: false,
				items: [
				{
					xtype: 'panel',
					border: false,
					autowidth: true,
					autoheight: true,
					html: '<div id="imgZoom' + imgWallId + '_' + img.id + '"><img src="' + img.url + '" width="' + imgWallDefaultWidth + '" height="' + imgWallDefaultHeight + '" border="0" />'
				}, {
					xtype: 'panel',
					layout: 'column',
					width: imgWallDefaultWidth,
					border: false,
					style: 'margin-top: ' + defaultCSSMargin,
					items: [{
						xtype: 'panel',
						border: false,
						width: (imgWallDefaultWidth - 450)/2,
						html: '&nbsp;'
					}, {
						xtype: 'panel',
						border: false,
						width: 90,
						items: [{
							xtype: 'button',
							text: 'Première',
							scope: {
								imgWallCmp: this,
								params: paramsGrid,
								imgIdx: 0
							},
							handler: navigateToImg
						}]
					}, {
						xtype: 'panel',
						border: false,
						width: 90,
						items: [{
							xtype: 'button',
							text: 'Précédente',
							scope: {
								imgWallCmp: this,
								params: paramsGrid,
								imgIdx: curImgIdx - 1
							},
							handler: navigateToImg
						}]
					}, {
						xtype: 'panel',
						border: false,
						html: '<div class="navigationImages">' + (curImgIdx + 1) + '/' + nbImg + '</div>',
						width: 90
					}, {
						xtype: 'panel',
						border: false,
						width: 90,
						items: [{
							xtype: 'button',
							text: 'Suivante',
							scope: {
								imgWallCmp: this,
								params: paramsGrid,
								imgIdx: curImgIdx + 1
							},
							handler: navigateToImg
						}]
					}, {
						xtype: 'panel',
						border: false,
						items: [{
							xtype: 'button',
							text: 'Dernière',
							columnWidth: 90,
							scope: {
								imgWallCmp: this,
								params: paramsGrid,
								imgIdx: imagesArray.length - 1
							},
							handler: navigateToImg
						}]
					}, {
						xtype: 'panel',
						border: false,
						items: [{
							xtype: 'panel',
							border: false,
							width: (imgWallDefaultWidth - 450)/2,
							html: '&nbsp;'
						}]
					}]
				}]
			};
			
			var wallContent = null;
			if (imgWallId == 'Wall1') {
				wallContent = {
					xtype: 'panel',
					layout: 'column',
					items: [
						this.getPanelFormuleLeuco('Zoom'),
						zoomPanel
					]
				};
			} else {
				wallContent = zoomPanel;
			}

			var panelZoom = new Ext.Panel({
				xtype: 'panel',
				id: imgWallZoomId,
				title: imgWallZoomTitle,
				closable: true,
				autoScroll: true,
				frame: true,
				bodyStyle: 'padding:5px 5px 0',
				items: [
					wallContent
				]
			});

			tabPanel.insert(tabPos, panelZoom);
			
			var createImgAnnotations = function () {
				this.imgWallCmp.initialConfig.imgAnnotationMgr.createImgAnnotation (imgId, 'imgZoom'+this.params.imgWallId+'_'+imgId, fcbm.model.ImageAnnotationConfig.ZOOM);
			};
			
			var updatePanelCount = function () {
				this.imgWallCmp.initialConfig.imgAnnotationMgr.updatePanelCount();
			};
			
			panelZoom.on('render', function () {
				if (this.params.imgWallId == 'Wall1') {
					createImgAnnotations.defer(200, {
						params: this.params,
						imgWallCmp: this.imgWallCmp
					});
					updatePanelCount.defer(200, {
						params: this.params,
						imgWallCmp: this.imgWallCmp
					});
				}
			}, {params: paramsGrid, imgWallCmp: this});
			
			tabPanel.setActiveTab(imgWallZoomId);
			tabPanel.render();

		},
		
		/*
		 * showFormuleLeuco
		 */
		getPanelFormuleLeuco: function (mode) {
			
			if (mode != 'Grid' && mode != 'Zoom') {
				alert('Error: getPanelFormuleLeuco... Invalid mode');
				return;
			}
			
			var panel_formLeuco_radioColumn = new Ext.Panel({
				id: 'panel'+mode+'_formLeuco_radioColumn',
				layout: 'form',
				bodyBorder: false,
				width: 80,
				items: [{
					xtype: 'panel',
					height: formuleLeucoLineHeight,
					bodyBorder: false,
					html: ''
				}] 
			});
			
			var panel_formLeuco_countColumn = new Ext.Panel({
				xtype: 'panel',
				layout: 'form',
				id: 'panel'+mode+'_formLeuco_countColumn',
				bodyBorder: false,
				width: 45,
				items: [{
					xtype: 'panel',
					height: formuleLeucoLineHeight,
					bodyBorder: false,
					bodyStyle: 'padding-top: 6px; padding-left: 12px;',
					html: 'Nb'
				}] 
			});
			
			var data = this.initialConfig.document.formuleLeuco.getDataObjects();

			// ToolTip			
			var setQuicktips = function () {
				var qtip = Ext.QuickTips.getQuickTip();
				for (var i = 0; i < this.data.length; i++) {
					var el = Ext.get('x-form-el-radio'+this.mode+'_'+this.data[i].id).child('label');
					qtip.register({
						target: el,
						trackMouse: true,
						text: this.data[i].name
					});
				}
			};
			panel_formLeuco_radioColumn.on('render', function () {
				setQuicktips.defer(500, {data: data, mode: mode});
			}, {data: data, mode: mode});

			var cellIdSel = this.initialConfig.imgAnnotationMgr.getCellIdSelected();
			for (var i=0; i<data.length; i++) {
				var radioName = 'radio'+mode+'_'+data[i].id;
				var checked = (data[i].id == cellIdSel ? true : false);
				panel_formLeuco_radioColumn.add({
					xtype: 'radio',
					id: radioName,
					boxLabel: data[i].abbrev,
					inputValue: data[i].id,
					name: 'radio'+mode,
					checked: checked,
					hideLabel: true,
					height: 22,
					style: 'margin-top: 3px; margin-left: 10px',
					listeners: {
						'check':
						{
							fn: function (field, checked) {
								if (checked == true)
									this.initialConfig.imgAnnotationMgr.setCellIdSelected(field.inputValue);
							},
							scope: this
						}
					}
				});
				panel_formLeuco_countColumn.add({
					xtype: 'textfield',
					hideLabel: true,
					id: 'text'+mode+'_'+data[i].id,
					readOnly: true,
					value: '0',
					width: 30,
					style: 'margin-left: 6px;'
				});
			}
			
			var panel = {
				title: 'Formule leucocytaire',
				xtype: 'panel',
				width: 135,
				items: [{
					xtype: 'panel',
					layout: 'column',
					id: 'panelFormLeuco'+mode,
					bordel: false,
					items: [
						panel_formLeuco_radioColumn,
						panel_formLeuco_countColumn
					]	
				},
				{
					xtype: 'button',
					id: 'btn-anoCyto'+mode,
					disabled: (document.currentFile.modeSolution == false ? false : true),
					style: 'margin-top: 62px',
					minWidth: 120,
					tooltip: "Modifier la liste",
					handler: function(button, event){
						document.loaderTimeOut = false;
						setTimeout(function () {
							document.loaderTimeOut = true;
						}, timeOutRenderList);
						document.loader = new fcbm.component.Loader("Chargement de la liste", ["document.loaderTimeOut"]);
						var showList = function(){
							new fcbm.component.List({
								id: 'window_List',
								itemName: 'Anomalies cytologiques',
								title: 'Liste des anomalies cytologiques',
								list: document.listes.liste_CytoSigns,
								gridId: 'grid_liste_annoCyto',
								forceCategoryNameTo: null,
								type: 'annoCyto'
							}).show();
						};
						showList.defer (deferTimeToShowLoader, this);
					},
					text: 'Anomalies cyto.'
				}]
				
			};
			

			
			return panel;
		}

	}
}