// stores for mdf and mdft created by index.phtml of print controller
var materialDefinitionsStore = null;
var materialDefinitionTypesStore = null;
var materialDefinitionFilters = new Object();

var materialDefinitionFilterValueTitles = new Object();
var materialDefinitionFilterValueNames = new Object();

var materialDefinitionColumns = 4;  

var initialTotalMaterialDefinitions = -1;
var initialTotalMaterialDefinitionTypes = -1;

/**
 * Set a filter
 * 
 * @param name name of the property to filter on
 * @param value value to set or unset
 * @param multiple true if multiple values of the property are possible
 * @return
 */
function setMaterialDefinitionFilter(name, value, multiple) {

	if(!materialDefinitionFilters[name]) {
		materialDefinitionFilters[name] = [];
	}
	
	if(multiple) {
		materialDefinitionFilters[name].push(value);
	} else {
		materialDefinitionFilters[name] = [value];
	}
}

/**
 * Set a filter
 * 
 * @param name name of the property to filter on
 * @param value value to set or unset
 * @param multiple true if multiple values of the property are possible
 * @return
 */
function unsetMaterialDefinitionFilter(name, value, multiple) {
	
	if(!materialDefinitionFilters[name]) {
		materialDefinitionFilters[name] = [];
	}
	
	if(multiple) {
		materialDefinitionFilters[name].remove(value);
	} else {
		materialDefinitionFilters[name] = [];
	}
}

var materialDefinitionPreviewWin = null;
var materialDefinitionPreviewShowWinTimeout = 0;
var materialDefinitionPreviewHideWinTimeout = 0;

/**
 * Filter material definitions by quering mdf store using filters and display them 
 */
