/*		File:			$URL: https://svn.cogstate.com/release/DataPoint/Trunk/src/js/calendar.js $
		Author:			$Author: dfraser $
		Revision:		$Revision: 5094 $
		Modified:		$Date: 2009-03-02 12:27:41 +1100 (Mon, 02 Mar 2009) $
		Description:	
*/

Ext.ux.faqContainer = function(container, config){
	Ext.ux.faqContainer.superclass.constructor.call(this, config);

	this.container = Ext.get(container);
	this.container.update("");
    this.id = this.container.id;
    Ext.apply(this, config);
	this.render(this.container);
};

Ext.extend(Ext.ux.faqContainer, Ext.Component, {

	/**
	 * @cfg {Number} minChars Minimum characters to type before the request is made. If undefined (the default)
	 * the trigger field shows magnifier icon and you need to click it or press enter for search to start. If it
	 * is defined and greater than 0 then maginfier is not shown and search starts after minChars are typed.
	 * (defaults to undefined)
	 */
	minChars: 4,
	bindUrl: null,
	paramNames: {
		fields:'fields',
		query:'query'
	},
	initComponent : function(){
		Ext.ux.faqContainer.superclass.initComponent.call(this);
		var tpls = this.templates || {};
		if(!tpls.master){
		    tpls.master = new Ext.Template(
		    		'<div style="width:100%; position:static;" class="x-layout-panel11">',
		    		'	<div id="search-tb"></div>',
		    		'	<div id="search-results" class="search-results"></div>',
		    		'	<div id="page-tb"></div>',
		    		'</div>'
		    );
		    tpls.master.disableformats = true;
		}
		this.templates = tpls;
	    this.ds = new Ext.data.Store({
	        proxy: new Ext.data.HttpProxy({url: this.bindUrl}),
	        reader: new Ext.data.JsonReader({root: 'records', totalProperty: 'recordcount', id: 'id'},
	        [{name: 'questionid'}, {name: 'question'}, {name: 'answer'}]),
	        baseParams: {limit:5 }
	    });
	},

	onRender : function(container, position){
		Ext.ux.faqContainer.superclass.onRender.call(container, position); 
        var html = this.templates.master.apply();
        this.container.update(html);

        // Custom rendering Template for the View
        this.resultTpl = new Ext.Template(
                '<div class="search-item">', 
                '<div class="searchQuestion">{question}</div>', 
                '<div class="searchAnswer">{answer}</div>', 
                '</div>'
        );

        this.view = this.createChildTemplates();
        this.searchField = new Ext.app.SearchField({
        	store: this.ds,
        	width:420
        });

        var tb = this.createToolBar();
        this.searchField.el.on({scope:this, buffer:300, keyup:this.onKeyUp});

        if(this.height) {
        	var first = new Ext.Element(container.dom.firstChild)
            var sb = new Ext.Element(first.child('div.search-results'));
            sb.setHeight(this.height);
        }
        this.ds.load({params:{start:0, limit:5}});
        this.view.on("click", this.onClick);

	}
	/**
	 * field el keypup event handler. Triggers the search
	 * @private
	 */
	,onKeyUp:function() {
		var length = this.searchField.getValue().toString().length;
		if(0 === length || this.minChars <= length) {
			this.searchField.onTrigger2Click();
		}
	}
	
	,onClick: function(vw, index, node, e) {
        //console.log(node.nodeIndex);
	}

	,createChildTemplates: function() {
		return new Ext.View('search-results', this.resultTpl, {store: this.ds});
	}
	
	,createToolBar: function() {
		return new Ext.Toolbar('search-tb', ['FAQ Search: ', ' ', this.searchField]);
	}
});


/**
 * The custom search field
 */
Ext.app.SearchField = Ext.extend(Ext.form.TwinTriggerField, {

	initComponent : function(){
        Ext.app.SearchField.superclass.initComponent.call(this);
        this.on('specialkey', function(f, e){
            if(e.getKey() == e.ENTER){
                this.onTrigger2Click();
            }
        }, this);
    },

    validationEvent:false,
    validateOnBlur:false,
    trigger1Class:'x-form-clear-trigger',
    trigger2Class:'x-form-search-trigger',
    hideTrigger1:true,
    width:180,
    hasSearch : false,
    paramName : 'query',

    onTrigger1Click : function(){
        if(this.hasSearch){
            var o = {start: 0};
            o[this.paramName] = '';
            this.store.reload({params:o});
            this.el.dom.value = '';
            this.triggers[0].hide();
            this.hasSearch = false;
        }
    },

    onTrigger2Click : function(){
        var v = this.getRawValue();
        if(v.length < 1){
            this.onTrigger1Click();
            return;
        }
        var o = {start: 0};
        o[this.paramName] = v;
        this.store.reload({params:o});
        this.hasSearch = true;
        this.triggers[0].show();
    }
});

if(Ext.version !== undefined) {
	Ext.override(Ext.ux.faqContainer, {
		createToolBar: function() {
			return new Ext.Toolbar({
				renderTo: 'search-tb',
				items: [
		        	'FAQ Search:', ' ', this.searchField
		        ]
			});
		}

		,createChildTemplates: function() {

		    resultTpl = new Ext.XTemplate(
		    		'<tpl for=".">',
		            '<div class="search-item">', 
		            '<div class="searchQuestion">{question}</div>', 
		            '<div class="searchAnswer">{answer}</div>', 
		            '</div>',
		            '</tpl>'
		    );

			return new Ext.DataView({
				renderTo: 'search-results',
	            tpl: resultTpl,
	            store: this.ds,
	            itemSelector: 'div.search-item'
			});
		}
	});
}

var faq = new Ext.ux.faqContainer('faqContent', {bindUrl: '/com/cogstate/support/rpcSupport.cfc?method=getQuestions', height: 420});