//https://stackoverflow.com/questions/40764596/using-react-router-with-cdn-and-without-webpack-or-browserify
// jeg må bruke https://babeljs.io/repl på script, stage-0, classic, legacy, minimal, v7.5.5 for at transformeringen skal virke
const Router = window.ReactRouterDOM.BrowserRouter;
const Link =  window.ReactRouterDOM.Link;
const NavLink =  window.ReactRouterDOM.NavLink;
//const Prompt =  window.ReactRouterDOM.Prompt;
const Switch = window.ReactRouterDOM.Switch;
const Route =  window.ReactRouterDOM.Route;
//const Redirect = window.ReactRouterDOM.Redirect;
const BrowserRouter = window.ReactRouterDOM.BrowserRouter;



class Hoved extends React.Component {
	constructor(props) {
		super(props);
		
		
		this.state = {
			prosjekter:[],
			images:[],
			descriptions:[],
			awards:[],
			contact:[],
			publications:[],
			menuopen:false
		}
		this.toggleMenyHvisIkkeVid = this.toggleMenyHvisIkkeVid.bind(this);
		this.toggleMeny = this.toggleMeny.bind(this);
		this.lukkMeny = this.lukkMeny.bind(this);
	}
	
	componentDidMount() {
		window.gapi.load("client", this.initClient);
		/*
		fetch("/data/projects.tsv")
		.then( response => {return response.text() })
		.then( data => {
			this.setState({
				prosjekter: dataTilArray(data)
			});
		});
		
		
		
		fetch("/data/awards.tsv")
		.then( response => {return response.text() })
		.then( data => {
			this.setState({
				awards: dataTilArray(data)
			});
		});
		*/
	}
	
	
	
	
	lastProjects() {
		window.gapi.client.load("sheets", "v4", () => {
			window.gapi.client.sheets.spreadsheets.values
			.get({
				spreadsheetId: "1lUrLXIh37zHRKQLWdhEt3pr9WtMCHsFIEEBddxfc4O0",
				range: "projects!A:H",
			})
			.then(
				response => {
					const data = response.result.values;
					this.setState({ 
						prosjekter: data
					});
				}
			);
		});
	}
	
	

	

	
	lastImages() {
		window.gapi.client.load("sheets", "v4", () => {
			window.gapi.client.sheets.spreadsheets.values
			.get({
				spreadsheetId: "1lUrLXIh37zHRKQLWdhEt3pr9WtMCHsFIEEBddxfc4O0",
				range: "images!A:F",
			})
			.then(
				response => {
					const data = response.result.values;
					this.setState({ 
						images: data
					});
				}
			);
		});
	}
	
	lastDescriptions() {
		window.gapi.client.load("sheets", "v4", () => {
			window.gapi.client.sheets.spreadsheets.values
			.get({
				spreadsheetId: "1lUrLXIh37zHRKQLWdhEt3pr9WtMCHsFIEEBddxfc4O0",
				range: "descriptions!A:D",
			})
			.then(
				response => {
					const data = response.result.values;
					this.setState({ 
						descriptions: data
					});
				}	
			);
		});
	}

	
	lastAwards() {
		window.gapi.client.load("sheets", "v4", () => {
			window.gapi.client.sheets.spreadsheets.values
			.get({
				spreadsheetId: "1lUrLXIh37zHRKQLWdhEt3pr9WtMCHsFIEEBddxfc4O0",
				range: "awards!A:C",
			})
			.then(
				response => {
					const data = response.result.values;
					this.setState({ 
						awards: data
					});
				}
			);
		});
	}
	
	lastPublications() {
		window.gapi.client.load("sheets", "v4", () => {
			window.gapi.client.sheets.spreadsheets.values
			.get({
				spreadsheetId: "1lUrLXIh37zHRKQLWdhEt3pr9WtMCHsFIEEBddxfc4O0",
				range: "publications!A:F",
			})
			.then(
				response => {
					const data = response.result.values;
					this.setState({ 
						publications: data
					});
				}
			);
		});
	}
	
	lastContact() {
		window.gapi.client.load("sheets", "v4", () => {
			window.gapi.client.sheets.spreadsheets.values
			.get({
				spreadsheetId: "1lUrLXIh37zHRKQLWdhEt3pr9WtMCHsFIEEBddxfc4O0",
				range: "contact!A:E",
			})
			.then(
				response => {
					const data = response.result.values;
					this.setState({ 
						contact: data
					});
				}
			);
		});
	}
	
