Htk.Image = new Class
({
	Extends: Htk.Entry
	,Tag: 'htk-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;
				this.render (false);
			}
			,get: function ()
			{
				return this._directory;
			}
		}
	}

	,_directory: null
	,basedir: null
	,empty: false

	,initialize: function (props)
	{
		this.parent (props);
		this.createElement ('img');
//		this.node.addEventListener ('error', this.onImageError.bind (this));
	}

	,onImageError: function ()
	{
		if (!this.empty)
		{
			this.empty = true;
			this.node.src = 'image/empty.png';
		}
	}

	,render: function (force)
	{
		if (this._value)
		{
			var url = '';
		
			if (this.basedir)
				url += this.basedir +'/';

			url += this._value;

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

			this.empty = false;
			this.node.src = url;
			this.node.style.display = '';
		}
		else
		{
			delete this.node.src;
			this.node.style.display = 'none';
		}
	}

	,putValue: function (value)
	{
		this.render (false);
	}

	,setShowFull: function (show)
	{
		if (show)
		{
			this.fullImage = new Htk.FullImage ();
			this.node.addEventListener ('mouseover', this.onMouseOver.bind (this));
			this.node.addEventListener ('mouseout', this.onMouseOut.bind (this));
		}
	}

	,setEditable: function (editable) 
	{
		if (editable)
		{
			var obj = this;
			this.style.cursor = 'pointer';
			this.node.addEventListener ('dblclick',
				this.onDoubleClick.bind (this));
		}
	}

	,onDoubleClick: function (event)
	{
		var editor = new Htk.ImageEditor ();
		editor.setData (cell.value, this._directory);

		this.popup = new Htk.Popup ();
		this.popup.setChild (editor);
		this.popup.show (this.node);
	}

	,onMouseOver: function (cell)
	{
		if (!cell.empty)
			this.fullImage.show (this.basedir, cell.value);
	}
	
	,onMouseOut: function ()
	{
		this.fullImage.hide ();
	}
});