var updatePlateAjax, plateEffects, plateHeightEffects, loaderEffects;
var prices = new Array();
var preloadImage = new Element('img');
preloadImage.src = 'http://www.demonplates.com/img/platebuilder/loader.gif';

var updatePlateImage = function(imagefile){
	if ($('plateImage').offsetHeight != preloadImage.height || $('plateImage').offsetWidth != preloadImage.width) {
		plateHeightEffects.stop();
		$('plateImage').setStyle('width', preloadImage.width);
		plateHeightEffects.start(preloadImage.height).chain(function(){
			$('plateImage').setProperty('src', imagefile);
			plateEffects.stop();
			plateEffects.start(1);
			loaderEffects.stop();
			loaderEffects.start(0);
		});
	} else {
		$('plateImage').setProperty('src', imagefile);
		plateEffects.stop();
		plateEffects.start(1);
		loaderEffects.stop();
		loaderEffects.start(0);
	}

	preloadImage.remove();
	preloadImage = new Element('img');
}

var updatePlatePrice = function(){

	// calculate plate price

	var totalPrice = 0;
	var frontsurPrice = 0;
	var rearsurPrice = 0;
	
	prices.each(function(priceComponent, i){
		if (i > 0 && !isNaN(priceComponent)) totalPrice += priceComponent;
	});

	// for both plates, double the cost of the borders, badges etc
	// remove surrounds from totalprice, as they are handled below
	if (!isNaN(prices[7])) { var frontsurPrice = prices[7];	} 		
	if (!isNaN(prices[8])) { var rearsurPrice = prices[8];	}
	totalPrice = (totalPrice - (frontsurPrice + rearsurPrice));	
	if (prices[6] == 22) totalPrice += (totalPrice - prices[6]);
	
	
	
	// add the special plate pricing
	if (!isNaN(prices[0])) {
		switch ($('valWhichPlates').getProperty('value')) {
			case 'rear':
				if ($('valPlateSize').getProperty('value').test(/^(2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31)$/)) totalPrice += prices[0];
				
				break;

			case 'both':
				if ($('valPlateSize').getProperty('value').test(/^(2|3|4|5|6|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31)$/)) totalPrice += prices[0];
				if ($('valPlateSize').getProperty('value').test(/^(7|8|9|10)$/)) totalPrice += prices[0] + prices[0];
				
				break;

			case 'front':
				if ($('valPlateSize').getProperty('value').test(/^(7|8|9|10)$/)) totalPrice += prices[0];
				
				break;
		}
	}
	
	// add the  front surround pricing
	if (!isNaN(prices[7])) {
		if ($('valFrontSurround').getProperty('value').test(/^(1|3|5|7|9)$/)) totalPrice += prices[7];		
	}
	
	// add the  rear surround pricing
	if (!isNaN(prices[8])) {
		if ($('valRearSurround').getProperty('value').test(/^(2|4|6|8|10)$/)) totalPrice += prices[8];		
	}
	
	// update visible price
		$('plateinnerprice').getElement('span').setText('£' + totalPrice.toFloat().toFixed(2));
	}

var updatePlate = function(){

	updatePlatePrice();


	// cancel any pending image updates

	if (updatePlateAjax) updatePlateAjax.cancel();


	// do some fancy display work

	$('loader').setStyle('top', $('plateImage').offsetHeight / 2 - 27);
	plateEffects.stop();
	plateEffects.start(0.3);
	loaderEffects.stop();
	loaderEffects.start(1);


	// get the new plate image

	updatePlateAjax = $('plateForm').send({
		onComplete: function(imagefile) {
			preloadImage = new Element('img');
			preloadImage.onload = updatePlateImage.pass(imagefile);
			preloadImage.src = imagefile;
			$(preloadImage).setStyles({
				position: 'absolute',
				left: -10000
			}).injectInside(document.body);
			plateEffects.stop();
			plateEffects.start(0);
		}
	});
}

