Ext.namespace("Ext.ux");
Ext.BLANK_IMAGE_URL = "/images/spacer.gif";

Ext.ux.PageSizePlugin = function() {
	Ext.ux.PageSizePlugin.superclass.constructor.call(this, {
		"store": new Ext.data.SimpleStore({
			"fields": ["text", "value"],
			"data": [["5", 5], ["10", 10], ["20", 20], ["30", 30], ["50", 50]]
		}),
		"mode": "local",
		"displayField": "text",
		"valueField": "value",
		"editable": false,
		"allowBlank": false,
		"triggerAction": "all",
		"width": 40
	});
};

Ext.extend(Ext.ux.PageSizePlugin, Ext.form.ComboBox, {
	"init": function(paging) {
		paging.on("render", this.onInitView, this);
	},

	"onInitView": function(paging) {
		paging.loading.hideParent = true;
		paging.loading.hide();
		paging.add(this, " per page");
		this.setValue(paging.pageSize);
		this.on("select", this.onPageSizeChanged, paging);
	},

	"onPageSizeChanged": function(combo) {
		this.pageSize = parseInt(combo.getValue());
		this.doLoad(0);
	}
});

Ext.onReady(function(){
	var store = new Ext.data.Store({
		"url": "/async/get-assets.php",

		"reader": new Ext.data.JsonReader({
			"root": "data",
			"totalProperty": "totalCount",
			"fields": [ "post_date","category","media","url","title","description","author","venue" ]
		}),

		"listeners": {
			"beforeload": {
				"fn": function (store, options) {
					if (Ext.getCmp("checkDate").checked)
						options.params.searchDate = "1";
					if (Ext.getCmp("checkAuthor").checked)
						options.params.searchAuthor = "1";
					if (Ext.getCmp("checkVenue").checked)
						options.params.searchVenue = "1";
					if (Ext.getCmp("checkCategory").checked)
						options.params.searchCategory = "1";
					if (Ext.getCmp("checkMedia").checked)
						options.params.searchMedia = "1";
					if (Ext.getCmp("checkTitle").checked)
						options.params.searchTitle = "1";
					if (Ext.getCmp("checkDesc").checked)
						options.params.searchDesc = "1";
				},
				"scope": this
			}
		},
		remoteSort: true
	});
	store.setDefaultSort("post_date", "desc");

	var cm = new Ext.grid.ColumnModel([{
		"header": "Date",
		"dataIndex": "post_date",
		"width": 65
	},{
		"header": "Author",
		"dataIndex": "author",
		"width": 120
	},{
		"header": "Venue/Sponsorship",
		"dataIndex": "venue",
		"width": 130
	},{
		"header": "Category",
		"dataIndex": "category",
		"width": 75
	},{
		"header": "Media",
		"dataIndex": "media",
		"width": 55
	}]);
	cm.defaultSortable = true;

	var grid = new Ext.grid.GridPanel({
		"el": "library",
		"width": 555,
		"height": 500,
		"store": store,
		"cm": cm,
		"disableSelection": true,
		"enableColumnHide": false,
		//"trackMouseOver": false,
		"loadMask": true,
		"viewConfig": {
			"forceFit": true,
			"enableRowBody": true,
			"showPreview": true,
			"getRowClass": function(record, rowIndex, p, store) {
				if(this.showPreview) {
					p.body = "<div class=\"title\"><a href=\"" + record.data.url + "\" target=\"_blank\">" + record.data.title + "</a></div><div class=\"desc\">" + record.data.description + "</div>";
					return "grid-row-body";
				}
			}
		},
		"tbar": ["->", {
			"id": "searchbutton",
			"text": "Search",
			"menu": {
				"items": [{
					"id": "checkAll",
					"text": "Select All",
					"checked": true,
					"checkHandler": onSelectAllCheck
				}, {
					"id": "checkNone",
					"text": "Select None",
					"checked": false,
					"checkHandler": onSelectNoneCheck
				}, "-", {
					"id": "checkDate",
					"text": "Date",
					"checked": true,
					"checkHandler": onItemCheck
				}, {
					"id": "checkAuthor",
					"text": "Author",
					"checked": true,
					"checkHandler": onItemCheck
				}, {
					"id": "checkVenue",
					"text": "Venue/Sponsorship",
					"checked": true,
					"checkHandler": onItemCheck
				}, {
					"id": "checkCategory",
					"text": "Category",
					"checked": true,
					"checkHandler": onItemCheck
				}, {
					"id": "checkMedia",
					"text": "Media",
					"checked": true,
					"checkHandler": onItemCheck
				}, {
					"id": "checkTitle",
					"text": "Title",
					"checked": true,
					"checkHandler": onItemCheck
				}, {
					"id": "checkDesc",
					"text": "Description",
					"checked": true,
					"checkHandler": onItemCheck
				}]
			}
		},
		new Ext.app.SearchField({
			"store": store,
			"width": 160
		})],
		"bbar": new Ext.PagingToolbar({
			"pageSize": 25,
			"store": store,
			"displayInfo": true,
			"displayMsg": "Displaying documents {0} - {1} of {2}",
			"emptyMsg": "Your search did not match any documents",
			"plugins": [ new Ext.ux.PageSizePlugin() ]
		})
	});

	grid.render();
	store.load({ "params": { "start": 0, "limit": 25 }});
});

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) {
			this.el.dom.value = "";
			var o = { "start": 0 };
			this.store.baseParams = this.store.baseParams || {};
			this.store.baseParams[this.paramName] = "";
			this.store.reload({ "params": o });
			this.triggers[0].hide();
			this.hasSearch = false;
		}
	},

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

function onSelectAllCheck(item, checked) {
	if (checked) {
		Ext.getCmp("checkDate").setChecked(true);
		Ext.getCmp("checkAuthor").setChecked(true);
		Ext.getCmp("checkVenue").setChecked(true);
		Ext.getCmp("checkCategory").setChecked(true);
		Ext.getCmp("checkMedia").setChecked(true);
		Ext.getCmp("checkTitle").setChecked(true);
		Ext.getCmp("checkDesc").setChecked(true);
	}
}

function onSelectNoneCheck(item, checked) {
	if (checked) {
		Ext.getCmp("checkDate").setChecked(false);
		Ext.getCmp("checkAuthor").setChecked(false);
		Ext.getCmp("checkVenue").setChecked(false);
		Ext.getCmp("checkCategory").setChecked(false);
		Ext.getCmp("checkMedia").setChecked(false);
		Ext.getCmp("checkTitle").setChecked(false);
		Ext.getCmp("checkDesc").setChecked(false);
	}
}

function onItemCheck(item, checked){
	if (checked)
		Ext.getCmp("checkNone").setChecked(false);
	else
		Ext.getCmp("checkAll").setChecked(false);
}