	initClient = () => {
		// 2. Initialize the JavaScript client library.
		window.gapi.client
    .init({
      apiKey: "AIzaSyBkik3aO3MngLMz-S60lcwrt8Ds4KqhYgU",
      // Your API key will be automatically added to the Discovery Document URLs.
      discoveryDocs: ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
    })
    .then(() => {
    	// 3. Initialize and make the API request.
    this.lastProjects();
		this.lastImages();
		this.lastDescriptions();
		this.lastAwards();
		this.lastPublications();
		this.lastContact();
  	});
	};


	
	render() {
		let innhold = "";
		let prosjekter = this.state.prosjekter;
		let awards = this.state.awards;
		let publications = this.state.publications;
		let images = this.state.images;
		let descriptions = this.state.descriptions;
		let contact = this.state.contact;
		let utvalgBuilt = [];
		let utvalgUnbuilt = [];
		let utvalgCompetition = [];
		let utvalgAll = [];
		if (prosjekter.length) {
			for(let i=1; i<prosjekter.length; i++){
				if (prosjekter[i][2] == "built") {
					utvalgBuilt.push(prosjekter[i]);
				}
				if (prosjekter[i][2] == "unbuilt") {
					utvalgUnbuilt.push(prosjekter[i]);
				}
				if (prosjekter[i][2] == "competitions") {
					utvalgCompetition.push(prosjekter[i]);
				}
				utvalgAll.push(prosjekter[i]);
			}
		}
	
		
		
		return (	
				<div className="ramme" onKeyDown={this.handleKeyDown}>
					<Router>
						<div className="kolonnevenstre">
							<div className="toppmeny">
								{images.length ? <nav>
									<button className="menyknapp ikkestorst" onClick={this.toggleMeny} title="meny">
										<span className="innerKnapp" tabIndex="-1">
											{this.state.menuopen ? <span style={{position:"relative", top:"1px"}}>{lagIkon("lukk","#000")}</span> : <span style={{position:"relative", top:"0px"}}>{lagIkon("linjer","#000")}</span>}
										</span>
									</button>
									<div className="text-logo">
										<Link to="/" onClick={this.lukkMeny}><span className="navn">HØLMEBAKK</span><br /><span className="underskrift">ØYMO</span></Link>
									</div>
								
									<a className="insta barestorst" title="instagram" href="https://www.instagram.com/carlviggoholmebakk/"><img alt="instagram-ikon" src="/code/insta.png" /></a>
									<button className="menyknapp barestorst" onClick={this.toggleMeny} title="meny">
										<span className="innerKnapp" tabIndex="-1">
											{this.state.menuopen ? <span style={{position:"relative", top:"1px"}}>{lagIkon("lukk","#000")}</span> : <span style={{position:"relative", top:"0px"}}>{lagIkon("linjer","#000")}</span>}
										</span>
									</button>
									
									{this.state.menuopen && <div>
										<a className="insta ikkestorst" title="instagram" href="https://www.instagram.com/carlviggoholmebakk/"><img alt="instagram-ikon" src="/code/insta.png" /></a>
										<ul key="projects">
											<h1>Projects</h1>
											<li><NavLink to="/projects/built" onClick={this.toggleMenyHvisIkkeVid}>built</NavLink></li>
											<li><NavLink to="/projects/unbuilt" onClick={this.toggleMenyHvisIkkeVid}>unbuilt</NavLink></li>
											<li><NavLink to="/projects/competitions" onClick={this.toggleMenyHvisIkkeVid}>competitions</NavLink></li>
										</ul>
										<ul key="studio">
											<h1>Studio</h1>
											<li><NavLink to="/studio/about" onClick={this.toggleMenyHvisIkkeVid}>about</NavLink></li>
											<li><NavLink to="/studio/contact" onClick={this.toggleMenyHvisIkkeVid}>contact</NavLink></li>
											<li><NavLink to="/studio/awards" onClick={this.toggleMenyHvisIkkeVid}>awards</NavLink></li>
											<li><NavLink to="/studio/publications" onClick={this.toggleMenyHvisIkkeVid}>publications</NavLink></li>
											<li><NavLink to="/studio/exhibitions" onClick={this.toggleMenyHvisIkkeVid}>exhibitions and media</NavLink></li>
										</ul>
									</div>}
									
								</nav> : null}
							</div>
						
						</div>
					

						
						<div className="hovedomrade">
									
								<Switch>
									<Route exact path="/">{images.length && descriptions.length && <Forside bilder={images} descriptions={descriptions} />}</Route>
									
									<Route exact path="/projects">
										{prosjekter.length && images.length && <Prosjekterside prosjektliste={utvalgAll} bilder={images} filter="All projects" />}
									</Route>
									<Route path="/projects/built">
										{prosjekter.length && images.length && <Prosjekterside prosjektliste={utvalgBuilt} bilder={images} filter="Built" />}
									</Route>
									<Route path="/projects/unbuilt">
										{prosjekter.length && images.length && <Prosjekterside prosjektliste={utvalgUnbuilt} bilder={images} filter="Unbuilt" />}
									</Route>
									<Route path="/projects/competitions">
										{prosjekter.length && images.length && <Prosjekterside prosjektliste={utvalgCompetition} bilder={images} filter="Competitions" />}
									</Route>
									<Route path="/projects/map">{<React.Fragment><div id="map"></div><Prosjektkart prosjektliste={this.state.prosjekter} /></React.Fragment>}</Route>
									
									<Route path="/studio/about">{<Studioside sub="about" descriptions={descriptions} />}</Route>
									<Route path="/studio/contact">{<Studioside sub="contact" descriptions={descriptions} />}</Route>
									<Route path="/studio/awards">{awards.length && <Studioside sub="awards" awards={awards} />}</Route>
									<Route path="/studio/publications">{<Studioside sub="publications" publications={publications} />}</Route>
									<Route path="/studio/exhibitions">{awards.length && <Studioside sub="exhibitions" awards={awards} />}</Route>
									
									{prosjekter.length && images.length && descriptions.length &&
										<Route exact path="/project/:prosjektID/" render={({ match }) => (
											 <Prosjektside key={match.params.prosjektID} bilder={images} descriptions={descriptions} prosjektliste={this.state.prosjekter} menuopen={this.state.menuopen} lukkMeny={this.lukkMeny}  prosjekt={match.params.prosjektID}  utvalg="photos" />
										)}></Route>
									}
									
								</Switch>
						</div>
					</Router>
				</div>
		);
	}
	
