Htk.ColumnImage = new Class
({
	Extends: Htk.Column
	,Tag: 'htk-column-image'
	,Properties:
	{
		/**
		 * The directory where the images are allocated.
		 **/
		directory:
		{
			type: String
			,set: function (x)
			{
				this._directory = x;
				this._basedir = Vn.Config['image_dir'] +'/'+ x;
			}
			,get: function ()
			{
				return this._directory;
			}
		},
		/**
		 * The directory where the images are allocated.
		 **/
		subdir:
		{
			type: String
			,value: null
		},
		/**
		 * Whether to show the full image when mouse hover.
		 **/
		showFull:
		{
			type: Boolean
			,value: false
		},
		/**
		 * Subdirectory where full images are allocated.
		 **/
		fullDir:
		{
			type: String
			,set: function (x)
			{
				this._fullDir = x;
			}
			,get: function ()
			{
				return this._fullDir;
			}
		}
	}
	
	,_directory: null
	,_basedir: null
	
	,initialize: function (props)
	{
		this._cssClass = 'cell-image';
		this._fullImage = new Htk.FullImage ();
		this.parent (props);
	}

	,render: function (tr)
	{
		var td = this.parent (tr);

		var img = document.createElement ('img');
		img.alt = ''
		td.appendChild (img);
		
		var cell =
		{
			 img: img
			,value: this.value
			,tr: tr
			,error: false
			,stamp: null
		};

		this._setSrc (cell);

		if (this.showFull)
		{
			img.addEventListener ('mouseover', this._onMouseOver.bind (this, cell));
			img.addEventListener ('mouseout', this._onMouseOut.bind (this));
		}
		if (this.editable)
		{
			img.className = 'editable';
			img.addEventListener ('dblclick', this._onDoubleClick.bind (this, cell));
			img.addEventListener ('error', this._onImageError.bind (this, cell));
		}

		return td;
	}

	,_setSrc: function (cell)
	{
		if (cell.value)
		{
			var url = this._basedir +'/';

			if (this.subdir)
				url += this.subdir +'/';

			url += cell.value;

			if (cell.stamp)
				url += '?'+ cell.stamp;

			cell.img.src = url;
		}
		else
			this._onImageError (cell);
	}

	,_onImageError: function (cell)
	{
		if (!cell.error)
		{
			cell.error = true;
			cell.img.src = 'image/unknown.svg';
		}
	}
	
	,_onMouseOver: function (cell)
	{
		if (cell.error)
			return;
	
		var src = this._fullDir ? this._fullDir : 'full';
		src += '/'+ cell.value;

		if (cell.stamp)
			src += '?'+ cell.stamp;
	
		this._fullImage.show (this._basedir +'/'+ src);
	}
	
	,_onMouseOut: function ()
	{
		this._fullImage.hide ();
	}
	
	,_onDoubleClick: function (cell)
	{
		var editor = new Htk.ImageEditor ();
		editor.setData (cell.value, this._directory);	

		this.nameChangedHandler = this._onNameChange.bind (this, cell);
		editor.on ('name-changed', this.nameChangedHandler);

		this.fileUploadedHandler = this._onFileUpload.bind (this, cell);
		editor.on ('file-uploaded', this.fileUploadedHandler);

		this.editorClosedHandler = this._onEditorClose.bind (this);
		editor.on ('closed', this.editorClosedHandler);
		
		this.popup = new Htk.Popup ();
		this.popup.setChild (editor);
		this.popup.show (cell.img);
	}

	,_onNameChange: function (cell, editor, value)
	{
		cell.value = value;
		this._setSrc (cell);
		this.changed (cell.tr, value);
	}
	
	,_onFileUpload: function (cell, editor)
	{
		cell.stamp = new Date ().getTime ();
		this._setSrc (cell);
		this.popup.hide ();
	}

	,_onEditorClose: function (editor)
	{
		editor.disconnect ('name-changed', this.nameChangedHandler);
		editor.disconnect ('file-uploaded', this.fileUploadedHandler);
		editor.disconnect ('closed', this.editorClosedHandler);
	}
});