// JavaScript Document

// INITIALISIERUNG UND FORMATIERUNG

var gesamt_hoehe = 0;
var header_hoehe = 0;
var footer_hoehe = 0;
var pusher_hoehe = 0;
var delta = 0;

function adjustHeight() {
	
	gesamt_hoehe = document.documentElement.clientHeight;
	header_hoehe = Math.floor(   ((gesamt_hoehe-300)/21)*8   );
	footer_hoehe = Math.floor(   ((gesamt_hoehe-300)/21)*13   );
	
	if ( header_hoehe<160){
		delta = 160 - header_hoehe;
		header_hoehe = 160;
		footer_hoehe = footer_hoehe - delta;
	};
	
	pusher_hoehe = header_hoehe - 160;

	document.getElementById('preLoader').style.top= (header_hoehe + 150) - 14 + "px";

	document.getElementById('header').style.height=header_hoehe+"px";
	document.getElementById('pusher').style.height=pusher_hoehe+"px";
	document.getElementById('footer').style.height=footer_hoehe+"px";
	document.getElementById('movieBox').style.top= (header_hoehe + 150) - 245 + "px";
	document.getElementById('contactButton').style.top=(header_hoehe + 150) + 86 + "px";
	document.getElementById('directionsButton').style.top=(header_hoehe + 150) + 0 + "px";
	
	if (footer_hoehe >= 35){
		document.getElementById('phasenSprung').style.top=(header_hoehe + 300 + footer_hoehe) - 35 + "px";
	} else {
		document.getElementById('phasenSprung').style.display="none";
	}
	
	document.body.scrollTop=1;	
}



// NAVIGATION

var newActive = "home";
var oldActive = "work";

function moveCursor(newActive) {

	if (newActive!=oldActive) {
		
		// Alten Content ausblenden
		if (oldActive == 'home'){ };
		if (oldActive == 'about'){ };
		if (oldActive == 'work'){ document.getElementById('contentWork').style.display="none"; };
		if (oldActive == 'contact'){ document.getElementById('contactButton').style.display="none"; document.getElementById('directionsButton').style.display="none";};
		
		// Cursor neu platzieren, neuen Content einblenden und initialisieren
		if (newActive == 'home') { document.getElementById('cursor').style.left="-9999px"; };
		if (newActive == 'about') { document.getElementById('cursor').style.left="192px"; };
		if (newActive == 'work') { document.getElementById('cursor').style.left="292px"; document.getElementById('contentWork').style.display="block"; resetPreview(); };
		if (newActive == 'contact') { document.getElementById('cursor').style.left="392px"; document.getElementById('contactButton').style.display="block"; document.getElementById('directionsButton').style.display="block";};
		
		// Over-State der Buttons aktualisieren
		document.getElementById(newActive).style.backgroundPosition="-100px 0px";
		document.getElementById(oldActive).style.backgroundPosition="0px 0px";
		
		// Hintergrundbild aktualisieren
		newBackground = "url(images/motiv_" + newActive + ".jpg)";
		document.getElementById('content').style.backgroundImage=newBackground;
		
		// Trigger aktualisieren
		oldActive = newActive;
	}
}

// SITE PRELOADER

function showSite() {
	document.getElementById('preLoader').style.display='none';
	document.getElementById('blackOut').style.display="none";
}

// PICTURE PRELOADER

function preLoad() {
	
	document.getElementById('preLoader').style.display='block';
	
	preload_images = new Array();
	
	preload_images[13] = new Image();
	preload_images[13].src = "images/motiv_about.jpg";
	preload_images[14] = new Image();
	preload_images[14].src = "images/motiv_work.jpg";
	preload_images[15] = new Image();
	preload_images[15].src = "images/motiv_contact.jpg";
	
	for (z = 1; z <= 12; z++){
		// Initialisierung fuer den IE
		preload_images[z] = new Image();
		preload_images[z].src = "images/work/"+z+"_preview.png";
	}

	checkLoad();
}

function checkLoad() {
	//if (document.preload_images[5].complete = true){
		window.setTimeout("showSite()", 3500);
		
	//}
}

// WORK

function switchPreview(newPreview) {
	document.getElementById('previews').style.backgroundImage="url(images/work/"+newPreview+"_preview.png)";
	createInfo(newPreview);
	document.getElementById('projectInfo').style.display="block";
	startFader();
}

function resetPreview() {
	document.getElementById('previews').style.backgroundImage="url()";
	document.getElementById('projectInfo').style.display="none";
	stopFader();	
	iTapTrigger = 0;
	tappedProject = 0;
}

// IMPRESSUM

function MM_openBrWindow(theURL,winName,features){
	window.open(theURL,winName,features);
}