var initPlateBuilder = function(){

	// setup accordions

	var fontSizeAccordion = new Accordion($$('.plateSizeLink'), $$('.plateSizeMenu'), {
		alwaysHide: true,
		show: -1
	});

	var plateBuilderAccordion = new Accordion($$('#plateNav li'), $$('.plateBlock'), {
		onActive: function(toggler, element){
			toggler.addClass('current');
			element.getElements('.scrollBlock').each(function(el){
				el.setStyle('overflow', 'auto')
			});
		},

		onBackground: function(toggler, element){
			toggler.removeClass('current');
			element.setStyle('height', element.offsetHeight);
			element.getElements('.scrollBlock').each(function(el){
				el.setStyle('overflow', 'hidden')
			});
		},

		onComplete: function(){
			this.elements[this.previous].setStyle('height', 'auto');
		}
	});

	// setup plate effects
	plateEffects = $('plateImage').effect('opacity', {duration: 1000});
	plateHeightEffects = $('plateImage').effect('height', {duration: 500});
	var loader = new Element('div', {
		id: 'loader',
		styles: {
			opacity: 0,
			top: $('plateImage').offsetHeight / 2 - 27
		}
	}).injectBefore($('plateImage')).adopt(
		new Element('img', {src: 'http://www.demonplates.com/img/platebuilder/loader.gif'})
	);
	loaderEffects = $(loader).effect('opacity', {duration: 1000});


	$('plateForm').addEvent('submit', function(e){
		new Event(e).stop();
	});

	// text fields, reg number and slogan

	var tidyString = function(){
		this.setProperty('value', this.getProperty('value').replace(/([^A-Za-z0-9 ])/g, ''));
	}

	var tidyStringSlogan = function(){
		this.setProperty('value', this.getProperty('value').replace(/(")/g, ''));
	}

	var keyHandle = function(e){
		var event = new Event(e);
		if (!event.key.test(/left|right|space|backspace|delete|a|b|c|d|e|f|g|h|i|j|k|l|m|n|o|p|q|r|s|t|u|v|w|x|y|z|0|1|2|3|4|5|6|7|8|9/i)) event.stop();
		if (event.key.test(/0|1|2|3|4|5|6|7|8|9/) && event.shift) event.stop();
	}

	$('formRegnumber').observe = new Observer($('formRegnumber'), updatePlate, {delay: 2000});
	$('formRegnumber').addEvents({
		keydown: keyHandle,
		keyup: tidyString,
		change: tidyString
	});
	$('formSlogan').observe = new Observer($('formSlogan'), updatePlate, {delay: 2000});
	$('formSlogan').addEvents({
		keyup: tidyStringSlogan,
		change: tidyStringSlogan
	});


	// all the multiple selection inputs

	var multipleInputs = [
		{
			aSelector: '#formPlateSizeList a',
			valId: 'valPlateSize',
			curSelector: '#formPlateSizeList .current',
			parent: true,
			defaultPrice: 3,
			pricing: {
				price0: 0,
				price1: 0,
				price20: 6.5,
				price21: 6.5,
				price22: 6.5,
				price23: 6.5,
				price24: 6.5,
				price25: 6.5,
				price26: 6.5,
				price27: 6.5,
				price28: 6.5,
				price29: 6.5,
				price31: 6.5				
			}
		},
		{
			aSelector: '.fontBlock a',
			valId: 'valFont',
			curSelector: '.fontBlock .current',
			parent: false,
			defaultPrice: 0,
			pricing: {
				price3: 2.5,
				price16: 10,
				price18: 10
			}
		},
		{
			aSelector: '.scrollBlockBadge a',
			valId: 'valBadge',
			curSelector: '.scrollBlockBadge .current',
			parent: false
		},
		
		{
			aSelector: '#formBadgeColourList a',
			valId: 'valBadgeColour',
			curSelector: '#formBadgeColourList .current',
			parent: true,
			defaultPrice: 2.5,
			pricing: {
				price0: 0
			}
		},
		{
			aSelector: '#formBorderColourList a',
			valId: 'valBorderColour',
			curSelector: '#formBorderColourList .current',
			parent: true,
			defaultPrice: 3,
			pricing: {
				price0: 0,
				price1: 0
			}
		},
		{
			aSelector: '.scrollBlockBackground a',
			valId: 'valBackground',
			curSelector: '.scrollBlockBackground .current',
			parent: false,
			defaultPrice: 5,
			pricing: {
				price0: 0
			}
		},
		{
			aSelector: '#plateoptions a.whichplates',
			valId: 'valWhichPlates',
			curSelector: '#plateoptions a.current[id!=plateFittingKit]',
			parent: false,
			defaultPrice: 11,
			pricing: {
				priceboth: 22
			}
		},
			{
			aSelector: '.frontsurround a',
			valId: 'valFrontSurround',
			curSelector: '.frontsurround .current',
			parent: false,
			defaultPrice: 5,
			pricing: {
				price0: 0,
				price1: 4.70,
				price3: 9.40,
				price5: 11.75,
				price7: 9.40,
				price9: 11.75
			}
		},
		
			{
			aSelector: '.rearsurround a',
			valId: 'valRearSurround',
			curSelector: '.rearsurround .current',
			parent: false,
			defaultPrice: 5,
			pricing: {
				price0: 0,
				price2: 4.70,
				price4: 9.40,
				price6: 11.75,
				price8: 9.40,
				price10: 11.75
			}
		}
	];
	
	// Black Front and Rear Surround
	
	$$('#plateSurround a[rel=1]','#plateSurround a[rel=2]').addEvent('click', function(){
		if (($(multipleInputs[7].valId).getProperty('value') != 1 ) && ($(multipleInputs[8].valId).getProperty('value') != 2 )) {
			openPopupLarge('/pop/black-surround.php');
		}		
	});
	
	
	//Chrome Front and Rear Surround
	$$('.frontsurround a[rel=3]','.rearsurround a[rel=4]').addEvent('click', function(){
		if (($(multipleInputs[7].valId).getProperty('value') != 3 ) && ($(multipleInputs[8].valId).getProperty('value') != 4 )) {
			openPopupLarge('/pop/chrome-surround.php');
			}
	});
	// Drilled Front and Rear Surround
	$$('.frontsurround a[rel=5]','.rearsurround a[rel=6]').addEvent('click', function(){
	if (($(multipleInputs[7].valId).getProperty('value') != 5 ) && ($(multipleInputs[8].valId).getProperty('value') != 6 )) {
		openPopupLarge('/pop/drilled-surround.php');
		}
	});
	// Pink Front and Rear Surround
	$$('.frontsurround a[rel=7]','.rearsurround a[rel=8]').addEvent('click', function(){
	if (($(multipleInputs[7].valId).getProperty('value') != 7 ) && ($(multipleInputs[8].valId).getProperty('value') != 8 )) {
		openPopupLarge('/pop/pink-surround.php');
		}
	});
	// Carbon Fibre Front and Rear Surround
	$$('.frontsurround a[rel=9]','.rearsurround a[rel=10]').addEvent('click', function(){
	if (($(multipleInputs[7].valId).getProperty('value') != 9 ) && ($(multipleInputs[8].valId).getProperty('value') != 10 )) {
		openPopupLarge('/pop/carbon-surround.php');
		}
	});

	multipleInputs.each(function(obj, i){
		$$(obj.aSelector).each(function(el){

			// add click event

			el.addEvent('click', function(e){
				new Event(e).stop();
				if (this.getProperty('rel') != null && ($(obj.valId).getProperty('value') != this.getProperty('rel'))) {

					// check if we need to do something special

					switch (i) {
						case 0:
						
							// Remove surrounds from other plate sizes so they can't be selected									
								
								if (this.getProperty('rel') != '1') {
									$('plateSurround').setStyle('display', 'none');
									$('plateNavSurround').setStyle('display', 'none');
									$(multipleInputs[7].valId).setProperty('value', '0');
									$$(multipleInputs[7].curSelector).removeClass('current');
									$(multipleInputs[8].valId).setProperty('value', '0');									
									$$(multipleInputs[8].curSelector).removeClass('current');
									prices[7] = 0;
									prices[8] = 0;
								}	

								// display surrounds for standard plates
								if (this.getProperty('rel') == '1') {															
									$('plateSurround').setStyle('display', 'block');
									$('plateNavSurround').setStyle('display', 'block');									
								}
						
							// switch automatically to rear only plate when changing to a bike size

							switch (this.getProperty('rel')) {
								case '4': case '5': case '6':
									$$(multipleInputs[6].curSelector).removeClass('current');
									$('plateRearPlate').addClass('current');
									$(multipleInputs[6].valId).setProperty('value', 'rear');
									prices[6] = multipleInputs[6].defaultPrice;	
									$('plateSurround').setStyle('display', 'none');
									$('plateNavSurround').setStyle('display', 'none');
									$(multipleInputs[7].valId).setProperty('value', '0');
									$$(multipleInputs[7].curSelector).removeClass('current');
									$(multipleInputs[8].valId).setProperty('value', '0');									
									$$(multipleInputs[8].curSelector).removeClass('current');
									prices[7] = 0;
									prices[8] = 0;									
									break;

								default:
										if ($(multipleInputs[0].valId).getProperty('value').test(/(4|5|6)/)) {
											$$(multipleInputs[6].curSelector).removeClass('current');
											$('plateBothPlates').addClass('current');											
											$(multipleInputs[6].valId).setProperty('value', 'both');
											prices[6] = multipleInputs[6].pricing.priceboth;
											
										}					
							}
							break;

						case 2:
							if ($(multipleInputs[3].valId).getProperty('value') == '0') {
								$$(multipleInputs[3].curSelector).removeClass('current');
								$$('#formBadgeColourList a[rel=5]').getParent().addClass('current');
								$(multipleInputs[3].valId).setProperty('value', '5');
								prices[3] = multipleInputs[3].defaultPrice;
							}
							break;

						case 6:

							// don't allow to switch to non-rear plate when on bike sizes

							switch ($(multipleInputs[0].valId).getProperty('value')) {
								case '4': case '5': case '6':
									if (this.getProperty('rel') != 'rear') return false;
									break;
							}
							break;
							
						}
					
					

					if(this.getProperty('rel')) {
						$(obj.valId).setProperty('value', this.getProperty('rel'));
						$$(obj.curSelector).removeClass('current');
						(obj.parent ? this.getParent() : this).addClass('current');
												
						if ($defined(obj.defaultPrice)) {
							prices[i] = (
								$defined(obj.pricing['price' + this.getProperty('rel')])
								? obj.pricing['price' + this.getProperty('rel')]
								: obj.defaultPrice
							);
						}
						updatePlate();
					}
				}
			});

			// set initial pricing values

			if ((obj.parent ? el.getParent() : el).hasClass('current')) {
				if (obj.defaultPrice) {
					prices[i] = (
						$defined(obj.pricing['price' + el.getProperty('rel')])
						? obj.pricing['price' + el.getProperty('rel')]
						: obj.defaultPrice
					);
				}
			}
		});
	});


	// 3d carbon domed popup

	$$('#mainFontBlock a[rel=16]').addEvent('click', function(){
		openPopup('/pop/carbon.php');
	});

	// domed black popup
	$$('#mainFontBlock a[rel=18]').addEvent('click', function(){
		openPopup('/pop/domed.php');
	});

	// 3d popup
	$$('#mainFontBlock a[rel=3]').addEvent('click', function(){
		openPopup('/pop/3d.php');
	});
	
	
	
	
	
	
	
	// add to basket button
	$('buttonBuy').addEvent('click', function(e){
		new Event(e).stop();
		$('plateForm').setProperty('action', 'http://www.demonplates.com/basket.php');
		$('plateForm').adopt(new Element('input', {
			type: 'hidden',
			name: 'basketaction',
			value: 'addplate'
		}));
		$('plateForm').removeEvent('submit').submit();
	});


	// reset button
	$('buttonReset').addEvent('click', function(e){
		new Event(e).stop();

		$('formRegnumber').setProperty('value', 'YOUR REG');
		$('formSlogan').setProperty('value', 'Demon Plates')

		multipleInputs.each(function(obj, i){
			$$(obj.aSelector).each(function(el){
				switch (i) {
					case 0:	case 1:	case 2: 
						if (el.getProperty('rel') != '1') return false;
						break;
					case 3: case 4: case 5: case 7: case 8:
						if (el.getProperty('rel') != '0') return false;
						break;
					case 6:
						if (el.getProperty('rel') != 'both') return false;
						break;					
				}

				if ($(obj.valId).getProperty('value') != el.getProperty('rel')) {
					$(obj.valId).setProperty('value', el.getProperty('rel'));
					$$(obj.curSelector).removeClass('current');
					(obj.parent ? el.getParent() : el).addClass('current');
					if ($defined(obj.defaultPrice)) {
						prices[i] = (
							$defined(obj.pricing['price' + el.getProperty('rel')])
							? obj.pricing['price' + el.getProperty('rel')]
							: obj.defaultPrice
						);
					}
				}
			});
		});

		updatePlate();
	});


	// set the initial price
	//updatePlatePrice();
	updatePlate();
}

window.addEvent('domready', initPlateBuilder);