var paths = new Array();
var imageCount = 0;
paths[0]="images/pixel_susy.jpg";paths[1]="images/1.jpg";paths[2]="images/2.jpg";paths[3]="images/22.jpg";paths[4]="images/10_OPT3_10.05.jpg";paths[5]="images/2_OPT3_10.05.jpg";paths[6]="images/2a.jpg";paths[7]="images/3.jpg";paths[8]="images/4.jpg";paths[9]="images/4_OPT3_10.05.jpg";paths[10]="images/5.jpg";paths[11]="images/6_OPT3_10.05.jpg";paths[12]="images/6a_OPT3_10.05.jpg";paths[13]="images/7_OPT3_10.05.jpg";paths[14]="images/8_OPT3_10.05.jpg";paths[15]="images/8a_OPT3_10.05.jpg";paths[16]="images/9_OPT3_10.05.jpg";paths[17]="images/IMG_4689.jpg";paths[18]="images/IMG_5295.jpg";paths[19]="images/IMG_5314.jpg";paths[20]="images/2_OPT3_.jpg";imageCount=21;var sb;
var images = new Array();
var timeOut;
var currentImage = 0;
var lan = 1;
var txtL = new Array(2);
var moreT = new Array(2);

txtL[0] = '<p>Optionaltimes/Almere wordt momenteel ontwikkeld  in opdracht van De Dienst Stadscentrum Almere. Het project wordt gerealiseerd in samenwerking met <a href=\"http://www.skor.nl/\">SKOR</a> en <a href=\"http://www.depaviljoens.nl/\">Museum De Paviljoens</a>. Het wordt in het voorjaar van 2008 geplaatst in het nieuwe stadscentrum van Almere. Voor meer informatie : <a href=\"http://www.optionaltimes.com\">http://www.optionaltimes.com</a>. </p>  <p> Concept en uitwerking: Susann Lekås | Technisch concept en programmering: Thomas Gresch | Creatieve implementatie en programmering: Arjen Keesmaat | Programmeer advies: Patrick Machielse. </p> <p>Artistieke begeleiding: SKOR, Museum De Paviljoens. Apparatuur: Beamsystems , Scherm ontwerp: NPK Industrial design. </p><p>Het oorspronkelijke technische concept werd ontwikkeld door Joes Koppers, met assistentie van Arjen Keesmaat. </p><p>Email voor meer informatie <a href=\"mailto:optionaltime@gmail.com?subject=optionaltime - almere\"><strong>email ons</strong></a>. </p>';

txtL[1] = '<p>Optionaltimes/Almere is currently being developed  for the city centre of Almere. It is being commissioned by the Dienst Stadscentrum Almere. Optionaltimes/Almere is realised in coorporation with <a href=\"http://www.skor.nl/\">SKOR</a> en <a href=\"http://www.depaviljoens.nl/\">Museum De Paviljoens</a>. It will be put in place in spring 2008. </p><p>Concept and development: Susann Lekås | Technical concept and programming: Thomas Gresch | Creative implementation and Programming: Arjen Keesmaat | Programming advice Patrick Machielse. </p><p>Artistic supervision: SKOR, Museum De Paviljoens Hardware: Beamsystems,Screen Design: NPK Industrial design. </p><p>The original techincal concept was made by Joes Koppers assisted by Arjen Keesmaat. </p><p>For more information <a href=\"mailto:optionaltime@gmail.com?subject=optionaltime - almere\"><strong>mail us</strong></a>. </p>';

