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.parent (props);
		this.fullImage = new Htk.FullImage ();
	}

	,render: function (tr)
	{
		var td = this.parent (tr);
		
		var className = 'cell-image';
		
		if (td.className)
			className = td.className +' '+ className;
		
		td.className = className;

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

		this.setSrc (cell, true);

		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, useCache)
	{
		if (cell.value)
		{
			var url = this.basedir +'/';

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

			url += cell.value;

			if (!useCache)
				url += '?'+ new Date ().getTime ();

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

	,onImageError: function (cell)
	{
		if (!cell.error)
		{
			cell.error = true;
			cell.img.src = 'image/empty.png';
		}
	}
	
	,onMouseOver: function (cell)
	{
		var fullDir = this._fullDir ? this._fullDir : 'full';
	
		if (!cell.error)
			this.fullImage.show (this.basedir +'/'+ fullDir, cell.value);
	}
	
	,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, true);
		this.changed (cell.tr, value);
	}
	
	,onFileUpload: function (cell, editor)
	{
		this.setSrc (cell, false);
		this.popup.hide ();
	}

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