var $E = YAHOO.util.Event,
	$D = YAHOO.util.Dom;

var FlipStore = (function () {
	var flip, // Illustrasjon av flip ultra i valgt farge
		bestill, // Bestillingsknapp
		aktivFarge, // Aktivt fargevalg
		aktivSeksjon; // Aktiv seksjon blant spesifikasjoner
	
	/**
	 * Går gjennom alle mulige fargevalg i fargevelgeren og ser om noen farge er definert som
	 * valgt. Setter i så fall denne som aktiv farge. Knytter til slutt opp en lytter for klikk
	 * på fargevelgeren for å behandle nye valg.
	 * @private
	 * @static
	 */
	function initFarger () {
		$D.getElementsByClassName('valgt', 'a', $D.get('fargevelger'), function (valg) {
			if (aktivFarge == undefined) {
				aktivFarge = valg.parentNode;
			}
			else $D.removeClass(valg, 'valgt');
		});
		
		$E.on('fargevelger', 'click', byttFarge);
	}
	
	function initSpesifikasjoner () {
		var spesifikasjoner = $D.get('spesifikasjoner');
		var seksjoner = [];
		
		// Finn alle seksjoner med deres undertitler
		$D.batch(spesifikasjoner.getElementsByTagName('tbody'), function (tbody) {
			// Skjul alle andre seksjoner enn den første
			if (seksjoner.length != 0) {
				$D.setStyle(tbody, 'display', 'none');
			}

			// Finn undertitler i seksjonen
			var undertitler = $D.getElementsBy(function (th) {
				return (th.getAttribute('scope') == 'col')
			}, 'th', tbody);
			
			// Bygg opp tittel med alle undertitler og legg til seksjon
			var tittel = '';
			if (undertitler.length == 1) {
				tittel = undertitler[0].firstChild.nodeValue;
				tbody.removeChild(undertitler[0].parentNode);
			}
			else {
				for (var i = 0; i < undertitler.length; i++) {
					if (tittel == '') { // Første
						tittel = undertitler[i].firstChild.nodeValue;
					}
					else if (i < (undertitler.length - 1)) { // Mellom første og siste
						tittel += ', ' + undertitler[i].firstChild.nodeValue.toLowerCase();
					}
					else { // Siste
						tittel += ' & ' + undertitler[i].firstChild.nodeValue.toLowerCase();
					}
					
					tbody.removeChild(undertitler[i].parentNode);
				}
			}
			
			// Legg til definisjon av seksjon
			seksjoner.push({'id': tbody.getAttribute('id'), 'tittel': tittel});
		});
				
		// Bygg opp navigasjon
		var liste = document.createElement('ul');
			liste.setAttribute('id', 'infovelger');
		
		for (var i = 0; i < seksjoner.length; i++) {
			var valg = document.createElement('li');
				valg.appendChild(document.createTextNode(seksjoner[i].tittel));
			
			if (i == 0) {
				aktivSeksjon = valg;
				$D.addClass(valg, 'valgt');
			}
			
			$E.on(valg, 'click', byttSeksjon, seksjoner[i]);
			liste.appendChild(valg);
		}
		
		$D.insertBefore(liste, spesifikasjoner);
	}

	/**
	 * Håndterer et klikk på fargevelgeren og sørger for å endre valgt farge om klikket var
	 * på en annen farge enn den som for øyeblikket er valgt. Oppdatering av valgt farge fører
	 * også til at bestillingsknapp og illustrasjonsbilde blir oppdatert til å gjenspeile fargevalget.
	 * @private
	 * @static
	 * @param Event e	Beskrivelse av klikket, bl.a. hva som ble klikket på.
	 */
	function byttFarge (e) {
		$E.stopEvent(e);

		// Unngå videre prosessering om det som ble klikket på ikke var en farge, eller var den aktive
		var knapp = $E.getTarget(e);
		if (knapp.nodeName.toLowerCase() != 'a' || knapp.parentNode == aktivFarge) return;
		
		// Deaktiver aktivt fargevalg
		$D.removeClass(aktivFarge.firstChild, 'valgt');
		$D.removeClass(bestill, aktivFarge.className);
		
		// Sett nytt fargevalg som aktivt
		aktivFarge = knapp.parentNode;
		
		// Aktiver det nye fargevalget, oppdater bestillingsknapp og illustrasjon
		$D.addClass(aktivFarge.firstChild, 'valgt');
		oppdaterBestillingsknapp();
		oppdaterIllustrasjon();
	}

	function byttSeksjon (e, seksjon) {
		$E.stopEvent(e);
				
		var valg = $E.getTarget(e);
		
		$D.removeClass(aktivSeksjon, 'valgt');
		$D.addClass(valg, 'valgt');
		
		$D.batch($D.get('spesifikasjoner').getElementsByTagName('tbody'), function (tbody) {
			var id = tbody.getAttribute('id');
			$D.setStyle(tbody, 'display', (id == seksjon.id ? 'block' : 'none'));
		});
		
		aktivSeksjon = valg;
	}
	
	/**
	 * Oppdaterer CSS-klasse for bestillingsknappen ut i fra aktiv farge, og oppdaterer
	 * adressen knappen peker til med riktig farge i GET-parameter.
	 */
	function oppdaterBestillingsknapp () {
		var farge = aktivFarge.className;
		
		$D.addClass(bestill, farge);

		var url = bestill.getAttribute('href');
		bestill.href = url.replace(/\?farge=.+$/, '?farge=' + farge);
	}
	
	/**
	 * Oppdaterer illustrasjonen av flip ultra til å gjenspeile farge som er valgt for øyeblikket.
	 */
	function oppdaterIllustrasjon () {
		flip.setAttribute('src', 'img/flip_II_'+aktivFarge.className+'.jpg');
	}
	
	return {
		init: function () {
			var intro = $D.get('intro');
			
			if (intro) { // Forsiden
				// Erstatt introtekst med et bilde med perfekt typografi
				$D.get('intro').innerHTML = '<img src="img/intro.png" alt="" />';

				// Lagre referanse til illustrasjon og bestillingsknapp
				flip = $D.get('flip');
				bestill = $D.get('bestill');

				// Sett opp farger.
				initFarger();
				// Sett opp navigasjon for spesifikasjoner
				initSpesifikasjoner();
			}
		}
	};
})();

$E.onDOMReady(FlipStore.init);