	toggleMenyHvisIkkeVid(e) {
		if (window.innerWidth < 1801 || window.innerHeight < 1200) {
			this.setState({
				menuopen: !this.state.menuopen
			});
		}
	}


	toggleMeny(e) {
		this.setState({
      menuopen: !this.state.menuopen
  	});
	}


	lukkMeny(e) {
		this.setState({
      menuopen: false
  	});
	}
}


class Forside extends React.Component {
	constructor(props) {
		super(props);

		let bilder = this.props.bilder;
		let slides = [];
		for (let i = 1; i < bilder.length; i++) {
			if (bilder[i][3]) {
				slides.push(bilder[i][1]);
			}
		}
		//hent ut nyhetsdataene
		let desc = this.props.descriptions;
		let nyheter = [];
		for (let i = 1; i < desc.length; i++) {
			if (desc[i][0] == "news") {
				if (desc[i][1] == "avsnitt" && nyheter["avsnitt2"]) {
					nyheter["avsnitt3"] = <span dangerouslySetInnerHTML={{__html: desc[i][3]}}></span>
				} else if (desc[i][1] == "avsnitt" && nyheter["avsnitt"]) {
					nyheter["avsnitt2"] = <span dangerouslySetInnerHTML={{__html: desc[i][3]}}></span>
				} else if (desc[i][1] == "avsnitt") {
					nyheter[desc[i][1]] = <span dangerouslySetInnerHTML={{__html: desc[i][3]}}></span>
				} else {
					nyheter[desc[i][1]] = desc[i][3];
				}	
			}
		}
		if (Object.keys(nyheter).length) {
			this.state = {
				nyhetsynlig: true,
			}
		} else {
			this.state = {
				nyhetsynlig: false,
			}
		}
		this.slides = slides;
		this.nyheter = nyheter;
	}
	
	componentDidMount() {
		document.title = "Hølmebakk Øymo";
	}
	

	render() {	
		let nyheter = this.nyheter;		
		return (
			<React.Fragment>
				<Slideshow slides={this.slides} />
				{this.state.nyhetsynlig && 
					<React.Fragment>
					<div className="nyhetsboks">
						<button className="lukknyhet" onClick={() => this.setState({nyhetsynlig:false})}>{lagIkon("lukk","#000")}</button>
						<h1>NEWS</h1>
						<img src={"/images_1100px/" + nyheter["bilde"]} />
						<h2>{nyheter["overskrift"]}</h2>
						<p>{nyheter["avsnitt"]}</p>
						{nyheter["avsnitt2"] && <p>{nyheter["avsnitt2"]}</p>}
						{nyheter["avsnitt3"] && <p>{nyheter["avsnitt3"]}</p>}
						<p style={{marginTop:"40px"}}>{nyheter["dato"]}</p>
					</div>
					<div className="nyhetsboks nyhetsboksliten">
						<img src={"/images_1100px/" + nyheter["bilde"]} />
						<button className="lukknyhet" onClick={() => this.setState({nyhetsynlig:false})}>{lagIkon("lukk","#000")}</button>
						<h1>NEWS</h1>
						<h2>{nyheter["overskrift"]}</h2>
						<p>{nyheter["avsnitt"]}</p>
						{nyheter["avsnitt2"] && <p>{nyheter["avsnitt2"]}</p>}
						{nyheter["avsnitt3"] && <p>{nyheter["avsnitt3"]}</p>}
						<p className="hoyrejustert">{nyheter["dato"]}</p>
					</div>
					</React.Fragment>
				}
				</React.Fragment>
		);
	}	
}



class Prosjekterside extends React.Component {
	constructor(props) {
		super(props);
	}
	
	
	componentDidMount() {
		document.title = this.props.filter + " - Hølmebakk Øymo";

	}
	
	componentWillUnmount() {
		document.body.onkeydown = null;
	}
		
	componentDidUpdate() {
		document.title = this.props.filter + " - Hølmebakk Øymo";
	}
	
