/****************************************************************************************************
 *  CONFIGURATOR.JS - the clientside logic of the configurator
 ****************************************************************************************************/

//var spacerPic = '/grafiken/general/spacer.gif';
// NEW 30.12.2009
var spacerPic = '/grafiken/general/spacer.png';

// ----------------------------------------------------------------
// compute the price of the chosen radiator
// ----------------------------------------------------------------
var compute_price = function() {
	if ($chk($('base_price'))) {	
		var subtotal_costs = $('base_price').getPrice() + $('bailCosts').getPrice() + $('textureCosts').getPrice() + $('heatingTypeCosts').getPrice();
		var discount_costs = subtotal_costs * $('discountCosts').getPrice() / (-100.0);
		var netto_costs = subtotal_costs + discount_costs + $('deliveryCosts').getPrice();
		var total_costs = netto_costs * 1.2;

		$('subtotal').setPriceAndHtml(subtotal_costs.toFixed(2));
		$('discountCosts').set('html', discount_costs.toFixed(2) + ' €');
		// NEW 22.12.2009
		$('discountCosts2').set('html', discount_costs.toFixed(2) + ' €');
		
		$('netto').setPriceAndHtml(netto_costs.toFixed(2));
		$('ust').setPriceAndHtml((total_costs - netto_costs).toFixed(2));
		$('total').setPriceAndHtml(total_costs.toFixed(2));
	}
}

// ----------------------------------------------------------------
// compute the price of the chosen texture
// ----------------------------------------------------------------
var compute_texture_price = function() {
	var texturePrice = $('pickedTexture1').getPrice() + $('pickedColor1').getPrice() + $('pickedColor2').getPrice();

	if ($('line_color').hasClass('opaque1')) 
		texturePrice += $('pickedColor3').getPrice();

	if ($chk($('carousel').getElement('li[.opaque1]')))
		texturePrice += $('carousel').getElement('li[.opaque1]').getPrice();

	$('textureCosts').setPriceAndHtml(texturePrice);

	compute_price();
}

// ----------------------------------------------------------------
// compute the price of the chosen bails
// ----------------------------------------------------------------
var compute_bail_price = function() {
	var bailCount =  0;

	// set property for each bail (chosen or not)
	$$('#bigPicture div').each(
		function(item, index){
			if ($(item).getProperty('id').startsWith('bail') && $(item).hasClass("opaque1")) {
				bailCount++;
			}
		});

	if (bailCount > 0) {
		var price = $('formen').getElement('li[.active]').getPrice() + $('bailMaterials').getElement('input[checked]').getPrice();

		$('bailCosts').setPriceAndHtml(bailCount * price);
	} else {
		$('bailCosts').setPriceAndHtml(0);
	}

	compute_price();
}

// ----------------------------------------------------------------
// check if bail is chosen, if not show message
// ----------------------------------------------------------------
var checkChosenBail = function() {
	var bailCount = $$('#bigPicture div').filter(function(item, index) { return $(item).hasClass('opaque1'); });
	
	if (bailCount == 0) {
		$('count').addClass('not_chosen');
		//Mediabox.open('#mb_not_chosen', '', '300 100');
	}
}

// ----------------------------------------------------------------
// show only the bail_positions, that are possible for the current active bail-form
// ----------------------------------------------------------------
var change_bail_positions = function() {
	var form = $('formen').getElement('li[.active]');
	var oldSelectedPos = $('pos').getElement('li[.active]');
	var posCount = 0;
	
	// make all not active
	$$('#pos li').each( function(item, index) { item.removeClass('active'); });
	
	if (form.getAttr('posleft')) {
		posCount++;
		$('pos_left').setOpacity(1);
		// was left set previous? --> set it again
		if (oldSelectedPos.getProperty('id') == 'pos_left') {
			$('pos_left').addClass('active');
			chosenOrder["BailPosition"] = "Left";
		}
	} else {
		$('pos_left').setOpacity(0);
	}
	
	if (form.getAttr('posmiddle')) {
		posCount++;
		$('pos_middle').setOpacity(1);
		
		if (oldSelectedPos.getProperty('id') == 'pos_middle') {
			$('pos_middle').addClass('active');
			chosenOrder["BailPosition"] = "Middle";
		}
	} else {
		$('pos_middle').setOpacity(0);
	}
	
	if (form.getAttr('posright')) {
		posCount++;
		$('pos_right').setOpacity(1);
		
		if (oldSelectedPos.getProperty('id') == 'pos_right') {
			$('pos_right').addClass('active');
			chosenOrder["BailPosition"] = "Right";
		}
	} else {
		$('pos_right').setOpacity(0);
	}
	
	// no active bail position yet?
	if (!$chk($('pos').getElement('li[.active]'))) {
		// --> first position is active
		$('pos').getElement('li[.opaque1]').addClass('active');
		
		switch($('pos').getElement('li[.opaque1]').getProperty('id')) {
			case "pos_left":
				chosenOrder["BailPosition"] = "Left";
			break;
			
			case "pos_middle":
				chosenOrder["BailPosition"] = "Middle";
			break;
			
			case "pos_right":
				chosenOrder["BailPosition"] = "Right";
			break;
		}
	}
	
	checkChosenBail();
	setChosenBail();
}

