Ext.ns('App');

App.commentTpl = new Ext.Template(
	'<div class="comment" id="comment-{id}">'
		,'{comment}'
			,'<div class="date">{date}</div>'
	,'</div>'
);


App.requestSuccessFn = function(response, opts, type, mode){
	try{var ret = Ext.decode(response.responseText);}
	catch(e){alert('Error decoding response'); return false;}
	if(type == 'comments'){//***********************************************
		if(mode == 'create'){//*********************
			var cP = Ext.get('comments-place');
			if(!Ext.isEmpty(cP)){
				var cF = Ext.get('comment-field');
				cF.dom.value = '';
				App.showErrorMessage('comment-field-error');
				(function(){cF.focus(); cF.blur();}).defer(100, this);
				var newI = App.commentTpl.append(cP, ret.data, true);
				newI.setDisplayed(false);
				newI.slideIn('t');
				//newI.fadeIn();
			}
		}//*********************
	}//***********************************************
};

App.sendRequest = function(comment, type, mode, callback){
	Ext.Ajax.request({
		 url: '/app/app.php/'+type+'/'+mode
		,callback: callback
		,success: function(response, opts){
			App.requestSuccessFn(response, opts, type, mode);
		}
		//,failure: otherFn
		,params: {
			data: Ext.encode({
				 comment: comment
				,item_id: Server.itemId
			})
		}
	});
};

App.showErrorMessage = function(id, message){
	var cFe = Ext.get(id);
	cFe.setVisibilityMode(Ext.Element.DISPLAY);
	
	if(!Ext.isEmpty(cFe)){
		var cFeM = cFe.child('.message');
		if(!Ext.isEmpty(cFeM)){
			if(cFe.isVisible() && !Ext.isEmpty(message)){
				//console.log('return false');
				return false;
			} else if(cFe.isVisible() && Ext.isEmpty(message)){
				//console.log('slideOut');
				//console.log(cFe.isVisible());
				/*
				cFe.stopFx().slideOut('t', {
					 remove: false
					,easing: 'easeOut'
					,duration: .5
					,callback: function(){
						cFeM.dom.innerHTML = '';
					}
					//,scope: this
				});*/
				cFe.stopFx().fadeOut({
					 easing: 'easeOut'
					,callback: function(){
						cFeM.dom.innerHTML = '';
					}
				});
			} else if(!cFe.isVisible() && !Ext.isEmpty(message)){
				//console.log('slideIn');
				cFeM.dom.innerHTML = message;
				/*cFe.stopFx().slideIn('t', {
					 easing: 'easeOut'
					,duration: .5
				});*/
				cFe.stopFx().fadeIn({
					 easing: 'easeOut'
				});
 			}
		}
	}
};

Ext.onReady(function(){

	// проапплим эвенты на редактор
	var cF = Ext.get('comment-field');
	if(!Ext.isEmpty(cF)){
		cF.dom.value = cF.getAttribute('title');
		var h = cF.getHeight();
		
		cF.on('focus', function(e, t, o){
			if(cF.dom.value == cF.getAttribute('title'))
				cF.dom.value = '';
			cF.stopFx().scale(cF.getWidth(), h + 14);
		});
		
		cF.on('blur', function(e, t, o){
			if(cF.dom.value == ''){
				cF.dom.value = cF.getAttribute('title');
			}
			if(cF.dom.value == '' || cF.dom.value == cF.getAttribute('title'))
				cF.stopFx().scale(cF.getWidth(), h);
		});
		
		cF.on('keyup', function(e, t, o){
			if(cF.dom.value.length > 255){
				App.showErrorMessage('comment-field-error', 'Ваш комментарий слишком длинный.');
			} else if(cF.dom.value == ''){
				App.showErrorMessage('comment-field-error');
			} else {
				App.showErrorMessage('comment-field-error');
			}
		}
		,this
		,{
			 delay: 200
			//,stopEvent: true
		});
	}
	
	// проапплим эвенты на кнопочку "Готово"
	var cBtn = Ext.get('comment-add-button');
	if(!Ext.isEmpty(cBtn)){
		cBtn.on('click', function(e, t, o){
			if(cF.dom.value == '' || cF.dom.value == cF.getAttribute('title')){
				cF.focus();
			} else {
				cBtn.dom.disabled = true;
				cF.dom.disabled = true;
				App.sendRequest(cF.dom.value, 'comments', 'create', function(){
					cBtn.dom.disabled = false;
					cF.dom.disabled = false;
				});
				
			}
		});
	}
	
	// проапплим эвенты на кнопочку "Очистить"
	var clBtn = Ext.get('comment-clear-button');
	if(!Ext.isEmpty(clBtn)){
		clBtn.on('click', function(e, t, o){
			cF.dom.value = '';
			cF.focus();
			App.showErrorMessage('comment-field-error');
		});
	}
	
	/*
	var cP = Ext.get('comments-place');
	if(!Ext.isEmpty(cP)){
		App.sendRequest(cF.dom.value, 'comments', 'create', function(){
			cBtn.dom.disabled = false;
			cF.dom.disabled = false;
		});
	}
	*/
	
});