	render() {
		let ps = this.props.prosjektliste;
		let filter = this.props.filter;
		let bilder = this.props.bilder;
		let bildeindex = [];
		for (let i=1; i<bilder.length; i++) {
			if (bilder[i][4] && bilder[i][4].length) {
				bildeindex[bilder[i][0]] = bilder[i][1];
			}
		}
		let kort = [];
		
		for (let i=0; i<ps.length; i++) {
			kort.push(
				<div key={ps[i][0] + "kolonne1"} className="bilde">
					<Link to={"/project/" + ps[i][0]}><div className="grafelt"><img key={ps[i][0] + "bilde2"} alt={ps[i][1]} src={"/images_1100px/" + bildeindex[ps[i][0]]} /></div></Link>
					<p><Link to={"/project/" + ps[i][0]} className="tittel"><span className="navn">{ps[i][1]}</span></Link><span className="sted">{ps[i][3]} {ps[i][4]}</span></p>
				</div>);
		}
		
		return (	
			<div key="prosjektliste" className="prosjektliste">	
				{kort}
			</div>
		);
	}
	
	

	

}


class Prosjektside extends React.Component {
	constructor(props) {
		super(props);

		let dette = this.props.prosjekt;
		let p = this.props.prosjektliste.find(pro => dette === pro[0]);
		let bilder = this.props.bilder;
		let descriptions = this.props.descriptions;
		let fakta = [];
		let tekst = [];
		
		tekst.push(<h2 key="ph1">{p[1]}<br  key="ph2" /><span  key="ph3" className="normalvektig">{p[3]} {p[4]}</span></h2>);
		for (let i=1; i<descriptions.length; i++) {
			if (descriptions[i][0] == dette) {
				if (descriptions[i][1] == "fakta") {
					fakta.push(<p key={i}>{descriptions[i][3]}</p>);
				}
				if (descriptions[i][1] == "avsnitt") {
					tekst.push(<p key={i}>{descriptions[i][3]}</p>);
				}
			}
		}
		let bildeindex = [];
		bildeindex['photos'] = [];
		bildeindex['drawings'] = [];
		bildeindex['map'] = [];
		for (let i=1; i<bilder.length; i++) {
			if (bilder[i][0] == p[0] && (!bilder[i][5] || !bilder[i][5].length)) {
				bildeindex[bilder[i][2]].push(bilder[i][1]);
			}
		}
		
		let utvalg = this.props.utvalg;
		if (!utvalg.length) utvalg = "photos";
		if (utvalg == "photos" && !bildeindex['photos'].length) {
			utvalg = "drawings";
		}
		
		this.state = {
			utvalg: utvalg,
			nummer: 0,
			forrige: false,
			neste: false,
		}
	
		this.p = p;
		this.bildeindex = bildeindex;
		this.fakta = fakta;
		this.tekst = tekst;
		this.forrigeBilde = this.forrigeBilde.bind(this);
		this.nesteBilde = this.nesteBilde.bind(this);
		this.apenUtvalg = this.apenUtvalg.bind(this);
	}
	
	componentDidMount() {
		document.title = this.p[1] + " - Hølmebakk Øymo";
		this.props.lukkMeny();
		let f = this.forrigeBilde;
		let n = this.nesteBilde;
		document.body.onkeydown = function(e){
			if (event.key == "ArrowLeft") {
				f();
			}
			if (event.key == "ArrowRight") {
				n();
			}
		};
	}
	
		
	
	componentWillUnmount() {
		document.body.onkeydown = null;
	}
	
	

	forrigeBilde = () => {
		if (this.state.nummer > 0) {
			this.setState({
				nummer: this.state.nummer-1
			});
		} else {
			if (this.state.utvalg == "drawings" && this.bildeindex["photos"].length) {
				this.setState({
					utvalg: "photos",
					nummer: this.bildeindex["photos"].length-1
				});
			} else if (this.state.utvalg == "text") {
				this.setState({
					utvalg: "drawings",
					nummer: this.bildeindex["drawings"].length-1
				});
			}
		}
		/*this.setState({ forrige: true });//lager markering/animasjon ved endring
    setTimeout(() => {
      this.setState({ forrige: false });
    }, 100);*/
	}	

	
	nesteBilde = () => {
		if (this.state.nummer != this.bildeindex[this.state.utvalg].length-1) {
			this.setState({
				nummer: this.state.nummer+1
			});
		} else {
			if (this.state.utvalg == "photos") {
				this.setState({
					utvalg: "drawings",
					nummer: 0
				});
			} else if (this.state.utvalg == "drawings") {
				this.setState({
					utvalg: "text",
					nummer: 0
				});
			}
		}
		/*this.setState({ neste: true });//lager markering/animasjon ved endring
    setTimeout(() => {
      this.setState({ neste: false });
    }, 100);*/
	}	

		
	apenUtvalg(u) {
		this.setState({
			utvalg: u,
			nummer: 0
		});
	}
	