// ----------------------------------------------------------------
// change the overlay-pics of the bail
// ----------------------------------------------------------------
var change_bail_overlay = function() {
	// get active bail-attributes
	var form = $('formen').getElement('li[.active]');
	var material = $('bailMaterials').getElement('input[checked]');
	// the path is stored in attribute path => /bilder/buegel/[FORM]/[MATERIAL]/[POSITION]/
	var bailPath = form.getAttr('path') + material.getAttr('path') + chosenOrder["BailPosition"] + "/";
	
	var bails = $$('#bigPicture div').each(
		function(item, index){
			if ($(item).getAttribute('id').startsWith('bail'))
		    	$(item).getElement('img').setAttribute('src', bailPath + $(item).getAttribute('id') + ".png");
		}
	);
}

// ----------------------------------------------------------------
// change the overlay-pics of the texture and the color
// ----------------------------------------------------------------
var change_overlay = function() {
	// get selected model
	var model = $('typen').getElement('li[.opaque1]');
	// get selected texture
	var texture = $('carousel').getElement('li[.opaque1]');
	
	// change color overlay
	$('bigColor').getElement('img').setProperty('src', $('pickedColor2').getAttr('picoverlay'));
	$('bigBorderColorOverlay').getElement('img').setProperty('src', $('pickedColor1').getAttr('picoverlay'));
	if (model && model.getAttr('hasbordercolor') && model.getProperty('id') == 'conforto') {
		$('bigBorderColorConforto').getElement('img').setProperty('src', $('pickedColor1').getAttr('picoverlayconforto'));
	} else {
		$('bigBorderColorConforto').getElement('img').setProperty('src', spacerPic);
	}
	
	// change texture overlay
	// if texture-type lalinea is chosen, make LineColor visible
	if ($('pickedTexture1').getAttr('texture_id') == 'lalinea') {
		if ($chk(texture)) {
			// change visibility of line-colors according to attribute belongsTo
			var lineColors = $$('#colorPicker3 li');
			var colorFound = false;
			
			for (var j=0;j<lineColors.length;j++) {
				if (lineColors[j].getBelongsTo() == texture.getAttr("nr") || lineColors[j].getBelongsTo() == 'all') {
					lineColors[j].removeClass("removed");
					
					if (!colorFound) {
						// ident color found -> keep this color
						if ($('pickedColor3').getAttr('picpreview') == lineColors[j].getAttr('picpreview')) {
							// set attributes of picked color
							$('pickedColor3').setProperty('src', lineColors[j].getElement('img').getProperty('src'));
							$('pickedColor3').copyAttributesFrom(lineColors[j]);
							colorFound = true;
						}
					}
				} else {
					lineColors[j].addClass("removed");
				}
			}
			
			// no equal color found? -> set first color as default color
			if (!colorFound) {
				for (var j=0;j<lineColors.length;j++) {
					if (lineColors[j].getBelongsTo() == texture.getAttr("nr") || lineColors[j].getBelongsTo() == 'all') {
						// set attributes of picked color
						$('pickedColor3').setProperty('src', lineColors[j].getElement('img').getProperty('src'));
						$('pickedColor3').copyAttributesFrom(lineColors[j]);
						colorFound = true;
						break;
					}
				}
			}
			
			$('line_color').setOpacity(1);
		}
		$('bigTexture').getElement('img').setProperty('src', $('pickedColor3').getAttr('picoverlay'));
	} else if ($('pickedTexture1').getAttr('texture_id') == 'la_onda') {
		// if texture is checked, display texture-picture
		if ($chk(texture)) {
			// in attribute picoverlay only the first part is stored, the nr of the color must be appended to get the whole path
			var texturePath = texture.getAttr('picoverlay') + $('pickedColor2').getAttr('colornr') + '.png';
			$('bigTexture').getElement('img').setAttribute('src', texturePath);
		} 
		// only display color-picture -> set texture-picture to opaque pixel
		else {
			$('bigTexture').getElement('img').setAttribute('src', spacerPic);
		}
	} else {
		// Linea-Textures of Model Conforto
		if ($chk(model) && model.getAttr('id') == 'conforto' && $chk(texture) && texture.getProperty('id').startsWith('linea')) {
			$('line_color').setOpacity(1);
			$('bigTexture').getElement('img').setProperty('src', $('pickedColor3').getAttr('picoverlay'));
		} else if ($chk(model) && (model.getAttr('id') == 'conforto' || model.getAttr('id') == 'stile') && $chk(texture) && texture.getProperty('id').startsWith('conio_xx')) {
			$('line_color').setOpacity(0);
			// in attribute picoverlay only the first part is stored, the nr of the color must be appended to get the whole path
			var texturePath = texture.getAttr('picoverlay') + $('pickedColor2').getAttr('colornr') + '.png';
			$('bigTexture').getElement('img').setAttribute('src', texturePath);
		} else {
			$('line_color').setOpacity(0);
			// change overlay-pic
			if ($chk(texture))
				$('bigTexture').getElement('img').setProperty('src', $(texture).getAttr('picoverlay'));
			else
				$('bigTexture').getElement('img').setProperty('src', spacerPic);
		}
	}
	
	// change name of chosen Texture
	if ($chk(texture))
		$('chosenTexture').set('html', texture.getAttr('name'));
	else
		$('chosenTexture').set('html', '-');
}

var setChosenBail = function() {
	var bailCount =  0; 		// count of all visible bails
	
	// set property for each bail (chosen or not)
	$$('#bigPicture div').each (
		function(item, index){
			if ($(item).getProperty('id').startsWith('bail')) {
		    	if (chosenOrder[$(item).getProperty("id")] = $(item).hasClass("opaque1"))
					bailCount++;
			}
		});
	
	if (bailCount > 0) {
		chosenOrder["BailText"] = bailCount + "&nbsp;x&nbsp;"+bailPos[chosenOrder["BailPosition"]];
		$('count').removeClass('not_chosen');
	}
	else {
		chosenOrder["BailText"] = '-';
	}
		
	$('chosenBail').set('html', chosenOrder["BailText"]);
	
	compute_bail_price();
}

