App.ArticleView = function(config) {

	if (! config) config = { id: 'av' };

	return {
		init: function() {		   
			this.dlg = new Ext.BasicDialog(config.id || Ext.id(), {
				title: 'Artikelinformationen',
				autoCreate: true,
				width: 600,
				height: 420,
				minWidth: 600,
				minHeight: 300,
				syncHeightBeforeShow: true,
				fixedcenter: true,
				shadow: true,
				collapsible:false
			});
            
			if (! this.dlg.footer) {
				this.dlg.footer = Ext.DomHelper.append(this.dlg.bwrap, {tag: "div", cls:"x-dlg-ft"}, true);
			}
            
			this.dlg.addKeyListener(27, this.dlg.hide, this.dlg);
			this.tb = new Ext.Toolbar(this.dlg.footer.createChild({ tag: 'div' }));            
			this.quantity = new Ext.form.NumberField({ autoCreate: { tag: 'input', type: 'text', size: '1', autoComplete: 'off' }, value: '1', allowDecimals: false, allowNegative: false, maxLength: 4 });
			this.quantity.on('focus', function() { this.getEl().dom.select(); });            
			this.btnBasket = new Ext.Toolbar.Button({
				text: 'In den Warenkorb',
				cls: 'x-btn-text-icon',
				icon: 'lib/images/basket_add.png',
				handler: this.toBasket,
				scope: this
			});
			this.tb.add(
				'Anzahl:',
				this.quantity,
				' ',
				this.btnBasket
			);
			this.dlg.footer.appendChild(this.tb.getEl());
			this.avDetails = this.dlg.body.createChild({ tag: 'div', id: 'av-details' });
			this.dlg.body.appendChild(this.avDetails);
			this.dataTemplate = new Ext.Template('<div class="x-form x-form-ct">'
				+ '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>'
				+ '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">'
				+ '<h3>{Name}</h3>'
				+ '<div class="x-form-column" id="av-col-data">'
				+ '<fieldset class="x-form-label-right"><legend>Beschreibung</legend><div>{Description}</div>'
				+ '</fieldset>'
				+ '<fieldset class="x-form-label-right"><legend>Daten</legend>'
				+ '<div class="x-form-item"><label>Katalognummer</label><div class="x-form-element">{CatalogueId}</div></div>'
				+ '<div class="x-form-clear-left"></div>'
				+ '<div class="x-form-item"><label>Schlüssel-Nr.</label><div class="x-form-element">{KeyId}</div></div>'
				+ '<div class="x-form-clear-left"></div>'
				+ '<div class="x-form-item"><label>Hersteller</label><div class="x-form-element">{Manufacturer}</div></div>'
				+ '<div class="x-form-clear-left"></div>'
				+ '<div class="x-form-item"><label>Hersteller-Nr.</label><div class="x-form-element">{ManufacturersMatchcode}</div></div>'
				+ '<div class="x-form-clear-left"></div>'
				+ '<div class="x-form-item"><label>Katalog-Seite</label><div class="x-form-element">{CataloguePage}</div></div>'
				+ '<div class="x-form-clear-left"></div>'
				+ '<div class="x-form-item"><label>EAN</label><div class="x-form-element">{EAN}</div></div>'
				+ '<div class="x-form-clear-left"></div>'
				+ '</fieldset>'
				+ '<fieldset class="x-form-label-right"><legend>Eigenschaften</legend>'
				+ '<div id="av-features">{f0}{f1}{f2}{f3}{f4}{f5}</div>'				
				+ '</fieldset>'
				+ '<fieldset class="x-form-label-right"><legend>Preise</legend>'
				+ '<div id="av-price">{p1}{p2}{p3}</div>'
				+ '<div><small>Alle angegebenen Preise gelten zzgl. {Vat:percent} MwSt.</small></div>'
				+ '</fieldset>'
				+ '</div>'
				+ '<div class="x-form-ct x-form-column" id="av-col-thumbs">'
				+ '<fieldset class="x-form-label-right"><legend>Abbildungen</legend>'
				+ '<div id="av-thumbs"></div>'
				+ '<div style="margin-top:5px;">Mauszeiger über Miniatur platzieren für vergrößerte Ansicht</div>'
				+ '</fieldset>'
				+ '</div>'
				+ '<div class="x-form-clear-left"></div>'
				+ '</div></div></div>'
				+ '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>'
				+ '</div>'
			);
			this.dataTemplate.compile();
			this.featureTemplate = new Ext.Template('<div class="x-form-item"><label>{Name}</label><div class="x-form-element">{Value}</div></div>');
			this.featureTemplate.compile();
			this.priceTemplate = new Ext.Template('<div class="x-form-item"><label>ab {Quantity} Stück/VE</label><div class="x-form-element">{Netto}</div></div>');
			this.priceTemplate.compile();
			this.thumbTemplate = new Ext.Template(
				'<div class="thumb-wrap" id="{Filename}">' +
				'<div class="thumb"><img id="th_{Filename}" src="getImage.php?filename={Filename}&zeit=' + Math.random() + '" style="width:120px; height:120px;"></div></div>'
			);
			this.thumbTemplate.compile();
			this.zoomTemplate = new Ext.Template(
				'<div class="img-zoom"><img src="content/images/{Filename}" title="{Filename}" /></div>'
			);
			this.zoomTemplate.compile();
		},
        
        
		showCatalogueId: function(catalogueId) {
			if (! this.dlg)
				this.init();
			var conn = new Ext.data.Connection();
			conn.request({method: 'POST', url: 'shop.php', params: { realm: 'Article', CatalogueId: catalogueId, action: 'details' } });
			conn.on('requestcomplete', this.loadSuccess, this);
		},
		
				
		show: function(articlesId) {
			if (! this.dlg)
				this.init();
			var conn = new Ext.data.Connection();
			conn.request({method: 'POST', url: 'shop.php', params: { realm: 'Article', ArticlesId: articlesId, action: 'details' } });
			conn.on('requestcomplete', this.loadSuccess, this);
		},

		loadSuccess: function(sender, param) {
			var data = Ext.util.JSON.decode(param.responseText);
			this.ArticlesId = data.Record.Id;		
			if (data.Record.IsAllowed){
				this.quantity.enable();
				this.btnBasket.enable();
				this.btnBasket.setText("In den Warenkorb");
			}
			else{
				this.quantity.disable();
				this.btnBasket.disable();
				this.btnBasket.setText("Artikel kann nicht bestellt werden");
			}
			if (data.Record.IsSoldOut == '1') {
				this.dlg.hide();
				Ext.MessageBox.alert('Hinweis', 'Dieser Artikel ist zur Zeit vergriffen.');
				return;
			}
			App.Categories.setPath(data.Record.Path);
			var avD = Ext.get('av-details');
			var f = data.Record.Features;			

			data.Record.f0 = f[0] ? this.featureTemplate.apply({Name: f[0].Name, Value: f[0].Value}) : ''; 
			data.Record.f1 = f[1] ? this.featureTemplate.apply({Name: f[1].Name, Value: f[1].Value}) : '';
			data.Record.f2 = f[2] ? this.featureTemplate.apply({Name: f[2].Name, Value: f[2].Value}) : '';
			data.Record.f3 = f[3] ? this.featureTemplate.apply({Name: f[3].Name, Value: f[3].Value}) : '';
			data.Record.f4 = f[4] ? this.featureTemplate.apply({Name: f[4].Name, Value: f[4].Value}) : '';
			data.Record.f5 = f[5] ? this.featureTemplate.apply({Name: f[5].Name, Value: f[5].Value}) : '';

			var p = data.Record.Price;
			data.Record.p1 = p.Quantity1 > 0 ? this.priceTemplate.apply({ Quantity: p.Quantity1, Netto: Ext.util.Format.deMoney(p.Netto1) }) : '';
			data.Record.p2 = p.Quantity2 > 0 ? this.priceTemplate.apply({ Quantity: p.Quantity2, Netto: Ext.util.Format.deMoney(p.Netto2) }) : '';
			data.Record.p3 = p.Quantity3 > 0 ? this.priceTemplate.apply({ Quantity: p.Quantity3, Netto: Ext.util.Format.deMoney(p.Netto3) }) : '';
            
			avD.update(this.dataTemplate.apply(data.Record));
			if (this.view)
				this.view.purgeListeners();

			this.view = new Ext.JsonView("av-thumbs", this.thumbTemplate, {
				jsonRoot: 'Thumbs',
				emptyText: '<br>Zu diesem Artikel sind keine Abbildungen verfügbar.<br>'
			});
            
			this.view.on('loadexception', function() { alert('OnLoadException'); }, this.view);
			this.view.on('load', function() {
             
				var h = Ext.get('av-details').getSize().height;
				var wh = App.getLayout().getViewSize().height - 78;
				this.dlg.setContentSize(580, h > wh ? wh : h);
				Ext.each(this.view.getNodes(), function(node) {
					var data = this.view.getNodeData(node);
					Ext.QuickTips.register({
						target: Ext.get('th_' + data.Filename)
						, autoHide: false
						, showDelay: 100
						// , Delay: 150000
						, width: data.Width + 20
						, text: this.zoomTemplate.apply(data)
					});
				}, this);
			}, this);
			// this.view.on('contextmenu', function(o, i, n, e) { e.stopEvent(); return false; }, this.view);
			this.view.load({ method: 'POST', url: 'shop.php', params: { realm: 'Article', ArticlesId: this.ArticlesId, action: 'thumbs' } });
			this.dlg.show();
		},

		hide: function() {
			if (this.dlg) this.dlg.hide();
		}

		, toBasket: function() {
			var q = App.ArticleView.quantity.getRawValue();
			App.Basket.addArticle(App.ArticleView.ArticlesId, q);
			App.ArticleView.quantity.setValue(1);
			this.dlg.hide();
		}
	};
}();

Ext.onReady(App.ArticleView.init, App.ArticleView, true);