	render() {
		let p = this.p;
		let nr = this.state.nummer;
		let utvalg = this.state.utvalg;
		let bildeindex = this.bildeindex;
	
		let visProsjektmeny = true;
		if ((window.innerWidth < 1801 || window.innerHeight < 1200) && window.innerWidth > 1000 && this.props.menuopen) {
			visProsjektmeny = false;
		} 
		
		let fhake = "";
		let nhake = "";
		if (this.state.forrige) {
			fhake = <button key="fhake" className="fhake valgt" onClick={this.forrigeBilde}><span className="innerKnapp" tabIndex="-1">{lagIkon("venstrehake","#111")}</span></button>	
		} else {
			fhake = <button key="fhake" className="fhake" onClick={this.forrigeBilde}><span className="innerKnapp" tabIndex="-1">{lagIkon("venstrehake","#111")}</span></button>	
		}
		if (this.state.neste) {
			nhake = <button key="nhake" className="nhake valgt" onClick={this.nesteBilde}><span className="innerKnapp" tabIndex="-1">{lagIkon("hoyrehake","#111")}</span></button>
		} else {
			nhake = <button key="nhake" className="nhake" onClick={this.nesteBilde}><span className="innerKnapp" tabIndex="-1">{lagIkon("hoyrehake","#111")}</span></button>
		}
		
		return (
			<div key="prosjekt" className="prosjekt">	
					<React.Fragment>
						
						{ utvalg == "photos" || utvalg == "drawings" ? 
						<div className='slideshow' onClick={this.nesteBilde} style={{backgroundImage:"url(/images_1100px/"+bildeindex[utvalg][nr] +")"}}>{ <div className="slideshowplass"></div> }
						</div>	
						: 
							<div className="prosjektbeskrivelse slideshowplass"><div>{this.tekst}</div>{this.fakta}</div>
						}
						{ visProsjektmeny &&	
							<div className="prosjektmeny" >
								
								<div className="haker">
								{fhake} 
								{nhake}
								</div>
								
								{ bildeindex['photos'].length ?
									<button className={utvalg == "photos" ? "aktiv" : null} onClick={() => this.apenUtvalg("photos")}	>
										<span className="innerKnapp" tabIndex="-1">
										photos <span className="teller">{nr+1}/{bildeindex['photos'].length}</span>
										</span>
									</button> : null 
								}
								{ bildeindex['drawings'].length ?
									<button className={utvalg == "drawings" ? "aktiv" : null} onClick={() => this.apenUtvalg("drawings")}>
										<span className="innerKnapp" tabIndex="-1">
										drawings <span className="teller">{nr+1}/{bildeindex['drawings'].length}</span>
										</span>
									</button> : null 
								}
								<button className={utvalg == "text" ? "aktiv" : null} onClick={() => this.apenUtvalg("text")}>
									<span className="innerKnapp" tabIndex="-1">
										text 
									</span>
								</button>
								{ bildeindex['map'].length ?
									<button className={utvalg == "map" ? "aktiv" : null} onClick={() => this.apenUtvalg("map")}>
										<span className="innerKnapp" tabIndex="-1">
											map
										</span>
									</button> : null
								}
								{ !bildeindex['photos'].length && 
									<div>&nbsp;</div>
								}
								{ !bildeindex['drawings'].length && 
									<div>&nbsp;</div>
								}
								{ !bildeindex['map'].length && 
									<div>&nbsp;</div>
								}
								
								

								<div className="prosjektnavn">
									<h1>{p[1]}</h1>
									<p>{p[3]} {p[4]}</p>
								</div>
							</div>
						}	
					</React.Fragment>
				
			</div>
		
		);
  }
	
}

	

class Prosjektkart extends React.Component {
	constructor(props) {
		super(props);
	}
	
	 componentDidMount() {
		document.title = "Project map - Hølmebakk Øymo";
		const s = document.createElement('script');
		s.type = 'text/javascript';
		s.async = true;
		s.defer = true;
		s.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBOqF0qwjBMVVSsriD-cgjywJxYXQfT6sY&callback=initMap";
		this.instance.appendChild(s);
	}
	
	render() {
		return (
				<div ref={e => (this.instance = e)} />
		);
	}	
}

function hentKartsteder() {
	return [
		["Vøringfossen", 60.42657, 7.25146, "/?a=projects&b=voringsfossen"],
		["Krokstien 23", 65.455675, 12.193471, "/?a=projects&b=bronnoysund"],
		["Jektvik Ferry Quay Area",66.62432,13.28641, "/?a=projects&b=jektvik"],
		["Strømbu",61.92163,10.05304, "/?a=projects&b=strombu"],
		["Bjerkebæk Visitors Center",61.12286,10.46956, "/?a=projects&b=bjerkebaek"],
		["City Block",63.432640,10.397793, "/?a=projects&b=cityblock"],
		["Sohlbergplassen Viewpoint",61.88036,10.18544, "/?a=projects&b=sohlbergplassen"],
		["Mortuary at Asker Crematorium",59.843210,10.434864, "/?a=projects&b=mortuary"],
	];
}

function setMarkers(map) {
	// Hentes av Google sitt kartskript og setter merker på hagekartet.

	let hager = hentKartsteder();
	for (var i = 0; i < hager.length; i++) {
		var hage = hager[i];
		var marker = new google.maps.Marker({
			position: {lat: hage[1], lng: hage[2]},
			map: map,
			label: hage[0].split(" ")[0],
			title: hage[0],
			url: hage[3]
		});
		google.maps.event.addListener(marker, 'click', function() {
    	window.location.href = this.url;
		});	
	}
}

function initMap() {
	document.getElementById('map').setAttribute("style", "width:100%; height:100vh;position:relative;");
	var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 4.8,
		center: {lat: 63.448260, lng: 17}
	});
	setMarkers(map);
}  




