Ext.onReady(function() {
	Ext.QuickTips.init();

	// create dataview store
	function createDataview(store, template) {

		this.dataview = new Ext.DataView({
			store : store,
			width : 600,
			tpl : template,// ,
			autoHeight : true,
			loadingText : 'Loading..',
			singleSelect : true,
			overClass : 'x-view-over',
			itemSelector : 'div.thumb-wrap',
			emptyText : 'Loading...',
			prepareData : function(data) {
				data.shortName = Ext.util.Format.ellipsis(data.name, 15);
				return data;
			}
		});

		// dataview toolbar
		this.dataviewToolbar = new Ext.Toolbar({
			text : 'ds'
		});

		this.panel = new Ext.Panel({
			id : 'images-view',
			title : '- Poster -',
			frame : true,
			width : 600,
			height : 400,
			// tbar: tb,
			region : 'center',
			hideBorders : true,
			tabTip : 'klik op 1 van de opties ',
			height : 500,
			// autoHeight : true,
			autoScroll : true

		});

	}

	// get for sale verhicles parts that belongs to the asigned company
	function getPosterStore() {
		this.createStore = function(posterCat) {
			this.store = new Ext.data.JsonStore({
				url : '/pages/poster.php?posterCat=' + posterCat,
				root : 'images',
				fields : ['name', 'url', 'ID', 'thumb', 'catID', 'catName',
						'catSubID', 'catSubName']
			});
		}

		this.getMyStore = function() {
			return this.store;
		}

		this.reloadMyStore = function() {
			this.store.load();
		}

		this.countRecords = function() {
			// return this.store.getById('url');
			return this.store.getTotalCount();
		}

		return this.store;
	}

	// get for sale verhicles parts that belongs to the asigned company
	function getSubWallpaperStore() {
		this.createStore = function(subCat) {
			this.store = new Ext.data.JsonStore({
				url : '/pages/poster.php?subCat=' + subCat,
				root : 'images',
				fields : ['name', 'url', 'ID', 'thumb', 'catID', 'catName',
						'catSubID', 'catSubName']
			});
		}

		this.getMyStore = function() {
			return this.store;
		}

		this.reloadMyStore = function() {
			this.store.load();
		}

		this.countRecords = function() {
			// return this.store.getById('url');
			return this.store.getTotalCount();
		}

		return this.store;
	}

	// create dataview
	function createPosterView(posterCat) {

		// create store classes
		var extendStore = new getPosterStore();
		extendStore.createStore(posterCat);
		extendStore.reloadMyStore();
		var tpl = new Ext.XTemplate(
				'<tpl for=".">',
				'<div class="thumb-wrap" id="{name}">',
				'<div class="thumb"><img src="{thumb}" title="{name}" ></div>',
				'<div class="thumb">{id}</div>',
				'<div class="loading-indicator"></div>',
				'<span class="x-editable"><b>{name}</b><br>{catName}<br>{catSubName}</span></div>',
				'</tpl>', '<div class="x-clear"></div>');

		var myAvaiblePosters = new createDataview(extendStore.getMyStore(), tpl);

		// get panel
		var panel = myAvaiblePosters.panel;

		// get dataview
		this.dataview = myAvaiblePosters.dataview;

		var carMenu = new Ext.menu.Menu({
			id : 'mainMenu',
			items : [{
				text : 'Cars',
				iconCls : 'cabrioletRed',
				menu : { // <-- submenu by nested config object
					items : [
							// stick any markup in a menu
							'<b class="menu-title">Choose a brand</b>', {
								text : 'BMW',
								iconCls : 'carGrey',								
								handler : function() {
									var extendStore = new getSubWallpaperStore();
									extendStore.createStore(6);
									extendStore.reloadMyStore();
									myAvaiblePosters.dataview
											.setStore(extendStore.getMyStore());
								}
							}, {
								text : 'Audi',
								iconCls : 'cabrioletRed',
								handler : function() {
									var extendStore = new getSubWallpaperStore();
									extendStore.createStore(9);
									extendStore.reloadMyStore();
									myAvaiblePosters.dataview
											.setStore(extendStore.getMyStore());
								}
							}, {
								text : 'Bentley',
								iconCls : 'carGrey',
								handler : function() {
									var extendStore = new getSubWallpaperStore();
									extendStore.createStore(13);
									extendStore.reloadMyStore();
									myAvaiblePosters.dataview
											.setStore(extendStore.getMyStore());
								}
							}, {
								text : 'Alfa Romeo',
								iconCls : 'cabrioletRed',
								handler : function() {
									var extendStore = new getSubWallpaperStore();
									extendStore.createStore(12);
									extendStore.reloadMyStore();
									myAvaiblePosters.dataview
											.setStore(extendStore.getMyStore());
								}
							}, {
								text : 'Austin Martin',
								iconCls : 'carGrey',
								handler : function() {
									var extendStore = new getSubWallpaperStore();
									extendStore.createStore(11);
									extendStore.reloadMyStore();
									myAvaiblePosters.dataview
											.setStore(extendStore.getMyStore());
								}
							}]
				}
			}]
		});

		var carSport = new Ext.menu.Menu({
			id : 'mainMenu',
			items : [{
				text : 'Car sport',
				iconCls : 'helmet5',
				menu : { // <-- submenu by nested config object
					items : [
							// stick any markup in a menu
							'<b class="menu-title">Choose a category</b>', {
								text : 'Formule 1',
								iconCls : 'helmet1',
								handler : function() {
									var extendStore = new getSubWallpaperStore();
									extendStore.createStore(5);
									extendStore.reloadMyStore();
									myAvaiblePosters.dataview
											.setStore(extendStore.getMyStore());
								}
							}]
				}
			}, {
				text : 'Motorcycle sport',
				iconCls : 'motorcycle1',
				menu : { // <-- submenu by nested config object
					items : [
							// stick any markup in a menu
							'<b class="menu-title">Choose a category</b>', {
								text : 'Moto GP',
								iconCls : 'motorcycle1',
								handler : function() {
									var extendStore = new getSubWallpaperStore();
									extendStore.createStore(3);
									extendStore.reloadMyStore();
									myAvaiblePosters.dataview
											.setStore(extendStore.getMyStore());
								}
							}]
				}
			}, {
				text : 'Ball sport',
				iconCls : 'footbal1',
				menu : { // <-- submenu by nested config object
					items : [
							// stick any markup in a menu
							'<b class="menu-title">Choose a category</b>',{
								text : 'Voetbal',								
								iconCls : 'footbal1',
								handler : function() {
									var extendStore = new getSubWallpaperStore();
									extendStore.createStore(1);
									extendStore.reloadMyStore();
									myAvaiblePosters.dataview
											.setStore(extendStore.getMyStore());
								}
							}, {
								text : 'Tennis',
								iconCls : 'tennis1',
								handler : function() {
									var extendStore = new getSubWallpaperStore();
									extendStore.createStore(2);
									extendStore.reloadMyStore();
									myAvaiblePosters.dataview
											.setStore(extendStore.getMyStore());
								}
							}]
				}
			}]
		});

		var allButton = new Ext.Button({
			text : 'Alles',
			iconCls : 'computer1',
			handler : function() {
				var extendStore = new getPosterStore();
				extendStore.createStore('all');
				extendStore.reloadMyStore();
				myAvaiblePosters.dataview.setStore(extendStore.getMyStore());
			}
		});


		panel.add({
			tbar : ['-',allButton, '-',{
				text : 'Verhicles Wallpapers',
				iconCls : 'verhicle1', // <-- icon
				menu : carMenu
			}, '-',{
				text : 'Sport Wallpapers',
				iconCls : 'sportKano', // <-- icon
				menu : carSport
			}, '-']
		});

		panel.add({
			items : [dataview]
		});

		this.dataview.on('click', function() {

			var countSelections = myAvaiblePosters.dataview.getSelectionCount();

			// check if anything is selected in thhe dataview
			if (countSelections < 1) {
				alert('Niets geselecteerd')
			} else {
				var data = myAvaiblePosters.dataview.getSelectedRecords()[0];
				/*
				 * var buyButton = new Ext.Button({ text : 'Koop Poster',
				 * iconCls : 'info', handler : function() { alert('komt nog'); }
				 * });
				 * 
				 * var tb = new Ext.Toolbar({ id : 'toolbar', buttons : ['-',
				 * buyButton, '-'] });
				 */
				// get selected record
				var posterID = data.get('ID');
				var posterName = data.get('name');
				var posterUrl = data.get('url');
				var posterCat = data.get('cat');

				var infoPanel = new Ext.Panel({
					title : posterName,
					id : 'posterInfoPanel',
					html : '<img src="' + posterUrl
							+ '" width="800" height="600">'// ,
							// tbar : tb
				});

				showWindow(infoPanel, '600', '800', 'poster', true);

			}
		});
		/*
		 * function topToolbar() { Ext.QuickTips.init();
		 * 
		 * 
		 * //topToolbar(); panel.render('posterView');
		 */
		panel.render('posterView');
	}

	function showWindow(item, height, width, ID, hideBackground) {
		var sameWindow = ID;

		var win = new Ext.Window({
			width : width,
			id : ID,
			name : ID,
			constrain : true,
			height : null,
			layout : 'Fit',
			modal : hideBackground,
			autoScroll : true,
			plain : true,
			resizable : false,
			collapsible : true,
			bodyBorder : false,
			items : [item]
		});

		win.show();
	}
	
	function randomNummbers(maxCatNumber) {
			var randNumber = Math.random();
			randNumber = randNumber * maxCatNumber + 1;
			var numberNew = Math.round(randNumber);
			var numberNew = Math.round(randNumber);
			if(numberNew == 4 || numberNew ==7 || numberNew  == 10 || numberNew == 8){
				return 6;
			}

			return numberNew;
	}
	var randomNumber = randomNummbers(13);
	createPosterView(randomNumber);

});