// *******************************************************************
// 
// ALBUM LIST
//
// *******************************************************************

function album_list() {

	var title = 'Albums';
  var alias = "album";
   
	var ds = new Ext.data.JsonStore({
	  url:'grid/get_list_data.php?type=' + alias,
    id: 'id',
    totalProperty: 'total',
    root: 'data',
    fields: [
      {name:'albumID'},
      {name:'name'},
			{name:'cover'},
			{name:'artist'},
			{name:'artistID'},
			{name:'num_files'},
			{name:'name_slashes'},
			{name:'artist_slashes'}
    ],
		listeners:
		{
			datachanged: function()
			{
				/*console.log(ds);
				console.log(ds.baseParams.fields);
				console.log(ds.sortInfo.direction);
				console.log(ds.sortInfo.field);
				console.log("album_feed.php?query=" + ds.baseParams.query + "&fields=" + ds.baseParams.fields + "&sort=" + ds.sortInfo.field + "&sort_dir=" + ds.sortInfo.direction);
				console.log(cooliris_dont_reload);*/
				if(cooliris_window && !cooliris_dont_reload)
				{
					cooliris.embed.setFeedURL("album_feed.php?query=" + ds.baseParams.query + "&fields=" + ds.baseParams.fields + "&sort=" + ds.sortInfo.field + "&sort_dir=" + ds.sortInfo.direction);
				}
			}
		},
	  sortInfo: {field: 'name', direction: 'ASC'},
	  remoteSort: true
	});
  
	var cm = new Ext.grid.ColumnModel([
	  {dataIndex: 'name', header: 'Album', renderer: renderAlbum, sortable: true},
		{dataIndex: 'artist', header: 'Artist', renderer: renderArtist, sortable: true}
	]);
	cm.defaultSortable = true;
	
	var imageTooltip = 'qtip="<b>Album:</b>&nbsp;{name_slashes}<br /><b>Interpret:</b>&nbsp;{artist_slashes}<br /><b>Songs:</b>&nbsp;{num_files}"';
	
	var giantCover = new Ext.Template(
		'<div class="giantCover"><div class="album_list_template"><div class="coverCotainer">'
		+ '<div class="album_cover_row"><a href="javascript: void(0)" onClick="filter_setting(\'album\',{albumID});"><img ' + imageTooltip + ' border=0 src="{cover}"></a></div>'
		+ '<div class="album_name_row"><a href="javascript: void(0)" onClick="filter_setting(\'album\',{albumID});">{name}</a></div>'
		+ '<div class="album_artist_row"><a href="javascript: void(0)" onClick="filter_setting(\'artist\',{artistID});">{artist}</a></div>'
		+ '</div></div></div>'
	);

	var mediumCover = new Ext.Template(
		'<div class="mediumCover"><div class="album_list_template"><div class="coverCotainer">'
		+ '<div class="album_cover_row"><a href="javascript: void(0)" onClick="filter_setting(\'album\',{albumID});"><img ' + imageTooltip + ' border=0 src="{cover}"></a></div>'
		+ '<div class="album_name_row"><a href="javascript: void(0)" onClick="filter_setting(\'album\',{albumID});">{name}</a></div>'
		+ '<div class="album_artist_row"><a href="javascript: void(0)" onClick="filter_setting(\'artist\',{artistID});">{artist}</a></div>'
		+ '</div></div></div>'
	);

	var tinyCover = new Ext.Template(
		'<div class="tinyCover"><div class="album_list_template"><div class="coverCotainer">'
		+ '<div class="album_cover_row"><a href="javascript: void(0)" onClick="filter_setting(\'album\',{albumID});"><img ' + imageTooltip + ' border=0 src="{cover}"></a></div>'
		+ '<div class="album_name_row"><a href="javascript: void(0)" onClick="filter_setting(\'album\',{albumID});">{name}</a></div>'
		+ '</div></div></div>'
	);

	function changeView(item, checked) {
			var tpl;
			if (checked) {
					if (item.type == 'giant')
					{
							tpl = giantCover;
							cp.set("album_list_template","giantCover");
					}
					else if (item.type == 'medium')
					{
							tpl = mediumCover;
							cp.set("album_list_template","mediumCover");
					}
					else if (item.type == 'tiny')
					{
							tpl = tinyCover;
							cp.set("album_list_template","tinyCover");
					}
					else
					{
							tpl = null;
							cp.set("album_list_template",0);
					}

					grid.getView().changeTemplate(tpl);
			}
	}

	function album_name(value, p, record)
	{
		if(record.get('cover_resized')==1)
			var path = "cover/album/resized/" + record.get('albumID') +".jpg";
		else
			var path = "img/cover_no_album.gif";
		
		return String.format( 
			'<div class="album_cover_row"><img src="' + path + '"></div><div class="album_name_row">{1}</div><div class="album_artist_row">{2}</div>',
			record.get('albumID'),record.get('name'),record.get('artist'));
	}	
	
	var tpl_name = cp.get("album_list_template",0); 
	if(tpl_name) 
		var tpl = eval(cp.get("album_list_template",0));
	else
		var tpl = null;
	
  var grid = new Ext.grid.GridPanel({
		id: alias + "_list",
		header: true,
		border: false,
		iconCls: 'icon-album',
	  title: title,
	  ds: ds,
	  cm: cm,
		tbar:[],
		enableHdMenu: false,
	  enableColLock: false,
	  loadMask: true,
	  plugins: [new Ext.ux.grid.GridViewMenuPlugin,new Ext.ux.grid.Search({
		iconCls:'icon-zoom',
		searchText: '',
		readonlyIndexes:[],
		disableIndexes:[],
		position: "top",
		minChars:1,
		autoFocus:true
		// ,menuStyle:'radio'
		})],
		tbar: new Ext.Toolbar({
				items: [
					{
						tooltip: 'change view',
						iconCls: 'icon-view',
						menu: [{
								group: 'view_album',
								checkHandler: changeView,
								checked: tpl_name=="giantCover",
								text: 'large cover',
								type: 'giant'
						},{
								group: 'view_album',
								checkHandler: changeView,
								checked: tpl_name=="mediumCover",
								text: 'medium cover',
								type: 'medium'
						},{
								group: 'view_album',
								checkHandler: changeView,
								checked: tpl_name=="tinyCover",
								text: 'small cover',
								type: 'tiny'
						},{
								group: 'view_album',
								checkHandler: changeView,
								checked: tpl_name=="",
								text: 'list',
								type: 'list'
						},
						new Ext.menu.Separator(),
						{ text: 'Cooliris', handler : open_cooliris }	
						]
				}
				]
		}),
		forceFit: true,
		trackMouseOver: false,
	  autoWidth:true,        
		layout:"fit",
		autoScroll:true,
		viewConfig: {
				rowTemplate: tpl,
				forceFit:true
				/*enableRowBody:true,
				showPreview:true,
				getRowClass : function(record, rowIndex, p, store){
						if(this.showPreview){
								p.body = '<p><img src="cover/album/resized/'+record.data.ID+'.jpg"></p>';
								return 'x-grid3-row-expanded';
						}
						return 'x-grid3-row-collapsed';
				}*/
		},
	  bbar: new Ext.PagingToolbar({
	    store: ds,
	    pageSize: 30,
			displayInfo:false,
			listeners:
			{
				beforechange: function(){
					cooliris_dont_reload = true;
				},
				change: function(){
					cooliris_dont_reload = false;
				}
			}
	  })
	});
	//grid.getColumnModel().setHidden(1, true)

	//Ext.util.Observable.capture(grid, function(e){console.info(e)}); 

  /*grid.addListener({
  'cellclick' : {
  fn : function(grid, rowIndex, columnIndex, event) {
		var record = grid.getStore().getAt(rowIndex);
		var ID = record.get('ID');
		
		filter_setting("album",ID);
  },
  scope : this
  }
  });// end grid.addListener*/

	ds.load({params:{start: 0, limit: 30}});
	
	return grid;
}
// *******************************************************************
// 
// ARTIST LIST
//
// *******************************************************************