class Studioside extends React.Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		document.title = this.props.sub.charAt(0).toUpperCase() + this.props.sub.slice(1) + " -  - Hølmebakk Øymo";
	}
	
	componentDidUpdate() {
		document.title = this.props.sub.charAt(0).toUpperCase() + this.props.sub.slice(1) + " -  - Hølmebakk Øymo";
	}
	
	render() {
		let publications = this.props.publications;	
		if (publications && publications.length) {
			var pubrader = [];
			for (let i=0; i<publications.length; i++) {
				let rad = [];
				for (let j=0; j<6; j++) {
					let celle = <td key={"celle" + i + "." + j}>{publications[i][j]}</td>;
					rad.push(celle);
				}
				pubrader.push(<tr key={"rad" + i}>{rad}</tr>);
			}
		}
		
		
		let descriptions = this.props.descriptions;
        if (descriptions && descriptions.length) {
            var descrader = [];
            var conrader = [];
            descrader.push(<img className="aboutimage" key="abi" src="/images_1100px/about-image.jpg" />);
            conrader.push(<img className="aboutimage" key="coni" src="/images_1100px/contact-image.jpg" />);
            for (let i=1; i<descriptions.length; i++) {
                if (descriptions[i][0] == "general") {
                    if (descriptions[i][1] == "overskrift") {
                        descrader.push(
                            <h2 key={"descov" + i}>{descriptions[i][3]}</h2>
                        );
                    } else {
                        descrader.push(
                            <p key={"descavs" + i}>{descriptions[i][3]}</p>
                        );
                    }
                }
                if (descriptions[i][0] == "contact") {
                    if (descriptions[i][1] == "overskrift") {
                        conrader.push(
                            <h2 key={"conov" + i}>{descriptions[i][3]}</h2>
                        );
                    } else {
                        conrader.push(
                            <p key={"conavs" + i}>{descriptions[i][3]}</p>
                        );
                    }
                }
            }
        }
    
		
		return (	
			<React.Fragment>
				{this.props.sub == "contact" && conrader && conrader.length &&
					<div className="rad tekstbolk">	
						{conrader}
					</div>
				}

				{this.props.sub == "about" && descrader && descrader.length &&
					<div className="rad tekstbolk">	
						{descrader}
					</div>
				}
																 
				{this.props.sub == "awards" && 
					<div className="rad">	
						<div className="rad1">	
							<h1>Prizes, awards and nominations</h1>
							<AwardsTable data={this.props.awards} type="awards" />
						</div>
						<div className="rad2">	
							<h1>Competition prizes and mentiones</h1>
							<AwardsTable data={this.props.awards} type="competitions" />
						</div>
					</div>
				}
				{this.props.sub == "publications" && pubrader &&
					<div className="rad">	
						<div className="rad0">	
							<h1>Publications</h1>
							<table >
								<thead></thead>
								<tbody>
									{pubrader}
								</tbody>
							</table>
						</div>
					</div>
				}
				{this.props.sub == "exhibitions" && 
					<div className="rad">	
						<div className="rad0">	
							<h1>Exhibitions and Media</h1>
							<AwardsTable data={this.props.awards} type="exhibitions" />
						</div>
					</div>
				}
			</React.Fragment>
		);
	}	
}

	

/* Feilsiden */
class PageNotFound extends React.Component{
		componentDidMount() {
			document.title = "Page Not Found (404)";
		}
	
    render() {
        return (
					<div className="rad">	
						<h1>Page not found (404)</h1>
						<p>Sorry, we couldn't find the page you requested. Please try another adress/URL.</p>
          </div>
				);
    }
}


class Slideshow extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			slide: 0,
			slideBilde: [ "/code/gray1100px.jpg" ],
		}
		let s = this.props.slides;
		shuffleArray(s);
		this.slides = s;
	}
	
	componentDidMount() {
		this.skiftSlide();//fiks overgang på første	
		this.timer = setTimeout(() => this.skiftSlide(), 1750);//1.5, men kompenserer med 250 pga. lastetid
		this.timer = setTimeout(() => this.skiftSlide(), 4250);
		this.timer = setTimeout(() => this.startCarousel(), 4250);
	}
	
	componentWillUnmount() {
		clearTimeout(this.timer);
		clearInterval(this.carouselInterval);
	}
	
	startCarousel() {
		//console.log("start karusell");
    this.carouselInterval = setInterval(() => { this.skiftSlide(); }, 4000);
	}

	skiftSlide() {
		//console.log("i transition", this.state.slide);
		let nr = this.state.slide;
		if (nr == this.slides.length) nr = 0;
		fetch("/images_1100px/" + this.slides[nr])
			.then(response => response.blob())
			.then(images => {
				this.setState({
					slideBilde: URL.createObjectURL(images),
					slide:nr+1
				});  
			
				//console.log(this.slides[nr], nr);
				//window.setTimeout(console.log("test"),5000);
			})
	};


	render() {
		return (	
			<div className='slideshow' style={{backgroundImage:"url("+this.state.slideBilde +")"}}>
				<div className="slideshowplass"></div>
			</div>	
		);
	}	
}