/* moves the bail to a defined position using Elastic transition */
var moveBailTo  = function(leftOrTop, pos) {
	/*var bails = $$('#bigPicture div');
	
	for (var i=0;i<bails.length;i++) {
		if (bails[i].getProperty('id').startsWith('bail')) {
			var fx = new Fx.Tween(bails[i], { duration: 500, transition: Fx.Transitions.Elastic.easeOut });
    		fx.start(leftOrTop, pos+'px');
		}
	}*/
	
	var bailLis = $$('#pos li');
	for (var i=0;i<bailLis.length;i++) {
		bailLis[i].removeClass('active');
	}
	
	checkChosenBail();
	setChosenBail();
}

var moveBailTo1 = function() {
	chosenOrder["BailPosition"] = "Left";
	moveBailTo('left', 113);
	$('pos_left').addClass('active');
	change_bail_overlay();
}
var moveBailTo2 = function() {
	chosenOrder["BailPosition"] = "Middle";
	moveBailTo('left', 113);
	$('pos_middle').addClass('active');
	change_bail_overlay();
}
var moveBailTo3 = function() {
	chosenOrder["BailPosition"] = "Right";
	moveBailTo('left', 113);
	$('pos_right').addClass('active');
	change_bail_overlay();
}

// ----------------------------------------------------------------
// valdiate fields of order-form (send_order.php)
// ----------------------------------------------------------------
var validate_field = function(el) {
	var invalid_txt = "<img src='/grafiken/configurator/invalid.gif' alt='' />";
	var valid_txt = "<img src='/grafiken/configurator/valid.gif' alt='' />";
	var span_error = $('span_error_'+$(el).getProperty('name'));
	
	if(el.value.length > 3) {
		$(el).removeClass('invalid');
		$(el).addClass('valid');
		
		if ($chk(span_error))
			span_error.set('html', valid_txt);
		else
			el_error = new Element('span').setProperty('id', 'span_error_'+$(el).getProperty('name')).addClass('valid').set('html', valid_txt).injectAfter(el);	
			
		return true;
	} else { // invalid
		$(el).removeClass('valid');
		$(el).addClass('invalid');
	
		if ($chk(span_error))
			span_error.set('html', invalid_txt);
		else
			el_error = new Element('span').setProperty('id', 'span_error_'+$(el).getProperty('name')).addClass('invalid').set('html', invalid_txt).injectAfter(el);
	
		return false;
	}
}

var validate_mail = function(el) {
	var regEmail = /^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/;
	var invalid_txt = "<img src='/grafiken/configurator/invalid.gif' alt='' />";
	var valid_txt = "<img src='/grafiken/configurator/valid.gif' alt='' />";
	var span_error = $('span_error_'+$(el).getProperty('name'));

	if(el.value.toUpperCase().match(regEmail)) {
		$(el).removeClass('invalid');
		$(el).addClass('valid');

		if ($chk(span_error))
			span_error.set('html', valid_txt);
		else
			el_error = new Element('span').setProperty('id', 'span_error_'+$(el).getProperty('name')).addClass('valid').set('html', valid_txt).injectAfter(el);

		return true;
	} else { // invalid
		$(el).removeClass('valid');
		$(el).addClass('invalid');
		if ($chk(span_error))
			span_error.set('html', invalid_txt);
		else
			el_error = new Element('span').setProperty('id', 'span_error_'+$(el).getProperty('name')).addClass('invalid').set('html', invalid_txt).injectAfter(el);

		//$(el).focus();
		return false;
	}
}
// ----------------------------------------------------------------
// validate the order-form (send_order.php)
// ----------------------------------------------------------------
var validate_form = function(form) {
	return validate_field(form.customer_name) && validate_field(form.customer_adress) && validate_mail(form.email) && validate_field(form.phone);
}

// --------------------------------------------------------------------------------------
// check if used discount-code is valid
// --------------------------------------------------------------------------------------
var discount_submit = function() {
	var log = $('discount_code_accepted');	
	var dc_input = $('code');
	var code = '0';  
	var message = ''; 
	var color = ''; 
	var percentage = 0;
	
	if (dc_input.getProperty('disabled') == false) {
		//Set the options of the form's Request handler. 
		//"this" refers to the $('discountForm') element
		$('discountForm').set('send', {onComplete: function(response) {
			// extract success-message (0 - code invalid, 1 - code valid)
			var parsed = response.split('|');  
			code = parsed[0]; 
			percentage = parseFloat(parsed[1]); 
			message = parsed[2];  
			color = code == '1' ? '#00ff00' : '#ff0000'; 
		
			// set discount-value
			$('discountCosts').setAttr('price', percentage);
			
			// print out the rest
			log.set('html', message);
			// We define the highlight morph we're going to use
			var highlight = new Fx.Morph(log, { duration: 5000, link: 'cancel', transition: 'quad:out' });	 	
			// then we start the highlight morphing
			highlight.start({ backgroundColor: [color, '#e8e2d2'],	opacity: [1, 0.5]	});
		
			// disable input-field, if code was valid
			if (code == '1') {
				dc_input.setProperty('disabled', true);
				chosenOrder["DiscountCode"] = dc_input.getProperty("value");
			}
			
			compute_price();
		}});
	
		//Send the form.
		$('discountForm').send();
	} 
}