moreT[0] = '<p>OPTIONALTIMES /ALMERE Is een interactieve film en opereert op drie verschillende niveaus.</p> <p>De film Optionaltimes/Almere speelt zich af bij het Urban Entertainment Centre in het nieuwe stadscentrum van Almere. In Optionaltimes/ Almere leert het publiek (de gebruikers van het plein) drie personen kennen door het gedrag van de fictieve karakters in de film te observeren. Optionaltimes/ Almere brengt het gedrag van mensen in de publieke ruimte in beeld vanuit het perspectief van een adolescent/jongere, op zoek naar zijn of haar identiteit, en laat zien hoe  hij/zij zich een houding geeft in de publieke ruimte. Hoe claimen mensen een plek in de publieke ruimte? Hoe nemen mensen territorium in en hoe kunnen we dit aflezen aan de manier waarop mensen zich tot de omgeving verhouden?  </p> <p>Met de publieke ruimte als podium richt Optionaltimes/ Almere zich op de subtiele persoonlijke wereld van de jongeren. De personen in de film hebben gelijkenissen met ‘lokale karakters’, personen die op zo’n manier tot leven worden gewekt dat dat doet denken aan archetypisch gedag van mensen. De film onderzoekt zo ‘het menselijke versus de archetypes’. Omdat de locatie van de filmopnames en de locatie van vertoning dezelfde zijn, ziet het publiek werkelijkheid en fictie zich met elkaar vermengen. </p> <p>Optionaltimes/Almere maakt het publiek tot deelnemerNaast het fictieve deel van Optionaltimes/Almere (de eerder gemaakte filmopnames) ziet het publiek zichzelf in de film verschijnen en wordt zo zelf onderdeel van de film. Dit gebeurt op twee verschillende manieren: In een serie van georganiseerde live events worden opnames gemaakt van bewoners van Almere. Deze filmopnames worden toegevoegd aan het beeldarchief van Optionaltimes. Uit dit archief worden later beelden geselecteerd en op het scherm geprojecteerd. Het publiek dat naar Optionaltimes/Almere kijkt ziet zichzelf tegelijkertijd in de film verschijnen al dan niet vermengd met de fictieve eerder opgenomen karakters van de film.</p> <p>Optionaltimes / Almere nodigt uit tot interactie.Optionaltimes/Almere nodigt uit tot interactie van en tussen de gebruikers van het plein. Het publiek wordt uitgedaagd om een interactie aan te gaan met zichzelf en met andere gebruikers van de ruimte op een moment dat nog niet heeft plaats gevonden. Door te bewegen kunnen mensen het verloop van de film beïnvloeden. Zo kun je in Optionaltimes/Almere een contact aangaan met mede stadsbewoners, het gedrag in de openbare ruimte ‘bespelen’ en kun je het moment, dat je langer wilt laten voortduren, vertragen. Optionaltimes/Almere speelt met bestaande gedragspatronen, houdt mensen een spiegel voor en daagt hen uit tot onverwachte interacties in de publieke ruimte. Op deze manier maakt Optionaltimes/Almere niet alleen de gebruiker van de publieke ruimte zichtbaar, maar speelt ook met de illusies (en mogelijke wensen) van onze individuele invloed op de omgeving. Deze illustratie laat het meest eenvoudige voorbeeld zien van hoe de interactie tot stand komt: twee mensen staan voor het scherm, hun reflecties in de spiegel verschijnen dichter of verder van elkaar dan hun werkelijke onderlinge afstand. Een ander voorbeeld: twee vrienden (of vreemden) zitten naast elkaar op de bank voor het scherm. In de reflectie op het scherm zien ze één van beiden weglopen van de conversatie . Alle interacties zijn gebaseerd op observaties van gedragingen die zich afspelen in de publieke ruimte.</p>  <p>Concept: Susann Lekås I Vertaling: Nicoline Wijnja</p>' ;

moreT[1] = '<p>Optionaltimes/Almere is an interactive movie to be set in the eye of the polder. </p><p>Its screen is an interface between the inner world and the outer world. Optionaltimes/Almere reveals them both and allows for them to play together on the public stage. </p><p>The screen is controlled by emotions and moods. The users emotions – expressed through motions within the public space – act as the trigger that sets off the interactive domino effect. A man walks with great haste through the square, the installation senses his pace and releases images of a reality speeded up. One of our fictive characters enters the square in a rush. </p><p>The public space is oftentimes set in motion by activities made for active people. This installation is activated by the moods and emotions playing out around it. It opens up for a new set of activities by introducing a broad range of ‘mood-based activities’. It is a whisper-game of how we invent and reinvent our identity on the stage of public space. </p><p>Interactive film A film that plays out on a public square in Almere. This slice of the public space is our stage. We get to know three persons (fictive characters) by observing their behaviors. It is an interactive film depicting human behaviors in public space. Optionaltimes/Almere reveals the search for identity and the way we communicate that search through attributes. It is an interactive film about gaining territory by relating to our surroundings. Using the public space as a stage, claiming it in search for a subtle world. The movie plays out on the same location as it is viewed and elaborates around the ideal versus the real. </p><p>Involves and records Architecture is challenged by that it remains static over time, while the public culture is challenged by constant changes over time. Optionaltimes/Almere is challenged by that its fictive stage continues in reality. The installation explores our use of the public space by making it a stage to claim. </p><p>Optionaltimes/Almere is making the public space available and approachable through three different moods / archetypes. The recordings are stored in Optionaltimes/Almere and later projected back onto the square. The perception of the ‘projected recorded images’ might change with the cultural expressions over time. It will generate a record of codes / attributes that played and play out on a public square in Almere.</p>';


var prevLink = new Array(2);
prevLink[0] = '<a href="http://optionaltime.com/TM/">VORIGE OPTIONALTIMES</a>';
prevLink[1] = '<a href="http://optionaltime.com/TM/">PREVIOUS OPTIONALTIMES</a>';

var lanlnk = new Array(2);
lanlnk[0] = '<a class=lang href="javascript:swapLang();">[english]</a>';
lanlnk[1] = '<a class=lang href="javascript:swapLang();">[nederlands]</a>';