function artist_list() {

	var title = 'Artists';
  var alias = "artist";
   
	var ds = new Ext.data.JsonStore({
	  url:'grid/get_list_data.php?type=' + alias,
    id: 'id',
    totalProperty: 'total',
    root: 'data',
    fields: [
      {name:'ID'},
      {name:'name'},
			{name:'loaded'}
    ],
	  sortInfo: {field: 'name', direction: 'ASC'},
	  remoteSort: true
	});
  
	function changeView(item, checked) {
			var tpl;
			if (checked) {
					if (item.type == 'giant')
					{
							grid.removeClass("mediumCover");
							grid.removeClass("tinyCover");
							grid.removeClass("noCover");
							grid.addClass("giantCover");
							cp.set("artist_list_template","giantCover");
					}
					else if (item.type == 'medium')
					{
							grid.addClass("mediumCover");
							grid.removeClass("tinyCover");
							grid.removeClass("noCover");
							grid.removeClass("giantCover");
							cp.set("artist_list_template","mediumCover");
					}
					else if (item.type == 'tiny')
					{
							grid.removeClass("mediumCover");
							grid.addClass("tinyCover");
							grid.removeClass("noCover");
							grid.removeClass("giantCover");
							cp.set("artist_list_template","tinyCover");
					}
					else
					{
							grid.removeClass("mediumCover");
							grid.removeClass("tinyCover");
							grid.addClass("noCover");
							grid.removeClass("giantCover");
							cp.set("artist_list_template","noCover");
					}
			}
	}
	
	var expander = new Ext.grid.RowExpander({
			remoteDataMethod : function(record,index) {
				//grid.selModel.deselectRow(index);
				if(!record.get("loaded"))
				{
					Ext.get("filter_panelID").mask('Loading album-info');
					Ext.Ajax.request({
						 url: 'get_albums.php?ID=' + record.get("ID"),
						 success: function(xhr, options){
							 record.set("loaded",true);
							 record.set("alben",xhr.responseText);
							 record.commit();
							 document.getElementById('remData'+index).innerHTML = xhr.responseText;
							 Ext.get("filter_panelID").unmask();
						 }
						});
				}
				else
					document.getElementById('remData'+index).innerHTML = record.get("alben");
			}
	});

	var cm = new Ext.grid.ColumnModel([
		expander,
	  {dataIndex: 'name', sortable: true, menuDisabled: true, header: 'Name'}
	]);
	cm.defaultSortable = true;
	
	var tpl_name = cp.get("artist_list_template","giantCover"); 
	
  var grid = new Ext.grid.GridPanel({
		id: alias + "_list",
	  title: title,
		header: true,
		border: false,
		iconCls: 'icon-artist',
		cls: tpl_name,
	  ds: ds,
	  cm: cm,
		tbar: new Ext.Toolbar({
				items: [{
						tooltip: 'change view',
						iconCls: 'icon-view',
						menu: [{
								group: 'view',
								checkHandler: changeView,
								checked: tpl_name=="giantCover",
								text: 'large cover',
								type: 'giant'
						},{
								group: 'view',
								checkHandler: changeView,
								checked: tpl_name=="mediumCover",
								text: 'medium cover',
								type: 'medium'
						},{
								group: 'view',
								checkHandler: changeView,
								checked: tpl_name=="tinyCover",
								text: 'small cover',
								type: 'tiny'
						},{
								group: 'view',
								checkHandler: changeView,
								checked: tpl_name=="noCover",
								text: 'list',
								type: 'list'
						}]
				}]
		}),
		enableColLock: false,
	  loadMask: true,
	  plugins: [expander,new Ext.ux.grid.Search({
			iconCls:'icon-zoom',
			searchText:'<img src="img/silk/icons/magnifier.png">',
			readonlyIndexes:[],
			disableIndexes:[],
			no_button: true,
			position: "top",
			minChars:1,
			autoFocus:true
			// ,menuStyle:'radio'
			})],
		forceFit: true,
		trackMouseOver: false,
	  autoWidth:true,        
		layout:'fit',
		autoScroll:true,
		viewConfig: {
				forceFit:true
		},	  
		listeners: {
			'beforerowselect': function() 
				{
				if(from_cellclick) 
					return true; 
				else 
					return false;
				}
		},
	  bbar: new Ext.PagingToolbar({
	    store: ds,
	    pageSize: 30,
			displayInfo:false
	  })
	});
	//grid.getColumnModel().setHidden(1, true)
	
  grid.addListener({
  'cellclick' : {
  fn : function(grid, rowIndex, columnIndex, event) {
		if(columnIndex)
		{
			from_cellclick = true;
			grid.selModel.selectRow(rowIndex);
			from_cellclick = false
			
			if (last_selected_album_from_artist)
				last_selected_album_from_artist.className = 'album_from_artist_entry';
		
			var record = grid.getStore().getAt(rowIndex);
			var ID = record.get('ID');
			
			filter_setting("artist",ID);	
		}
  },
  scope : this
  }
  });// end grid.addListener

	ds.load({params:{start: 0, limit: 30}});
	
	return grid;
}

// *******************************************************************
// 
// MP3 LIST
//
// *******************************************************************