// ----------------------------------------------------------------
// Carousel-Effekt of Textures
// ----------------------------------------------------------------
var update_carousel = function() {
	$('previous').removeEvents();
	$('next').removeEvents();
	$('carousel').setStyle('left', 0);
	$('chosenTexture').set('html', '-');
	
	$$('#carousel li').each(
		function(item, index){
			if ($('div_texture').hasClass('opaque0') && Browser.Engine.trident4) {
				item.setOpacity(0);
			} else {
		    	item.setOpacity(0.5);
			}
		}
	);
	
	var wrapper = $('wrap'); 	// The outer wrapper
	var carousel = $('carousel'); // The inner wrapper
	var items = $$('#carousel li').filter(function(item, index) { return $(item).getStyle('display') != 'none'; });  // The different elements, this is an array
	var item_width = 70; // The full width of a single item (incl. borders, padding, etc ... if there is any)
	var max_margin = items.length * item_width - item_width;
	var animation = new Fx.Tween(carousel, {duration: 500});
	
	if (items.length > 0 && $('div_texture').hasClass('opaque1')) {
		// first Texture is selected
		items[0].setOpacity(1); 
		change_overlay();
	} 
	
	//$('bigTexture').getElement('img').setProperty('src', spacerPic);
	
	// The function to browse forward
	function next_item(pos){
		if(pos == -max_margin){
			animation.start('left', 0);
		} else { 
			var newposition = pos - item_width;
			animation.start('left', newposition);
		}
	}
	
	// The function to browse backward
	function previous_item(pos){
		if(pos == 0){
			animation.start('left', -max_margin);
		} else { 
			var newposition = pos + item_width;
			animation.start('left', newposition);
		}
	}
	
	// Set up the 'next' and 'previous' buttons
	$('next').addEvent('click', function(){
		var position = parseInt(carousel.getStyle('left'));
		next_item(position);
	});
	
	$('previous').addEvent('click', function(){
		var position = parseInt(carousel.getStyle('left'));
		previous_item(position);
	});	
}

window.addEvent('domready', update_carousel); 

// ----------------------------------------------------------------
// make divs on configurator visible step by step
// ----------------------------------------------------------------
Element.implement('makeNextDivVisible', function() {
	if (this.id == 'div_type1') {
		// make divs type2 & texture visible
		$('div_type2').setOpacity(1);
		$('div_texture').setOpacity(1);
	//} else if (this.id == 'div_texture') {
		$('div_bail1').setOpacity(1);
		$('div_bail2').setOpacity(1);
	}
});

