Htk.Image = new Class
({
	Extends: Htk.Entry
	,Tag: 'htk-image'
	
	,empty: false
	,file: null

	,initialize: function (props)
	{
		this.parent (props);
		this.node = document.getElementById (nodeId);
		this.node.addEventListener ('error', this.error.bind (this));
	}

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

	,render: function (force)
	{
		if (this.realValue)
		{
			this.file = this.realValue + '.png';

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

			this.empty = false;
			this.node.src = this.url + '/' + this.file;
		}
		else
		{
			this.file = null;
			this.error ();
		}
	}

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

	,setShowFull: function (show)
	{
		if (show)
		{
			var obj = this;
			this.node.addEventListener ('mouseover',
				function () { obj.mouseOver () }, false);
			this.node.addEventListener ('mouseout',
				function () { obj.mouseOut () }, false);
		}
	}

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

	,dblClicked: function (event)
	{
		var form = htkImageForm.node;
		form.style.top = getPageYOffset () + (event.clientY - 80) + 'px';
		form.style.left = (event.clientX + 30) + 'px';
		document.body.appendChild (form);
		htkImageForm.load (this);
	}

	,mouseOver: function ()
	{
		if (!this.empty)
			htkImageFull.show (this.url + '/../full', this.file);
	}

	,mouseOut: function ()
	{
		if (!this.empty)
			htkImageFull.hide ();
	}
});