function openImprint(){
	popup_x_pos=(screen.availWidth/2)-(400/2);
	popup_y_pos=(screen.availHeight/2)-(500/2);
	MM_openBrWindow("imprint.html",'Imprint',"top="+popup_y_pos+",left="+popup_x_pos+",width=400,height=500,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no");
}


  ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // FADER // (c) by Axel Schwarz ////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////

// EDIT VALUES FOR CONTROL OVER ANIMATION
var fps = 25; // Frames per Second fuer die Animation
var duration = 15; // Animationsdauer in Frames, basierend auf fps

if (navigator.userAgent.indexOf('iPad') != -1) {
	var preRoll = 0; // Anzahl der Frames für einen Vorlauf angeben. 0 bedeutet sofortiger Start der Animation!
} else {
	if (navigator.userAgent.indexOf('iPhone') != -1) {
		var preRoll = 0; // Anzahl der Frames für einen Vorlauf angeben. 0 bedeutet sofortiger Start der Animation!
	} else {
		var preRoll = 11; // Anzahl der Frames für einen Vorlauf angeben. 0 bedeutet sofortiger Start der Animation!
	}
}
			
// DO NOT EDIT BELOW THIS POINT!
var t;
var timerStatus = 0;
var alphaPercent = 0;
var currentFrame = preRoll*(-1);
var timeOut = 1000/fps;

function startFader() {
	if (timerStatus != 1) {
		timerStatus=1;
		nextFrame();
	}
}

function nextFrame() {
	if (currentFrame <= duration){
		alphaPercent = Math.round(((currentFrame*100)/duration));
		changeOpacity('projectInfo');
		changeOpacity('previews');
		currentFrame = currentFrame+1;
		t=setTimeout("nextFrame()",timeOut);
	}
	else {
		stopFader();
  	}
}

function stopFader() {
	clearTimeout(t);
	currentFrame = preRoll*(-1);
	timerStatus = 0;
	alphaPercent = 0;
}

function changeOpacity(fadeObject){
	document.getElementById(fadeObject).style.MozOpacity=(alphaPercent/100);
	document.getElementById(fadeObject).style.opacity=(alphaPercent/100);
	document.getElementById(fadeObject).style.filter='alpha(opacity='+alphaPercent+')';
}

  ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // MOVIE-BOX // (c) by Axel Schwarz ////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////

var preLoading = false;

function openMovie(projectID){
	
	// Projectinfo ausblenden
	document.getElementById('projectInfo').style.display="none";
	// preLoader ausblenden
	document.getElementById('preLoader').style.display='none';
	
	
	  //
	 // Browserspezifische Aufrufe der Videos
	//
	
	// iPad?
	if (navigator.userAgent.indexOf('iPad') != -1) {
		document.getElementById('fadeOut').style.display='block';
		document.getElementById('movieBox').style.display='block';
		document.getElementById('silverScreen').innerHTML = "<video id='video' width='720' height='405' autoplay='autoplay' autobuffer='autobuffer' controls><source src='movies/"+projectID+".mp4' type='video/mp4' />Your browser does not support the video tag. Please update.</video>";
    // ...oder iPhone?
	} else {
		if (navigator.userAgent.indexOf('iPhone') != -1) {
			document.getElementById('fadeOut').style.display='block';
			document.getElementById('movieBox').style.display='block';
			document.getElementById('silverScreen').innerHTML = "<video id='video' width='720' height='405' autoplay='autoplay' autobuffer='autobuffer' controls><source src='movies/"+projectID+".mp4' type='video/mp4' />Your browser does not support the video tag. Please update.</video>";
		// ...oder doch ein Desktop?
    	} else {
			// ...oder ein Desktop Rechner?
			preLoading = true;
			document.getElementById('preLoader').style.display='block';
			document.getElementById('fadeOut').style.display='block';
			document.getElementById('movieBox').style.display='block';
			document.getElementById('silverScreen').innerHTML="<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='720' height='405' id='FlashID' title='videoPlayer'><param name='movie' value='videoPlayer.swf?projectNumber="+projectID+"' /><param name='quality' value='high' /><param name='wmode' value='transparent' /><param name='swfversion' value='9.0.45.0' /><!--[if !IE]>--><object type='application/x-shockwave-flash' data='videoPlayer.swf?projectNumber="+projectID+"' width='720' height='405'><!--<![endif]--><param name='quality' value='high' /><param name='wmode' value='transparent' /><param name='swfversion' value='9.0.45.0' /><!--[if !IE]>--></object><!--<![endif]--></object>";
		}
	}			
}


function closeMovie(){
	document.getElementById('fadeOut').style.display='none';
	document.getElementById('movieBox').style.display='none';
	document.getElementById('silverScreen').innerHTML="&nbsp;"
	document.getElementById('preLoader').style.display='none';
}

