KONtx.control.TextEntryButtonMOD = new KONtx.Class({
	ClassName: 'ControlTextEntryButton',
	Extends: KONtx.control.TextEntryButton,
	_buildOverlay: function (current_value) {
		this._TextEntryOverlay = new KONtx.control.TextEntryOverlayMOD({
			creator: this,
			styles: {width:960,height:540},
                        innerStyles: {width:294,height:465, hAlign: 'center', vAlign: 'middle'}
		}).appendTo( this.getView() ).show();
	}
});

KONtx.control.TextEntryOverlayMOD = new KONtx.Class({
	ClassName: 'ControlTextEntryOverlay',
	Extends: KONtx.control.TextEntryOverlay,
	_createContent: function () {
		KONtx_automation_log("function","KONtx.control.TextEntryOverlay","_createContent");
		
		var self = this,
			view = this.config.creator.getView(),
			baseID = this._ktxID;
		
		if (!view) {
			throw '!!! no view found for this '+this.ClassName+' config.creator !!!';
			return
		}
		
		print('OverlayStyles: '+$dump(this.config,innerStyles));
		
		this.setStyles(this.config.styles);
		
		var bound  = {
				cancel: (function(){
					this.log(':: cancel from overlay');
					var value = this.getValue(),
						callback = this._hideOverlay.bindTo(this),
						packet = {
							value: value,
							cancelCallback: callback
						};
					if (this.config.creator.fire('onCancel',packet)) {
						this._hideOverlay();
					}
				}).bindTo(this),
				edit: (function (event){
					this.vlog(':: onValueEdited (new value: "'+event.payload.value+'")');
					this.fire('onValueEdited',{value:event.payload.value});
				}).bindTo(this)
			},
			controlStyles = Theme.getStyles('ControlTextEntryButton'),
			labelStyles = Theme.getStyles('ControlTextEntryButtonLabel'),
			valueStyles = Theme.getStyles('ControlTextEntryButtonValue'),
			intl        = KONtx.utility.INTL.get,
			submitText  = this.config.creator.config.submitButtonLabel || intl('OK'),
			cancelText  = this.config.creator.config.cancelButtonLabel || intl('Cancel'),
			bpad        = Theme.storage.get('ControlTextEntryButton').submitButtonPadding;
		
		this._overlay = new KONtx.element.Core({
			id: baseID+'.overlay',
			styles: {
				backgroundColor: this.config.creator.config.overlayBackgroundColor,
				width:  	self.width,
				height: 	self.height,
				vOffset:	self.vOffset,
				hOffset:	self.hOffset
			}
		}).hide();
		
		for (var n=0, node; node=view.element.childNodes.item(n); n++) {
			node._allowNavigation = node.allowNavigation;
			node.allowNavigation = false;
		}
		
		this._overlay.element.addEventListener('gainfocus', this._checkCursorVisibility.bindTo(this), true);
		
		view.appendChild( this._overlay.element );
		
		this._form = new KONtx.element.Container({
			id: baseID+'.overlay.form',
			styles: $merge(this.config.innerStyles,{backgroundColor: this.config.creator.config.formBackgroundColor})   //this is main modification to the class
		}).appendTo( this._overlay );
		
		var clearKey = 'ControlTextEntryOverlayClearButton';
		
		this._clearButton = new KONtx.element.Button({
			ClassName: clearKey,
			guid: baseID+'.overlay.clearButton',
			styles: Theme.getStyles(clearKey),
			events: {
				onFocus:    this._onClearButtonFocus.bindTo(this),
				onBlur:     this._onClearButtonBlur.bindTo(this),
				onNavigate: this._onClearButtonNavigate.bindTo(this),
				onSelect:   this._onClearButtonSelect.bindTo(this)
			}
			
		}).appendTo(this._form);
		
		this._clearButton.renderSkin(clearKey,'normal',1);
		
		valueStyles.width = valueStyles.width - this._clearButton.width;
		
		var hlKey = 'ControlTextEntryOverlayTextHighlight';
		
		this._textHighlight = new KONtx.element.Container({
			ClassName: hlKey,
			focus: false,
			styles: Theme.getStyles(hlKey)
		}).appendTo(this._form);
		
		this._textHighlight.renderSkin(hlKey,'normal');
		this._textHighlight.hide();
		
		this._keyOutput = new KONtx.element.TextField({
			label: '',
			guid: baseID+'.overlay.keyOutput',
			styles: valueStyles,
			focus: this._isCursorSupported(),
			events: {
				onNavigate: this._onTextFieldNavigate.bindTo(this),
				onKeyDown:  this._onTextFieldKeyDown.bindTo(this),
				onFocus:    this._onTextFieldFocus.bindTo(this),
				onBlur:     this._onTextFieldBlur.bindTo(this)
			}
		}).appendTo( this._form );
		
		delete labelStyles.width;
		delete labelStyles.height;
		
		this._outputLabel = new KONtx.element.Text({
			id: baseID+'.overlay.label',
			label: this.config.creator.config.label,
			styles: labelStyles
		}).appendTo( this._form );
		
		var keyconfig = KONtx.Class.helpers.merge(this.config.creator.config.keyboard, {
			id: baseID+'.overlay.keycaps',
			embedded: false,
			styles: {
				width: self.width,
				vAlign: 'bottom',
				controlSize: 'standard'
			},
			events: {
				onKeyDown: this._onKeycapKeyDown.bindTo(this)
			}
		});
		
		this._keycaps = new KONtx.control.Keyboard(keyconfig).appendTo( this._form );
		
		this._submit = new KONtx.control.TextButton({
			id: baseID+'.overlay.submit',
			label: submitText,
			styles: {
				vAlign: 'bottom'
			},
			events: {
				onSelect: this._onSubmitSelected.bindTo(this)
			}
		}).appendTo( this._form );
		
		this._cancel = new KONtx.control.TextButton({
			id: baseID+'.overlay.cancel',
			label: cancelText,
			styles: {
				vAlign: 'bottom'
			},
			events: {
				onNavigate: function (event) {
					if (event.payload.direction == 'down') {
						event.preventDefault();
					}
				},
				onSelect: bound.cancel
			}
		}).appendTo( this._form );
		
		this._form.height = this._keycaps.height + controlStyles.height + bpad;
		this._form.renderSkin(this.ClassName);
		this._form.height += this._cancel.height + this._submit.height;
		this._submit.vOffset = this._form.height - this._cancel.height;
		this._keycaps.vOffset = this._submit.vOffset - this._submit.height - bpad;
	},
	
});