/**
* @author Diego Pereira
* @author Rodrigo Bartels
* August 20th, 2008
* Common Libray 2
*/

Ext.namespace('Ext.ux.clv2');

var simpleSearch;
var windowLO;

var showSimpleSearch = function(){
    var query = Ext.get("query").dom.value;
    //Define grids and stores.
    var gridCurricula; var gridLO; var gridCommunity;
    var dsCommunity; var dsLO; var dsCurricula;
    if(simpleSearch){simpleSearch.close();}

    var showWindow = function(dsCommunity){
        gridCommunity = new Ext.ux.clv2.SimpleSearchGrid({id:'gridCommunity', ds:dsCommunity});

        var panelLOLeft = new Ext.ux.clv2.SimpleSearchLeftPanel({items: [{html:'Learning Objects', bodyStyle:'border:none;'}]});
        var panelLORight = new Ext.ux.clv2.SimpleSearchRightPanel({id:'panelLORight', items:[gridLO]});

        var panelCurriculaLeft = new Ext.ux.clv2.SimpleSearchLeftPanel({items: [{html:'Curricula', bodyStyle:'border:none;'}]});
        var panelCurriculaRight = new Ext.ux.clv2.SimpleSearchRightPanel({id:'panelCurriculaRight', items:[gridCurricula]});

        var panelCommunityLeft = new Ext.ux.clv2.SimpleSearchLeftPanel({items: [{html:'Community', bodyStyle:'border:none;'}]});
        var panelCommunityRight = new Ext.ux.clv2.SimpleSearchRightPanel({id:'panelCommunityRight', items:[gridCommunity]});
        panelCommunityRight.addClass('ss-panel-right-last');

	    var simpleSearchBody = new Ext.ux.clv2.SimpleSearchPanelContainer({
		items:[
			new Ext.ux.clv2.SimpleSearchPanelContainer({
				id:'panelLO',
				items:[panelLOLeft, panelLORight]
			}),
			new Ext.ux.clv2.SimpleSearchPanelContainer({
				id:'panelCurricula',
				items:[panelCurriculaLeft, panelCurriculaRight]
			}),
			new Ext.ux.clv2.SimpleSearchPanelContainer({
				id:'panelCommunity',
				items:[panelCommunityLeft, panelCommunityRight]
			})
		]
	});

        simpleSearch = new Ext.ux.clv2.SimpleSearchWindow({
            id:'simple-search-window',
            width:336,
            items:[simpleSearchBody]
        });
        //simpleSearch.draggable = true;
        var relativePos = findPos(document.getElementById('query'));
        simpleSearch.setPosition(relativePos[0],relativePos[1]+22);
        if(Ext.isIE) simpleSearch.show();
        else simpleSearch.show(this);
        simpleSearch.createHeaderItems();
        /*panelLORight.createViewAllOption('optionViewAllLO','onViewAllLO');
        panelCurriculaRight.createViewAllOption('optionViewAllCurricula','onViewAllCurricula');
        panelCommunityRight.createViewAllOption('optionViewAllCommunity','onViewAllCommunity');*/
    }

    var searchUsers = function(dsCurricula){
        gridCurricula = new Ext.ux.clv2.SimpleSearchGrid({
            id:'gridCurricula', ds:dsCurricula
	    });
        dsCommunity =  new Ext.ux.clv2.SimpleSearchStore({});
        dsCommunity.load({params: {query:query, type:3}, callback:showWindow.createDelegate(this, [dsCommunity])});
    }
    
    var searchCurriculum= function(dsLO){
        gridLO = new Ext.ux.clv2.SimpleSearchGrid({id:'gridLO',
        ds:dsLO,
        listeners: {
             cellclick: function(gridLO, rowIndex, columnIndex, e){
                var record = gridLO.getStore().getAt(rowIndex); // Get the Record
//                var fieldName = gridLO.getColumnModel().getDataIndex(columnIndex); // Get field name
                showContentPreview(record.data.type,record.data.name, record.id);
            }
        }
        });
        dsCurricula =  new Ext.ux.clv2.SimpleSearchStore({});
        dsCurricula.load({params: {query:query, type:2}, callback:searchUsers.createDelegate(this, [dsCurricula])});

    }
    dsLO =  new Ext.ux.clv2.SimpleSearchStore({});
	dsLO.load({params: {query:query, type:1}, callback:searchCurriculum.createDelegate(this, [dsLO])});
}

/**
 * This Function is used when the user press the enter key in the Login Panel(index.jspx)
 **/
