// *********************************************** INIT ***

	var reel = new Array();
	reel[0]="reel/legende.jpg"
	reel[1]="reel/fabulae.jpg"
	reel[2]="reel/fabulae2.jpg"
	reel[3]="reel/Similo.jpg"
	reel[4]="reel/SimiloTruck.jpg"
	reel[5]="reel/akira.jpg"
	reel[6]="reel/Boturai.jpg"
	reel[7]="reel/IronGiant.jpg"
	reel[8]="reel/Koi.jpg"
	reel[9]="reel/wmyw.jpg"
	reel[10]="reel/opera.jpg"
	reel[11]="reel/Artitude.jpg"
	reel[12]="reel/Sleek.jpg"
	reel[13]="reel/Interone.jpg"
	reel[14]="reel/Titan.jpg"
	reel[15]="reel/DK.jpg"
	reel[16]="reel/GD.jpg"

	var descriptions = new Array();
	descriptions[0]="Fabulae, 2010"
	descriptions[1]="Legende, 2010"
	descriptions[2]="BMW 5: spectacle Keyvisual, 2009"
	descriptions[3]="Similo, 2007-2010"
	descriptions[4]="Titan, 2008"
	descriptions[5]="concept artwork for 'Akira', 2008<br />breaktest"
	descriptions[6]="WMYW (We Make You Wonder) Identity, 2010"
	descriptions[7]="Opera Identity, 2008-2009"
	descriptions[8]="Artitude identity and monthly visual communication, 2010"
	descriptions[9]="Artitude identity and monthly visual communication, 2010"
	

	var rotation = 700;

	reelitem=[];
	n=0;
	f=0;
	ospeed = 20;
	d = -30;
	state = "roll";
	descdisplay = 0;

function init() {
	
	sizedetect();

	imageload = new Array ()
	
	for (i=0; i<reel.length; i++) {
		imageload[i] = new Image;
		imageload[i].src = reel[i];
	}
	flowcheck();
}

// *********************************************** REEL ***

function opac() {
		document.getElementById('fadescreen').style.opacity=(f/100);
		f=f+ospeed;
		if (f < 180 && f >= 0)  {
			setTimeout("opac()", 2);
		} else {
			if (f == 180) { 
			reelflow();
			}
			dspeed=-30;
			d = f;
			setTimeout("depac()", 2);
		}
}

function depac() {
		document.getElementById('fadescreen').style.opacity=(d/100);
		d=d+dspeed;
		if (d < 180 && d >= 0)  {
			setTimeout("depac()", 2);
		} else {
			document.getElementById('fadescreen').style.opacity=0;
			f=0;
			d=-30;
		}
}
function flowcheck() {	
		if (state == "roll") {
				if (n < reel.length) {
				n=n+1;
				}
				if (n == reel.length) {
				n=0;
				}
				reelrotator = window.setTimeout("reelflow()", rotation);
		}
		if (state == "hold") {
		//	n=n-1;
		}
}


function reelflow() {
	// document.getElementById("videobox"+(n-1)).style.visibility="hidden";
	window.clearTimeout(reelrotator-1);
	window.clearTimeout(reelrotator);
	window.clearTimeout(reelrotator+1);
	var displayer = document.getElementById('imgcontainer');
	var filecheck = reel[n];
	var extension = filecheck.slice(filecheck.indexOf(".")+1);
	descdisplay = n;


	// IF LOADING A STILL IMAGE REEL PIECE	
	if (extension == 'jpg' && state=="roll") {
				if (imageload[n].complete==false) {
							if (n < reel.length) {
							n=n+1;
							}
							if (n == reel.length) {
							n=0;
							}
					reelflow();
					}
				if (imageload[n].complete==true) {
						displayer.innerHTML="<img id=\"reelimage\" class=\"reelimagery\" src="+reel[n]+">"
						ospeed = 20;
						sizedetect();
						flowcheck();
					}		

		}
		
	// IF LOADING A MOVING IMAGE REEL PIECE	
	if (extension == 'mov' && state=="roll") { 
			displayer.innerHTML="<video id=\"reelimage\" class=\"reelvid\" loop autoplay><source src="+reel[n]+" type=\"video/mp4\">Your browser does not support the <code>video</code> element.</video>"
			ospeed = 10;
			sizedetect();
			flowcheck();
		}
}

function reelctrl() {	
		if (state == "hold") {
				state = "roll";
				document.getElementById('fadescreen').style.opacity=0;
				document.getElementById('descriptor').style.visibility="hidden";
				restartreel = setTimeout("reelflow()", 300);
		} else if (state == "roll") {
				state = "hold";
				document.getElementById('descriptor').style.visibility="visible";
				document.getElementById('descriptor').innerHTML="<span>"+descriptions[descdisplay]+"</span>";
				document.getElementById('fadescreen').style.opacity=0.2;
		}
}



// *********************************************** DATE + COPYRIGHT ***


var datum=new Date();
var jahr=datum.getFullYear();

function copywritten() {
	var box = document.getElementById('copywriter');
	box.innerHTML="<a href=\"http://www.scienceunderfire.com/imprint.html\">imprint</a>"+" &nbsp;&nbsp;&nbsp;&nbsp;Copyright &copy; 2003&ndash;"+jahr+" David L&Ouml;hr. Alle Rechte vorbehalten, all rights reserved.";
}

function copywritten2() {
	var box = document.getElementById('copywriter');
	box.innerHTML ="Copyright &copy; 2003&ndash;"+jahr+" David L&ouml;hr. Alle Rechte vorbehalten, all rights reserved.";
}


// *********************************************** SIZE DETECTION + SLIDESHOW ***


function sizedetect () {
//		var format = (document.getElementById('reelimage').width/document.getElementById('reelimage').height);
		var format = 1.6;
		var ratio = (window.innerWidth/window.innerHeight);
		// hšher als breiter
		if (ratio < 1.6) {
			var stretchwide = ((window.innerHeight*format)-window.innerWidth)/2;
			document.getElementById('reelcontainer').style.height=window.innerHeight+"px";
			document.getElementById('reelcontainer').style.width=(window.innerHeight*format)+"px";
			document.getElementById('reelcontainer').style.top=0+"px";		
			document.getElementById('reelcontainer').style.bottom=0+"px";
			document.getElementById('reelcontainer').style.left=(stretchwide*-1)+"px";
			document.getElementById('reelcontainer').style.right=stretchwide+"px";
	} 
		// breiter als hšher
		if (ratio > 1.6) {
			var stretchhigh = ((window.innerWidth/format)-window.innerHeight)/2;
			document.getElementById('reelcontainer').style.height=(window.innerWidth/format)+"px";
			document.getElementById('reelcontainer').style.width=window.innerWidth+"px";
			document.getElementById('reelcontainer').style.top=(stretchhigh*-1)+"px";		
			document.getElementById('reelcontainer').style.bottom=stretchhigh+"px";
			document.getElementById('reelcontainer').style.left=0+"px";
			document.getElementById('reelcontainer').style.right=0+"px";
		}
		if (ratio == 1.6) {
			document.getElementById('reelcontainer').style.height=window.innerHeight+"px";
			document.getElementById('reelcontainer').style.width=window.innerWidth+"px";
			document.getElementById('reelcontainer').style.top=0+"px";		
			document.getElementById('reelcontainer').style.bottom=0+"px";
			document.getElementById('reelcontainer').style.left=0+"px";
			document.getElementById('reelcontainer').style.right=0+"px";
		}

		// footer ausrichten
			document.getElementById('foot').style.top=window.innerHeight-70+"px";
}