var html;
var hoogte = 180;
var padding = 325;
var klein = 33;
var i = 0;
var TimeOutId;
var paddingdown = 460.363;
var heightdown = 69.6371;
var testAr = new Array(2, 3, 7, 14, 28, 56, 112);
var testArIndex = 0;
var testAr2 = new Array(56, 84, 98, 105, 108, 111, 112);
var testAr2Index = 0;
var prevFoto = new Array();
var prevText = new Array();
var up = false;
var arrayIndex = 0;
var isNext = false;
var isLoop = true;
var inProgress = false;
var omschrijving;
var XMLHTTPObject = createHTTPHandler();
var ticker = 5;
var factor = 1.4;
var front = "/";
var moveup = new Array();

function createHTTPHandler() 
{
	httphandler = false;

	if (!httphandler && typeof XMLHttpRequest != 'undefined') {
		httphandler = new XMLHttpRequest();
	}
	return httphandler;
}

function tickerTape() 
{
	var temphoogte = hoogte - i;
	var temppadding = padding + i;
	if(temphoogte > klein)
	{
	 	document.getElementById('infoveld').style.height = temphoogte + "px";
	 	document.getElementById('test').style.paddingTop = temppadding + "px";
	 	document.getElementById('test').style.height = temphoogte + "px";
	 	tempDown();
	 	//ticker = ticker * factor;
	 	i = testAr[testArIndex]
	 	testArIndex++;
	 	//moveup.push(i);
	}
	else
	{

		document.getElementById('infoveld').style.height = 69.6371 + "px";
	 	document.getElementById('test').style.paddingTop = 460.363 + "px";
	 	document.getElementById('test').style.height = 69.6371 + "px";
	 	document.getElementById('buttonup').style.display = 'block';
	 	document.getElementById('buttondown').style.display = 'none';
		i = 0;
		testArIndex = 0;
		ticker = 5;
		clearTimeout(TimeOutId);
	}
}


function TickerUp() 
{
	var temphoogte = heightdown + i;
	var temppadding = paddingdown - i;
	if(temphoogte < hoogte)
	{
		document.getElementById('infoveld').style.height = temphoogte + "px";
	 	document.getElementById('test').style.paddingTop = temppadding + "px";
	 	document.getElementById('test').style.height = temphoogte + "px";
	 	tempUp();
	 	i = testAr2[testAr2Index];
	 	testAr2Index++;
	}
	else
	{
		document.getElementById('infoveld').style.height = hoogte + "px";
	 	document.getElementById('test').style.paddingTop = padding + "px";
	 	document.getElementById('test').style.height = hoogte + "px";
		document.getElementById('buttonup').style.display = 'none';
	 	document.getElementById('buttondown').style.display = 'block';
		i = 0;
		testAr2Index = 0;
		ticker = 5;
		clearTimeout(TimeOutId);
	}
	
	//alert(document.getElementById('infoveld').style.height);
} 


function tempDown()
{
	TimeOutId = setTimeout('tickerTape()',30);
	
}

function tempUp()
{
	TimeOutId = setTimeout('TickerUp()',30);
}
function down()
{
	document.getElementById('infoveld').style.height = 5 + "px";

	document.getElementById('test').style.paddingTop = 474 + "px";
	document.getElementById('test').style.height = 5 + "px";
}

function up()
{
	document.getElementById('infoveld').style.height = hoogte + "px";

	document.getElementById('test').style.paddingTop = padding + "px";
	document.getElementById('test').style.height = hoogte + "px";
	document.getElementById('buttonup').style.display = 'none';
 	document.getElementById('buttondown').style.display = 'block';
}

var viewportwidth;
var viewportheight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined')
{
     viewportwidth = window.innerWidth,
     viewportheight = window.innerHeight
}

//IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined'
    && typeof document.documentElement.clientWidth !=
    'undefined' && document.documentElement.clientWidth != 0)
{
      viewportwidth = document.documentElement.clientWidth,
      viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else
{
      viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
      viewportheight = document.getElementsByTagName('body')[0].clientHeight
}



var image = "";
var basedir = front + "projects/";
var fotodir   = "";
var curimage = "";
var fotomapje = '';

function init(mapje, pagina)
{
	fotomapje = mapje;
	document.getElementById('buttonup').style.display = 'none';
	XMLHTTPObject.open('GET', front + 'getFotos.php?action=getMap&extraOption='+mapje, true);

	XMLHTTPObject.send(null);
	XMLHTTPObject.onreadystatechange = function() 
	{

		if (XMLHTTPObject.readyState == 4) 
		{
			var response = XMLHTTPObject.responseText;
			//fotodir = response;	
			fotodir =''
			
			var randomnumber=Math.floor(Math.random()*6);
			
			var array = new Array(7);
			array[0] = "1.png";
			array[1] = "2.png";
			array[2] = "3.png";
			array[3] = "4.png";
			array[4] = "5.png";
			array[5] = "6.png";
			array[6] = "7.png";
			
			var dir = "";
			if(viewportwidth <= 1024)
			{
				dir = "1024";
			}
			else if(viewportwidth <= 1440)
			{
				dir = "1440";
			}
			else
			{
				var dir = "1900";
			}
			
			document.getElementById("bg").innerHTML = "<img style='position: absolute; margin-top: 200px;' src='"+front + "bg/"+dir+"/"+array[randomnumber]+"' width='"+viewportwidth+"' />";
				
			
			XMLHTTPObject.open('GET', front + 'getFotos.php?action=getFoto&extraOption='+mapje, true);
			
			XMLHTTPObject.send(null);
			XMLHTTPObject.onreadystatechange = function() 
			{

				if (XMLHTTPObject.readyState == 4) 
				{
					var response = XMLHTTPObject.responseText;
					document.getElementById("project1").style.backgroundImage = 'url('+basedir+fotodir+"/"+response+')';
					XMLHTTPObject.open('GET', front +'getFotos.php?action=getDetails', true);
					
					XMLHTTPObject.send(null);
					XMLHTTPObject.onreadystatechange = function() 
					{
						
						if (XMLHTTPObject.readyState == 4) 
						{
							omschrijving = XMLHTTPObject.responseText;
							//document.getElementById("project1").innerHTML = omschrijving;
							var Object = createHTTPHandler();
							Object.open('GET', front +'getFotos.php?action=getFoto&extraOption='+mapje, true);
		
							Object.send(null);
							Object.onreadystatechange = function() 
							{
								if (Object.readyState == 4) 
								{
									var response = Object.responseText;
									image = response;
									document.getElementById("project2").style.backgroundImage = 'url('+basedir+fotodir+"/"+response+')';
									if(mapje == 'none')
									ChangeImage();
								}
							}	
						}
					}
				}
			}
		}
	}
}

var go = null;

function ChangeImage()
{
	//getDetails();
	if(isLoop)
		go = setTimeout('Change()',10000);
		
}

function getDetails()
{
	XMLHTTPObject.open('GET', front +'getFotos.php?action=getDetails', true);

	XMLHTTPObject.send(null);
	XMLHTTPObject.onreadystatechange = function() 
	{

		if (XMLHTTPObject.readyState == 4) 
		{
			omschrijving = null;
			//omschrijving = XMLHTTPObject.responseText;
		}
	}
}
function NextImage()
{
	if(!inProgress)
	{
		clearTimeout(go);
		Change();
	}	
}

var prevFirst = false;
var locked 	  = false;

function PrevImage()
{
	if(arrayIndex > 0)
	{
		if(!locked)
		{
			locked = true;
			prevFirst = true;
			arrayIndex -= 1;
			image = prevFoto[arrayIndex];
			omschrijving = prevText[arrayIndex];
			if(!inProgress)
			{
				clearTimeout(go);
				Change();
			}
			
			prevFirst = false;
			locked = false;
		}
	}
	else
	{
		alert('U kunt niet verder terug');
	}
}

var x = 1;
var project2 = true;
var project1 = false;
var id1 = "";
var id2 = "";
var nextimage = "";
var previmage = "";

function getImage()
{
	XMLHTTPObject.open('GET', front +'getFotos.php?action=getFoto&extraOption='+fotomapje, true);

	XMLHTTPObject.send(null);
	XMLHTTPObject.onreadystatechange = function() 
	{

		if (XMLHTTPObject.readyState == 4) 
		{
			var response = XMLHTTPObject.responseText;
			image = response;
		}
	}
}


function Change()
{
	document.getElementById('loader').style.display = 'none';
	inProgress = true;
	var opac = 0;
	var mozop = 0;
	var minmozop = 0;
	if(x == 1)
	{
		if(project1 == true)
		{
			id1 = "project1";
			id2 = "project2";
			project1 = false;
			project2 = true;
		}
		else
		{
			id1 = "project2";
			id2 = "project1";
			project1 = true;
			project2 = false;
		}
		
		if(!prevFirst)
		{
			
			var backImage = document.getElementById(id2).style.backgroundImage;
			var backText = document.getElementById(id2).innerHTML;
			document.getElementById('preloadprev').style.backgroundImage = backImage;
			//alert(backImage);
			var temp = backImage.split('/');
			temp = temp[3] + "/" + temp[4];
			temp = temp.replace(')', '');
			prevFoto[arrayIndex] = temp;
			prevText[arrayIndex] = backText;
			arrayIndex++;	
		}
		document.getElementById(id1).style.backgroundImage = 'url('+basedir+fotodir+"/"+image+')';
		//document.getElementById(id1).innerHTML = omschrijving;
		if (navigator.appName.indexOf("Netscape")!=-1&&parseInt(navigator.appVersion)>=5)
	    {    
	    	document.getElementById(id1).style.MozOpacity = 0;
	    	document.getElementById(id1).style.opacity = 0;
	    }
	    else if (navigator.appName.indexOf("Microsoft")!=-1&&parseInt(navigator.appVersion)>=4)
	    {
	    	document.getElementById(id1).filters.alpha.opacity = 0;
	    }
		getDetails();
		//getImage();
	}
	
	if(x <= 10)
	{
		opac = x * 10;
		mozop = 0+"."+x;
		getal = 10 - x;
		minopac = 100-opac;
		minmozop = 0+"."+getal;
		
	    if (navigator.appName.indexOf("Netscape")!=-1&&parseInt(navigator.appVersion)>=5)
	    {
	    	if(x == 10)
	    	{
	    		document.getElementById(id2).style.MozOpacity = 0;
		    	document.getElementById(id1).style.MozOpacity = 1;
		    	document.getElementById(id2).style.opacity = 0;
		    	document.getElementById(id1).style.opacity = 1;
	    	}
	    	else
	    	{
		    	document.getElementById(id2).style.MozOpacity = minmozop;
		    	document.getElementById(id1).style.MozOpacity = mozop;
		    	document.getElementById(id2).style.opacity = minmozop;
		    	document.getElementById(id1).style.opacity = mozop;
	    	}
	    }
	    else if (navigator.appName.indexOf("Microsoft")!=-1&&parseInt(navigator.appVersion)>=4)
	    {
	    	if(x == 10)
	    	{
	    		document.getElementById(id2).filters.alpha.opacity = 0;
		    	document.getElementById(id1).filters.alpha.opacity = 100;
	    	}
	    	else
	    	{
	    		document.getElementById(id2).filters.alpha.opacity = minopac;
		    	document.getElementById(id1).filters.alpha.opacity = opac;
	    	}
	    	
	    }
	    
		x++;
		PicEffect();
	}
	else
	{
		x = 1;
		
		if (navigator.appName.indexOf("Netscape")!=-1&&parseInt(navigator.appVersion)>=5)
	    {    	
	    	document.getElementById(id2).style.MozOpacity = 0;
	    	document.getElementById(id2).style.opacity = 0;
	    }
	    else if (navigator.appName.indexOf("Microsoft")!=-1&&parseInt(navigator.appVersion)>=4)
	    {
	    	document.getElementById(id2).filters.alpha.opacity = 0;
	    }
		
		XMLHTTPObject.open('GET', front +'getFotos.php?action=getFoto&extraOption='+fotomapje, true);

		XMLHTTPObject.send(null);
		XMLHTTPObject.onreadystatechange = function() 
		{

			if (XMLHTTPObject.readyState == 4) 
			{
				document.getElementById('preloadprev').style.backgroundImage = 'url('+basedir+fotodir+"/"+image+')';
				var response = XMLHTTPObject.responseText;				
				image = response;
				document.getElementById(id2).style.backgroundImage = 'url('+basedir+fotodir+"/"+image+')';
				inProgress = false;
				
				if(isLoop)
				{			
					ChangeImage();
				}
			}
		}
		
	}
}

function PicEffect()
{
	setTimeout('Change()',100);
}