// -------------------------------------------------------------------------------------------
// Click on a Model (Stile, Conforto, Nobile)
// -------------------------------------------------------------------------------------------
window.addEvent('domready', function() {
	var items = $$('#typen li'); // The different elements, this is an array
	
	for (var i=0;i<items.length;i++) {
		items[i].addEvent('click', function() {
			// make all elements opaque
			for (var j=0;j<items.length;j++) {
				items[j].setOpacity(0.5);
				items[j].getElement('img').setProperty('src', items[j].getAttr('picpreviewinactive'));
			}
			// make current element not opaque
			this.setOpacity(1);
			this.getElement('img').setProperty('src', this.getAttr('picpreview'));
			// hide div, that says what the user should do
			$('selectModelMessage').setStyle('display', 'none');
			$('models').getElement('h3').setStyle('color', '#666666');
			
			// make div oberflaechen (in)visible
			if (this.id == "stile") {
				$('oberflaechen').setOpacity(1);
			} else {
				$('oberflaechen').setOpacity(0);
				$('line_color').setOpacity(0);
			}
			
			// change visibility of Texture Types, according to attribute "belongsTo"
			var textureTypes = $$('#texturePicker1 li');
			var belongsToFirst = true;
			
			for (var j=0;j<textureTypes.length;j++) {
				if (textureTypes[j].getBelongsTo() == this.getAttr("nr") || textureTypes[j].getBelongsTo() == 'all') {
					textureTypes[j].removeClass("removed");
					
					if (belongsToFirst) {
						belongsToFirst = false;
						// set attributes of picked color
						$('pickedTexture1').setProperty('src', textureTypes[j].getElement('img').getProperty('src'));
						$('pickedTexture1').copyAttributesFrom(textureTypes[j]);
						$('pickedTexture1').setAttr('texture_id', textureTypes[j].getProperty('id'));

						// levigato has no textures --> make div invisible
						/*if ($('pickedTexture1').getAttr('texture_id') == 'levigato') {
							$('div_texture').setStyles({'visibility' : 'hidden',
														'height'     : '25px' });
						} else {
							$('div_texture').setProperty('style', '');
						}*/
					}
				} else {
					textureTypes[j].addClass("removed");
				}
			}

			// change visibility of Colors, according to attribute "belongsTo"
			var colors = $$('#colorPicker1 li');
			var colorFound = false;
			
			for (var j=0;j<colors.length;j++) {
				if (colors[j].getBelongsTo() == this.getAttr("nr") || colors[j].getBelongsTo() == 'all') {
					colors[j].removeClass("removed");
					
					if (!colorFound) {
						// ident color found -> keep this color
						if ($('pickedColor1').getAttr('picpreview') == colors[j].getAttr('picpreview')) {
							// set attributes of picked color
							$('pickedColor1').setProperty('src', colors[j].getElement('img').getProperty('src'));
							$('pickedColor1').copyAttributesFrom(colors[j]);
							colorFound = true;
						}
					}
				} else {
					colors[j].addClass("removed");
				}
			}
			
			// no equal color found? -> set first color as default color
			if (!colorFound) {
				for (var j=0;j<colors.length;j++) {
					if (colors[j].getBelongsTo() == this.getAttr("nr") || colors[j].getBelongsTo() == 'all') {
						// set attributes of picked color
						$('pickedColor1').setProperty('src', colors[j].getElement('img').getProperty('src'));
						$('pickedColor1').copyAttributesFrom(colors[j]);
						colorFound = true;
						break;
					}
				}
			}
			
			
			// change visibility of Colors, according to attribute "belongsTo"
			colors = $$('#colorPicker2 li');
			var colorFound = false;
			
			for (var j=0;j<colors.length;j++) {
				if (colors[j].getBelongsTo() == this.getAttr("nr") || colors[j].getBelongsTo() == 'all') {
					colors[j].removeClass("removed");
					
					if (!colorFound) {
						// ident color found -> keep this color
						if ($('pickedColor2').getAttr('picpreview') == colors[j].getAttr('picpreview')) {
							// set attributes of picked color
							$('pickedColor2').setProperty('src', colors[j].getElement('img').getProperty('src'));
							$('pickedColor2').copyAttributesFrom(colors[j]);
							colorFound = true;
						}
					}
				} else {
					colors[j].addClass("removed");
				}
			}
			
			// no equal color found? -> set first color as default color
			if (!colorFound) {
				for (var j=0;j<colors.length;j++) {
					if (colors[j].getBelongsTo() == this.getAttr("nr") || colors[j].getBelongsTo() == 'all') {
						// set attributes of picked color
						$('pickedColor2').setProperty('src', colors[j].getElement('img').getProperty('src'));
						$('pickedColor2').copyAttributesFrom(colors[j]);
						colorFound = true;
						break;
					}
				}
			}
			
			// change visibility of Textures, according to attribute "belongsTo" [belong to pickedTexture1.getAttr("nr")]
			var subTex = $$('#carousel li');
			
			for (var j=0;j<subTex.length;j++) {
				if (subTex[j].getBelongsTo() == $('pickedTexture1').getAttr("nr") || subTex[j].getBelongsTo() == 'all') {
					subTex[j].setStyle('display', 'block');
				} else {
					subTex[j].setStyle('display', 'none');
				}
			}
			
			// change src of big preview-picture of radiator
			$('bigPicture').getElement('img').setAttribute('src', this.getAttr("picoverlay"));
			
			// change preview-pic
			$('thumbnail').setAttribute('src', this.getAttr("picpreview"));
			// change price
			$('base_price').setPriceAndHtml(this.getPrice());
			compute_texture_price();
			// change name of chosen Model
			$('chosenModel').set('html', this.getProperty('name'));
			$('productName').set('html', this.getProperty('name'));
			
			$('div_type1').makeNextDivVisible();
			
			// display bordercolor?
			if ($(this).getAttr('hasbordercolor') == "on") {
				$('border_color').setOpacity(1);
				$('bigBorderColor').setOpacity(1);
			} else {
				$('border_color').setOpacity(0);
				$('bigBorderColor').setOpacity(0);
			}
			
			change_bail_positions();
			update_carousel();
			change_overlay();
			compute_price();
		});
	}
});

// ---------------------------------------------------------------------------------------------
// Click on a Texture of the Carousel
// ---------------------------------------------------------------------------------------------
window.addEvent('domready', function() {
	var items = $$('#carousel li'); // The different elements, this is an array
	
	for (var i=0;i<items.length;i++) {
		items[i].addEvent('click', function() {
			// make all elements opaque
			for (var j=0;j<items.length;j++) {
				items[j].setOpacity(0.5);
			}
			// make current element not opaque
			this.setOpacity(1);
			$('div_texture').getElement('h3').setStyle('color', '#666666');
			
			// change visibility of line-colors according to attribute belongsTo
			var lineColors = $$('#colorPicker3 li');
			var colorFound = false;
			
			for (var j=0;j<lineColors.length;j++) {
				if (lineColors[j].getBelongsTo() == this.getAttr("nr") || lineColors[j].getBelongsTo() == 'all') {
					lineColors[j].removeClass("removed");
					
					if (!colorFound) {
						// ident color found -> keep this color
						if ($('pickedColor3').getAttr('picpreview') == lineColors[j].getAttr('picpreview')) {
							// set attributes of picked color
							$('pickedColor3').setProperty('src', lineColors[j].getElement('img').getProperty('src'));
							$('pickedColor3').copyAttributesFrom(lineColors[j]);
							colorFound = true;
						}
					}
				} else {
					lineColors[j].addClass("removed");
				}
			}
			
			// no equal color found? -> set first color as default color
			if (!colorFound) {
				for (var j=0;j<lineColors.length;j++) {
					if (lineColors[j].getBelongsTo() == this.getAttr("nr") || lineColors[j].getBelongsTo() == 'all') {
						// set attributes of picked color
						$('pickedColor3').setProperty('src', lineColors[j].getElement('img').getProperty('src'));
						$('pickedColor3').copyAttributesFrom(lineColors[j]);
						colorFound = true;
						break;
					}
				}
			}
			
			// change overlay
			change_overlay();
			// compute price
			compute_texture_price();
			// show next div
			$('div_texture').makeNextDivVisible();
		});
	}
});

// -------------------------------------------------------------------
// Check Discount-Code
// -------------------------------------------------------------------
window.addEvent('domready', function() { 
	// onSubmit-Event for form -- triggered through enter
	$('discountForm').addEvent('submit', function(e) {
		e.stop();
		discount_submit();
	});
	// onClick-Event for check-link of discount-codes
	$('check_discount').addEvent('click', function(e) {
		e.stop();
		discount_submit();
	});
});

