var FaceCard = new Class({
	
	Implements: [Options],
	
	options: {
		displayType: 'inline', // inline or overlay
		triggers: [], // collection of elements to trigger the survey when in overlay mode
		imagePath: ''
	},
	
	
	survey: {
		intro: {
			header: {
				se: 'Hudanalys'
			}, 
			question: {
				se: 'Läs igenom nedanstående påståenden och kryssa för de alternativ som bäst stämmer överens'
			}
		},
		almond: {
			color: '#fcdad8',
			statements: {
				'se' : [
					'Torr. Röd och irriterad, reagerar t.ex. lätt på klimat, produkter, vatten osv.',
					'Reagerar negativt på produkter med dofter.',
					'Blandhy. Röd och irriterad, reagerar t.ex. lätt på klimat, produkter, vatten osv.',
					'Har finnar/kvisslor som jag normalt sett inte brukar ha.',
					'Fet, stora porer och glansig T-zon.'
				]
			}
		},
		iris: {
			color: '#9d73b2',
			statements: {
				'se' : [
					'Normal, har inga direkta problem, inga synliga ålderstecken.',
					'Blandad, kan vara torr men samtidigt få tillfälliga finnar. Inga synliga ålderstecken.',
					'Torr, inga synliga ålderstecken'
				]
			}
		},
		wildRose: {
			color: '#f28ab2',
			statements: {
				'se' : [
					'Normal/blandhy, fina linjer börjar bli synliga',
					'Torr, fina linjer börjar bli synliga',
					'Minskad lyster, fina linjer.'
				]
			}
		},
		pomegranate: {
			color: '#de4758',
			statements: {
				'se' : [
					'Torr, har rynkor.',
					'Upplever minskad fasthet och spänst',
					'Får lätt åldersfläckar',
					'Normal, har rynkor.'
				]
			}
		},
		submit: {
			se: 'Visa resultat'
		},
		questionOrder: [
			['iris', 0], ['almond', 0], ['wildRose', 0], ['almond', 1], ['pomegranate', 0], ['iris', 1], ['wildRose', 1], ['almond', 2], ['wildRose', 2], 
			['pomegranate', 1], ['almond', 3], ['iris', 2], ['pomegranate', 2], ['almond', 4], ['pomegranate', 3]
		],
		checkedAlternatives: new Hash({'iris': 0, 'almond': 0, 'wildRose': 0, 'pomegranate': 0}),
		numberOfCheckedBoxes: 0
	},
	
	result: {
		header: {
			se: 'Resultat av hudanalys'
		},
		severalSeries: {
			se: 'Din hudanalys resulterade i fler än en passande ansiktsserie. Börja med att behandla det primära behovet först'
		},
		severalSeriesWithAlmond: {
			se: 'Din hudanalys resulterade i fler än en passande ansiktsserie. Är din hud känslig eller tillfällig obalans rekommenderas att du behandlar detta först innan du övergår till en mer aktiv serie.'
		},
		series: {
			almond: {
				image: 'almond.jpg',
				text: {
					se: {
						header: 'ALMOND Facial Care',
						description: 'Du behöver extra milda produkter som lugnar tillfällig irritation, rodnad och/eller tillfällig obalans. Hjälper huden att återfå sin rätta balans och bygga upp och stärka det egna försvaret. Oavsett ålder.'
					}
				}
			},
			iris: {
				image: 'iris.jpg',
				text: {
					se: {
						header: 'IRIS Facial Care',
						description: 'Du behöver produkter som ger mycket fukt och som hjälper huden att bevara en jämn balans mellan fukt och fett. Du har inga synliga ålderstecken.'
					}
				}
			},
			wildRose: {
				image: 'wildRose.jpg',
				text: {
					se: {
						header: 'WILD ROSE Facial Care',
						description: 'Du behöver produkter som är rika på både fukt och näring, som ger huden vitalitet och energi att bättre kunna stå emot ett för tidigt åldrande och minska fina linjer och torrhet.'
					}
				}
			},
			pomegranate: {
				image: 'pomegranate.jpg',
				text: {
					se: {
						header: 'POMEGRANATE Facial Care',
						description: 'Du behöver produkter som är rika på både fukt och näring och som kan stimulera huden och minska synliga ålderstecken. Som förbättrar hudens fasthet och elasticitet och hjälper till att skydda huden.'
					}
				}
			}
		},
		products: {
			cleansing: {
				intro: {
					image: 'cleansing.jpg',
					se: {
						header: 'RENGÖRING', 
						text: 'Används för att avlägsna orenheter och makeup från huden. Rengör milt utan att torka ut. Följs upp med ett pH-balanserande ansiktsvatten.'
					}
				},

				almond: [
					{
						se: {
							header: 'Almond Soothing Cleansing Lotion',
							text: 'Extra mild och lugnande rengöringslotion för känslig hy. Innehåller pH-balanserande ingredienser och behöver därför inte följas upp av ett ansiktsvatten. Doftfri. Användning: Massera in över ansikte, hals och dekolletage morgon och kväll. Skölj av med vatten.'
						}
					}
				],
				others: [
					{
						se: {
							header: 'Gentle Cleansing Milk',
							text: 'Mild rengöringsmjölk för normal/torr hy. Användning: Massera in över ansikte, hals och dekolletage morgon och kväll. Skölj av med vatten.'
						}
					},
					{
						se: {
							header: 'Refining Toner',
							text: 'Uppfriskande och balanserande ansiktsvatten för alla hudtyper. Användning: Applicera efter rengöring ett par droppar på en bomullsrondell och badda över ansikte och hals. Skölj ej av.'
						}
					},
					{
						se: {
							header: 'One-Step Cleanser & Toner',
							text: 'Kombinerad rengöring och ansiktsvatten i ett, för normal/blandhy. Användning: Skaka flaskan. Applicera på en lätt fuktad bomullsrondell och rengör med cirkelrörelser över ansikte och hals. Upprepa tills bomullsrondellen ser ren ut. Skölj av.'
						}
					}
				]

			}, 
			creme: {
				intro: {
					image: 'creme.jpg',
					se: {
						header: 'ANSIKTSCREMER', 
						text: 'Används på dagen för att bevara huden mjuk och smidig och för att skydda mot fuktförlust och ett för tidigt åldrande. Används på natten för att stärka och återuppbygga huden när den har sin naturliga återhämtning- och reparationsfas.'
					}
				},
				almond: [
					{
						se: {
							header: 'Almond Soothing Facial Lotion',
							text: 'Lätt, lugnande fuktcreme. Är ett lättare alternativ till Almond Soothing Day Cream. Doftfri. Användning: Applicera över ansikte, hals och dekolletage varje morgon/kväll efter rengöring.'
						}
					},
					{
						se: {
							header: 'Almond Soothing Day Cream',
							text: 'Rik, lugnande ansiktscreme. Är ett rikare alternativ till Almond Soothing Facial Lotion. Användning: Applicera över ansikte, hals och dekolletage varje morgon/kväll efter rengöring.'
						}
					}
				],
				iris: [
					{
						se: {
							header: 'Iris Hydrating Facial Lotion',
							text: 'Lätt, fuktgivande och balanserande fuktcreme. Är ett lättare alternativ till Iris Hydrating Day Cream. Användning: Applicera över ansikte, hals och dekolletage varje morgon/kväll efter rengöring.'
						}
					},
					{
						se: {
							header: 'Iris Hydrating Day Cream',
							text: 'Rik, fuktgivande och balanserande dagcreme. Är ett rikare alternativ till Iris Hydrating Facial Lotion. Användning: Applicera över ansikte, hals och dekolletage varje morgon efter rengöring.'
						}
					},
					{
						se: {
							header: 'Iris Hydrating Night Cream',
							text: 'Fuktgivande och balanserande nattcreme. Användning: Applicera över ansikte, hals och dekolletage varje kväll efter rengöring.'
						}
					}
				],
				wildRose: [
					{
						se: {
							header: 'Wild Rose Smoothing Facial Lotion',
							text: 'Lätt, utjämnande fuktcreme. Är ett lättare alternativ till Wild Rose Smoothing Day Cream. Användning: Applicera över ansikte, hals och dekolletage varje morgon/kväll efter rengöring.'
						}
					},
					{
						se: {
							header: 'Wild Rose Smoothing Night Cream',
							text: 'Utjämnande nattcreme. Användning: Applicera över ansikte, hals och dekolletage varje kväll efter rengöring.'
						}
					},
					{
						se: {
							header: 'Wild Rose Smoothing Day Cream',
							text: 'Rik, utjämnande dagcreme. Är ett rikare alternativ till Wild Rose Smoothing Facial Lotion. Användning: Applicera över ansikte, hals och dekolletage varje morgon efter rengöring.'
						}
					}
				],
				pomegranate: [
					{
						se: {
							header: 'Pomegranate Firming Night Cream',
							text: 'Rik, uppstramande nattcreme. Användning: Applicera över ansikte, hals och dekolletage varje kväll efter rengöring och efter Pomegranate Firming Face Serum.'
						}
					},
					{
						se: {
							header: 'Pomegranate Firming Day Cream',
							text: 'Rik, uppstramande dagcreme. Användning: Applicera över ansikte, hals och dekolletage varje morgon efter rengöring och efter Pomegranate Firming Face Serum.'
						}
					}
				]
			},
			intense: {
				intro: {
					image: 'intense.jpg',
					se: {
						header: 'INTENSIV ANSIKTSVÅRD', 
						text: 'Används för att intensivt ge huden extra fukt, näring och vitalitet. En förstärkning av den dagliga ansiktsvården.'
					}
				},
				almond: [
					{
						se: {
							header: 'Almond Soothing Masque',
							text: 'Lugnande ansiktsmask. Användning: Applicera 1-2 ggr/vecka generöst över ansikte, hals och dekolletage efter rengöring. Undvik ögon- och läppområdet. Låt verka 15-20 minuter och klappa därefter in resterande eller skölj av.'
						}
					},
					{
						se: {
							header: 'Almond Soothing Facial Oil',
							text: 'Lugnande ansiktsolja. Användning: Massera in över lätt fuktat ansikte, hals och dekolletage på morgonen/kvällen efter rengöring. Kan användas som en kur eller istället för dag-/nattcreme. Kan också användas för att avlägsna ögonmakeup.'
						}
					}
				],
				iris: [
					{
						se: {
							header: 'Iris Hydrating Masque',
							text: 'Fuktgivande och balanserande ansiktsmask. Användning: Applicera 1-2 ggr/vecka generöst över ansikte, hals och dekolletage efter rengöring. Undvik ögon- och läppområdet. Låt verka 15-20 minuter och skölj sedan av.'
						}
					}
				],
				wildRose: [
					{
						se: {
							header: 'Wild Rose Smoothing Masque',
							text: 'Utjämnande ansiktsmask. Användning: Applicera 1-2 ggr/vecka generöst över ansikte, hals och dekolletage efter rengöring. Undvik ögon- och läppområdet. Låt verka 15-20 minuter och klappa därefter in resterande eller skölj av.'
						}
					},
					{
						se: {
							header: 'Wild Rose Smoothing Eye Cream',
							text: 'Utjämnande ögoncreme. Användning: Applicera morgon och kväll efter rengöring en pärlstor mängd på ringfingret och klappa därefter försiktigt in runt ögonen.'
						}
					},
					{
						se: {
							header: 'Wild Rose Smoothing Facial Oil Capsules',
							text: 'Utjämnande ansiktsolja. Användning: Massera in oljan från 1 kapsel över lätt fuktat ansikte, hals och dekolletage på kvällen efter rengöring. Kan användas som intensivbehandling och då 1 kapsel/kväll i 4 veckor alt. 1 kapsel 1-2 ggr i veckan istället för nattcreme.'
						}
					}
				],
				pomegranate: [
					{
						se: {
							header: 'Pomegranate Firming Eye Cream',
							text: 'Uppstramande ögoncreme. Användning: Applicera morgon och kväll efter rengöring en pärlstor mängd på ringfingret och klappa därefter försiktigt in runt ögonen.'
						}
					},
					{
						se: {
							header: 'Pomegranate Firming Face Serum',
							text: 'Uppstramande serum. Användning: Massera in över ansikte, hals och dekolletage varje morgon/kväll efter rengöring och före dag/nattcreme.'
						}
					}
				]
			}
		},
		backToSurvey: {
			se: 'Gör om testet'
		}
	},
	
	initialize: function(options) {
		this.setOptions(options);
		this.loadImages();
		this.start();
	},
	
	start: function() {
		if (this.options.displayType == 'inline') {
			// the survey should be generated on the page
			this.getSurvey().inject('tx-welfacecard-pi1-content');
		} else {
			// the survey should be generated as an overlay to the page triggered by an event
			this.mask = new Mask();
			this.options.triggers.addEvent('click', function(e) {
				e.stop();
				this.openAsOverlay();
			}.bindWithEvent(this));
		}
	},

	
	loadImages: function() {
		this.result.series.almond.image = new Asset.image(this.options.imagePath + this.result.series.almond.image);
		this.result.series.iris.image = new Asset.image(this.options.imagePath + this.result.series.iris.image);
		this.result.series.wildRose.image = new Asset.image(this.options.imagePath + this.result.series.wildRose.image);
		this.result.series.pomegranate.image = new Asset.image(this.options.imagePath + this.result.series.pomegranate.image);
		this.result.products.cleansing.intro.image = new Asset.image(this.options.imagePath + this.result.products.cleansing.intro.image);
		this.result.products.creme.intro.image = new Asset.image(this.options.imagePath + this.result.products.creme.intro.image);
		this.result.products.intense.intro.image = new Asset.image(this.options.imagePath + this.result.products.intense.intro.image);
	},
	
	openAsOverlay: function() {
		this.mask.show();
		// create overlay
		this.overlay = new Element('div', {
			id: 'facecard-overlay',
			styles: {
				height: '400px',
				width: 800,
				top: '100px',
				left: (window.getScrollSize().x - 800) / 2,
				position: 'absolute',
				'z-index': 1500,
				overflow: 'auto',
				background: '#fff',
				border: '1px solid #fff',
				padding: 10,
				'-moz-border-radius': '10px 0px 0px 10px',
				'-webkit-border-bottom-left-radius': '10px 10px',
				'-webkit-border-top-left-radius': '10px 10px'
			}
		}).inject(document.body);
		new Element('div', {
			id: 'facecard-close',
			events: {
				click: function(e) {
					this.closeOverlay();
				}.bindWithEvent(this)
			}
		}).inject(this.overlay);
		this.getSurvey().inject(this.overlay).reveal();
	},
	
	closeOverlay: function() {
		this.overlay.nix();
		(function() {
			this.mask.hide();
		}.delay(500, this))
	},
	
	getSurvey: function() {
		// reset vars
		this.survey.numberOfCheckedBoxes = 0;
		this.survey.checkedAlternatives = new Hash({'iris': 0, 'almond': 0, 'wildRose': 0, 'pomegranate': 0});
		this.survey.container = new Element('div', {id: 'facecard-survey', 'class': 'hidden'}).set('slide');
		new Element('h1', {html: this.survey.intro.header[WEL.language]}).inject(this.survey.container);
		new Element('h2', {html: this.survey.intro.question[WEL.language], 'id': 'facecard-question'}).inject(this.survey.container);
		var row, checkbox;
		this.survey.questionOrder.each(function(item) {
			row = new Element('div', {
				'class': item[0] + ' facecard-question-row clearfix',
				events: {
					click: function(e) { 
						if (e.target.hasClass('checkbox')) { 
							this.clickOption(e.target);
						} else if (e.target.hasClass('facecard-question-row')) {
							this.clickOption(e.target.getFirst());
						} else if (e.target.hasClass('facecard-statement')) { 
							this.clickOption(e.target.getParent().getFirst());
						}
					}.bindWithEvent(this)
				}
			}).set('morph', {duration: 500});
			
			checkbox = new Element('div', {
				'class': 'checkbox', 
				id: item[0] + '-' + item[1]
			}).inject(row).set('morph', {duration: 500}).store('section', item[0]);
			
			if (Cookie.read('facecard-' + checkbox.get('id'))) {
				checkbox.morph('#facecard-survey .' + item[0] + ' .checked');
				//tr.morph('#facecard-survey .focused');
				checkbox.store('checked', '1');
				this.survey.checkedAlternatives[item[0]]++;
				this.survey.numberOfCheckedBoxes++;
			}
			
			new Element('p', {html: this.survey[item[0]].statements[WEL.language][item[1]], 'class': 'facecard-statement'}).inject(row);
			row.inject(this.survey.container);
			
		}.bind(this));
		
		// move to result display?
		if (Cookie.read('facecard-stage') == 'result') {
			return this.getResult();
		}
		
		// submit button
		var submit = new Element('div', {
			id: 'facecard-submit', 
			html: this.survey.submit[WEL.language],
			'class': 'facecard-button',
			events: {
				click: function(e) {
					Cookie.write('facecard-stage', 'result');
					this.getResult();
				}.bindWithEvent(this)
			}
		}).inject(this.survey.container);
		
		if (this.survey.numberOfCheckedBoxes) {
			submit.reveal();
		} else {
			submit.dissolve();
		}
		
		// if the result is displayed, we just replace it with the servey, if not, we'll return the servey
		if ($('facecard-result')) {
			this.result.container.fade('out');
			(function() {
				this.survey.container.replaces($('facecard-result')).fade('hide').fade('in');
			}.delay(500, this))
		} else {	
			return this.survey.container;
		}
	},
	
	clickOption: function(checkbox) {
		var section = checkbox.retrieve('section');
		if (checkbox.retrieve('checked')) {
			checkbox.morph('#facecard-survey .' + section + ' .unchecked'); //var test = '#facecard-survey .' + section + ' .unchecked'; debugger;
			//checkbox.getParent().getParent().morph('#facecard-survey .unfocused');
			checkbox.store('checked', 0);
			Cookie.dispose('facecard-' + checkbox.get('id'));
			this.survey.checkedAlternatives[section]--;
			this.survey.numberOfCheckedBoxes--;
		} else {
			checkbox.morph('#facecard-survey .' + section + ' .checked');
			//checkbox.getParent().getParent().morph('#facecard-survey .focused');
			checkbox.store('checked', 1);
			Cookie.write('facecard-' + checkbox.get('id'), '1');
			this.survey.checkedAlternatives[section]++;
			this.survey.numberOfCheckedBoxes++;
		}
		if (this.survey.numberOfCheckedBoxes) {
			$('facecard-submit').reveal();
		} else {
			$('facecard-submit').dissolve();
		}
	},
	
	
	getResult: function() {
		var seriesToShow = [];
		var highestNumberOfChecks = 0;
		// create an array with the series with the most checked alternatives
		this.survey.checkedAlternatives.each(function(numberOfChecks, index) {
			if (numberOfChecks > 0) { // this series has checks
				if (numberOfChecks >= highestNumberOfChecks) {
					seriesToShow.push(index); // add it to series to show
					highestNumberOfChecks = numberOfChecks;
					// remove items that has a lower number of checks
					this.survey.checkedAlternatives.each(function(numberOfChecksInner, indexInner) {
						if (numberOfChecksInner && seriesToShow.contains(indexInner) && numberOfChecksInner < highestNumberOfChecks) {
							seriesToShow.erase(indexInner);
						}
					});
				}
			}
		}.bind(this)); //debugger;
		
		var hasAlmond = seriesToShow.contains('almond');
		
		/*****
		* create result display
		*****/
		
		this.result.container = new Element('div', {'id': 'facecard-result'}).set('slide');
		new Element('h1', {html: this.result.header[WEL.language]}).inject(this.result.container);
		// if the user got more than one series as result
		if (seriesToShow.length > 1 && hasAlmond) {
			new Element('p', {id: 'facecard-result-several-series', html: this.result.severalSeriesWithAlmond[WEL.language]}).inject(this.result.container);
		} else if (seriesToShow.length > 1) {
			new Element('p', {id: 'facecard-result-several-series', html: this.result.severalSeries[WEL.language]}).inject(this.result.container);
		}
		
		// display info about series with most checks
		var series = new Element('div', {id: 'facecard-result-series'}).inject(this.result.container);
		var serie;
		seriesToShow.each(function(item) {
			serie = new Element('div', {'class': 'facecard-result-serie clearfix ' + item}).inject(series);
			new Element('div', {'class': 'facecard-product-color'}).inject(serie);
			this.result.series[item].image.inject(serie);
			new Element('h3', {html: this.result.series[item].text[WEL.language].header}).inject(serie);
			new Element('p', {html: this.result.series[item].text[WEL.language].description}).inject(serie);
		}.bind(this));
		
		// display products
		
		// start with cleansing
		var cleansing = new Element('div', {'class': 'facecard-result-section clearfix'}).inject(this.result.container);
		this.result.products.cleansing.intro.image.inject(cleansing);
		new Element('h2', {html: this.result.products.cleansing.intro[WEL.language].header}).inject(cleansing);
		new Element('p', {html: this.result.products.cleansing.intro[WEL.language].text}).inject(cleansing);
		
		// show cleansing products
		var productDiv;
		if (hasAlmond) {
			// result contains almond, show it
			productDiv = new Element('div', {'class': 'facecard-product clearfix almond'}).inject(this.result.container);
			new Element('div', {'class': 'facecard-product-color'}).inject(productDiv);
			new Element('h3', {html: this.result.products.cleansing.almond[0][WEL.language].header}).inject(productDiv);
			new Element('p', {html: this.result.products.cleansing.almond[0][WEL.language].text}).inject(productDiv);
			
		}
		if (!hasAlmond || (hasAlmond && seriesToShow.length > 1)) {
			// show other cleansing products as well
			this.result.products.cleansing.others.each(function(item) {
				productDiv = new Element('div', {'class': 'facecard-product clearfix generic'}).inject(this.result.container);
				new Element('div', {'class': 'facecard-product-color'}).inject(productDiv);
				new Element('h3', {html: item[WEL.language].header}).inject(productDiv);
				new Element('p', {html: item[WEL.language].text}).inject(productDiv);
			}.bind(this));
		}
		
		// show cremes
		var cremes = new Element('div', {'class': 'facecard-result-section clearfix'}).inject(this.result.container);
		this.result.products.creme.intro.image.inject(cremes);
		new Element('h2', {html: this.result.products.creme.intro[WEL.language].header}).inject(cremes);
		new Element('p', {html: this.result.products.creme.intro[WEL.language].text}).inject(cremes);
		seriesToShow.each(function(item) {
			this.result.products.creme[item].each(function(product) {
				productDiv = new Element('div', {'class': 'facecard-product ' + item}).inject(this.result.container);
				new Element('div', {'class': 'facecard-product-color'}).inject(productDiv);
				new Element('h3', {html: product[WEL.language].header}).inject(productDiv);
				new Element('p', {html: product[WEL.language].text}).inject(productDiv);
			}.bind(this));
		}.bind(this));
		
		// show intense
		var intense = new Element('div', {'class': 'facecard-result-section clearfix'}).inject(this.result.container);
		this.result.products.intense.intro.image.inject(intense);
		new Element('h2', {html: this.result.products.intense.intro[WEL.language].header}).inject(intense);
		new Element('p', {html: this.result.products.intense.intro[WEL.language].text}).inject(intense);
		seriesToShow.each(function(item) {
			this.result.products.intense[item].each(function(product) {
				productDiv = new Element('div', {'class': 'facecard-product ' + item}).inject(this.result.container);
				new Element('div', {'class': 'facecard-product-color'}).inject(productDiv);
				new Element('h3', {html: product[WEL.language].header}).inject(productDiv);
				new Element('p', {html: product[WEL.language].text}).inject(productDiv);
			}.bind(this));
		}.bind(this));
		
		
		// button to go back to survey
		new Element('div', {
			html: this.result.backToSurvey[WEL.language], 
			id: 'facecard-result-back-to-survey',
			'class': 'facecard-button',
			events: {
				click: function(e) {
					Cookie.write('facecard-stage', 'survey');
					this.getSurvey();
				}.bindWithEvent(this)
			}
		}).inject(this.result.container);
		
		if ($('facecard-survey')) {
			this.survey.container.fade('out');
			(function() {
				$('tx-welfacecard-pi1-content').spin();
				(function() {
					$('tx-welfacecard-pi1-content').unspin();
				}.delay(2000))
			}.delay(500));
			(function() {
				this.result.container.replaces($('facecard-survey')).fade('hide').fade('in');
			}.delay(2500, this))
			
		} else {
			return this.result.container;
		}
		
	}
});