function updateMaterialDefinitions() {

	var divMaterialDefinitions = Ext.get('divMaterialDefinitions');
	var divMaterialDefinitionsSearchInfo = Ext.get('divMaterialDefinitionsSearchInfo');
	var divMaterialDefinitionsSearchInfoContent = Ext.get('divMaterialDefinitionsSearchInfoContent');
	
	// initials the filters
	materialDefinitionsStore.clearFilter();

	// empty search info
	divMaterialDefinitionsSearchInfoContent.update('');
	
	var filterRegExps = [];
	
	// loop through the filters to define regexp's
	for(name in materialDefinitionFilters) {
		if(typeof materialDefinitionFilters[name] == 'function') continue;
		
		if(materialDefinitionFilters[name].length > 0) {			
			
			// ignore custom width & height filter, is filtered by custom function 
			if(name != 'custwh') {

				// construct a regular expression
				var regExp = '^(';
				
				for(i in materialDefinitionFilters[name]) {
					if(typeof materialDefinitionFilters[name][i] == 'function') continue;
					
					if(i > 0) {
						regExp += '|';
					}
					
					regExp += materialDefinitionFilters[name][i];
					
					materialDefinitionAddCloseFilter(name, materialDefinitionFilters[name][i]);

				}
			
				regExp += ')$';
				
				if(!filterRegExps[name]) {
					filterRegExps[name] = [];
				}
				
				filterRegExps[name].push(new RegExp(regExp));
				
			} else {

				var val = materialDefinitionFilters[name][0];
				
				materialDefinitionAddCloseFilter(name, '', val[0]+' x '+val[1]);
			}
			
		}
	}
	
	var haveFilters = false;

	// now apply the regexp's to the mdf to filter them
	materialDefinitionsStore.filterBy(function(mdf){

		var supportsCustomWH = false;
		
		// if a custom w & h are set, filter mdf's on custom w & h
		if(materialDefinitionFilters['custwh']) {
			var customWH = materialDefinitionFilters['custwh'][0];
			
			if(customWH) {
				
				haveFilters = true;
				
				if(materialDefinitionSupportsCustomWH(mdf, customWH[0], customWH[1])) {
					supportsCustomWH = true;
				}
				
				// if the custom w & h are the only sizes supplied, return here is mdf does not match, other wise let 'msz_id' filter decide 
				if(!supportsCustomWH && (!filterRegExps['msz_id'] || filterRegExps['msz_id'].length == 0)) {
					return false;
				}
			}
		}
		
		// apply filters by matching regexps
		for(name in filterRegExps) {
			
			if(filterRegExps[name] instanceof Function) continue;
			
			haveFilters = true;
			
			for(i in filterRegExps[name]) {
				var filter = filterRegExps[name][i];
				
				if(filter instanceof Function) continue;
				
				var fieldValue = mdf.get(name);
								
				// the field value can be a plain string or number, or a array containing objects
				if(fieldValue instanceof Object) {
					
					var oneMatches = false;
					
					// loop through array
					for(j in fieldValue) {
						if(fieldValue[j] instanceof Function) continue;
						
						// match property of object with same name to regexp
						if(new String(eval('fieldValue[j].'+name)).match(filter)) {
							oneMatches = true;
						}
					}
					
					// if the filter is on msz_id, also see if a custom w or height matches
					if(name == 'msz_id') {
						oneMatches = oneMatches || supportsCustomWH;
					}
					
					if(!oneMatches) {
						return false;
					}
					
				} else {
					if(!new String(fieldValue).match(filter)) {
						return false;
					}
				}
				
			}
		}
		
		return true;
	});
	
	// remember the total material definitions shown upon opening page for the first time
	if(initialTotalMaterialDefinitions == -1) {
		initialTotalMaterialDefinitions = materialDefinitionsStore.getCount();
	}
	
	// destroy the existing panels
	materialDefinitionsStore.queryBy(function(mdf){
		
		var mdftPanel = Ext.getCmp('mdft-'+mdf.get('mdft_id'));
		
		if(mdftPanel) {
			
			mdftPanel.items.each(function(mdfPanel){
				if(mdfPanel.getId().indexOf('mdf-preview') == 0) {
					
					mdftPanel.remove(mdfPanel, false);
				}
			});
			
			mdftPanel.destroy();
		}
		
		return false;
	});
	
	var mdftPanels = new Array();
    var mdftPanelsOrder = new Array();
	var mdfsPerPanel = new Object();
	var mdfFilterFieldTotalCount = new Array();	
	
	if (materialDefinitionsStore.collect('mdft_id').length == 1) {
		// Show all mdf's if there's only one category
		showMdfsPerMdft = materialDefinitionsStore.getCount();
	} else {
		// by default, a static number of mdf's are displayed per row
		var showMdfsPerMdft = materialDefinitionColumns;

		// set the total material definition types upon first load
		if(initialTotalMaterialDefinitionTypes == -1) {
			initialTotalMaterialDefinitionTypes = materialDefinitionsStore.collect('mdft_id').length;
		} else {

			// now if less material definition types are shown, more mdf's can be shown per mdft
			var totalFilteredMdfts = materialDefinitionsStore.collect('mdft_id').length;

			showMdfsPerMdft = showMdfsPerMdft * Math.ceil(initialTotalMaterialDefinitionTypes / totalFilteredMdfts);
		}
	}
	
	// loop through all (filtered) mdf's
	materialDefinitionsStore.each(function(mdf){
		// count the combination of key (=property of mdf) and value of that key 
		for(key in mdf.data) {
			
			var val = mdf.get(key);
			
			if(typeof val == 'object' && val != null) {
				
				var arr = val;
				
				for(i=0; i < arr.length; i++) {
					
					val = arr[i];
					
					if(typeof val == 'object') {
						val = eval('val.'+key);
					}
					
					if(!mdfFilterFieldTotalCount['mdf-filter-'+key+'-'+val]) {
						mdfFilterFieldTotalCount['mdf-filter-'+key+'-'+val] = 0;
					}
					
					mdfFilterFieldTotalCount['mdf-filter-'+key+'-'+val]++;
				}
			} else {
				
				if(!mdfFilterFieldTotalCount['mdf-filter-'+key+'-'+val]) {
					mdfFilterFieldTotalCount['mdf-filter-'+key+'-'+val] = 0;
				}

				mdfFilterFieldTotalCount['mdf-filter-'+key+'-'+val]++;
			}
		}
		
		// create panel for material definition type, if not exist
		var mdftPanel = Ext.getCmp('mdft-'+mdf.get('mdft_id'));
		
		if(!mdftPanel) {
			
			var mdft = materialDefinitionTypesStore.getById(mdf.get('mdft_id'));
			
			if(!mdft) {
				return;
			}
			
			mdftPanel = new Ext.Panel({
				animCollapse: false,
				collapsible: enableCollapsibleMDFPanels ? true : false,
				// Collapse the panel by default if its not the first one
				collapsed: enableCollapsibleMDFPanels ? (mdf != materialDefinitionsStore.data.first()) : false, 
				
				cls: 'mdft-panel',
				headerCfg: {
					cls: 'mdft-panel-header'
				},
				id: 'mdft-'+mdf.get('mdft_id'),
				title: mdft.get('type'),
				layout: 'column',
				layoutConfig: {
					columns: materialDefinitionColumns
				},
				border: false
			});
		
            var mdftFilterField = Ext.getCmp('mdf-filter-mdft_id-'+mdf.get('mdft_id'));

            var countPrevSibling = 0;
            var prevSibling = mdftFilterField.previousSibling();

            while(prevSibling) {
                prevSibling = prevSibling.previousSibling();
                countPrevSibling++;
            }

            while(mdftPanelsOrder.length < countPrevSibling) {
                mdftPanelsOrder.push(-1);
            }

            mdftPanelsOrder[countPrevSibling] = mdftPanels.length;

			mdftPanels.push(mdftPanel);
			
			mdfsPerPanel['mdft-'+mdf.get('mdft_id')] = 0;
			
			// if the max number of mdf's per row is reached, return here
		} else if(mdfsPerPanel['mdft-'+mdf.get('mdft_id')] >= showMdfsPerMdft) {
			
			mdfsPerPanel['mdft-'+mdf.get('mdft_id')]++;
			return;
		}
		
		// set mdf counter per mdft
		mdfsPerPanel['mdft-'+mdf.get('mdft_id')]++;
		
		var description = mdf.get('mdf_name');
/*		
		var sizes = mdf.get('msz_id');
		
		for(i=0; i < sizes.length; i++) {
			
			description += ' '+sizes[i].msz_name;
		}
*/		
		var mdfPanel = Ext.getCmp('mdf-preview-'+mdf.get('mdf_id'));
		
		if(mdfPanel) {
            mdfPanel.destroy();
        }

        mdfPanel = new Ext.Panel({
            border: false,
            id: 'mdf-preview-'+mdf.get('mdf_id'),
            cls: 'mdf-preview',
            overCls: 'mdf-preview-over',
            width: 130,
            items: [{
                cls: "mdf-swf",
                id: "mdf-swf-container-" + mdf.get('mdft_id') + "-" + mdf.get('mdf_id'),
                border: false,
                items: {
                    id: "mdf-swf-" + mdf.get('mdft_id') + "-" + mdf.get('mdf_id'),
                    border: false,
                    listeners: {
                        afterrender: _materialDefinitionPreviewWindowReady
                    }
                }
            },{
                html: '<div style="padding: 5px; height: 40px"><a onclick="javascript: materialDefinitionOpen('+mdf.get('mdf_id')+')">'+description+'</a></div>',
                cls: 'description',
                border: false
            }]
        });

		// add the mdf preview to the mdft panel
		mdftPanel.add(mdfPanel);
		
	});
	
	// add a total mdf count to every filter option defined
	
	//TODO: for now count is only set at start, not dynamically adjusted. Must implement approach that eg. keeps a count of other categories even if one is chosen 
	if(!haveFilters) {
		
		// first disable all filter fields
		var rsFilterFields = Ext.query('.mdf-filter');
		
		for(i=0; i < rsFilterFields.length; i++) {
			
			var filterField = Ext.getCmp(rsFilterFields[i].id);

			var label = Ext.query('#'+filterField.getId()+' + label .count');
			
			label[0].innerHTML = '';
	
			if(!haveFilters && !mdfFilterFieldTotalCount[filterField.getId()]) {
				filterField.destroy();
			}
		}
		
		// then enable only those with total count > 0
		for(fieldName in mdfFilterFieldTotalCount) {
			if(typeof mdfFilterFieldTotalCount[fieldName] == 'function') continue;
			
			var filterField = Ext.getCmp(fieldName);
			
			if(filterField) {
				
				var label = Ext.query('#'+fieldName+' + label .count');
				
				label[0].innerHTML = '('+mdfFilterFieldTotalCount[fieldName]+')';
			}
		}
	}
	
	// now render the mdft panels to the div
    
    for(i in mdftPanelsOrder) {
		if(typeof mdftPanelsOrder[i] == 'function') continue;
	    if(mdftPanelsOrder[i] == -1) continue;

        var mdftPanel = mdftPanels[mdftPanelsOrder[i]];

		// if there are more mdfs for this mdft than display, add a link to show all
		if(mdfsPerPanel[mdftPanel.getId()] > showMdfsPerMdft) { 
		
			var linkMore = document.createElement('a');
			linkMore.href = '#';
			linkMore.innerHTML = String.format(App.util.Translation.get('C_KLIK_HIER_OM_ALLE_0_1_TE_BEKIJKEN'), mdfsPerPanel[mdftPanel.getId()], mdftPanel.initialConfig.title.toLowerCase());
			Ext.get(linkMore).on('click', function(e){
				
				// get the mdft id
				var parentMdftPanel = Ext.get(e.getTarget()).findParent('.mdft-panel', 50, true);
				
				var mdftId = parentMdftPanel.id.substring(parentMdftPanel.id.lastIndexOf('-')+1);
				
				// reset mdft_id filter
				unsetMaterialDefinitionFilter('mdft_id');
				
				// deselect mdft checkboxes
				
				Ext.select('.mdf-filter-mdft_id').each(function(el){
					
					var mdfFilter = Ext.getCmp(el.id);
					
					mdfFilter.suspendEvents();
					mdfFilter.setValue(false);
					mdfFilter.resumeEvents();
				});
				
				// select the one mdft checkbox
				var mdfFilter = Ext.getCmp('mdf-filter-mdft_id-'+mdftId);
				
				if(mdfFilter) {
					mdfFilter.setValue(true);
				}
				
				updateMaterialDefinitions();
			});
		
			// add the link to the panel
			mdftPanel.add({
				colspan: materialDefinitionColumns, 
				border: false,
				cls: 'mdft-panel-more',
				contentEl: linkMore
			});
		}
		
		mdftPanel.render(divMaterialDefinitions);
	}
	
	divMaterialDefinitionsSearchInfo.dom.style.display = (haveFilters ? 'block' : 'none');
}