/* Skriver ut inndata som en enkel tabell */
class AwardsTable extends React.Component {
	constructor(props) {
		super(props);

	}
	
	render() {
		let data = this.props.data.slice();
		let type = this.props.type;
		let utvalg = [];
		
        for (let i=0; i<data.length; i++) {
			if (data[i][2] == type) {
				utvalg.push([ data[i][0], data[i][1] ]);
			}
		}
			
				
		let rader = [];
        //overskrifter
        let rad = [];
			for (let j=0; j<utvalg[0].length; j++) {
				let celle = <td key={"celle" + "overskrift" + j}>{data[0][j]}</td>;
				rad.push(celle);
			}
			rader.push(<tr key={"rad_overskrift"}>{rad}</tr>);
        //innhold
		for (let i=0; i<utvalg.length; i++) {
			let rad = [];
			for (let j=0; j<utvalg[i].length; j++) {
				let celle = <td key={"celle" + i + "." + j}>{utvalg[i][j]}</td>;
				rad.push(celle);
			}
			rader.push(<tr key={"rad" + i}>{rad}</tr>);
		}

		
		return (
			<React.Fragment>
				<table >
					<thead></thead>
					<tbody>
						{rader}
					</tbody>
				</table>
			</React.Fragment>
		);
		
	}	
}



function kommaLinjeskift(s) {
	s = s.split(",");
	s = s.map(e => <li key={e}>{e}</li>);
	return <ul>{s}</ul>;
}

						
/* Gjør rå csv-tekst om til en todimensjonal array. */
function dataTilArray(data) {
	let d  = data;
	d = d.split("\n");
	d = d.map(e => e.split("\t"));
return d;
}

/* lånt funksjon for å "stokke" array */
function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}
	
/* setter inn et svg-ikon */
function lagIkon(ikon, stroke="#666", fill="#666", strokeWidth="10") {
  let ikonStyle = {stroke:stroke, fill:fill, strokeWidth:strokeWidth};
  let s2 = {stroke:stroke, fill:"none", strokeWidth:"2"};
	let s3 = {stroke:stroke, fill:"none", strokeWidth:"3"};
  let s4 = {stroke:stroke, fill:"none", strokeWidth:"4"};
  let s5 = {stroke:stroke, fill:"none", strokeWidth:"5"};
  let s7 = {stroke:stroke, fill:"none", strokeWidth:"7"};
  let s10 = {stroke:stroke, fill:"none", strokeWidth:"10"};
  let s15 = {stroke:stroke, fill:"none", strokeWidth:"15"};
  let s20 = {stroke:stroke, fill:"none", strokeWidth:"20"};
  
  
  if (ikon == "firkant") {
    return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={ikonStyle}><rect width="100" height="100" /></svg>;
  }
 
  if (ikon == "blyant") {
    return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={ikonStyle}><path d="M75,8 L92,25 L35,82 L10,90 L18,65 z" /><path d="M10,90 l11,-11" /><path d="M62,18 L82,38" /></svg>;
  }  
  
  if (ikon == "folk") {
    return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" style={s7}>		
		  <path d="M5,95 C5,60 65,60 65,95" />
		  <circle cx="35" cy="60" r="15"></circle>
		  <path d="M65,60 C65,25 125,25 125,60" />
		  <circle cx="95" cy="25" r="15"></circle>
		  <path d="M125,95 C125,60 185,55 185,95" />
		  <circle cx="155" cy="60" r="15"></circle>
	    </svg>;
  }
 
	if (ikon == "hake") {
    let pStyle = {stroke:stroke, fill:"none", strokeWidth:"20"};
    return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={ikonStyle}><path d="M7,43 l35,35 l48,-60" style={pStyle} /></svg>;
  }
  
  if (ikon == "hoyde") {
    return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={s7}><path d="M50,15 v70" /><path d="M40,25 h20 L50,10 z" /><path d="M40,80 h20 L50,95 z" /></svg>;
  }
  
	if (ikon == "lastned") {
	  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={ikonStyle}><path d="M50,0 v40" style={s15} /><path d="M40,45 h20 l-10,15 z" style={s15} /><path d="M0,90 h100" style={s20} /></svg>;
  }
  
	if (ikon == "lukk") {
	  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={s10}><path d="M10,10 L90,90" /><path d="M10,90 L90,10" /></svg>;
  }
	if (ikon == "minus") {
	  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M0,5 l10,0"	style={s2} /></svg>;
  }
  if (ikon == "nedhake") {
	  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={s3}><path xmlns="http://www.w3.org/2000/svg" d="M10,30 L50,70 L90,30"/></svg>;
  }
	if (ikon == "opphake") {
	  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={s3}><path xmlns="http://www.w3.org/2000/svg" d="M10,70 L50,30 L90,70"/></svg>;
  }
  if (ikon == "venstrehake") {
	  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 100" style={s10}><path xmlns="http://www.w3.org/2000/svg" d="M50,92 L5,52 L50,12"/></svg>;
  }
	if (ikon == "hoyrehake") {
	  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 100" style={s10}><path xmlns="http://www.w3.org/2000/svg" d="M5,90 L50,50 L5,10"/></svg>;
  }
	if (ikon == "pluss") {
    return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M0,5 l10,0 M5,0 l0,10"	style={s2} /></svg>;
  }
  
	if (ikon == "severdighet") {
	  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={ikonStyle}>
	    <path d="M 40,30 v40" />
	    <path d="M 60,30 v40" />
      <path d="M 30,40 h40" />
      <path d="M 30,60 h40" />
      <path d="M 30,40 C-10,40 40,-10 40,30" />
      <path d="M 70,40 C110,40 60,-10 60,30" />
      <path d="M 40,70 C40,110 -10,60 30,60" />
      <path d="M 70,60 C110,60 60,110 60,70" />
      </svg>;
  }
  
	if (ikon == "sok") {
    return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M5,95 l30,-30" style={s20} /><circle cx="60" cy="40" r="35" style={s10} /></svg>;
  }
  
	/* linjer - data/hamburgermeny */
	if (ikon == "linjer") {
    return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={ikonStyle}>
				<path d="M0,27 H100"  />
				<path d="M0,57 H100"  />
				<path d="M0,87 H100"  />
			</svg>
  }
	if (ikon == "tekst") {
    return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={s7}><path d="M10,10 h90 M10,30 h60 M10,50 h70 M10,70 h30 M10,90 h50"></path></svg>;
  }
  
	if (ikon == "turbin") {
	  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100" style={s5}>
      <circle cx="0" cy="0" r="10"></circle>
      <path d="M -30,-30 C-25,-40 -10,-20 -5,-5" />
      <path d="M -30,-30 C-25,-40 -10,-20 -5,-5" transform="rotate(45)" />
      <path d="M -30,-30 C-25,-40 -10,-20 -5,-5" transform="rotate(90)" />
      <path d="M -30,-30 C-25,-40 -10,-20 -5,-5" transform="rotate(135)" />
      <path d="M -30,-30 C-25,-40 -10,-20 -5,-5" transform="rotate(180)" />
      <path d="M -30,-30 C-25,-40 -10,-20 -5,-5" transform="rotate(225)" />
      <path d="M -30,-30 C-25,-40 -10,-20 -5,-5" transform="rotate(270)" />
      <path d="M -30,-30 C-25,-40 -10,-20 -5,-5" transform="rotate(315)" />
      </svg>;
  }
  
	if (ikon == "venstreblyant") {
	  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={ikonStyle}><path d="M25,8 L8,25 L65,82 L90,90 L82,65 z" /><path d="M90,90 l-11,-11" /><path d="M38,18 L18,38" /></svg>;
  }


}

