dojo.provide("epages.cartridges.de_epages.presentation.widget.FilenameInput");
dojo.require("epages.widget.LocalizedWidget");
dojo.require("epages.widget.FormElement");

dojo.declare(
	"epages.cartridges.de_epages.presentation.widget.FilenameInput",
	[epages.widget.LocalizedWidget],
	{
		/**
		 * dojo widget properties
		 */
		widgetsInTemplate  : true,
		templateString     : '',
		templateType       : 'normal',
		defaultTemplateType: 'normal',
		templatePath       : dojo.moduleUrl('epages.cartridges.de_epages.presentation.widget','templates/FilenameInput.html'),
		translationName    : dojo.moduleUrl('epages.cartridges.de_epages.presentation.widget','templates/translation'),

		/**
		 * private properties
		 */
		_currentValue      : '',

		/**
		 * public properties
		 */
		filepath					 : '',
		filename					 : '',
		fileext						 : '',
		inputname					 : '',
		showAsInput				 : false,
		markAsError				 : false,

		postMixInProperties: function() {
			this.inherited("postMixInProperties", arguments);
			// append slash
			if(this.filepath) {
				this.filepath += '/';
			}
		},

		postCreate: function() {
			// summary: Connect to the file name text / input events.
			// description: Connects to the user events for click, blur and keyup. Adds events for
			//		the file name text and the file name input as well as for the little edit icon.
			this.inherited("postCreate", arguments);
			// use the FormElement widget
			nodeInputTitle = new epages.widget.FormElement({}, this.nodeInputTitle).elementNode;
			// change name events
			this.connect(this.nodeTitle,      'click', '_onClickItem');
			this.connect(this.nodeInputTitle, 'blur', '_onLeaveItem');
			this.connect(this.noteEditButton, 'click', '_onClickImage');
			this.connect(this.nodeInputTitle, 'keyup', '_onKeyUp');
			this.connect(this.nodeInputTitle, 'change', '_adjustInputWidth');

			// show the input field instead of the text from the beginning,
			// i.e. when the template caught an FormError
			if(this.showAsInput) {
				this._onClickItem();
				setTimeout(dojo.hitch(this, function() {
					this._adjustInputWidth();
				}), 1);

			}
			// add dialog error, i.e. when the template caught an FormError
			if(this.markAsError) {
				dojo.addClass(this.nodeInputTitle,"DialogError");
			}
		},

		_onKeyUp: function(evt) {
			// summary: Care for DialogError if error present and Copy input value to hidden input.
			// description: Mark dialog field as erroneous if empty value. Copy the updated input
			//		value to the hidden input field.
			if(!this.nodeInputTitle.value){
				dojo.addClass(this.nodeInputTitle,"DialogError");
			} else {
				dojo.removeClass(this.nodeInputTitle,"DialogError");
				if (evt.keyCode == dojo.keys.ENTER) {this._selectItem()}
			}
			this.nodeHiddenName.value = this.nodeInputTitle.value;
			this._adjustInputWidth();
		},

		_onClickImage: function(evt) {
			// summary: Handler for click event on the small edit pen icon.
			// description: Executes same action as click on the filename text does.
			this._onClickItem();
			dojo.stopEvent(evt);
		},

		_onClickItem: function() {
			// summary: Change the file name text span into an input field.
			// description: Hides the file name text and shows a input field with the filename instead.
			this._currentValue = this.filename;
			this._adjustInputWidth();

			if(!this.markAsError) {
				dojo.removeClass(this.nodeInputTitle,"DialogError");
			}
			dojo.addClass(this.nodeTitle, "HideElementSoft");
			dojo.removeClass(this.nodeInputTitle, "HideElementSoft");
			dojo.removeClass(this.nodeInputTitle.parentNode, "HideElementSoft");
			dojo.addClass(this.noteEditButton, "HideElementSoft");

			this.nodeInputTitle.focus();
			this.nodeInputTitle.select();

			setTimeout(dojo.hitch(this, function() {
				this.nodeInputTitle.removeAttribute("focused");
				this.nodeInputTitle.className += '';
			}), 1);
		},

		_onLeaveItem: function() {
			// summary: Event handler for leaving the file name input field.
			// description: If the input value did nit change, hide the file name input field and show
			//		the file name text again. If the value in the input field has changed, keep the input
			//		field and mark it as changed.
			if(this._currentValue == this.nodeInputTitle.value && !this.markAsError) {
				// nothing changed, so hide the input again
				dojo.addClass(this.nodeInputTitle, "HideElementSoft");
				dojo.removeClass(this.nodeTitle, "HideElementSoft");
				dojo.removeClass(this.noteEditButton, "HideElementSoft");
			}
		},

		_adjustInputWidth: function() {
			// summary: Adjust the width of the input element.
			// description: The input width will be recalculated as the user types in a new value.
			this.nodeInputTitleWidthCalculator.innerHTML = this.nodeInputTitle.value || this._currentValue;
			this.nodeInputTitle.style.width = this.nodeInputTitleWidthCalculator.offsetWidth + 10 + "px";
		}

	}
);