var cur_elm = null;			//	Element der er vist - et af de 8 store billeder
var nxt_elm = null;			//	Element der skal vises - et andet af de 8 store billeder
var fade_timer = 0;			// 	Timer der styrer fade ind og ud.
var fem = null;
var tilb = null;
var cur_nr = 0;
var hover = '';

SetEvent( window, 'load', InitSide);	// Når siden er hentet, kør funktionen InitArkiv

function InitSide() {		// funktion der initialiserer scriptet og HTML elementer på siden
	frem = document.getElementById( 'fremad');
	tilb = document.getElementById( 'tilbage');
	var def_img = document.getElementById( 'img_0');	// Find det element der indholder det første billede
	if (def_img) { 
		nxt_elm = def_img;	//	Sæt variable, så det er muligt at
		opc = 100;
		Fade();					// fade det første billed ind på siden - og gør det!
		}
	if (frem) { 
		SetEvent( frem, 'mouseover', Hover); 
		SetEvent( frem, 'mousemove', Hover); 
		SetEvent( frem, 'mouseout', UnHover); 
		}
	if (tilb) { 
		SetEvent( tilb, 'mouseover', Hover); 
		SetEvent( tilb, 'mousemove', Hover); 
		SetEvent( tilb, 'mouseout', UnHover); 
		}
	}

function SetEvent(elm, evt, fnc) {	//	funktion der sætter eventhandler for evt på elm til fnc
	if (elm) {						//	- bruges flittigt af InitArkiv
		if (elm.addEventListener) {	//	For de rigtige browsere
			elm.addEventListener(evt, fnc, false);
			}
		else if (elm.attachEvent) {	//	For IE
			elm.attachEvent('on'+evt, fnc);
			}
		}
	}
function RemEvent(elm, evt, fnc) {	//	funktion der sætter eventhandler for evt på elm til fnc
	if (elm) {						//	- bruges flittigt af InitArkiv
		if (elm.removeEventListener) {	//	For de rigtige browsere
			elm.removeEventListener(evt, fnc, false);
			}
		else if (elm.detachEvent) {	//	For IE
			elm.detachEvent('on'+evt, fnc);
			}
		}
	}

function Hover(evt) {
	var elm = (window.event) ? window.event.srcElement : evt.originalTarget;	// finder element der interageres med
	if (elm == frem) {
		hover = 'frem';
		if (elm.src.indexOf('dot_f_act.gif') > -1) {
			elm.setAttribute('src', 'http://www.olgajakobsen.dk/billeder/forside/dot_f_hover.gif');
			}
		}
	if (elm == tilb) {
		hover = 'tilb';
		if (elm.src.indexOf('dot_t_act.gif') > -1) {
			elm.setAttribute('src', 'http://www.olgajakobsen.dk/billeder/forside/dot_t_hover.gif');
			}
		}
	}

function UnHover(evt) {
	var elm = (window.event) ? window.event.srcElement : evt.originalTarget;	// finder element der interageres med
	if (elm == frem) {
		hover = '';
		if (elm.src.indexOf('dot_f_hover.gif') > -1) {
			n_im = 'http://www.olgajakobsen.dk/billeder/forside/dot_f_'+((cur_nr < 4) ? 'act.gif' : 'inact.gif');
			elm.setAttribute('src', n_im);
			}
		}
	if (elm == tilb) {
		hover = '';
		if (elm.src.indexOf('dot_t_hover.gif') > -1) {
			n_im = 'http://www.olgajakobsen.dk/billeder/forside/dot_t_'+((cur_nr > 0) ? 'act.gif' : 'inact.gif');
			elm.setAttribute('src', n_im);
			}
		}
	}

function Skift(ev) {
	var elm = (window.event) ? window.event.srcElement : ev.originalTarget;	// finder element der interageres med
	delta = (elm == frem) ? 1 : -1;
	var p_nr = cur_nr;
	cur_nr += delta;
	if (cur_nr < 0) { cur_nr = 0; }
	if (cur_nr > 4) { cur_nr = 4; }
	if ( p_nr != cur_nr) {
		var def_img = document.getElementById( 'img_'+cur_nr);	// Find det element der indholder det næste billede
		if (def_img) { 
			nxt_elm = def_img;	//	Sæt variable, så det er muligt at
			Fade();				// fade det første billed ind på siden - og gør det!
			}
		}
	SetKnapper();
	}

function Fade() {	//	funktion der foretager den egentlige fade mellem to billeder
	var fade_antal = 75;		//	Antal gange, der skftes opacity under fade
	var fade_interval = 25;		// 	intervallet mellem skift af opacity under fade; angives i millisekunder
	var skift_interval = 5000;	// Pause mellem billeder
	opc -= 100/fade_antal;		// 	beregn den nye opacity
	if (opc < 0) { opc = 0; }	//	hvis den er mindre ned 0 sæt den til 0
	SetOpacity(cur_elm, opc);	//	sæt opacity for det viste billede (blænd ned)
	SetOpacity(nxt_elm, 100-opc);	//	sæt opacity for det næste billede (blænd op)
	if (opc > 0) {	//	hvis fade operationen er ikke er færdig
		fade_timer = window.setTimeout( Fade, fade_interval);	//	start næste trin
		}
	else {	//	hvis fade operationen er færdig
		cur_elm = nxt_elm;	//	sæt det viste element til det der lige er blevet vist
		opc = 100;			//	sæt opacity til det den er for det viste element
		nxt_elm = null;		//	der er ikke noget næste billede - vent på næste bruger aktion
		SetKnapper();
		}
	}

function SetOpacity(elm, op) {	//	sæt opacity til op for elm
	if ( elm) {
		if ( elm.filters) {	// hvis browseren er IE
			elm.style.filter = 'alpha(opacity = '+op+')';
			}
		else {	// hvis det er en rigtig browser
			elm.style.opacity = op/100;
			}
		}
	}

function SetKnapper() {
	if ( opc == 100) {
		switch (cur_nr) {
			case 0:
				SetKnap(frem, true);
				SetKnap(tilb, false);
				break;
			case 4:
				SetKnap(frem, false);
				SetKnap(tilb, true);
				break;
			default :
				SetKnap(frem, true);
				SetKnap(tilb, true);
			}
		}
	else {
		SetKnap(frem, false);
		SetKnap(tilb, false);
		}
	}

function SetKnap( elm, ena) {
	if (elm) {
		var cls = (ena) ? 'act' : 'inact';
		var bt = elm.id[0];
		if ((cls == 'act') && (((elm == frem) && (hover == 'frem')) || ((elm == tilb) && (hover == 'tilb')))) {
			cls = 'hover';
			}
		elm.setAttribute('src', 'http://www.olgajakobsen.dk/billeder/forside/dot_'+bt+'_'+cls+'.gif');
		if (ena) {
			SetEvent( elm, 'click', Skift);
			}
		else {
			RemEvent(elm, 'click', Skift);
			}
		}
	}