function mp3_list() {

	//var title = 'MP3-list';
	var title = '<div class="mp3_title"><div class="icon"><img src="img/silk/icons/music.png"></div><div id="title" class="title">MP3-list</div><div class="about">hello guest, <a href="login.php">login</a>&nbsp;<img src="img/silk/icons/help.png" onClick="my_about()"></div></div>';
  
	var alias = "mp3";
	var last_filter = "";
	
	var sort_array = new Array(0);
	var sort_dir_array = new Array(0);
	 
	var actions = new Ext.ux.grid.RowActions({
			header:'&nbsp;',
			actions:[
							{
				iconCls:'icon-extras',
				tooltip:'Extras'
				}
				,				{
				iconCls:'icon-add-to-playlist',
				tooltip:'Add to playlist'
				}
						],
			listeners: 
			{
				action: function(grid, record, action, row, col) {
					switch(action)
					{		
					case "icon-extras":	
						var menu = extras_menu(record.data,"mp3_list");
						var cell = grid.getView().getCell(row,col);
						menu.show(Ext.get(cell));
						break;
					case "icon-add-to-playlist":
						var pl = Ext.getCmp("playlist_selectionID");
				
						if(pl.selectedIndex>=0)
							var userID = pl.store.data.items[pl.selectedIndex].data.userID;
						else
							var userID = 0;
						
						if(pl.getValue()<=0 || 1 || (userID == 2 && 1))
							{
							var store = Ext.getCmp("playlistID").getStore();
							// Search for duplicates
							var foundItem = store.find('title', record.data.title);
				
							// if not found
							if (foundItem  == -1) {
								store.add(record);
								player_obj.save_playlist();
								}
							}
						else
							{
								Ext.MessageBox.show({
									 title: 'Error',
									 msg: 'you are not allowed to add songs to this playlist',
									 buttons: Ext.MessageBox.OK,
									 icon: Ext.MessageBox.INFO
								});							
							}
						break;			
					}
				}
			}
			}
		);
	
	var proxy = new Ext.data.HttpProxy({
			api: {
					read: 'grid/get_list_data.php?type=' + alias,
					update: 'save_rating.php'
			}
	});
	
	var writer = new Ext.data.JsonWriter({
			encode: true
	});	
	
	var ds = new Ext.data.Store({
			proxy: proxy,
			writer: writer,
			autoSave: true,
			reader: new Ext.data.JsonReader({
					successProperty: 'success',
					idProperty: 'ID',
					totalProperty: 'total',
					root: 'data'
				}, [
      {name:'ID'},
      {name:'filename'},
			{name:'filemtime', type: 'date', dateFormat: 'timestamp'},
			{name:'fileatime', type: 'date', dateFormat: 'timestamp'},
			{name:'title'},
			{name:'artist'},
			{name:'artistID'},
			{name:'album'},
			{name:'albumID'},
			{name:'genre'},
			{name:'rating'},
			{name:'comment'},
			{name:'year'},
			{name:'track'},
			{name:'filesize'},
			{name:'duration'},
			{name:'full_path'},
			{name:'num_downloads'},
			{name:'num_plays'},
			{name:'bit_rate'}
    ]),
		listeners:
		{
			load: function()
			{
				//var p = Ext.getCmp("mp3_list").bottomToolbar.myinit();
				var length = queryStore.length;
					
				if(history_position>=length)
				{
					queryStore[length] = new Array();
					queryStore[length]["albumID"] = this.baseParams.albumID;
					queryStore[length]["artistID"] = this.baseParams.artistID;
					queryStore[length]["letter_filter"] = this.baseParams.letter_filter;
					queryStore[length]["field_filter"] = this.baseParams.field_filter;
					queryStore[length]["fields"] = this.baseParams.fields;
					queryStore[length]["query"] = this.baseParams.query;
					queryStore[length]["full_text_search"] = this.baseParams.full_text_search;
					
					queryStore[length]["limit"] = this.lastOptions.params.limit;
					queryStore[length]["start"] = this.lastOptions.params.start;
				}
				
				history_button_status();
				
				player_obj.stop_playlist = true;
			}
		},
	  sortInfo: {field: 'title', direction: 'ASC'},
	  remoteSort: true
	});
  
	/*var filters = new Ext.grid.GridFilters({
	  filters:[
	    {type: 'string',  dataIndex: 'filename'},
			{type: 'string',  dataIndex: 'title'},
			{type: 'string',  dataIndex: 'artist'},
			{type: 'string',  dataIndex: 'album'},
			{type: 'string',  dataIndex: 'genre'},
			{type: 'string',  dataIndex: 'year'},
			{type: 'string',  dataIndex: 'track'},
			{type: 'numeric',  dataIndex: 'num_downloads'},
			{type: 'numeric',  dataIndex: 'num_plays'},
			{type: 'numeric',  dataIndex: 'bit_rate'}
	]});*/
	
	/*var cellActions = new Ext.ux.grid.CellActions({
		listeners:{
			action:function(grid, record, action, value) {
				//Ext.ux.Toast.msg('Event: action', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
			}
			,beforeaction:function() {
				//Ext.ux.Toast.msg('Event: beforeaction', 'You can cancel the action by returning false from this event handler.');
			}
		}
		,callbacks:{
			'icon-artist-go':function(grid, record, action, value) {
				var ID = record.get("artistID");
				
				filter_setting("artist",ID);
			},
			'icon-album-go':function(grid, record, action, value) {
				var ID = record.get("albumID");
				
				filter_setting("album",ID);	
			},
			'icon-go-to-folder':function(grid, record, action, value) {
						open_path(record.get("full_path"));
			}
		}
		,align:'left'
	});	*/
	
	var rateColumnPlugin = new Ext.ux.grid.RateColumnPlugin({
		zeroSensitivity: 0.25,
		tickSize: 16
	});
	
	var cm = new Ext.grid.ColumnModel([
	  { hidden: true, sortable: true, dataIndex: 'filename', header: 'Filename'},
		{ hidden: true, sortable: true, dataIndex: 'filemtime', header: 'Last modified on', renderer: Ext.util.Format.dateRenderer('d.m.Y H:i') },
		{ hidden: true, sortable: true, dataIndex: 'fileatime', header: 'Added on', renderer: Ext.util.Format.dateRenderer('d.m.Y H:i') },
		{dataIndex: 'title', sortable: true, header: 'Title'},
		{dataIndex: 'artist', sortable: true, header: 'Artist', renderer: renderArtist/*, cellActions:[
			{
			iconCls:'icon-artist-go',
			qtip:'Files von diesem Interpreten auflisten'
			}]*/},
		{dataIndex: 'album', sortable: true, header: 'Album', renderer: renderAlbum/*, cellActions:[
			{
			iconCls:'icon-album-go',
			qtip:'Files von diesem Album auflisten'
			}]*/},
		{hidden: true, sortable: true, dataIndex: 'genre', header: 'Genre', width: 50},
		{hidden: true, sortable: true, dataIndex: 'comment', header: 'comment', width: 50},
		{hidden: true, sortable: true, dataIndex: 'year', header: 'year', width: 30},
		{dataIndex: 'track', sortable: true, header: '#', width: 20},
		{hidden: true, sortable: true, dataIndex: 'filesize', header: 'Size', width: 40, renderer: renderFilesize, align: 'right'},
		{dataIndex: 'duration', sortable: true, header: 'Length', width: 30, renderer: GridRenderDuration, align: 'right'},
		{dataIndex: 'full_path', sortable: true, header: 'Path' , renderer: renderPath/*, cellActions:[
			{
			iconCls:'icon-go-to-folder',
			qtip:'Zum Ordner'
			}]*/},
		{hidden: true, sortable: true, dataIndex: 'num_plays', header: 'played', width: 30, renderer: renderNumber, align: 'right'},
		{hidden: true, sortable: true, dataIndex: 'bit_rate', header: 'Bit-rate', width: 30, renderer: renderBitrate, align: 'right'},
		{header: 'rating', sortable: true, dataIndex: 'rating', width: 100, renderer: rateColumnPlugin.createRenderer(5)}
					,actions
				]);
	cm.defaultSortable = true;
	
	function history_jump()
	{
		var store = Ext.getCmp("mp3_list").getStore();
		
		delete(store.baseParams["albumID"]);
		delete(store.baseParams["artistID"]);
		delete(store.baseParams["letter_filter"]);
		delete(store.baseParams["query"]);
		delete(store.baseParams["fields"]);
		delete(store.baseParams["full_text_search"]);
		delete(store.baseParams["full_path"]);
		
		if (store.lastOptions && store.lastOptions.params) {
			delete(store.lastOptions.params["albumID"]);
			delete(store.lastOptions.params["artistID"]);
			delete(store.lastOptions.params["letter_filter"]);
			delete(store.lastOptions.params["query"]);
			delete(store.lastOptions.params["fields"]);
			delete(store.lastOptions.params["full_text_search"]);
			delete(store.lastOptions.params["full_path"]);
		}
		
		store.baseParams.albumID = queryStore[history_position]["albumID"];
		store.baseParams.artistID = queryStore[history_position]["artistID"];
		store.baseParams.letter_filter = queryStore[history_position]["letter_filter"];
		store.baseParams.field_filter = queryStore[history_position]["field_filter"];
		store.baseParams.query = queryStore[history_position]["query"];
		store.baseParams.fields = queryStore[history_position]["fields"];
		store.baseParams.full_text_search = queryStore[history_position]["full_text_search"];
		
		Ext.getCmp("main_search_fieldID").setValue(queryStore[history_position]["query"]);
		Ext.getCmp("main_search_full_text_fieldID").setValue(queryStore[history_position]["full_text_search"]);
		Ext.getCmp("pageSizeID").setValue(queryStore[history_position]["limit"]);
				
		store.lastOptions.params[store.paramNames.limit] = queryStore[history_position]["limit"];
		store.lastOptions.params[store.paramNames.start] = queryStore[history_position]["start"];
		
		store.reload();
	}
	
	function history_button_status()
	{
		if(history_position==0)
			Ext.getCmp("history_back").disable();
		else
			Ext.getCmp("history_back").enable();
		
		if((queryStore.length-1)>history_position)
			Ext.getCmp("history_forward").enable();
		else
			Ext.getCmp("history_forward").disable();
	}
	
	function letter_filter(letter)
	{
		if(Ext.getCmp('button_filter[' + last_filter + ']'))
			Ext.getCmp('button_filter[' + last_filter + ']').toggle(false);
		
		if(letter)
			Ext.getCmp('button_filter[]').toggle(false);

		Ext.getCmp('button_filter[' + letter + ']').toggle(true);
		last_filter = letter;
		
		filter_setting("letter",letter);	
	}
	
	var filter_store_data = [
			['filename','Filename'],
			['title','Title'],
			['artist','Artist'],
			['album','Album'],
			['genre','Genre']
		];
	// create the data store
	var filter_store = new Ext.data.SimpleStore({
			fields: [
				 {name: 'value'},
				 {name: 'text'}
			]
	});
	filter_store.loadData(filter_store_data);

  var grid = new Ext.grid.GridPanel({
		ddGroup: 'PlaylistDDGroup',
		enableDragDrop: true,
		border: false,
		id: alias + "_list",
	  title: title,
	  ds: ds,
	  cm: cm,
	  enableColLock: false,
	  loadMask: true,
		enableHdMenu: false,
		tbar: [	{ iconCls: 'icon-left', id: 'history_back', disabled: 'true', text: 'Back', handler: function(){
		
							history_position = history_position - 1;
							
							history_jump();
							// back
							}},
						{ iconCls: 'icon-right', id: 'history_forward', disabled: 'true', text: 'Forward', handler: function(){
		
							history_position = history_position + 1;
							
							history_jump();
							// forward
							}},
						new Ext.menu.Separator(),
						'Filter on: ', 
						new Ext.form.ComboBox({
																	id:'field_filter',
																	store: filter_store,
																	forceSelection: true,
																	valueField:'value',
																	displayField:'text',
																	typeAhead: true,
																	mode: 'local',
																	value: 'artist',
																	allowBlank: false,
																	triggerAction: 'all',
																	emptyText:'Please choose a filter...',
																	selectOnFocus:true,
																	onSelect: function(record, index)
																		{
																		if(this.fireEvent('beforeselect', this, record, index) !== false)
																			{
																			var v = this.getValue();
																			this.setValue(record.data[this.valueField || this.displayField]);
																			this.collapse();
																			this.fireEvent('select', this, record, index);
																			if (v != this.getValue()){
																				this.fireEvent('change', this, this.getValue(), v);
																				}
																			}
																		letter_filter(last_filter);
																		},
																	width:100
																}),
						{ enableToggle: true, text: 'All', id: 'button_filter[]',  pressed: true, handler : function(){ letter_filter(''); }},							
						{ enableToggle: true, text: '!', id: 'button_filter[!]', handler : function(){ letter_filter('!'); }},							
						{ enableToggle: true, text: '#', id: 'button_filter[#]', handler : function(){ letter_filter('#'); }},
						{ enableToggle: true, text: 'A', id: 'button_filter[a]', handler : function(){ letter_filter('a'); }},
						{ enableToggle: true, text: 'B', id: 'button_filter[b]', handler : function(){ letter_filter('b'); }},
						{ enableToggle: true, text: 'C', id: 'button_filter[c]', handler : function(){ letter_filter('c'); }},
						{ enableToggle: true, text: 'D', id: 'button_filter[d]', handler : function(){ letter_filter('d'); }},							
						{ enableToggle: true, text: 'E', id: 'button_filter[e]', handler : function(){ letter_filter('e'); }},
						{ enableToggle: true, text: 'F', id: 'button_filter[f]', handler : function(){ letter_filter('f'); }},
						{ enableToggle: true, text: 'G', id: 'button_filter[g]', handler : function(){ letter_filter('g'); }},
						{ enableToggle: true, text: 'H', id: 'button_filter[h]', handler : function(){ letter_filter('h'); }},							
						{ enableToggle: true, text: 'I', id: 'button_filter[i]', handler : function(){ letter_filter('i'); }},
						{ enableToggle: true, text: 'J', id: 'button_filter[j]', handler : function(){ letter_filter('j'); }},
						{ enableToggle: true, text: 'K', id: 'button_filter[k]', handler : function(){ letter_filter('k'); }},
						{ enableToggle: true, text: 'L', id: 'button_filter[l]', handler : function(){ letter_filter('l'); }},							
						{ enableToggle: true, text: 'M', id: 'button_filter[m]', handler : function(){ letter_filter('m'); }},
						{ enableToggle: true, text: 'N', id: 'button_filter[n]', handler : function(){ letter_filter('n'); }},
						{ enableToggle: true, text: 'O', id: 'button_filter[o]', handler : function(){ letter_filter('o'); }},
						{ enableToggle: true, text: 'P', id: 'button_filter[p]', handler : function(){ letter_filter('p'); }},							
						{ enableToggle: true, text: 'Q', id: 'button_filter[q]', handler : function(){ letter_filter('q'); }},
						{ enableToggle: true, text: 'R', id: 'button_filter[r]', handler : function(){ letter_filter('r'); }},
						{ enableToggle: true, text: 'S', id: 'button_filter[s]', handler : function(){ letter_filter('s'); }},
						{ enableToggle: true, text: 'T', id: 'button_filter[t]', handler : function(){ letter_filter('t'); }},							
						{ enableToggle: true, text: 'U', id: 'button_filter[u]', handler : function(){ letter_filter('u'); }},
						{ enableToggle: true, text: 'V', id: 'button_filter[v]', handler : function(){ letter_filter('v'); }},
						{ enableToggle: true, text: 'W', id: 'button_filter[w]', handler : function(){ letter_filter('w'); }},
						{ enableToggle: true, text: 'X', id: 'button_filter[x]', handler : function(){ letter_filter('x'); }},
						{ enableToggle: true, text: 'Y', id: 'button_filter[y]', handler : function(){ letter_filter('y'); }},
						{ enableToggle: true, text: 'Z', id: 'button_filter[z]', handler : function(){ letter_filter('z'); }}
					],
		height: 10000,
	  plugins: [rateColumnPlugin,new Ext.ux.grid.AutoSizeColumns(),new Ext.ux.grid.Search({
		iconCls:'icon-zoom',
		readonlyIndexes:[],
		searchText: 'substring',
		checkIndexes: ['title','artist','album'],
		tbPosition: 11,
		checkIndexes: cp.get("query_fields",'all'),
		disableIndexes:['filesize','duration','filemtime','fileatime','num_downloads','num_plays','bit_rate','rating'],
		minChars:1,
		myid: 'main_search_fieldID',
		autoFocus:true
		// ,menuStyle:'radio'
		}), new Ext.ux.grid.Search({
		iconCls:'icon-zoom',
		readonlyIndexes:[],
		searchText: 'fulltext:&nbsp;',
		tbPosition: 11,
		paramNames: {
		 fields:'fields',
		 query:'full_text_search',
		 from:'fulltext'
		},
		no_button: true,
		disableIndexes:['filesize','duration','filemtime','fileatime','num_downloads','num_plays','bit_rate'],
		minChars:4,
		myid: 'main_search_full_text_fieldID',
		autoFocus:true
		// ,menuStyle:'radio'
		}), new Ext.ux.grid.GridViewMenuPlugin, actions],
		forceFit: true,
		trackMouseOver: true,
	  autoWidth:true,        
		viewConfig: {
				forceFit:true
		},	  
		keys:
		{
				 key: 'a',
				 ctrl: true,
				 stopEvent: true,
				 handler: function() {
						grid.getSelectionModel().selectAll();
				 }
		},		
	  bbar: new Ext.PagingToolbar({
	    store: ds,
	    pageSize: 50,
			displayMsg: "{2} entries",
			displayInfo:true,
			listeners:
			{
				beforechange: function()
				{
					history_position++;
					queryStore = cut_array_to_n_elements(queryStore,history_position);					
				}
			},
	    plugins: [
				/*new Ext.ux.SlidingPager(),*/
				new Ext.ux.Andrie.pPageSize({
					beforeText: "Show",
					afterText: "entries"
					}
					)
				]
	  }),
		listeners:
		{
			sortchange: function(g,sort)
			{
			},
			render: function()
			{
			/*var tbar2 = new Ext.Toolbar({
			renderTo:Ext.getCmp("mp3_list").tbar,
			items:[
				{ iconCls: 'icon-left', id: 'history_back', disabled: 'true', text: 'Back', handler: function(){

					history_position = history_position - 1;
					
					history_jump();
					// back
					}},
				{ iconCls: 'icon-right', id: 'history_forward', disabled: 'true', text: 'Forward', handler: function(){

					history_position = history_position + 1;
					
					history_jump();
					// forward
					}}
				]
			});	*/			
			}
		}
	});
	//grid.getColumnModel().setHidden(1, true)
	
	Ext.apply(grid,{
			
	});
	
  grid.addListener({
  'celldblclick' : {
  fn : function(grid, rowIndex, columnIndex, event) {
  var record = grid.getStore().getAt(rowIndex);
  var ID = record.get('ID');
	record.data.num_plays = parseInt(record.data.num_plays) + 1;
	record.commit();
	player_obj.new_source("mp3_list");
	player_obj.play_index(rowIndex);
  },
  scope : this
  }
  });// end grid.addListener

  grid.addListener({
  'cellclick' : {
  fn : function(grid, rowIndex, columnIndex, event) {
	
	//Ext.getCmp("mp3_list").selModel.clearSelections();
	//Ext.getCmp("mp3_list").selModel.selectRow(rowIndex);
			
		if(!player_obj.currently_playingID) 
		{
			Ext.getCmp("playlistID").selModel.clearSelections();
			player_obj.new_source("mp3_list");
		}
	
  },
  scope : this
  }
  });// end grid.addListener

	ds.load({params:{start: 0, limit: 50}});
	
	return grid;
}

