Tx_Mevshop_Product.Configurable.A20 = new Class({

	Extends: Tx_Mevshop_Product.Configurable,



	/**
	 * Zusätzliche Validatoren für Längs- und Stirnrand anfügen.
	 * @return void
	 */
	initFormValidator: function() {
		this.parent();


		this.validator.addAllThese([
			['laengsrandValidator', {
				errorMsg: 'Bitte geben Sie einen Längsrand im Bereich ' + this.data.laengsrandMin + ' bis ' + this.data.laengsrandMax + ' an.',
				test: function(element) {
					var numVal = element.value.toInt();
					var ret = numVal >= this.data.laengsrandMin && numVal <= this.data.laengsrandMax;

						// Anzeige-Wert (Randmaß) rechts anzeigen:
					element.getNext('.readonly').value = ( ret ? numVal + Math.ceil(this.data.teilungBreite / 2) : '');

					return ret;
				}.bind(this)
			}],
			['stirnrandValidator', {
				errorMsg: 'Bitte geben Sie einen Stirnrand im Bereich ' + this.data.stirnrandMin + ' bis ' + this.data.stirnrandMax + ' an.',
				test: function(element) {
					var numVal = element.value.toInt();
					var ret = numVal >= this.data.stirnrandMin && numVal <= this.data.stirnrandMax;

						// Anzeige-Wert (Randmaß) rechts anzeigen:
					element.getNext('.readonly').value = ( ret ? numVal + Math.ceil(this.data.teilungLaenge / 2) : '');

					return ret;
				}.bind(this)
			}]
		]);
	},



	/**
	 * Baut die Konfig-Maske
	 */
	getConfigurationInterface: function() {
		if (this.configurationInterface) return this.configurationInterface;

		this.fetchProductData();

		this.configurationInterface = new Element('div', {'class':'configuration configuration-A20 configuration-tgr' + this.getTeileGruppe()});

		var cartWrap = new Element('span', {'class':'addToCartWrap'}).inject(this.configurationInterface);

		this.options.guiElements.toCart.inject(cartWrap);
		var priceDisplay = new Element('span', {'class':'priceDisplay', events:{click:this.pseudoPriceDisplayClicked.bind(this)}}).inject(this.configurationInterface);
		this.options.guiElements.amount.inject(this.configurationInterface).show().addClass('qmValidator');


		var headline = new Element('h6', {text: this.lang.get('yourDesiredProduct', this.options.sku)}).inject(this.configurationInterface);

		var col1 = new Element('div', {'class':'inputcol col1'}).inject(this.configurationInterface);
		var col2 = new Element('div', {'class':'inputcol col2'}).inject(this.configurationInterface);
		var col3 = new Element('div', {'class':'inputcol col3'}).inject(this.configurationInterface);

		col1
			.adopt(
				new Element('label', {'class': 'headline', text: this.lang.get('enterDesiredDimensions')}),

				[
					new Element('label', {text: this.lang.get('widthAMm')}),
					new Element('input', {type:'text', 'class':'txtBox colspan-2 breiteValidator', name:'breite', tabindex: 1}),
					new Element('br')
				]
			)
			.adopt(
				new Element('label', {text: this.lang.get('sideMargin', 1)}),
				[
					new Element('input', {type:'text', 'class':'txtBox laengsrandValidator', name:'randE1', tabindex: 3}),
					new Element('input',  {type:'text', 'class': 'txtBox readonly randrasterE1'}),
					new Element('br')
				]
			)
			.adopt(
				new Element('label', {text: this.lang.get('sideMargin', 2)}),
				[
					new Element('input', {type:'text', 'class':'txtBox laengsrandValidator', name:'randE2', tabindex: 4}),
					new Element('input',  {type:'text', 'class': 'txtBox readonly randrasterE2'})
				]
			);


		col2
			.adopt(
				new Element('label', {text: this.lang.get('lengthBMm')}),
				[
					new Element('input', {type:'text', 'class':'txtBox colspan-2 laengeValidator', name:'laenge', tabindex: 2}),
					new Element('br')
				]
			)
			.adopt(
				new Element('label', {text: this.lang.get('frontMargin', 1)}),
				[
					new Element('input', {type:'text', 'class':'txtBox stirnrandValidator', name:'randF1', tabindex: 5}),
					new Element('input',  {type:'text', 'class': 'txtBox readonly randrasterF1'}),
					new Element('br')
				]
			)
			.adopt(
				new Element('label', {text: this.lang.get('frontMargin', 2)}),
				[
					new Element('input', {type:'text', 'class':'txtBox stirnrandValidator', name:'randF2', tabindex: 6}),
					new Element('input',  { type:'text', 'class': 'txtBox readonly randrasterF2'})
				]
			);

		col3
			.adopt(
				new Element('label', {text: this.lang.get('perforationContourLabel')}),
				new Element('select', {size:'1', name:'lochanfang'})
			);

		this.configurationInterface.getElements('.readonly').setStyle('cursor','help').addEvents({
			mouseenter: function(){ Tip(this.lang.get('marginTooltip'), WIDTH, 200);}.bind(this),
			mouseleave: function(){ UnTip(); },
			focus: function(){ this.getPrevious('input').focus(); },
			keydown: function(evt){evt.stop();}
		});
		

		var draftingContainer = new Element('div', {'class':'draftingContainer'}).inject(this.configurationInterface);

		var samplesContainer = new Element('div', {'class':'samplesContainer'}).inject(this.configurationInterface);

			// geradreihig
		new Element('div', {'class':'contour contour-square contour-1',     'html': '<span>' + this.lang.get('perforationContour1') + '</span>'}).inject(samplesContainer);
			// kleiner Anfang
		new Element('div', {'class':'contour contour-finished contour-2',   'html': '<span>' + this.lang.get('perforationContour2') + '</span>'}).inject(samplesContainer);
			// großer Anfang
		new Element('div', {'class':'contour contour-unfinished contour-3', 'html': '<span>' + this.lang.get('perforationContour3') + '</span>'}).inject(samplesContainer);



		return this.configurationInterface;
	},


	/**
	 * Fügt die geholten Artikeldaten dem Datenarray hinzu
	 * @param responseJSON
	 * @param responseText
	 */
	dispatchProductData: function(responseJSON, responseText) {
		var smlFields = responseJSON.shopdata.item.smlfields;

		var data = {
			laengeMin: smlFields.A00860['#'].toInt(),
			laengeMax: smlFields.A00862['#'].toInt(),
			breiteMin: smlFields.A00864['#'].toInt(),
			breiteMax: smlFields.A00866['#'].toInt(),
			stirnrandMin: smlFields.A00868['#'].toInt(),
			stirnrandMax: smlFields.A00870['#'].toInt(),
			laengsrandMin: smlFields.A00872['#'].toInt(),
			laengsrandMax: smlFields.A00874['#'].toInt(),
			lochanfaenge: smlFields.A00876['#'],
			teilungBreite: smlFields.A00884['#'].replace(/,/, '.').toFloat(),
			teilungLaenge: smlFields.A00886['#'].replace(/,/, '.').toFloat(),
			qmMax:         smlFields.A00852['#'].toInt()
		};

		this.data = data;


		var selectElement = this.configurationInterface.getElement('select[name="lochanfang"]');
		this.configurationInterface.getElements('.samplesContainer .contour').hide();
		this.data.lochanfaenge.split('-').filter(function(item){ var ret = item.toInt(); return !isNaN(ret) && ret>0;}).each(function(item) {
			selectElement.grab(new Element('option', {
				value: item,
				text: this.lang.get('perforationContour' + item)
			}));

			var sample = this.configurationInterface.getElement('.samplesContainer .contour-'+item)
			if(sample) sample.show();
		}.bind(this));

		this.initFormValidator();
	}
});