function opac() {
	var ds_stpublish = store_stpublish();
	var file = "";
	var kdjurnal = "";
p = new Ext.Panel({
		border: true,
		frame: true,
		style: 'margin-left: 50px;margin-bottom: 30px',
		width: 120,
		height: 135,
		html: '<p align="center"><i>IMAGE</i></p>'
	});
	
//VARIABEL DATA STORE//	
	var ds_elibrary = new Ext.data.JsonStore({
		proxy: new Ext.data.HttpProxy({
			url: BASE_URL + 'e_library/c_opac/grid_list_opac',
			method: 'POST'
		}),
		root: 'data',
		totalProperty: 'results',
		id: 'photoid',
		remoteSort: true,
		autoLoad: true,
		waitMsg: 'Mengunduh..',
		baseParams: {
			
		},
		fields: [{
			name: "Id",
			mapping: "Id"
		},
		{
			name: "Foto",
			mapping: "Foto"
		}]
	});

//LISTENER STATUS PUBLISH
	var fnSelectStPublish = function(combo, record){
		var idstpublish = record.data['idstpublish'];
		updateStPublish(idstpublish);
	};
	
//VARIABEL KOLOM//	
	var cm = new Ext.grid.ColumnModel({
		// specify any defaults for each column
		defaults: {
			sortable: true // columns are not sortable by default           
		},
		columns: [
		new Ext.grid.RowNumberer(),
		{
			header: RH.h3('Kode Buku'),
			width: 100,
			dataIndex: 'Id',
			sortable: true
		},
		{
			header: RH.h3('Foto'),
			width: 100,
			dataIndex: 'Foto',
			sortable: true,
			renderer : function(value) {
							return '<img src="data:image/jpg;base64,' + value +  '" />';
						}
		}]
	});
	var vw = new Ext.grid.GridView({
		emptyText: '< Buku Belum Dipilih  >'
	});
	var sm_nya = new Ext.grid.CheckboxSelectionModel({
		singleSelect:true,
		listeners: {
			//	rowselect: select_action,
			//	rowdeselect: deselect_action
		}
	});
	var cari_data = [new Ext.ux.grid.Search({
		iconCls: 'btn_search',
		minChars: 1,
		autoFocus: true,
		autoHeight: true,
		position: 'top',
		mode: 'local',
		width: 200
	})];
	var paging = new Ext.PagingToolbar({
		pageSize: 10,
		store: ds_elibrary,
		displayInfo: true,
		displayMsg: 'Data Buku Dari {0} - {1} of {2}',
		emptyMsg: 'Buku Belum Dipilih.'
	});

//VARIABEL GRID//	
	var grid_nya = new Ext.grid.EditorGridPanel({
		store: ds_elibrary,
		frame: true,
		//height: 500,
		autoScroll: true,
		autoHeight: true,
		autoWidth: true,
		//plugins: cari_data,
		id: 'grid_det_product',
		buttonAlign: 'left',
		defaults: {
			anchor: '-10'
		},
		forceFit: true,
		tbar: [{
			xtype: 'buttongroup',
			title: 'Pencarian',
			columns: 5,
			width: 1000,
			defaults: {
				scale: 'small'
			},
			items: [
				//SEARCH JENIS BUKU//
				{
					xtype:'checkbox',
					boxLabel: '', 
					name: 'cbjbuku', 
					id: 'cbjbuku',
					listeners: {
							change: function () {
									  if (Ext.getCmp('cbjbuku').getValue()==false) {
										  Ext.getCmp('kdjbuku').setValue("");
										  Ext.getCmp('jbuku').setValue("");
									  }
							}
				   }
				},
				{
					text: 'Jenis Buku'
				},
				{
					xtype: 'textfield',
					name: 'jbuku',
					id: 'jbuku',
					readOnly:true,
					width: 250 
				},
				{
					xtype: 'button',
					iconCls: 'silk-find',
					id: 'btn_data_jbuku',
					width: 5,
					handler: function() {
								 find_x("Data Jenis Buku", 16);
					}
				},
				{
					xtype: 'textfield',
					name: 'kdjbuku',
					id: 'kdjbuku',
					hidden:true,
					readOnly:true
				},
				
				
				//SEARCH KODE BUKU//
				{
					xtype:'checkbox',
					boxLabel: '', 
					name: 'cbkdbuku', 
					id: 'cbkdbuku',
					listeners: {
							change: function () {
									  if (Ext.getCmp('cbkdbuku').getValue()==false) {
										  Ext.getCmp('kdbuku').setValue("");
									  }
									}
				   }
				},
				{
					text: 'Kode Buku'
				},
				{
					xtype: 'textfield',
					name: 'kdbuku',
					id: 'kdbuku',
					width: 250,
					validator: function() {
							ds_elibrary.setBaseParam('cbjbuku', Ext.getCmp('cbjbuku').getValue());
							ds_elibrary.setBaseParam('cbkdbuku', Ext.getCmp('cbkdbuku').getValue());
							ds_elibrary.setBaseParam('cbisbn', Ext.getCmp('cbisbn').getValue());
							ds_elibrary.setBaseParam('cbjudul', Ext.getCmp('cbjudul').getValue());
							ds_elibrary.setBaseParam('cbpengarang', Ext.getCmp('cbpengarang').getValue());
								
							ds_elibrary.setBaseParam('kdjbuku', Ext.getCmp('kdjbuku').getValue());
							ds_elibrary.setBaseParam('kdbuku', Ext.getCmp('kdbuku').getValue());
							ds_elibrary.setBaseParam('isbn', Ext.getCmp('isbn').getValue());
							ds_elibrary.setBaseParam('judul', Ext.getCmp('judul').getValue());
							ds_elibrary.setBaseParam('pengarang', Ext.getCmp('pengarang').getValue());
								
							ds_elibrary.load();
					}
				},
				{
					xtype: 'label',
					text: ''
				},
				{
					xtype: 'label',
					text: ''
				},
				
				
				
				//SEARCH ISBN//
				{
					xtype:'checkbox',
					boxLabel: '', 
					name: 'cbisbn', 
					id: 'cbisbn',
					listeners: {
							change: function () {
									  if (Ext.getCmp('cbisbn').getValue()==false) {
										  Ext.getCmp('isbn').setValue("");
									  }
									}
				   }
				},
				{
					text: 'ISBN'
				},
				{
					xtype: 'textfield',
					name: 'isbn',
					id: 'isbn',
					width: 250,
					validator: function() {
							ds_elibrary.setBaseParam('cbjbuku', Ext.getCmp('cbjbuku').getValue());
							ds_elibrary.setBaseParam('cbkdbuku', Ext.getCmp('cbkdbuku').getValue());
							ds_elibrary.setBaseParam('cbisbn', Ext.getCmp('cbisbn').getValue());
							ds_elibrary.setBaseParam('cbjudul', Ext.getCmp('cbjudul').getValue());
							ds_elibrary.setBaseParam('cbpengarang', Ext.getCmp('cbpengarang').getValue());
								
							ds_elibrary.setBaseParam('kdjbuku', Ext.getCmp('kdjbuku').getValue());
							ds_elibrary.setBaseParam('kdbuku', Ext.getCmp('kdbuku').getValue());
							ds_elibrary.setBaseParam('isbn', Ext.getCmp('isbn').getValue());
							ds_elibrary.setBaseParam('judul', Ext.getCmp('judul').getValue());
							ds_elibrary.setBaseParam('pengarang', Ext.getCmp('pengarang').getValue());
								
							ds_elibrary.load();
					}
				},
				{
					xtype: 'label',
					text: ''
				},
				{
					xtype: 'label',
					text: ''
				},
			
				//SEARCH JUDUL//
				{
					xtype:'checkbox',
					boxLabel: '', 
					name: 'cbjudul', 
					id: 'cbjudul',
					listeners: {
							change: function () {
									  if (Ext.getCmp('cbjudul').getValue()==false) {
										  Ext.getCmp('judul').setValue("");
									  }
									}
				   }
				},
				{
					text: 'Judul'
				},
				{
					xtype: 'textfield',
					name: 'judul',
					id: 'judul',
					width: 250,
					validator: function() {
							ds_elibrary.setBaseParam('cbjbuku', Ext.getCmp('cbjbuku').getValue());
							ds_elibrary.setBaseParam('cbkdbuku', Ext.getCmp('cbkdbuku').getValue());
							ds_elibrary.setBaseParam('cbisbn', Ext.getCmp('cbisbn').getValue());
							ds_elibrary.setBaseParam('cbjudul', Ext.getCmp('cbjudul').getValue());
							ds_elibrary.setBaseParam('cbpengarang', Ext.getCmp('cbpengarang').getValue());
								
							ds_elibrary.setBaseParam('kdjbuku', Ext.getCmp('kdjbuku').getValue());
							ds_elibrary.setBaseParam('kdbuku', Ext.getCmp('kdbuku').getValue());
							ds_elibrary.setBaseParam('isbn', Ext.getCmp('isbn').getValue());
							ds_elibrary.setBaseParam('judul', Ext.getCmp('judul').getValue());
							ds_elibrary.setBaseParam('pengarang', Ext.getCmp('pengarang').getValue());
								
							ds_elibrary.load();
					}
				},
				{
					xtype: 'label',
					text: ''
				},
				{
					xtype: 'label',
					text: ''
				},
			
				//SEARCH PENGARANG//
				{
					xtype:'checkbox',
					boxLabel: '', 
					name: 'cbpengarang', 
					id: 'cbpengarang',
					listeners: {
							change: function () {
									  if (Ext.getCmp('cbpengarang').getValue()==false) {
										  Ext.getCmp('pengarang').setValue("");
									  }
									}
					}
				},
				{
					text: 'Pengarang'
				},
				{
					xtype: 'textfield',
					name: 'pengarang',
					id: 'pengarang',
					width: 250,
					validator: function() {
							ds_elibrary.setBaseParam('cbjbuku', Ext.getCmp('cbjbuku').getValue());
							ds_elibrary.setBaseParam('cbkdbuku', Ext.getCmp('cbkdbuku').getValue());
							ds_elibrary.setBaseParam('cbisbn', Ext.getCmp('cbisbn').getValue());
							ds_elibrary.setBaseParam('cbjudul', Ext.getCmp('cbjudul').getValue());
							ds_elibrary.setBaseParam('cbpengarang', Ext.getCmp('cbpengarang').getValue());
								
							ds_elibrary.setBaseParam('kdjbuku', Ext.getCmp('kdjbuku').getValue());
							ds_elibrary.setBaseParam('kdbuku', Ext.getCmp('kdbuku').getValue());
							ds_elibrary.setBaseParam('isbn', Ext.getCmp('isbn').getValue());
							ds_elibrary.setBaseParam('judul', Ext.getCmp('judul').getValue());
							ds_elibrary.setBaseParam('pengarang', Ext.getCmp('pengarang').getValue());
								
							ds_elibrary.load();
					}
				},
				{
					xtype: 'label',
					text: ''
				},
				{
					xtype: 'label',
					text: ''
				},
			
				//BUTTON CARI//
				{
					xtype: 'label',
					text: ''
				},
				{
					xtype: 'label',
					text: ''
				},
				{
							xtype: 'button',
							text: ' Cari ',
							iconCls: 'silk-zoom',
							id: 'btn_data',
							width: 5,
							style: 'margin-left: 76px',
							handler: function() {
							ds_elibrary.setBaseParam('cbjbuku', Ext.getCmp('cbjbuku').getValue());
							ds_elibrary.setBaseParam('cbkdbuku', Ext.getCmp('cbkdbuku').getValue());
							ds_elibrary.setBaseParam('cbisbn', Ext.getCmp('cbisbn').getValue());
							ds_elibrary.setBaseParam('cbjudul', Ext.getCmp('cbjudul').getValue());
							ds_elibrary.setBaseParam('cbpengarang', Ext.getCmp('cbpengarang').getValue());
								
							ds_elibrary.setBaseParam('kdjbuku', Ext.getCmp('kdjbuku').getValue());
							ds_elibrary.setBaseParam('kdbuku', Ext.getCmp('kdbuku').getValue());
							ds_elibrary.setBaseParam('isbn', Ext.getCmp('isbn').getValue());
							ds_elibrary.setBaseParam('judul', Ext.getCmp('judul').getValue());
							ds_elibrary.setBaseParam('pengarang', Ext.getCmp('pengarang').getValue());
									
								ds_elibrary.load();
							}
				},
				{
					xtype: 'label',
					text: ''
				},
				{
					xtype: 'label',
					text: ''
				},
			]
		}/*,
		{
			xtype: 'button',
			text: ' Add ',
			iconCls: 'silk-add',
			id: 'btn_add',
			width: 5,
			style: 'margin-bottom: 100px',
			handler:function() {
						fnAddJurnal(); 
					}
		},
		{
            text: 'Edit', id: 'btn_edit', iconCls: 'silk-edit',
			style: 'margin-bottom: 100px',
            handler:function(){
                        if(sm_nya.getCount() > 0){
                            var module_id = sm_nya.getSelected().data['kdjurnal'];
                            f_jurnal_form(module_id,ds_elibrary);
							Ext.getCmp('kdprodi').enable();
                        }
                    }
        },
		{
            text: 'Delete', id: 'btn_delete', iconCls: 'silk-delete',
			style: 'margin-bottom: 100px',
            handler:function(){
                        if(sm_nya.getCount() > 0){
                            var delete_id = sm_nya.getSelected().data['kdjurnal'];
                            Ext.MessageBox.show({
                                title: "Konfirmasi",
                                msg: "Anda Yakin Untuk menghapus Data ini?",
                                buttons: Ext.MessageBox.YESNO,
                                fn: function(btn) {
                                    if (btn == 'yes') {
                                        Ext.Ajax.request({
                                            url: BASE_URL + 'e_library/c_jurnal/delete',
                                            method: 'POST',
                                            success: function() {
                                                Ext.MessageBox.alert("Informasi", "Hapus Data Berhasil");
                                                 ds_elibrary.load();
                                            },
                                            failure:function(result){
                                                        Ext.MessageBox.alert("Informasi", "Hapus Data Gagal");
                                                    },
                                            params: { hapus_id: delete_id }
                                        });
                                    }
                                }
                            });
                        }
                    }
        } */
		],
		sm: sm_nya,
		vw: vw,
		cm: cm,
		bbar: paging,
		clicksToEdit: 1,
		listeners: {
			rowclick: function rowClick(grid, rowIdx) {
				var rec = ds_elibrary.getAt(rowIdx);
				RH.setCompValue('frm.kdbuku', rec.data['Id']);
				Ext.Ajax.request({
                                                url: BASE_URL + 'e_library/blob/grid',
                                                method: 'POST',
                                                params: {
                                                    id:rec.data['Id']
                                                },
                                                success: function(response) {
                                                        //Ext.MessageBox.alert("Informasi", "Kuitansi Dibatalkan..");

                                                        isi_gambar_buku(response.responseText);
                                                }
                                    });
				
				
				//isi_gambar_buku(rec.data['Id']);
				//Ext.getCmp('bdown').enable();
				//file = rec.data["file"]; 
				//kdjurnal = rec.data["kdjurnal"]; 
			}
		}
	});

//DISPLAY FORM PANEL//
	var DispPanel = new Ext.form.FormPanel({
		id: 'fp.mhsFDisp',
		fileUpload: true,
		border: false,
		autoScroll:true,
		bodyStyle: 'padding:5px 5px 0',
		frame: true,
		labelAlign: 'top',
		layout: 'anchor',
		forceFit:true,
		items: [
		{
			layout: 'form',
			defaultType: 'textfield',
			defaults: { readOnly: true },
			items: [
			p
			,
			{ 	id: 'frm.kdbuku', fieldLabel: 'Kode Buku' ,width: 225, height:24}
			,
			{ 	id: 'frm.isbn', fieldLabel: 'ISBN' ,width: 225, height:24}
			,
			{ 	id: 'frm.kdjnsbuku', fieldLabel: 'Jenis Buku' ,width: 225, height:24}
			,
			{ 	id: 'frm.judul', fieldLabel: 'Judul' ,width: 225, height:50, xtype: 'textarea'}
			,
			{ 	id: 'frm.nmpengarang', fieldLabel: 'Pengarang' ,width: 225, height:24}
            ,
			{ 	id: 'frm.nmpenerbit', fieldLabel: 'Penerbit' ,width: 225, height:24}
            ,
            { 	id: 'frm.tahunterbit', fieldLabel: 'Tahun Terbit' ,width: 225, height:24}
            ]
		}]
	});	

//FUNCTION//
	//add//
	function fnAddJurnal(){
		 f_jurnal_form('',ds_elibrary);
	}	

/**FUNCTIONS UPDATE GRID KELAS*/	
function updateStPublish(idstpublish){
		Ext.Ajax.request({
			url: BASE_URL + 'e_library/c_jurnal/update_stpublish',
			params: {
                kdjurnal	: RH.getCompValue('frm.kdjurnal'),
                idstpublish : idstpublish,
			},
			success: function() {
				Ext.Msg.alert("Info", "Ubah Berhasil");
				ds_elibrary.reload();
			},
			failure: function() {
				Ext.Msg.alert("Info", "Ubah Data Gagal");
			}
		});
	}	
	
//=================================================== AWAL//
	var jurnalPanel = new Ext.Panel({
		layout: 'border',
		defaults: {
			collapsible: true,
			split: true
		},
		items: [{
			collapsible: false,
			title: "OPAC",
			region: 'center',
			id: 'images-view',
			items: [grid_nya],
		},
		{
			region: 'east', 
			xtype: 'panel',
			title: 'Detail Buku', border: true,
			layout:'fit', width:270,
			collapsible: true, collapseMode: 'header',
			titleCollapse: true, titleAlign: 'center',
			items: [DispPanel],
			collapsed: false
		}],
		listeners: {
			'afterrender': function() {
		}
		}
	});
	
	get_content(jurnalPanel);
}