/**
 * Class to display or edit an image. Also it allows to show it's full version.
 **/
var fullImage = null;
 
Htk.Image = new Class
({
	Extends: Htk.Field
	,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;
			}
		},
		/**
		 * The directory where the images are allocated.
		 **/
		subdir:
		{
			type: String
			,set: function (x)
			{
				this._subdir = x;
				this.render (false);
			}
			,get: function ()
			{
				return this._subdir;
			}
		},
		/**
		 * Whether to show the full image when mouse hover.
		 **/
		showFull:
		{
			type: Boolean
			,set: function (x)
			{
				if (x && !this._fullImage)
				{
					if (!fullImage)
						fullImage = new Htk.FullImage ();
				
					this._fullImage = fullImage;
					this.node.addEventListener ('mouseover', this.onMouseOver.bind (this));
					this.node.addEventListener ('mouseout', this.onMouseOut.bind (this));
				}
				
				this._showFull = x;
			}
			,get: function ()
			{
				return this._showFull;
			}
		},
		/**
		 * Subdirectory where full images are allocated.
		 **/
		fullDir:
		{
			type: String
			,set: function (x)
			{
				this._fullDir = x;
			}
			,get: function ()
			{
				return this._fullDir;
			}
		}
	}

	,_directory: null
	,_subdir: null
	,_basedir: null
	,_empty: false
	,_showFull: false
	,_fullDir: null

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

		this.parent (props);
	}

	,_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 +'/';

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

			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);
	}

	,onMouseOver: function (cell)
	{
		if (!this._showFull)
			return;
	
		var src = this._fullDir ? this._fullDir : 'full';
		src += '/'+ this._value;

		if (this._stamp)
			src += '?'+ this._stamp;
	
		if (!cell.error)
			this._fullImage.show (this._basedir +'/'+ src);
	}
	
	,onMouseOut: function ()
	{
		this._fullImage.hide ();
	}

	,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);
	}
});