/**
 * Show a delete/close button for a filter
 * 
 * @param name
 * @param value
 * @param custDesc
 * @return
 */
function materialDefinitionAddCloseFilter(name, value, custDesc) {

	var divMaterialDefinitionsSearchInfoContent = Ext.get('divMaterialDefinitionsSearchInfoContent');

	var searchInfoItem = document.createElement('div');
	searchInfoItem.className = 'value';
	
	var searchInfoItemDesc = document.createElement('div');
	searchInfoItemDesc.className = 'desc';
	if(custDesc) {
		searchInfoItemDesc.innerHTML = custDesc;
	} else {
		searchInfoItemDesc.innerHTML = materialDefinitionFilterValueNames[name+'-'+value];
	}
	
	var searchInfoItemClose = document.createElement('div');
	searchInfoItemClose.id = 'mdf-filter-close-'+name+'|'+value;
	searchInfoItemClose.className = 'close';
	searchInfoItemClose.innerHTML = 'x';
	
	divMaterialDefinitionsSearchInfoContent.appendChild(searchInfoItem);
	searchInfoItem.appendChild(searchInfoItemDesc);
	searchInfoItem.appendChild(searchInfoItemClose);
	
	Ext.get(searchInfoItemClose).on('click', function(){
		
		var id = this.id.substring(this.id.lastIndexOf('-')+1);
		id = id.split('|');
		
		Ext.get('divMaterialDefinitionsMetaInfo').update('');
		unsetMaterialDefinitionFilter(id[0], id[1], materialDefinitionFilters[id[0]].length > 1);
		updateMaterialDefinitions();
		
		if(id[0] == 'custwh') {

			Ext.getCmp('mdf-filter-custwh-w').setValue('');
			Ext.getCmp('mdf-filter-custwh-h').setValue('');
			
		} else {
			
			var mdfFilter = Ext.getCmp('mdf-filter-'+id[0]+'-'+id[1]);
			
			if(mdfFilter) {
				mdfFilter.setValue(false);
			}
		}
		
		
	});		
}