function handleKeyPressSimpleSearch(evnt){
    var key=evnt.keyCode || evnt.which;
    //Char code of enter key
    if (key==13){
        //Call to the login method
        showSimpleSearch();
    }
}

Ext.ux.clv2.SimpleSearchPanelContainer = function(config) {
    // call parent constructor
    Ext.ux.clv2.SimpleSearchPanelContainer.superclass.constructor.call(this, config);
}; // end of Ext.ux.clv2.SimpleSearchPanelContainer constructor
Ext.extend(Ext.ux.clv2.SimpleSearchPanelContainer, Ext.Panel, {
	cls:'simple-search-panel',
	bodyStyle:'border:none;',
	width:333
});

Ext.ux.clv2.SimpleSearchLeftPanel = function(config) {
    // call parent constructor
    Ext.ux.clv2.SimpleSearchLeftPanel.superclass.constructor.call(this, config);
}; // end of Ext.ux.clv2.SimpleSearchLeftPanel constructor
Ext.extend(Ext.ux.clv2.SimpleSearchLeftPanel, Ext.Panel, {
	cls:'ss-panel-left',
	bodyStyle:'border:none;',
	width:105
});

Ext.ux.clv2.SimpleSearchRightPanel = function(config) {
    // call parent constructor
    Ext.ux.clv2.SimpleSearchRightPanel.superclass.constructor.call(this, config);
}; // end of Ext.ux.clv2.SimpleSearchRightPanel constructor
Ext.extend(Ext.ux.clv2.SimpleSearchRightPanel, Ext.Panel, {
	cls:'ss-panel-right',
	bodyStyle:'border:none;',
	autoHeight:true,
	width:226,
	createViewAllOption : function(viewAllId, onClickFtn){if(this.body){
		this.createViewAllOption = this.body.createChild({
			tag: 'div',
			id: viewAllId,
			html: 'view all . . .',
			bodyStyle: 'border:none;',
			cls: 'ss-view-all'
		});
		this.createViewAllOption.on('click', this[onClickFtn], this.createViewAllOption);
		this.createViewAllOption.on('mouseover', function(){
			this.addClass('ss-view-all-over');
		}, this.createViewAllOption);
		this.createViewAllOption.on('mouseout', function(){
			this.removeClass('ss-view-all-over');
		}, this.createViewAllOption);
	}},
	onViewAllLO : function(){
		Ext.Msg.alert('Search Results', 'It could show all learning objects result.');
	},
	onViewAllCurricula : function(){
		Ext.Msg.alert('Search Results', 'It could show all curriculas result.');
	},
	onViewAllCommunity : function(){
		Ext.Msg.alert('Search Results', 'It could show all communities result.');
	}
});

/*CREATE DATA ACCESS OBJECTS */
var simpleSearchJSON = Ext.data.Record.create([{name: 'icon'},{name: 'name'},{name: 'id'}, {name: 'type'}]);
var simpleSearchResultReader = new Ext.data.JsonReader({root:"rows",id: "id"}, simpleSearchJSON);

Ext.ux.clv2.SimpleSearchStore = function(config) {
	Ext.ux.clv2.SimpleSearchStore.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.clv2.SimpleSearchStore, Ext.data.Store, {
    url:'simpleSearch.spr',
    reader: simpleSearchResultReader
});

Ext.ux.clv2.SimpleSearchGrid = function(config) {
	// example of custom renderer function
	this.setObjectIcon = function(val){
		var css = 'ss-icon';
		switch(val){
            case 'curricula':
                css += ' ss-icon-curricula';
                break;
            case 'flv': case 'swf':
                css += ' ss-icon-lo-flash';
                break;
            case 'html':
                css += ' ss-icon-lo-web';
                break;
            case 'dir':
                css += ' ss-icon-dir';
                break;
            case 'usr':
                css += ' ss-icon-user';
                break;
            case 'gif': case 'png': case 'jpg': case 'bmp':
                css += ' ss-icon-lo-img';
                break;
            case 'xml':
                css += ' ss-icon-lo-xml-txt';
                break;
            case 'mpg':
                css += ' ss-icon-lo-binary';
                break;
            case 'pdf':
                css += ' ss-icon-lo-pdf';
                break;
            case 'xls':
                css += ' ss-icon-lo-xls';
                break;
            case 'ppt':
                css += ' ss-icon-lo-ppt';
                break;
            case 'doc':
                css += ' ss-icon-lo-doc';
                break;
            default:
                css += ' ss-icon-unknown';
            break;
		}
		return '<div class="'+css+'"></div>';
	};
	this.setRightMargin = function(val){
		return '<div style="width:10px;"></div>';
	};
	this.cm = config.cm ||
		new Ext.grid.ColumnModel([
			{id:'icon',header: "Icon", width: 29, sortable: true, renderer: this['setObjectIcon'], dataIndex: 'icon'},
			{id:'name',header: "Name", width: 185, sortable: true, locked:false, dataIndex: 'name'},
			{id:'rMargin',header: "Margin", width: 10, sortable: true, renderer: this['setRightMargin'], dataIndex: 'rMargin'}
		])
	;
	// call parent constructor
	Ext.ux.clv2.SimpleSearchGrid.superclass.constructor.call(this, config);
}; // end of Ext.ux.clv2.SimpleSearchGrid constructor

  Ext.extend(Ext.ux.clv2.SimpleSearchGrid, Ext.grid.GridPanel, {
	cls:'simple-search-grid',
	bodyStyle:'border:none;',
	hideHeaders: true,
	stripeRows: true,
	width:226
});