function preLoadStop(){
	document.getElementById('preLoader').style.display='none';
	preLoading = false;
}

function playPause() {
	if (preLoading == false){
		var myVideo = document.getElementsByTagName('video')[0];
		if (myVideo.paused)
			myVideo.play();
		else
			myVideo.pause();
	}
}


  ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // iOS Usability ///////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////

var iTapTrigger = 0;
var tappedProject = 0;

function includeContent(){
	if (navigator.userAgent.indexOf('iPad') != -1) {
		writeCode("iOS");
	} else {
		if (navigator.userAgent.indexOf('iPhone') != -1) { 
			writeCode("iOS");
		} else {
			writeCode("Desktop");
		}
	}
}

function iTap(projectNumber){
	if (iTapTrigger == 0){
		switchPreview(projectNumber);
		tappedProject = projectNumber
		iTapTrigger = 1;
	} else {
		if (tappedProject == projectNumber){
			resetPreview();
			openMovie(projectNumber);
			tappedProject = 0;
			iTapTrigger = 0;
		} else {
			resetPreview();
			tappedProject = 0;
			iTapTrigger = 0;
		}
	}
}

function writeCode(device) {
	
	if (device == "iOS"){
		document.write("<div id='contentWork'>");
		document.write("<div id='spacer1'>SPACER1</div>");
		document.write("<div id='mosaik'>");
		document.write("<div id='previews'>");
		document.write("<ul id='projects'>");
		document.write("<li><a href='JavaScript:void(0)' onclick='iTap(1)'>P01</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onclick='iTap(2)'>P02</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onclick='iTap(3)'>P03</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onclick='iTap(4)'>P04</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onclick='iTap(5)'>P05</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onclick='iTap(6)'>P06</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onclick='iTap(7)'>P07</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onclick='iTap(8)'>P08</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onclick='iTap(9)'>P09</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onclick='iTap(10)'>P10</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onclick='iTap(11)'>P11</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onclick='iTap(12)'>P12</a></li>");
		document.write("</ul>");
		document.write("</div>");
		document.write("</div>");
		document.write("<div id='spacer2'>SPACER2</div>");
		document.write("<div id='projectInfo'>");
		document.write("<p><span id='proHeader'>&nbsp;</span></p>");
		document.write("<p><b>Project: </b><span id='proInfo'>&nbsp;</span></p>");
		document.write("<p><b>Client: </b><span id='proClient'>&nbsp;</span></p>");
		document.write("</div>");
		document.write("</div>");
	}
	
	if (device == "Desktop") {
		document.write("<div id='contentWork'>");
		document.write("<div id='spacer1'>SPACER1</div>");
		document.write("<div id='mosaik'>");
		document.write("<div id='previews'>");
		document.write("<ul id='projects'>");
		document.write("<li><a href='JavaScript:void(0)' onmouseover='switchPreview(1)' onmouseout='resetPreview()' onclick='openMovie(1)'>P01</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onmouseover='switchPreview(2)' onmouseout='resetPreview()' onclick='openMovie(2)'>P02</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onmouseover='switchPreview(3)' onmouseout='resetPreview()' onclick='openMovie(3)'>P03</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onmouseover='switchPreview(4)' onmouseout='resetPreview()' onclick='openMovie(4)'>P04</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onmouseover='switchPreview(5)' onmouseout='resetPreview()' onclick='openMovie(5)'>P05</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onmouseover='switchPreview(6)' onmouseout='resetPreview()' onclick='openMovie(6)'>P06</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onmouseover='switchPreview(7)' onmouseout='resetPreview()' onclick='openMovie(7)'>P07</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onmouseover='switchPreview(8)' onmouseout='resetPreview()' onclick='openMovie(8)'>P08</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onmouseover='switchPreview(9)' onmouseout='resetPreview()' onclick='openMovie(9)'>P09</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onmouseover='switchPreview(10)' onmouseout='resetPreview()' onclick='openMovie(10)'>P10</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onmouseover='switchPreview(11)' onmouseout='resetPreview()' onclick='openMovie(11)'>P11</a></li>");
		document.write("<li><a href='JavaScript:void(0)' onmouseover='switchPreview(12)' onmouseout='resetPreview()' onclick='openMovie(12)'>P12</a></li>");
		document.write("</ul>");
		document.write("</div>");
		document.write("</div>");
		document.write("<div id='spacer2'>SPACER2</div>");
		document.write("<div id='projectInfo'>");
		document.write("<p><span id='proHeader'>&nbsp;</span></p>");
		document.write("<p><b>Project: </b><span id='proInfo'>&nbsp;</span></p>");
		document.write("<p><b>Client: </b><span id='proClient'>&nbsp;</span></p>");
		document.write("</div>");
		document.write("</div>");
	}
}