// -------------------------------------------------------------------
// Change Bail Material
// -------------------------------------------------------------------
window.addEvent('domready', function() { 
	var radios = $$('#bailMaterials input');
	
	for (var i=0;i<radios.length;i++) {
		radios[i].addEvent('change', function() {			
			checkChosenBail();
			compute_bail_price();
			change_bail_overlay();
		});
	}
});

// -------------------------------------------------------------------
// Make Labels for Radio-Boxes (Bail-Material) clickable
// -------------------------------------------------------------------
window.addEvent('domready', function() { 
	var labels = $$('#div_bail1 label');
	
	if (!Browser.Engine.trident4) {
		for (var i=0;i<labels.length;i++) {
			labels[i].addEvent('click', function() {			
				// simulate click on radio-box
				$(this.htmlFor+"_old").click();
			
				// IE and Opera do not refresh state
				if (Browser.Engine.trident || Browser.Engine.presto) {
					var radios = $$('#bailMaterials span');
				
					for (var j=0;j<radios.length;j++) {
						radios[j].setStyle('background-position', '0 0');
					}
				
					$(this.htmlFor).setStyle('background-position', '0 -28pt');
					checkChosenBail();
				}
			
				compute_bail_price();
				change_bail_overlay();
			});
		}
	}
});

// -------------------------------------------------------------------
// Change Bail-Form
// -------------------------------------------------------------------
window.addEvent('domready', function() { 
	var forms = $$('#formen li');
	
	for (var i=0;i<forms.length;i++) {
		forms[i].addEvent('click', function() {			
			// make all elements inactive
			for (var j=0;j<forms.length;j++) {
				forms[j].removeClass('active');
			}
			// make current element active
			this.addClass('active');
			
			// show the possible bail positions
			change_bail_positions();
			// check which bails are chosen
			checkChosenBail();
			// change overlay-pic
			change_bail_overlay();
			// change price
			compute_bail_price();
		});
	}
});

// -------------------------------------------------------------------
// by clicking on wrapper, make dropdown-menus invisible
// -------------------------------------------------------------------
var reactOnDocumentClick = false;

// -------------------------------------------------------------------
// Color Picker + Texture Picker - Dropdown Menus
// -------------------------------------------------------------------
window.addEvent('domready', function() { 
	// make dropdown-menus invisible when clicking on the document
	document.onclick = function() {
		if (reactOnDocumentClick == true) {
			if ($chk($('colorPicker1'))) $('colorPicker1').setOpacity(0);
			if ($chk($('colorPicker2'))) $('colorPicker2').setOpacity(0);
			if ($chk($('colorPicker3'))) $('colorPicker3').setOpacity(0);
			if ($chk($('texturePicker1'))) $('texturePicker1').setOpacity(0);
		}
		
		reactOnDocumentClick = true;
	}
	// -------------------------------------------------------------------
	// COLOR PICKER 1
	// -------------------------------------------------------------------
	var colorPicker = $('colorPicker1Small');
	var colors = $$('#colorPicker1 li');
	
	colorPicker.addEvent('click', function() {
		reactOnDocumentClick = false;
		$("colorPicker1").toggleVisibility();
		$('colorPicker2').setOpacity(0);
		$('colorPicker3').setOpacity(0);
		$('texturePicker1').setOpacity(0);
	});
	
	for (var i=0;i<colors.length;i++) {
		colors[i].addEvent('click', function() {
			// get the first img-tag that's a children of the current element
			var img = $(this).getElement('img');
			
			// set properties of picked color 1
			$('pickedColor1').setProperty('src', img.getProperty('src'));
			$('pickedColor1').copyAttributesFrom($(this));
			change_overlay();
			// hide ul
			$("colorPicker1").toggleVisibility();
			
			compute_texture_price();
		});
	}
	
	// -------------------------------------------------------------------
	// COLOR PICKER 2
	// -------------------------------------------------------------------
	colorPicker = $('colorPicker2Small');
	colors = $$('#colorPicker2 li');
	
	colorPicker.addEvent('click', function() {
		reactOnDocumentClick = false;
		$("colorPicker2").toggleVisibility();
		$('colorPicker1').setOpacity(0);
		$('colorPicker3').setOpacity(0);
		$('texturePicker1').setOpacity(0);
	});
	
	for (var i=0;i<colors.length;i++) {
		colors[i].addEvent('click', function() {
			var img = $(this).getElement('img');
			
			// set attributes of picked color
			$('pickedColor2').setProperty('src', img.getProperty('src'));
			$('pickedColor2').copyAttributesFrom($(this));
			change_overlay();
			
			// hide ul
			$("colorPicker2").toggleVisibility();
			compute_texture_price();
		});
	}
	
	// -------------------------------------------------------------------
	// COLOR PICKER 3
	// -------------------------------------------------------------------
	colorPicker = $('colorPicker3Small');
	colors = $$('#colorPicker3 li');
	
	colorPicker.addEvent('click', function() {
		reactOnDocumentClick = false;
		$("colorPicker3").toggleVisibility();
		$('colorPicker1').setOpacity(0);
		$('colorPicker2').setOpacity(0);
		$('texturePicker1').setOpacity(0);
	});
	
	for (var i=0;i<colors.length;i++) {
		colors[i].addEvent('click', function() {
			var img = $(this).getElement('img');
			
			// set attributes of picked color 3 (line color)
			$('pickedColor3').setProperty('src', img.getProperty('src'));
			$('pickedColor3').copyAttributesFrom($(this));
			// hide ul
			$("colorPicker3").toggleVisibility();
			// change overlay-pic
			change_overlay();
			
			compute_texture_price();
		});
	}
	
	// -------------------------------------------------------------------
	// TEXTURE PICKER
	// -------------------------------------------------------------------
	
	var texturePicker = $('texturePicker1Small');
	var textures = $$('#texturePicker1 li');
	
	texturePicker.addEvent('click', function() {
		reactOnDocumentClick = false;
		$("texturePicker1").toggleVisibility();
		$('colorPicker1').setOpacity(0);
		$('colorPicker2').setOpacity(0);
		$('colorPicker3').setOpacity(0);
	});
	
	for (var i=0;i<textures.length;i++) {
		textures[i].addEvent('click', function() {
			var img = $(this).getElement('img');
			
			// set attributes of picked Texture
			$('pickedTexture1').setProperty('src', img.getProperty('src'));
			$('pickedTexture1').copyAttributesFrom($(this));
			$('pickedTexture1').setAttr('texture_id', $(this).getProperty('id'));
			
			// hide Line-color
			$('line_color').setOpacity(0);
			// hide ul
			$("texturePicker1").toggleVisibility();
			
			// change visibility of Textures, according to attribute "belongsTo"
			var subTex = $$('#carousel li');
			
			for (var j=0;j<subTex.length;j++) {
				if (subTex[j].getBelongsTo() == this.getAttr("nr") || subTex[j].getBelongsTo() == 'all') {
					subTex[j].setStyle('display', 'block');
				} else {
					subTex[j].setStyle("display", "none");
				}
			}
			
			change_overlay();
			update_carousel();
			compute_texture_price();
		});
	}
});