Ext.ux.clv2.SimpleSearchWindow = function(config) {
	// call parent constructor
	Ext.ux.clv2.SimpleSearchWindow.superclass.constructor.call(this, config);
}; // end of Ext.ux.clv2.SimpleSearchWindow constructor
Ext.extend(Ext.ux.clv2.SimpleSearchWindow, Ext.Window, {
	cls:'simple-search-window',
	autoHeight:true,
	bodyBorder:false,
	border:false,
	closeAction:'close',
	closable:false,
	collapsible:false,
	//constrainHeader:true,
	draggable:false,
	//plain:false,
	resizable:false,
	width:336,

	hideSpotlight : hideSpotlight,
	showSpotlight : showSpotlight,
	addTitleBarItems: addExtTitleBarItems,
    setElementAction: setExtElementAction,

	createHeaderItems : function(){if(this.header){
		this.headerBody = this.header.createChild({
			tag: 'div',
			cls: 'ss-header-body'
		});

		// left section: collapse option and title window
		this.headerBody.title = this.headerBody.createChild({
			tag: 'div',
			cls: 'ss-title'
		});
		this.headerBody.title.icon = this.headerBody.title.createChild({
			tag: 'div',
			cls: 'ss-header-icon ss-collapse-icon'
		});
		this.headerBody.title.text = this.headerBody.title.createChild({
			tag: 'div',
			cls: 'ss-title-text',
			html: 'Search Results'
		});
		this.headerBody.title.on('click', this.toggleCollapse, this);
		this.headerBody.title.on('mouseover', function(){
			this.addClass('ss-title-over');
		}, this.headerBody.title);
		this.headerBody.title.on('mouseout', function(){
			this.removeClass('ss-title-over');
		}, this.headerBody.title);

		// middle section: link to advanced search
		this.headerBody.advSearch = this.headerBody.createChild({
			tag: 'div',
			cls: 'ss-adv-search'
		});
		this.headerBody.advSearch.text = this.headerBody.advSearch.createChild({
			tag: 'div',
			cls: 'ss-adv-search-text',
			html: 'Advanced Search'
		});
		this.headerBody.advSearch.icon = this.headerBody.advSearch.createChild({
			tag: 'div',
			cls: 'ss-header-icon ss-adv-search-icon'
		});
		this.headerBody.advSearch.on('click', this.advSearchClick, this);
		this.headerBody.advSearch.on('mouseover', function(){
			this.addClass('ss-adv-search-over');
		}, this.headerBody.advSearch);
		this.headerBody.advSearch.on('mouseout', function(){
			this.removeClass('ss-adv-search-over');
		}, this.headerBody.advSearch);

		// right section: close window
		this.headerBody.close = this.headerBody.createChild({
			tag: 'div',
			cls: 'ss-close'
		});
		this.headerBody.close.icon = this.headerBody.close.createChild({
			tag: 'div',
			cls: 'ss-header-icon ss-close-icon'
		});
		this.headerBody.close.text = this.headerBody.close.createChild({
			tag: 'div',
			cls: 'ss-close-text',
			html: 'Close'
		});
		this.headerBody.close.on('click', this.close, this);
		this.headerBody.close.on('mouseover', function(){
			this.addClass('ss-close-over');
		}, this.headerBody.close);
		this.headerBody.close.on('mouseout', function(){
			this.removeClass('ss-close-over');
		}, this.headerBody.close);
	}},

	advSearchClick : function(){
		Ext.Msg.alert('Advanced Search', 'Advanced search link was clicked.');
	},

	titleClick : function(){
		Ext.Msg.alert('Search Results', 'It could toggle the window.');
	}
});