/* ulike sorteringsfunksjoner */
function sorterTallFallende(liste,par) {
	liste.sort(function(a,b) {
		let valA = parseFloat(a);
		let valB = parseFloat(b);
		if(!a[par] || isNaN(parseFloat(a[par]))) return 1;
		if(!b[par] || isNaN(parseFloat(b[par]))) return -1;
		return b[par] - a[par];
	});
}

function sorterTallStigende(liste,par) {
	liste.sort(function(a,b) {
		let valA = parseFloat(a);
		let valB = parseFloat(b);
		if(!a[par] || isNaN(parseFloat(a[par]))) return 1;
		if(!b[par] || isNaN(parseFloat(b[par]))) return -1;
		return a[par] - b[par];
	});
}

	
function sorterTekstAlfabetisk(liste,par) {
	liste.sort(function(a,b) {
		if(!a[par]) return 1;
		if(!b[par]) return -1;
		return a[par] > b[par] ? 1 : -1;
	});
}
	
function sorterTekstMotsattAlfabetisk(liste,par) {
	liste.sort(function(a,b) {
		if(!a[par]) return 1;
		if(!b[par]) return -1;
		return a[par] < b[par] ? 1 : -1;
	});
}
	
function sorterHøyMiddelsLav(liste,par) {
	liste.sort(function(a,b) {
		let valA = 0;
		let valB = 0;
		if(a[par] == "Lav") {
			valA = 1;
		} else if (a[par] == "Middels") {
			valA = 2;
		} else if (a[par] == "Høy") {
			valA = 3;
		}
		if(b[par] == "Lav") {
			valB = 1;
		} else if (b[par] == "Middels") {
			valB = 2;
		} else if (b[par] == "Høy") {
			valB = 3;
		}
		return valB - valA;
	});
}

function sorterGodMiddelsDårlig(liste,par) {
	liste.sort(function(a,b) {
		let valA = 0;
		let valB = 0;
		if(a[par] == "Dårlig") {
			valA = 1;
		} else if (a[par] == "Middels") {
			valA = 2;
		} else if (a[par] == "God") {
			valA = 3;
		}
		if(b[par] == "Dårlig") {
			valB = 1;
		} else if (b[par] == "Middels") {
			valB = 2;
		} else if (b[par] == "God") {
			valB = 3;
		}
		return valB - valA;
	});
}
	

function sorterArraystørrelse(liste,par) {
	liste.sort(function(a,b) {
		return a[par].length < b[par].length ? 1 : -1;
	});
}
	



ReactDOM.render(<BrowserRouter><Hoved /></BrowserRouter>, document.getElementById('root'));