var mod_eshop_article = function(){

    // shorthands
   	var Tree = Ext.tree;
	var dc = new Ext.data.Connection;
	var dt = new Ext.util.DelayedTask();
	var dh = Ext.DomHelper;
	
	return {

		// private vars
		json: {},
		artitems: {},
		
		singleHit: true,
		
		// constructor
		init : function()
		{
			// just get first uid (singleton)
			for(var uid in Ext.inCMS.eshop)
			{
				this.json = Ext.inCMS.eshop[uid];
				break;
			}
			
			if(this.json.artitems) this.buildMultipleArticle();
		},
		
		buildMultipleArticle: function()
		{
			// the data store (date, value pairs)
			this.artitems = new Ext.data.Store({
				reader: new Ext.data.JsonReader({
					root: 'artitems',
					fields: this.json.artitemsfields
				}),
				data: this.json
			});
			
			// query default item
			var result = this.artitems.query('defaultitem','1');
			
			
			// build options selects
			if(this.json['options'])
			{
				var options = this.json.options;
				
				
				
				
				for(var o in options)
				{
					var curoption = options[o];
					var curinput = Ext.get('opt_' + o);
					
					// option type (select, radio, label)
					switch(curinput.dom.tagName.toLowerCase())
					{
						// currently, radio only function properly if used as first option
						case 'div':
							var defvalid = result.items[0].data['opt_' + o + '_id'];
							
							for(var ov in curoption)
							{
								var optdiv = curinput.createChild({
									id: 'opt_' + o + '_' + ov + '_div',
									children: [
										{
											id: 'opt_' + o + '_' + ov,
											name: 'opt_' + o,
											tag: 'input',
											type: 'radio',
											value: ov
										},
										{
											tag: 'span',
											html: curoption[ov]
										}
									]
								});
								
								var checkbox = Ext.get('opt_' + o + '_' + ov);
								checkbox.on('click', this.updateOptions, this, {optid: o});
								if(ov == defvalid) checkbox.dom.checked = true;
							}
						break;
						
						case 'select':
							var defvalid = result.items[0].data['opt_' + o + '_id'];
							
							this.buildSelect(o, defvalid);
						break;
					}
					
					this.artitems.filterBy(this.filterCurrentArtItem, this);
				}
			}
		},
		
		
		buildSelect: function(o, defvalid)
		{
			var curoption = this.json.options[o];
			var curinput = Ext.get('opt_' + o);
			
			
			var optCount = this.artitems.getCount();
			var availOptVal = {};
			for(var i = 0; i < optCount; i++)
			{
				var rec = this.artitems.getAt(i);
				availOptVal[rec.get('opt_' + o + '_id')] = true;
			}
		
			
			
			var curoptionEl = Ext.get('opt_' + o);
			var curoptionDom = document.getElementById('opt_' + o);
			
			// please choose option
			var newopt = new Option(this.json.labels['pleasechoose'], '');
			newopt.id = 'opt_' + o + '_choose';
			curoptionDom.options[curoptionDom.options.length] = newopt;
			
			for(var ov in curoption)
			{
				var newopt = new Option(curoption[ov], ov);
				newopt.id = 'opt_' + o + '_' + ov;
				
				if(ov == defvalid) newopt.selected = true;

				if(!availOptVal[ov])
				{
					// disable option
					newopt.disabled = true;
				}
				
				// don't add diabled items in IE
				if(!(Ext.isIE && newopt.disabled))
				{
					curoptionDom.options[curoptionDom.options.length] = newopt;
				}

				// disabled optgroup
				/*curoptionEl.createChild({
					tag: 'optgroup',
					label: curoption[ov]
				});*/
			}
			
			curinput.on('change', this.updateOptions, this, {optid: o});
		},
		
		updateOptions: function(event,el,seloptions)
		{
			var options = this.json.options;
			// check if not all options valid
			this.artitems.filterBy(this.filterCurrentArtItem, this);
			
			var singleHit = false;
			if(this.artitems.getCount() == 1)
			{
				singleHit = this.artitems.getAt(0);
				this.singleHit = true;
			}
			else
			{
				this.singleHit = false;
			}
			
			// only change values of options lower in the hierachy
			var curoption;
			var change = false;
			var disabled = false;
			var changeOpts = []
			for(var o in options)
			{
				if(change)
				{
					var curoption = options[o];
					var curinput = Ext.get('opt_' + o);
					
					// option type (select, radio, label)
					switch(curinput.dom.tagName.toLowerCase())
					{
						// radio
						case 'div':
							Ext.get('opt_' + o + '_' + singleHit.get('opt_' + o + '_id')).dom.checked = true;
						break;
						
						// select
						case 'select':
							curoption = Ext.get('opt_' + o);
							curoption.dom.length = 0;
							curoption.update('');
							curoption.dom.disabled = singleHit?false:disabled;
						break;
					}
					
					changeOpts[changeOpts.length] = o;
					
					disabled = true;
				}
				
				if(o == seloptions.optid) change = true;
			}
			
			this.artitems.filterBy(this.filterCurrentArtItem, this);
			
			// refilter nulled selects
			for(var i = 0; i < changeOpts.length; i++)
			{
				this.buildSelect(changeOpts[i], (singleHit?singleHit.get('opt_' + changeOpts[i] + '_id'):''));
			}
			
			if(singleHit)
			{
				// update all article values
				for(var n in singleHit.data)
				{
					var updateEl = Ext.get('art_' + n);
					if(updateEl)
					{
						switch(updateEl.dom.tagName.toLowerCase())
						{
							case 'input':
								updateEl.dom.value = singleHit.data[n];
							break;
							
							case 'div':
								updateEl.dom.className = '';
								updateEl.addClass(singleHit.data[n]);
							break;
							
							case 'span':
								updateEl.update(singleHit.data[n]);
							break;
						}
					}
				}
				
				// update all article panes
				var currentpane;
				for(var p = 0; p < this.json.panes.length; p++)
				{
					currentpane = Ext.select('.item_pane_' + this.json.panes[p]);
					if(currentpane)
					{
						currentpane.setDisplayed(false);
					}
					currentpane = Ext.get('item_' + singleHit.data.itemid + '_' + this.json.panes[p]);
					if(currentpane)
					{
						currentpane.setDisplayed(true);
					}
				}
			}
		},
		
		filterCurrentArtItem: function(record)
		{
			var options = this.json.options;
				
			for(var o in options)
			{
				var curoption = options[o];
				var curinput = Ext.get('opt_' + o);
				
				switch(curinput.dom.tagName.toLowerCase())
				{
					// select
					case 'select':
						if(curinput.dom.value && record.data['opt_' + o + '_id'] != curinput.dom.value) return false;
					break;
					
					// radio
					case 'div':
						var radiochecked;
						for(var ov in options[o])
						{
							if(Ext.get('opt_' + o + '_' + ov).dom.checked)
							{
								radiochecked = ov;
							}
						}
						if(record.data['opt_' + o + '_id'] != radiochecked) return false;
					break;
				}
			}
			
			return true;
		}
	};
}();

Ext.onReady(mod_eshop_article.init, mod_eshop_article);