/**
 * Returns true if the material definition supports the given custom width & height
 * 
 * @param float $customWidth
 * @param float $customHeight
 * @return boolean
 */

function materialDefinitionSupportsCustomWH(mdf, customWidth, customHeight) {

	var sizes = mdf.get('msz_id');
	
	if(mdf.get('scalable') != 'y') {
		
		for(i in sizes) {
			
			if(typeof sizes[i] == 'function') continue;
			
			var size = sizes[i];
			
			if(size.msz_width == customWidth && size.msz_height == customHeight) {
				
				return true;
			}
		}
		
	} else {
	
		for(i in sizes) {
			
			if(typeof sizes[i] == 'function') continue;
			
			var size = sizes[i];
			
  			var newWHRatio = customWidth / customHeight;
			var newHWRatio = customHeight / customWidth;
			
			if(
				(customWidth / size.msz_width * 100 >= 100 - mdf.get('min_scale_width'))
				&&
				(customWidth / size.msz_width * 100 <= 100 + mdf.get('max_scale_width'))
				&&
				(customHeight / size.msz_height * 100 >= 100 - mdf.get('min_scale_height'))
				&&
				(customHeight / size.msz_height * 100 <= 100 + mdf.get('max_scale_height'))
				&&
				((size.msz_width / size.msz_height) / newWHRatio <= mdf.get('max_wh_scale_ratio'))
				&&
				((size.msz_height / size.msz_width) / newHWRatio <= mdf.get('max_hw_scale_ratio'))
				) {
					return true;
				}
			
		}
	}
	
}