// ----------------------------------------------------------------
// Send Order [Configured Radiator]
// ----------------------------------------------------------------
window.addEvent('domready', function() {
	$('send').addEvent('click', function(e) {
		e.stop();
	
		// Model and Texture selected --> fully configured [the rest are dropdowns or radio-buttons, so there is always something chosen]
		if ($chk($('typen').getElement('li[.opaque1]')) && $chk($('carousel').getElement('li[.opaque1]'))) {
			// dropdown-boxes are not visible anymore
			reactOnDocumentClick = false;
	
			// read and set chosen order:
			chosenOrder["Model"] = $('typen').getElement('li[.opaque1]').getAttr('nr');
			chosenOrder["TextureType"] = $('pickedTexture1').getAttr('nr');
			chosenOrder["TextureColor"] = $('pickedColor2').getAttr('nr');
			chosenOrder["BorderColor"] = $('pickedColor1').getAttr('nr');
			chosenOrder["LineColor"] = $('line_color').hasClass('opaque1') ? $('pickedColor3').getAttr("nr") : "";
			chosenOrder["Texture"] = $('carousel').getElement('li[.opaque1]').getAttr('nr');
			chosenOrder["BailForm"] = $('formen').getElement('li[.active]').getAttr('nr');
			chosenOrder["BailMaterial"] = chosenOrder["BailMaterial"]= $('bailMaterials').getElement('input[checked]').getAttr("nr");
			
			//chosenOrder["BailPosition"] -- already set in cfe.js
			//chosenOrder["bail1"]
			//chosenOrder["bail2"] 
			//chosenOrder["bail3"] 
			//chosenOrder["bail4"] 
			//chosenOrder["bail5"] 
			//chosenOrder["BailText"]
			chosenOrder["HeatingType"] = $('heatingType').options[$('heatingType').options.selectedIndex].getAttr("nr");
			// chosenOrder["DiscountCode"] -- already set in ajax-call to check if discount-code is valid
			chosenOrder["Country"] = $('delivery_price').options[$('delivery_price').options.selectedIndex].id;
			// NEW 22.12.2009
			chosenOrder["DiscountValue"] = $('discountCosts2').getPrice();

			var leftPanel = $('left');
			var rightPanel = $('right');
			// save src of radiator-images to generate it with php
			var baseSrc = $('bigPicture').getElement('img').getProperty('src');
			var colorSrc = $('bigColor').getElement('img').getProperty('src');
			var textureSrc = $('bigTexture').getElement('img').getProperty('src');
			var borderColorConfortoSrc = $('bigBorderColorConforto').getElement('img').getProperty('src');
			var borderColorSrc = $('bigBorderColorOverlay').getElement('img').getProperty('src');
			var borderColorVisible = $('bigBorderColor').hasClass('opaque1');
			var bail1Src = $('bail1').hasClass('opaque0') ? 'no' : $('bail1').getElement('img').getProperty('src');
			var bail2Src = $('bail2').hasClass('opaque0') ? 'no' : $('bail2').getElement('img').getProperty('src');
			var bail3Src = $('bail3').hasClass('opaque0') ? 'no' : $('bail3').getElement('img').getProperty('src');
			var bail4Src = $('bail4').hasClass('opaque0') ? 'no' : $('bail4').getElement('img').getProperty('src');
			var bail5Src = $('bail5').hasClass('opaque0') ? 'no' : $('bail5').getElement('img').getProperty('src');

			// delete the right Panel
			rightPanel.dispose();
			// delete children of left Panel (except those with class no_remove)
			//leftPanel.getElements('*:not([.no_remove])').dispose();
			leftPanel.getElements('*').filter(function(item, index) { return !$(item).hasClass('no_remove'); }).dispose(); 
			// set new width of left panel (whole width)
			leftPanel.tween('width', '938px');
			// make summary-div visible
			var summaryDiv = $('summary');
			summaryDiv.setStyles( {'display' : 'block',
								   'background-image' : 'url(/grafiken/general/loading.gif)',
								   'background-position' : '200px 150px',
								   'background-repeat' : 'no-repeat'} );
			
			// ----------------------------------------------------------------
			// make the ajax call, update bigPicture with generated jpeg-image  
			// ----------------------------------------------------------------

			$('bigPicture').getElement('img').setProperty('src', '/seiten/print.php?Base=' + baseSrc + '&Color=' + colorSrc + '&Texture='+ textureSrc + '&BorderColorVisible=' + borderColorVisible +
																									  '&BorderColor=' + borderColorSrc + '&BorderColorConforto=' + borderColorConfortoSrc +
																									  '&Bail1=' + bail1Src +'&Bail2=' + bail2Src +'&Bail3=' + bail3Src +'&Bail4=' + bail4Src +'&Bail5=' + bail5Src);
		
			 // ----------------------------------------------------------------
			 // make the ajax call, update summaryDiv with text  
			 // ----------------------------------------------------------------
			 var req = new Request.HTML({  
			      method: 'get',  
			      url: localizedUrls["sendOrder"],  
			      data: { 'Model' : chosenOrder["Model"],
			 			  'TextureType' : chosenOrder["TextureType"],
						  'TextureColor' : chosenOrder["TextureColor"],
						  'BorderColor' : chosenOrder["BorderColor"],
						  'LineColor' : chosenOrder["LineColor"],
						  'Texture' : chosenOrder["Texture"],
						  'BailForm' : chosenOrder["BailForm"],
						  'BailMaterial' : chosenOrder["BailMaterial"],
						  'BailPosition' : chosenOrder["BailPosition"],
						  'BailText' : chosenOrder["BailText"],
						  'Bail1' : chosenOrder["bail1"],
						  'Bail2' : chosenOrder["bail2"],
						  'Bail3' : chosenOrder["bail3"],
						  'Bail4' : chosenOrder["bail4"],
						  'Bail5' : chosenOrder["bail5"],
						  'HeatingType' : chosenOrder["HeatingType"],
						  'DiscountCode' : chosenOrder["DiscountCode"],
						  'DiscountValue' : chosenOrder["DiscountValue"], // NEW 22.12.2009
						  'Country' : chosenOrder["Country"],
						  'Language' : chosenOrder["Language"] },  
			      onRequest: function() { },  
			      update: $(summaryDiv),  
			      onComplete: function(response) { 
					summaryDiv.setStyle('background-image', 'none');
					$('send_order_finally').removeEvents().addEvent('click', function() {
						$('mb_send2').toggleVisibility();
						$('order_info').toggleVisibility();
						
						if ($('mb_send2').hasClass('opaque1')) {
							$('mail_betreff').setProperty('value', 'Bestellung');
							$('order_form_header').set('html', subjects["order"]);
						}
						else {
							$('mail_betreff').setProperty('value', '');
							$('order_form_header').set('html', '');
						}
					});
					
					$('send_order_request').removeEvents().addEvent('click', function() {
						$('mb_send2').toggleVisibility();
						$('order_info').toggleVisibility();
						
						if ($('mb_send2').hasClass('opaque1')) {
							$('mail_betreff').setProperty('value', 'Anfrage');
							$('order_form_header').set('html', subjects["request"]);
						}
						else {
							$('mail_betreff').setProperty('value', '');
							$('order_form_header').set('html', '');
						}
					});
			
					$('close_send_div').removeEvents().addEvent('click', function() {
						// reset properties and error classes
						$('customer_name').removeClass('valid').removeClass('invalid').setProperty('value', '');
						$('customer_adress').removeClass('valid').removeClass('invalid').setProperty('value', '');
						$('email').removeClass('valid').removeClass('invalid').setProperty('value', '');
						// remove error images
						$$('#mb_send_table span').filter(function(item, index) { return $(item).getProperty('id').startsWith('span_error_'); }).dispose(); 
						
						
						$('mb_send2').setOpacity(0);
						$('order_info').setOpacity(1);
					});
			
					$('orderForm').addEvent('submit', function(e) {
						e.stop();
			
						$('orderForm').set('send', {onComplete: function(response) {
							// hide mb_send-div
							$('mb_send2').setOpacity(0);
							$('order_info').setOpacity(1);
							// print out the rest
							$('order_response').set('html', '<h1 class="configurator">' + response + '</h1>');
						}});
				
						//Send the form
						if (validate_form(this) == true) {
							$('orderForm').send();
							$('send_order_finally').removeEvents();
							$('send_order_request').removeEvents();
						}
					});
				  }  
			 }).send();
		}
		// not fully configured --> open Mediabox link with message
		else {
			// make color of not configured thing red
			if (!$chk($('typen').getElement('li[.opaque1]'))) {
				$('models').getElement('h3').setStyle('color', 'red');
			} 
			
			else if (!$chk($('carousel').getElement('li[.opaque1]'))) {
				$('div_texture').getElement('h3').setStyle('color', 'red');
			}
			
			Mediabox.open('#mb_send', '', '300 100');
		}
	});
});

// ----------------------------------------------------------
// Preload Images
// ----------------------------------------------------------
window.onload = function () {
  	 var pictures = new Array("/grafiken/configurator/color_picker_hover.png", "/grafiken/configurator/texture_picker_hover.png");

	 for (var i=0; i < pictures.length; i++) {
	    var pic = new Image();
	    pic.src = pictures[i];
	 } 
	
	// compute_price at beginning
	compute_price();
}