// *******************************************************************
// 
// PLAY LIST
//
// *******************************************************************

function play_list() {

  var alias = "playlist";
	var no_playlist_saving = false;
   
	var actions = new Ext.ux.grid.RowActions({
			header:'&nbsp;',
			getData:function(value, cell, record, row, col, store) {
					var pl = Ext.getCmp("playlist_selectionID");
					if(pl.selectedIndex>=0)
						var userID = pl.store.data.items[pl.selectedIndex].data.userID;
					else
						var userID = 0;

					if(!(1 || pl.getValue()<=0 || (userID == 2 && 1)))
						return {
							hideIndexCls: 1
						};
					else
						return {
							hideIndexCls: false
						};
					//return record.data || {};
				},
			actions:[
							{
				iconCls:'icon-extras',
				tooltip:'Extras'
				}
				,				{
				iconCls:'icon-delete',
				tooltip:'Delete',
				hideIndex: 'hideIndexCls'
				}
						],
			listeners: 
			{
				action: function(grid, record, action, row, col) {
					switch(action)
					{
					case "icon-extras":	
						var menu = extras_menu(record.data,"playlist");
						var cell = grid.getView().getCell(row,col);
						menu.show(Ext.get(cell));
						break;						
					case "icon-delete":
						var store = Ext.getCmp("playlistID").getStore();
						/*if(record.data.ID == player_obj.currently_playingID && player_obj.source == "playlist")
						{
							if(store.data.length==1)
								player_obj.stop_playing();
							else
								player_obj.prev_next(1);
						}*/
						
						store.remove(record);
						enable_disable_buttons();
						
						//player_obj.save_playlist();
					}
				}
			}
			}
		);
	
	var proxy = new Ext.data.HttpProxy({
			api: {
					read: 'grid/get_list_data.php?type=' + alias,
					update: 'save_rating.php'
			}
	});
	
	var writer = new Ext.data.JsonWriter({
			encode: true
	});	

	var ds = new Ext.data.Store({
			proxy: proxy,
			writer: writer,
			autoSave: true,
			reader: new Ext.data.JsonReader({
					successProperty: 'success',
					idProperty: 'ID',
					totalProperty: 'total',
					root: 'data'
				}, [
			{name:'ID'},
      {name:'filename'},
			{name:'filemtime', type: 'date', dateFormat: 'timestamp'},
			{name:'fileatime', type: 'date', dateFormat: 'timestamp'},
			{name:'title'},
			{name:'artist'},
			{name:'artistID'},
			{name:'album'},
			{name:'albumID'},
			{name:'genre'},
			{name:'rating'},
			{name:'comment'},
			{name:'year'},
			{name:'track'},
			{name:'filesize'},
			{name:'duration'},
			{name:'full_path'},
			{name:'num_downloads'},
			{name:'num_plays'},
			{name:'bit_rate'},
			{name:'sort_order'}
    ]),
		listeners:
		{
			load: function()
			{
				player_obj.stop_playlist = true;
			}
		}		
	});
	
	var rateColumnPlugin = new Ext.ux.grid.RateColumnPlugin({
		zeroSensitivity: 0.25,
		tickSize: 16
	});
	
	var cm = new Ext.grid.ColumnModel([
		{dataIndex: 'track', sortable: true, header: '#', width: 20},
	  { hidden: true, sortable: true, dataIndex: 'filename', header: 'Filename'},
		{ hidden: true, sortable: true, dataIndex: 'filemtime', header: 'Last modified on', renderer: Ext.util.Format.dateRenderer('d.m.Y H:i') },
		{ hidden: true, sortable: true, dataIndex: 'fileatime', header: 'Added on', renderer: Ext.util.Format.dateRenderer('d.m.Y H:i') },
		{dataIndex: 'title', sortable: true, header: 'Title'},
		{dataIndex: 'artist', sortable: true, header: 'Artist', renderer: renderArtist/*, cellActions:[
			{
			iconCls:'icon-artist-go',
			qtip:'Files von diesem Interpreten auflisten'
			}]*/},
		{ hidden: true, sortable: true, dataIndex: 'album', header: 'Album', renderer: renderAlbum/*, cellActions:[
			{
			iconCls:'icon-album-go',
			qtip:'Files von diesem Album auflisten'
			}]*/},
		{hidden: true, sortable: true, dataIndex: 'genre', header: 'Genre', width: 50},
		{hidden: true, sortable: true, dataIndex: 'comment', header: 'comment', width: 50},
		{hidden: true, sortable: true, dataIndex: 'year', header: 'year', width: 30},
		{hidden: true, sortable: true, dataIndex: 'filesize', header: 'Size', width: 40, renderer: renderFilesize, align: 'right'},
		{hidden: true, sortable: true, dataIndex: 'duration', header: 'Length', width: 30, renderer: GridRenderDuration, align: 'right'},
		{hidden: true, sortable: true, dataIndex: 'full_path', header: 'Path' , renderer: renderPath/*, cellActions:[
			{
			iconCls:'icon-go-to-folder',
			qtip:'Zum Ordner'
			}]*/},
		{hidden: true, sortable: true, dataIndex: 'num_plays', header: 'played', width: 30, renderer: renderNumber, align: 'right'},
		{hidden: true, sortable: true, dataIndex: 'bit_rate', header: 'Bit-rate', width: 30, renderer: renderBitrate, align: 'right'},
		/*{dataIndex: 'duration', header: 'Länge', width: 30, renderer: GridRenderDuration, align: 'right', sortable: false},*/
		{header: 'rating', sortable: true, dataIndex: 'rating', width: 100, renderer: rateColumnPlugin.createRenderer(5)}
					,actions
				]);
	cm.defaultSortable = true;

  var grid = new Ext.grid.GridPanel({
		ddGroup: 'PlaylistDDGroup',
		enableDragDrop: true,
		id: "playlistID",
	  ds: ds,
	  cm: cm,
		enableHdMenu: false,
		tbar: [
			new Ext.form.ComboBox({
				fieldLabel: 'Playlist',
				id: 'playlist_selectionID',
				hiddenName:'ID',
				tpl: '<tpl for="."><div ext:qtip="{tooltip}" class="x-combo-list-item{class_add}">{name}</div></tpl>',
				store:new Ext.data.JsonStore({
					url: 'json.data.php',
					root: 'rows',
					baseParams: {tab: 'playlist',no_assign: 1, addnobody: 1, nobody_text: 'none'},
					fields: ['ID', 'name', 'tooltip','class_add','userID'],
					autoLoad: true,
					listeners:
						{
						load: function()
							{
								Ext.getCmp("playlist_selectionID").setValue(0);
							}
						}					
				}),
				valueField:'ID',
				displayField:'name',
				forceSelection: true,
				typeAhead: true,
				mode: 'local',
				triggerAction: 'all',
				emptyText:'Choose playlist',
				selectOnFocus:true,
				width:160,				
				listWidth: 230,
				onSelect: function(record, index)
					{
					if(this.fireEvent('beforeselect', this, record, index) !== false)
						{
						var v = this.getValue();
						this.setValue(record.data[this.valueField || this.displayField]);
						this.collapse();
						this.fireEvent('select', this, record, index);
						if (v != this.getValue()){
							this.fireEvent('change', this, this.getValue(), v);
							}
						}
					
					var store = Ext.getCmp("playlistID").getStore();
					if(store.lastOptions && store.lastOptions.params)
						store.lastOptions.params[store.paramNames.start] = 0;

					store.baseParams.playlistID = this.getValue();
					//enable_disable_buttons();
					no_playlist_saving = true;
					store.setDefaultSort("sort_order","ASC");
					grid.getView().updateHeaderSortState();
					grid.getView().updateHeaders();
					store.reload(
						{
							callback: function()
							{
							enable_disable_buttons();
							}
						}
					);
					no_playlist_saving = false;
					}
				})
						
				,
				{
					iconCls: 'icon-playlist-menu',  // <-- icon
					menu: [
									{
											id: "playlist_add_buttonID",
											iconCls:'icon-add',
											text: 'Create new playlist',
											handler: create_playlist
									},
									{
											disabled: true, 
											id: "playlist_edit_buttonID",
											iconCls:'icon-edit',
											text: 'Edit playlist',
											handler: edit_playlist
									},
									{
											disabled: true, 
											id: "playlist_delete_buttonID", 
											iconCls:'icon-delete',
											text: 'Delete playlist',
											handler: delete_playlist
									},
									{
											disabled: true, 
											id: "playlist_clear_buttonID", 
											iconCls:'icon-clear-playlist',
											text: 'clear playlist',
											handler: clear_playlist
									}
									]
        }				
							
			],	
	  enableColLock: false,
	  loadMask: true,
	  plugins: [rateColumnPlugin,new Ext.ux.grid.AutoSizeColumns(),new Ext.ux.grid.GridViewMenuPlugin,actions],
		forceFit: true,
		border: false,
		trackMouseOver: false,
	  autoWidth:true,        
		layout:'fit',
		viewConfig: {
				forceFit:true
		},
		listeners:
		{
			sortchange: function(g,sort)
			{
				var store = Ext.getCmp("playlistID").getStore();
				store.baseParams.last_sort_field = sort.field;
				store.baseParams.last_sort_dir = sort.direction;
			},
			render: function(g)
			{
      var ddrow = new Ext.ux.dd.GridReorderDropTarget(g, {
        copy: false
        ,listeners: {
          beforerowmove: function(objThis, oldIndex, newIndex, records){
            // code goes here
            // return false to cancel the move
          },
          afterrowmove: function(objThis, oldIndex, newIndex, records){
						player_obj.save_playlist();
            // code goes here
          },
          beforerowcopy: function(objThis, oldIndex, newIndex, records){
						//alert("3");
            // code goes here
            // return false to cancel the copy
          },
          afterrowcopy: function(objThis, oldIndex, newIndex, records){
						//alert("4");
            // code goes here
          }
        }
      });
			}
		}		
	});
	//grid.getColumnModel().setHidden(1, true)
	
	function enable_disable_buttons()
	{
		var pl = Ext.getCmp("playlist_selectionID");

		if(pl.selectedIndex>=0)
			var userID = pl.store.data.items[pl.selectedIndex].data.userID;
		else
			var userID = 0;

		if(Ext.getCmp("playlistID").store.getTotalCount() && pl.getValue()>=0)
		{
			if(Ext.getCmp("playlist_clear_buttonID")) Ext.getCmp("playlist_clear_buttonID").enable();
		}
		else
		{
			if(Ext.getCmp("playlist_clear_buttonID")) Ext.getCmp("playlist_clear_buttonID").disable();
		}

		if(pl.getValue() && pl.getValue()>0 && (1 || (userID == 2 && 1)))
		{
			if(Ext.getCmp("playlist_edit_buttonID")) Ext.getCmp("playlist_edit_buttonID").enable();
			if(Ext.getCmp("playlist_delete_buttonID")) Ext.getCmp("playlist_delete_buttonID").enable();
		}
		else
		{
		if(Ext.getCmp("playlist_edit_buttonID")) Ext.getCmp("playlist_edit_buttonID").disable();
		if(Ext.getCmp("playlist_delete_buttonID")) Ext.getCmp("playlist_delete_buttonID").disable();
		}
	}
	
	function clear_playlist()
	{
		Ext.Msg.show({
			title:'Warning',
			msg: 'Are you sure you want to clear this playlist?',
			buttons: Ext.Msg.YESNO,
			buttonText: Ext.MessageBox.buttonText.yes = 'Yes',
			buttonText: Ext.MessageBox.buttonText.no = 'No',
			icon: Ext.MessageBox.QUESTION,
			fn: function(btn)
				{
					if(btn=="yes")
					{
						if(DEMO_MODE)
						{
							Ext.MessageBox.show({
								 title: 'Demo-Version',
								 msg: 'You can not clear playlists in the demo',
								 buttons: Ext.MessageBox.OK,
								 icon: Ext.MessageBox.INFO
							});								
						}
						else
						{		
							var store = Ext.getCmp("playlistID").getStore().removeAll();
							player_obj.save_playlist();
							if(Ext.getCmp("playlist_clear_buttonID")) Ext.getCmp("playlist_clear_buttonID").disable();
						}
					}
				}
		});
	}
	
	function delete_playlist()
	{
		Ext.Msg.show({
			title:'Warning',
			msg: 'Are you sure you want to delete this playlist?',
			buttons: Ext.Msg.YESNO,
			buttonText: Ext.MessageBox.buttonText.yes = 'Yes',
			buttonText: Ext.MessageBox.buttonText.no = 'No',
			icon: Ext.MessageBox.QUESTION,
			fn: function(btn)
				{
					if(btn=="yes")
					{
						if(DEMO_MODE)
						{
							Ext.MessageBox.show({
								 title: 'Demo-Version',
								 msg: 'You can not delete playlists in the demo',
								 buttons: Ext.MessageBox.OK,
								 icon: Ext.MessageBox.INFO
							});								
						}
						else
						{								
							Ext.Ajax.request(
								{
								url:'playlist_handle.php', 
								params: { id: Ext.getCmp('playlist_selectionID').getValue(), action: 'delete' },
								waitMsg:'Deleting...',
								success:function(form, action)
									{
									Ext.Msg.show({
										title: 'Delete', 
										msg: 'Successfully deleted',
										minWidth: 200,
										modal: true,
										icon: Ext.Msg.INFO,
										buttons: Ext.Msg.OK
										});
									Ext.getCmp('playlist_selectionID').disable();
									Ext.getCmp('playlist_selectionID').store.reload(
										{
											callback: function()
												{
													Ext.getCmp("playlist_selectionID").setValue(0);
													Ext.getCmp('playlist_selectionID').enable();

													var store = Ext.getCmp("playlistID").getStore();
													if(store.lastOptions && store.lastOptions.params)
														store.lastOptions.params[store.paramNames.start] = 0;
													store.baseParams.playlistID = 0;
													store.reload();

													enable_disable_buttons();
												}
										})
									},
								failure:function(form,action)
									{
									Ext.Msg.show({
										title: 'Error', 
										msg: 'Error while trying to delete the playlist',
										minWidth: 200,
										modal: true,
										icon: Ext.Msg.ERROR,
										buttons: Ext.Msg.OK
										});									
									}
								})
						}
					}
				}
			}
		)
	}
	
	function edit_playlist()
	{
		Ext.MessageBox.prompt('Edit playlist', 'Please enter a name for the playlist:', function(btn,text)
		{
			if(btn=="ok")
			{
				if(!text)
				{
					Ext.Msg.show({
						title: 'Error', 
						msg: 'You need a name for your playlist',
						minWidth: 200,
						modal: true,
						icon: Ext.Msg.ERROR,
						buttons: Ext.Msg.OK
						});		
				}
				else
				{
					if(DEMO_MODE)
					{
						Ext.MessageBox.show({
							 title: 'Demo-Version',
							 msg: 'You can not edit playlists in the demo',
							 buttons: Ext.MessageBox.OK,
							 icon: Ext.MessageBox.INFO
						});								
					}
					else
					{
						id = Ext.getCmp("playlist_selectionID").getValue();
						Ext.Ajax.request({
						 url: 'playlist_handle.php',
						 params: { name: text, action: 'edit',id: id },
						 success: function( result, options)
						 {
							 if(Ext.util.JSON.decode(result.responseText).success)
							 {
								 Ext.getCmp("playlist_selectionID").disable();
								 Ext.getCmp("playlist_selectionID").store.reload({
										 callback: function() {
											 Ext.getCmp("playlist_selectionID").setValue(id);
											 Ext.getCmp("playlist_selectionID").enable();
											 enable_disable_buttons();
										 }
								 });
							 }
							 else
							 {
									Ext.Msg.show({
										title: 'Error', 
										msg: Ext.util.JSON.decode(result.responseText).message,
										minWidth: 200,
										modal: true,
										icon: Ext.Msg.ERROR,
										buttons: Ext.Msg.OK
										});												 
							 }
						 },
						 failure: function( result, options)
						 {
							 alert(result.responseText);
						 } 
						});
					}
				}
			}
		},'',false,Ext.getCmp("playlist_selectionID").getRawValue()); 
	}
	
	function create_playlist()
	{
		Ext.MessageBox.prompt('New playlist', 'Please enter a name for the playlist:', function(btn,text)
			{
				if(btn=="ok")
				{
					if(!text)
					{
						Ext.Msg.show({
							title: 'Error', 
							msg: 'You need a name for your playlist',
							minWidth: 200,
							modal: true,
							icon: Ext.Msg.ERROR,
							buttons: Ext.Msg.OK
							});		
					}
					else
					{
						if(DEMO_MODE)
						{
							Ext.MessageBox.show({
								 title: 'Demo-Version',
								 msg: 'The demo does not support creating new playlists',
								 buttons: Ext.MessageBox.OK,
								 icon: Ext.MessageBox.INFO
							});								
						}
						else
						{
							Ext.Ajax.request({
							 url: 'playlist_handle.php',
							 params: { name: text, action: 'create' },
							 success: function( result, options)
							 {
								 if(Ext.util.JSON.decode(result.responseText).success)
								 {
									 Ext.getCmp("playlist_selectionID").disable();
									 Ext.getCmp("playlist_selectionID").store.reload({
											 callback: function() {
												 id = Ext.util.JSON.decode(result.responseText).id;
												 Ext.getCmp("playlist_selectionID").setValue(id);
												 Ext.getCmp("playlist_selectionID").enable();
												 
													var store = Ext.getCmp("playlistID").getStore();
													if(store.lastOptions && store.lastOptions.params)
														store.lastOptions.params[store.paramNames.start] = 0;
													store.baseParams.playlistID = id;
													store.reload();

													enable_disable_buttons();
											 }
									 });
								 }
								 else
								 {
										Ext.Msg.show({
											title: 'Error', 
											msg: Ext.util.JSON.decode(result.responseText).message,
											minWidth: 200,
											modal: true,
											icon: Ext.Msg.ERROR,
											buttons: Ext.Msg.OK
											});												 
								 }
							 },
							 failure: function( result, options)
							 {
								 alert(result.responseText);
							 } 
							});
						}
					}
				}
			}); 
	}		
	
  grid.addListener({
  'celldblclick' : {
  fn : function(grid, rowIndex, columnIndex, event) {
  var record = grid.getStore().getAt(rowIndex);
  var ID = record.get('ID');
	record.data.num_plays = parseInt(record.data.num_plays) + 1; 
	record.commit();
	player_obj.new_source("playlist");
	player_obj.play_index(rowIndex);
  },
  scope : this
  }
  });// end grid.addListener
	
  grid.addListener({
  'cellclick' : {
  fn : function(grid, rowIndex, columnIndex, event) {
	
	//Ext.getCmp("playlistID").selModel.clearSelections();
	//Ext.getCmp("playlistID").selModel.selectRow(rowIndex);
		if(!player_obj.currently_playingID) 
		{
			Ext.getCmp("mp3_list").selModel.clearSelections();
			player_obj.new_source("playlist");
		}
	
  },
  scope : this
  }
  });// end grid.addListener
	
  grid.addListener({
  'sortchange' : {
  fn : function(grid, rowIndex, columnIndex, event) {
		if(!no_playlist_saving)
		{
			player_obj.save_playlist();
		}
  },
  scope : this
  }
  });// end grid.addListener
	
	ds.load();
	
	return grid;
}