var materialDefinitionWin = null;

function materialDefinitionOpen(mdfId, previousGenerated) {
	
	window.mdf = {
		mdfId: mdfId,
		previousGenerated: previousGenerated
	};
	
	if(materialDefinitionPreviewWin && materialDefinitionPreviewWin.isVisible()) {
		materialDefinitionPreviewWin.hide();
	}
	
	if(materialDefinitionWin && materialDefinitionWin.isVisible()) {
		materialDefinitionWin.close();
	}
	
	
	var mdf = materialDefinitionsStore.getById(mdfId);

	// SIZE
	var sizes = mdf.get('msz_id');
	
	var sizesStore = new Ext.data.JsonStore({
	    fields: ['msz_id', 'msz_name']
	});	
	
	sizesStore.loadData(sizes);

	var selectedMszId = null;
	
	if(sizes.length == 1) {
		selectedMszId = sizes[0].msz_id;
		
	} else if(materialDefinitionFilters['msz_id']) {
		for(i=0; i < sizes.length; i++) {
			for(j=0; j < materialDefinitionFilters['msz_id'].length; j++) {
				if(sizes[i].msz_id == materialDefinitionFilters['msz_id'][j]) {
					selectedMszId = sizes[i].msz_id; 
				}
			}
		}
	}

	// COLOR TYPE
	var colortypes = mdf.get('mcl_id');
	
	var colortypesStore = new Ext.data.JsonStore({
	    fields: ['mcl_id', 'mcl_name']
	});	
	
	colortypesStore.loadData(colortypes);

	var selectedMclId = null;
	
	if(sizes.length == 1) {
		selectedMclId = colortypes[0].mcl_id;
		
	} else if(materialDefinitionFilters['mcl_id']) {
		for(i=0; i < colortypes.length; i++) {
			for(j=0; j < materialDefinitionFilters['mcl_id'].length; j++) {
				if(colortypes[i].mcl_id == materialDefinitionFilters['mcl_id'][j]) {
					selectedMclId = colortypes[i].mcl_id; 
				}
			}
		}
	}
	
	// CATEGORY
	
	var categories = mdf.get('mct_id');

	var selectedMctId = null;
	
	if(materialDefinitionFilters['mct_id']) {
		for(i=0; i < categories.length; i++) {
			for(j=0; j < materialDefinitionFilters['mct_id'].length; j++) {
				if(categories[i].mct_id == materialDefinitionFilters['mct_id'][j]) {
					selectedMctId = categories[i].mct_id; 
				}
			}
		}
	}
	
	var confirmedDiscardChanges = false;
	var isFirstStep = true;
	
	if(previousGenerated) {
		
		var mdfWindowItems = [];
		
	} else {

		function materialDefinitionWinUpdatePreview(fld) {
			
			var form = fld.findParentByType('form');
			
			var sizeField = form.getForm().findField('msz_id');
			var colorTypeField = form.getForm().findField('mcl_id');
			
			var swfId = 'mdf-window-swf';
			
			var swfFlashVars = {
				staticlink: 'javascript: return false',
				onready: '_materialDefinitionSwfReady(\''+swfId+'\', \''+mdf.get('mdf_id')+'\''+(Number(sizeField.getValue()) ? ', '+sizeField.getValue() : '')+(Number(colorTypeField.getValue()) ? ', '+colorTypeField.getValue() : '')+')',
				align: 'center'
			};
	
			if(Number(sizeField.getValue()) && Number(colorTypeField.getValue())) {
                // disabled as long as no previews (material_definition_preview) are set for all stores
				//swfobject.embedSWF('/print/index/getswfpreview/mdf_id/'+mdf.get('mdf_id')+'/msz_id/'+sizeField.getValue()+'/mcl_id/'+colorTypeField.getValue(), swfId, "500", "490", "8.0.0","#FFFFFF", swfFlashVars);
			}
		}
		
		
		var mdfSizeControl = {
            xtype: "combo",
            fieldLabel: App.util.Translation.get('C_DIMENSION'),
            mode: "local",
            store: sizesStore,
            name: 'msz_id',
            valueField: 'msz_id',
            displayField: 'msz_name',
            triggerAction: 'all',
            allowBlank: false,
			msgTarget: 'none',
            invalidClass: '',
            editable: false,
            value: selectedMszId,
            listeners: {
				select: materialDefinitionWinUpdatePreview
			}
		};

		if(mdf.get('scalable') == 'y') {
			
			var custW = Ext.getCmp('mdf-filter-custwh-w').getValue();
			var custH = Ext.getCmp('mdf-filter-custwh-h').getValue();
			
			if(custW && custH) {
			
				mdfSizeControl.value = custW+' x '+custH+' mm';
			}

			mdfSizeControl.editable = true;
		}
		
		var mdfWindowItems = [{
			anchor: '100% 100%',
			layout: 'hbox',
			layoutConfig: {
				align: 'middle',
				pack: 'center'
			},
            autoScroll: true,
			border: false,
            autoScroll: true,
			items: {
				/*anchor: '100% 100%',*/ 
				layout: 'border',
                width: 500,
                height: 600,
				border: false,
				bodyStyle: {
					'background': 'none',
                    'text-align': 'center'
				},
				items: [/*{
					region: 'north',
					html: '<b>'+mdf.get('mdf_name')+'</b>',
					height: 40,
					border: false,
					bodyStyle: {
						'text-align': 'center'
					}
				},*/{
					region: 'center',
					border: false,
					height: 400,
					width: 500,
					bodyStyle: {
						'text-align': 'center'
					},
					html: '<span id="mdf-window-swf"></span>',
					listeners: {
						afterrender: function() {
							
							var swfId = 'mdf-window-swf';
					
							var swfFlashVars = {
								staticlink: 'javascript: return false',
								/*onready: '_materialDefinitionSwfReady(\''+swfId+'\', \''+mdf.get('mdf_id')+'\')',*/
								align: 'center'
							};
					
							swfobject.embedSWF('/print/index/getswfpreview/mdf_id/'+mdf.get('mdf_id'), swfId, "500", "390", "8.0.0","#FFFFFF", swfFlashVars);
						}
					}
				},{
					region: 'south',
					height: 150,
					xtype: 'form',
					monitorValid: true,
					border: false,
					items: [{
						html: App.util.Translation.get('C_CHOOSE_SIZE_AND_COLOR_TYPE'),
						border: false,
						height: 50
					},mdfSizeControl,{
			            xtype: "combo",
			            fieldLabel: App.util.Translation.get('C_COLOR_TYPE'),
			            mode: "local",
			            store: colortypesStore,
			            name: 'mcl_id',
			            hiddenName: 'mcl_id',
			            valueField: 'mcl_id',
			            displayField: 'mcl_name',
	                    triggerAction: 'all',
			            allowBlank: false,
						invalidClass: '',
						msgTarget: 'none',
	                    editable: false,
	                    value: selectedMclId,
	                    listeners: {
							select: materialDefinitionWinUpdatePreview
						}
					}],
					buttons: [{
						text: App.util.Translation.get('C_VOLGENDE'),
						formBind: true,
						listeners: {
							click: function() {
								var form = this.findParentByType('form').getForm();
								var mszField = form.findField('msz_id');
								var url = '/print/contents/index/mdf_id/'+mdf.get('mdf_id')+'/mct_id/'+selectedMctId+'/mcl_id/'+form.getValues().mcl_id;
								
								if(mszField.getValue() == mszField.getRawValue()) {
									
									var numbers = mszField.getRawValue().match(/[0-9]+/gi);
									
									var w = Number(numbers[0]);
									var h = Number(numbers[1]);
									
									if(w && h) {
									
										if(materialDefinitionSupportsCustomWH(mdf, w, h)) {
											
											url += '/custom_width/'+w+'/custom_height/'+h;
											
										} else {
											
											alert(App.util.Translation.get('C_HET_OPGEGEVEN_FORMAAT_WORDT_NIET_ONDERST'));
											return;
										}
									}
									
								} else {
									
									url += '/msz_id/'+mszField.getValue();
								}
								
								materialDefinitionWin.remove(materialDefinitionWin.items.get(0));
								var updater = materialDefinitionWin.body.getUpdater();
								updater.timeout = 3600;
								updater.indicatorText = '<table style="height: 100%; width: 100%"><tr><td valign="middle" align="center">' + String.format(App.util.Translation.get('C_BEZIG_MET_HET_LADEN_VAN_HET_MIDDEL_0'), mdf.get('mdf_name'))+'<br/><br/><img src="/images/icons/loading.png"/></td></tr></table>';
								updater.update({
									url: url
								});
								isFirstStep = false;
								
							}
						}
					}]
				}]
			}
		}];	
	}
	// open window
	
	materialDefinitionWin = openApplicationWindowPopup({
		animateTarget: 'mdf-preview-'+mdf.get('mdf_id'),
		cls: 'extjs',
		modal: true,
		title: mdf.get('mdf_name'),
		layout: 'anchor',
		items: mdfWindowItems,
		autoScroll: true,
		listeners: {
			afterrender: function() {
				if(previousGenerated) {
					var url = '/print/contents/index/previouslygenerated/true';		
					var updater = materialDefinitionWin.body.getUpdater();
					updater.timeout = 3600;
					updater.indicatorText = '<table style="height: 100%; width: 100%"><tr><td valign="middle" align="center">' + String.format(App.util.Translation.get('C_BEZIG_MET_HET_LADEN_VAN_HET_MIDDEL_0'), mdf.get('mdf_name'))+'<br/><br/><img src="/images/icons/loading.png"/></td></tr></table>';
					updater.update({
						url: url
					});
				}
			},
			beforeclose: function() {
		
				if(!confirmedDiscardChanges && !isFirstStep) {
					Ext.Ajax.request({
						url: '/print/contents/confirmdiscard',
						success: function(response) {
							var response = Ext.util.JSON.decode(response.responseText);
							
							if(response.hasChanges) {
							
                                previewPanel.hide();
                                
								Ext.MessageBox.show({title: 'Wijzigingen annuleren?', msg: App.util.Translation.get('C_ALS_U_DIT_SCHERM_SLUIT_GAAN_DE_DOOR_U_GE'), buttons: Ext.Msg.YESNOCANCEL, icon: Ext.MessageBox.WARNING, fn: function(buttonId){
									
                                    previewPanel.show();
                                    
                                    if(buttonId == 'yes') {
										bb.command.load('/print/finish/savewindow', 'GET', '', null, bb.document.getElementById('backbase'), 'appendChild');
									}
									else if(buttonId == 'no') {
										confirmedDiscardChanges = true;
										materialDefinitionWin.close();
									}
								}});
							} else {
								
								confirmedDiscardChanges = true;
								materialDefinitionWin.close();
							}
							
						}
					});
					
					return false;
				}
			},
			close: function() {
				confirmedDiscardChanges = false;
				materialDefinitionWin = null;
				window.mdf = null;
				this.el.select('.tinymce').each(function(t){
					if(tinyMCE.getInstanceById(t.id)) {
						tinyMCE.execCommand("mceRemoveControl", true, t.id);
					}
				});
				if(Ext.getCmp('print-contentbrowser-tab')) {
					Ext.getCmp('print-contentbrowser-tab').collapse();
					if(Ext.get('print-contentbrowser')) {
						Ext.get('print-contentbrowser').update('');
					}
				}
				if(Ext.getCmp('print-contents-panel')) {
					Ext.getCmp('print-contents-panel').destroy();
				}
			},
			show: _materialDefinitionRepositionWindow
		}
	});
	
	materialDefinitionWin.show();
	
}