function init() {
	image = false;
	image = document.getElementById('imageLayer');
	image.dragging = false;
	image.x = -50;
	image.y = -50;
	image.src = false;
	image.imgWidth = 0;
	image.imgHeight = 0;
	image.clickX = 0;
	image.clickY = 0;
	image.minX = 0;
	image.minY = 0;
	image.newX = 0;
	image.newY = 0;
	image.speedX = 0;
	image.speedY = 0;
	image.containerWidth = 0;
	image.containerHeight = 0;
	image.onmousedown = mouseDown;
	swapLang();
	document.onmousemove = mouseMove;
	document.onmouseup = mouseUp;
	window.onresize = resizeWindow;
	sb = false;
	document.getElementById('imageSource').src=paths[0];
	setTimeout("loadImages()", 5000);
}

function loadImages() {
	images[currentImage] = new Image();
	images[currentImage].src = paths[currentImage];
	//setParameters();
	if (currentImage <= imageCount) {
		setTimeout("loadImages()",5000);
		currentImage++;
	}/* else {
		setTimeout("getRandom()", 5000);
	} */
	
	if (currentImage==3) {
		setTimeout("getRandom()", 5000);
	}
	
}

function swapLang() {
	lan = Math.abs(lan -1);
	document.getElementById('content').innerHTML = txtL[lan];
	document.getElementById('about_textbox').innerHTML = moreT[lan];
	document.getElementById('footer').innerHTML = prevLink[lan];
	document.getElementById('langlink').innerHTML = lanlnk[lan];
}
function getRandom() {
	var num = parseInt( Math.random()*currentImage -1 );
	displayImage(num);
	setTimeout("getRandom()", 4000);
}

function displayImage(n) {
	document.getElementById('imageSource').src=paths[n];
	setParameters();
}

function setParameters() {
	image.imgWidth						= document.getElementById('imageSource').width;
	image.imgHeight						= document.getElementById('imageSource').height;
	image.containerWidth				= document.getElementById('imageView').offsetWidth;
	image.containerHeight				= document.getElementById('imageView').offsetHeight;
	image.minX = image.containerWidth 	- image.imgWidth;
	image.minY = image.containerHeight 	- image.imgHeight;
	var randX = (parseInt( image.containerWidth - image.imgWidth ) )*Math.random();
	var randY = (parseInt( image.containerHeight - image.imgHeight ) )*Math.random();
	image.x = randX;
	image.y = randY;	
	image.style.left = randX + "px";
	image.style.right = randY + "px";
//	image.speedX = (Math.random()*1.5)-3;
//	image.speedY = (Math.random()*1.5)-3;
}



function moveImage() {
	if (!image.dragging) {
		image.newX = image.x + image.speedX;
		image.newY = image.y + image.speedY;
		if (image.newX > 0 ) 			image.speedX = image.speedX*-1;	image.newX = image.x + image.speedX;
		if (image.newX < image.minX)	image.speedX = image.speedX*-1;	image.newX = image.x + image.speedX;
		if (image.newY > 0 )			image.speedY = image.speedY*-1;	image.newY = image.y + image.speedY;
		if (image.newY < image.minY)	image.speedY = image.speedY*-1;	image.newY = image.y + image.speedY;
		image.style.left = parseInt(image.newX)+"px";
		image.style.top  = parseInt(image.newY)+"px";
		image.x = image.newX;
		image.y = image.newY;
		self.status = image.newY;
		//setTimeout("moveImage()",40);
	}
}

function mouseDown(e) {
	if (!e) e = window.event;
	image.dragging = true;
	image.clickX = e.clientX;
	image.clickY = e.clientY;
	return false;
}

function mouseMove(e) {
	if (!e) e = event;
	if (image.dragging) {
		var dX = image.clickX - e.clientX;
		var dY = image.clickY - e.clientY;
		image.newX = image.x - dX;
		image.newY = image.y - dY;
		if (image.newX < image.minX)	image.newX = image.minX;
		if (image.newX > 0 )			image.newX = 0;
		if (image.newY < image.minY)	image.newY = image.minY;
		if (image.newY > 0 )			image.newY = 0;
		image.style.left = image.newX+"px";
		image.style.top  = image.newY+"px";
	}
	return false;
}


function mouseUp(e) {
	image.dragging = false;
	if (image.clickX==e.clientX && image.clickY==e.clientY) {
//		getRandom();
	}
	image.x = image.newX;
	image.y = image.newY;
}


function resizeWindow() {
}

function more(flag) {
	var ID = document.getElementById('header');
	if (flag) {
		document.getElementById('about_background').style.visibility="visible";
		document.getElementById('about_textbox').style.visibility="visible";
		document.getElementById('about_textbox').style.overflow="auto";
		if (!sb) window.resizeBy(0,-1);sb=true;
		ID.innerHTML='OptionalTime<br/>Almere<br><a href="javascript:more(0);" onclick=this.blur()>less -</a>';
	} else {
		document.getElementById('about_textbox').style.overflow="hidden";
		document.getElementById('about_background').style.visibility="hidden";
		document.getElementById('about_textbox').style.visibility="hidden";
		ID.innerHTML='OptionalTimes<br/>Almere<br><a href="javascript:more(1);" onclick=this.blur()>more +</a>';
	}
}