Ext.fly(window).on("scroll", _materialDefinitionRepositionWindow);

function _materialDefinitionRepositionWindow() {
	
	if(materialDefinitionWin && materialDefinitionWin.el) {

		if(Ext.fly(window).getScroll().top) {
			var sTop = Ext.fly(window).getScroll().top;
		} else {
			var sTop = Ext.fly(document.body).getScroll().top;
		}
		materialDefinitionWin.setPosition(materialDefinitionWin.el.getX(), 16+sTop);
	}
}

function _materialDefinitionSwfReady(flashMovieId, mdfId, mszId, mclId) {
	var flashPreview = getFlashMovieObject(flashMovieId);
	flashPreview.SetVariable('/:setzoom', 1);
	flashPreview.SetVariable('/:personalize', '/print/index/getswfblockpreview/mdf_id/'+mdfId+(mszId ? '/msz_id/'+mszId : '')+(mclId ? '/mcl_id/'+mclId : ''));
}

function _materialDefinitionPreviewWindowReady(ele) {

    if(!initiallyResizedColumns) {
        window.setTimeout(function(){_materialDefinitionPreviewWindowReady(ele)}, 100);
        return;
    }

	var swfId = ele.getId();
	var mdfId = swfId.substring(swfId.lastIndexOf('-')+1);
	var mdf = materialDefinitionsStore.getById(mdfId);
	var mdfSwf = ele;
	var mdfPreview = Ext.get('mdf-preview-'+mdf.get('mdf_id'));
	var mdfWinId = 'mdf-preview-zoom-'+mdf.get('mdf_id');
	
	var swfFlashVars = {
		staticlink: 'javascript: materialDefinitionOpen('+mdf.get('mdf_id')+')'
	};
	
	var swfAtts = {
		wmode: 'transparent'
	};
	
	// create flash preview
	swfobject.embedSWF(mdf.get('mdf_preview_url'), swfId, "140", "140", "8.0.0","#FFFFFF", swfFlashVars, swfAtts);
	
	mdfPreview.on('mouseoverabc', function() {
		
		if(materialDefinitionPreviewShowWinTimeout == 0) {
		
			materialDefinitionPreviewShowWinTimeout = window.setTimeout(function() {
				
				materialDefinitionPreviewShowWinTimeout = 0;
				
				if(materialDefinitionPreviewHideWinTimeout) {
					window.clearTimeout(materialDefinitionPreviewHideWinTimeout);
					materialDefinitionPreviewHideWinTimeout = 0;
				}
				
				if(materialDefinitionPreviewWin && materialDefinitionPreviewWin.getId() != mdfWinId) {
					
					materialDefinitionPreviewWin.hide();
				}
				
				materialDefinitionPreviewWin = Ext.getCmp(mdfWinId);
				
				if(!materialDefinitionPreviewWin) {
				
					var movieObj = getFlashMovieObject(swfId);
					
					try {
						movieObj.TGetProperty("/", 8)
					} catch(e) {
						return;
					}
					
					// get real width and height from flash movie
				   	var swfWidth = Number(movieObj.TGetProperty("/", 8));
				   	var swfHeight = Number(movieObj.TGetProperty("/", 9));
				   	
			   		var whRatio = swfWidth / swfHeight;
			   		
			   		var mdfWinWidth = 0;
			   		var mdfWinHeight = 0;
			   		
					if(swfWidth > swfHeight) {
						mdfWinWidth = 500;
						mdfWinHeight = mdfWinWidth / whRatio;
					} else {
						mdfWinHeight = 400;
						mdfWinWidth = mdfWinHeight * whRatio;
					}
					
					materialDefinitionPreviewWin = new Ext.Window({
						id: mdfWinId,
						width: mdfWinWidth+16,
						autoHeight: true,
						closable: false,
						cls: 'mdf-preview-zoom',
						/*animateTarget: mdfPreview,*/
						items: [{
							id: 'mdf-preview-zoom-swf-'+mdf.get('mdf_id')
						}/*,{
							xtype: 'panel',
							layout: 'table',
							cls: 'mdf-preview-zoom-properties',
							layoutConfig: {
								columns: 2
							},
							bodyStyle: {
								'text-align': 'center'
							},
							defaults: {
								border: false,
								padding: 2
							},
							items: [{
								html: App.util.Translation.get('C_FORMAAT'),
								cls: 'title'
							},{
								html : 'A4',
								cls: 'value'
							},{
								html : App.util.Translation.get('C_COLOR_TYPES'),
								cls: 'title'
							},{
								html : App.util.Translation.get('C_FULLCOLOUR'),
								cls: 'value'
							},{
								html : App.util.Translation.get('C_PRIJZEN'),
								cls: 'title'
							},{
								html : '100-200 &euro;',
								cls: 'value'
							}]
						}*/],
						listeners: {
							afterrender: function() {
								
								var swfId = 'mdf-preview-zoom-swf-'+mdf.get('mdf_id');
						
								var swfFlashVars = {
									staticlink: 'javascript: materialDefinitionOpen('+mdf.get('mdf_id')+')'/*,
									onready: '_materialDefinitionSwfReady(\''+swfId+'\', \''+mdf.get('mdf_id')+'\')'*/
								};
						
								swfobject.embedSWF(mdf.get('mdf_preview_url'), swfId, mdfWinWidth, mdfWinHeight, "8.0.0","#FFFFFF", swfFlashVars, {wmode: 'transparent'});
								
								ele.getEl().on('mouseover', function(){
									this.hide();
								});
							}
						}
					});
				}
				
				if(!materialDefinitionPreviewWin.isVisible()) {
					materialDefinitionPreviewWin.setPagePosition(mdfPreview.getX() + mdfPreview.getWidth(), mdfPreview.getY());
					materialDefinitionPreviewWin.show();
				}
			}, 500);
		}
	});
	
	mdfPreview.on('mouseout', function() {

		if(materialDefinitionPreviewShowWinTimeout != 0) {
			window.clearTimeout(materialDefinitionPreviewShowWinTimeout);
			materialDefinitionPreviewShowWinTimeout = 0;
		}
		
		if(materialDefinitionPreviewHideWinTimeout == 0 && materialDefinitionPreviewWin && materialDefinitionPreviewWin.isVisible()) {
			materialDefinitionPreviewHideWinTimeout = window.setTimeout(function() {
				materialDefinitionPreviewWin.hide();
				materialDefinitionPreviewHideWinTimeout = 0;
				materialDefinitionPreviewWin = null;
			}, 500);
		}
	});
}