var tmpObjectList = "";

function closeDetail() {
	/* hide the Lightbox and Detail page */
	$('detail').hide();
	$('detailcontainer').hide();
	$('detailcontainer-bg').hide();
	$('lightbox').hide();
	$('colofon').hide();
	$('colofon-bg').hide();
	$('disclaimer').hide();
	$('disclaimer-bg').hide();
	fixMacFlash('hide');
	/* maak Flash weer actief */
	makeCall();
	}
	
function closeViewer() {
	/* hide the Lightbox and Detail page */
	s0.addVariable("file", "");
	s0.write("mediaflv");
	$('lightbox_viewer').hide();
	$('viewer').hide();
	$('viewer-bg').hide();
	}
	
function closeThema() {
	/* hide themapage */
	$('thema').hide();
	$('lightbox').hide();
	fixMacFlash('hide');
	/* maak Flash weer actief */
	makeCall();
	}
		

	
/* function to get the data for the related items */
function getRelated(pageid,id,language,hoofdthemaid){

	/* first clear the related items */
	$('related').update('');
	
	
	var tmpUrl = "ajax/ajax_calls.php";
	var tmpParameters = "?action=related&iconid="+id+"&language="+language+"&hoofdthemaid="+hoofdthemaid;
	var req = new Ajax.Request(
			tmpUrl,
				{
					method: "get",
					parameters: tmpParameters,
					asynchronous: "true",
					onComplete: createRelatedNav
				}
			);
			
			function createRelatedNav(transport) {
				tmpObjectList = decodeJSON(transport.responseText);
				
			  /* Data voor related nav  */
				var navDataItems = '';
				if (language == "NL") {
				navDataItems =  navDataItems + 
				'<h4>Gerelateerd</h4>';
				} else {
				navDataItems =  navDataItems + 
				'<h4>Related</h4>';
				}
				navDataItems =  navDataItems + '<UL>';
				tmpObjectList.each(function(s) {
					navDataItems = navDataItems +
						'<li><a href="javascript:getIcon(\'detail\',\''+s.id+'\',\''+language+'\')">'+s.title+'</a></li>';
					})
				navDataItems =  navDataItems + 
				'</ul>' +
				'<br />';
				if (language == "NL") {
				navDataItems =  navDataItems + 
				'<h4>Onderdeel van</h4>';
				} else {
				navDataItems =  navDataItems + 
				'<h4>Part of</h4>';
				}
				navDataItems =  navDataItems + 
				'<ul>' +
				'<li><a href="#" onclick="getThema(\''+tmpObjectList[0]['themaid']+'\',\''+language+'\');return false;">'+tmpObjectList[0]['thema']+'</a></li>' +
				'</ul>';
				$('related').update(navDataItems);
			}
		}
		
		
/* function to get the data for the related items */
function getArtikelen(pageid,id,language){

	/* first clear the related items */
	$('subnav-themas').update('');
	
	
	var tmpUrl = "ajax/ajax_calls.php";
	var tmpParameters = "?action=artikelen&themaid="+id+"&language="+language;
	var req = new Ajax.Request(
			tmpUrl,
				{
					method: "get",
					parameters: tmpParameters,
					asynchronous: "true",
					onComplete: createArtikelenNav
				}
			);
			
			function createArtikelenNav(transport) {
				tmpObjectList = decodeJSON(transport.responseText);
				
			  /* Data voor related nav  */
			  	if (language == "NL") {
			    	var navDataItems = '<h4>Artikelen in '+tmpObjectList[0]['thema']+'</h4><ul>';
			  	} else {
					var navDataItems = '<h4>Articles in '+tmpObjectList[0]['thema']+'</h4><ul>';
			  	}

				tmpObjectList.each(function(s) {
					navDataItems = navDataItems +
						'<li><a href="javascript:getIcon(\'detail\',\''+s.id+'\',\''+language+'\')">'+s.title+'</a></li>';
					})
				navDataItems =  navDataItems + '</UL>';
				$('subnav-themas').update(navDataItems);
			}
		}
	
		
/* function to get the data for icoon and render in the detail template */
function getThema(id,language){

	var tmpUrl = "ajax/ajax_calls.php";
	var tmpParameters = "?action=thema&themaid=" + id + "&language="+language;
	var req = new Ajax.Request(
			tmpUrl,
				{
					method: "get",
					parameters: tmpParameters,
					asynchronous: "true",
					onComplete: createThemaLayer
				}
			);
			
			
			function createThemaLayer(transport) {	
				tmpObjectList = decodeJSON(transport.responseText);

				/* Set de achtegrond classes kleuren */
			
				/* First remove all classnames from layers */
				titleClassNames = $('thematitle').classNames();
				$('thematitle').removeClassName(titleClassNames);
				
				navClassNames = $('subnav-themas').classNames();
				$('subnav-themas').removeClassName(navClassNames);
				
				
				/* Set new classnames per layers */
				$('thematitle').addClassName(tmpObjectList[0]['thema']);
				$('subnav-themas').addClassName(tmpObjectList[0]['thema']+'_licht');
				
				
				/* Data voor foto/film div */
				var FotoData = '<img src="footage/'+tmpObjectList[0]['foto_hoofd']+'" border="0" alt="'+tmpObjectList[0]['title']+'" width="997" height="301" />';
				$('themafilm').update(FotoData);
				
				/* Data voor title div */
				var TitleData = '<img src="images/title_'+tmpObjectList[0]['thema']+'_large.gif" border="0" alt="'+tmpObjectList[0]['title']+'" width="299" height="39" class="title" />';
				$('thematitle').update(TitleData);
				
				/* Data voor content div */
				var contentData = '';
				contentData	=	contentData +
				'<p>' +tmpObjectList[0]['beschrijving']+'</p>';

				$('verhaal').update(contentData);

				/* call the relateditems function to fill the navigation */
				getArtikelen('artikelen',id,language);
				
				/* Hide detail, viewer and show thema */
				$('detailcontainer-bg').hide();
				$('detailcontainer').hide();
				$('detail').hide();
				$('thema').show();

			}
		
		}

/* function to get the data for icoon and render in the detail template */
function getIcon(pageid,id,language){
	var tmpUrl = "ajax/ajax_calls.php";
	var tmpParameters = "?action=detail&iconid=" + id + "&language="+language;
	var req = new Ajax.Request(
			tmpUrl,
				{
					method: "get",
					parameters: tmpParameters,
					asynchronous: "true",
					onComplete: createDetailLayer
				}
			);
			
			
			function createDetailLayer(transport) {
				tmpObjectList = decodeJSON(transport.responseText);
				
		
				/* Set de achtegrond classes kleuren */
				
				/* First remove all classnames from layers */
				titleClassNames = $('title').classNames();
				$('title').removeClassName(titleClassNames);
				
				browserClassNames = $('browser').classNames();
				$('browser').removeClassName(browserClassNames);
				
				navClassNames = $('nav').classNames();
				$('nav').removeClassName(navClassNames);
				
				/* Set new classnames per layers */
				$('title').addClassName(tmpObjectList[0]['thema']);
				$('browser').addClassName(tmpObjectList[0]['thema']+'_half');
				$('nav').addClassName(tmpObjectList[0]['thema']+'_licht');
				
				/* Data voor foto div */
				var FotoData = '<img src="footage/'+tmpObjectList[0]['foto_hoofd']+'" border="0" alt="'+tmpObjectList[0]['title']+'" width="540" height="200" />';
				$('foto').update(FotoData);
				
				/* Data voor icoon div */
				var IcoonData = '<img src="footage/thumbnails/'+tmpObjectList[0]['icoon_afbeelding']+'" border="0" alt="'+tmpObjectList[0]['title']+'" />';
				$('icon').update(IcoonData);
				
				
				/* Data voor title div */
				var TitleData = '<img src="images/title_'+tmpObjectList[0]['thema']+'.gif" width="300" height="25" border="0" alt="'+tmpObjectList[0]['title']+'" />';
				$('title').update(TitleData);
				
				
				/* Data voor content div */
				var contentData = '';
				contentData	=	contentData +
				'<h2>'+tmpObjectList[0]['jaartal']+'&nbsp;<strong>'+tmpObjectList[0]['title']+'</strong></h2>' +
				'<p>' +tmpObjectList[0]['beschrijving']+'</p>';

				$('content').update(contentData);
				
				
				
			  /* Data voor browser (thumbs) div Images en Video */
			  var thumbCount = $R(1, 7).toArray();
			  var thumbVideoCount = $R(1, 2).toArray();
			  var i = "1";
				var browserDataItems = '';

				thumbCount.each(function(s) {
					Fieldname 		= 'foto_'+s;
					FieldnameReal = 'foto_'+i;
					if (tmpObjectList[0][Fieldname] != '') {
					browserDataItems = browserDataItems +
					'<div class="thumb">' +
							'<img src="footage/thumbnails/th_'+tmpObjectList[0][Fieldname]+'" width="42" height="49" border="0" alt="" />' +
							'<a href="javascript:getViewer(\'viewer\',\''+tmpObjectList[0]['id']+'\',\''+language+'\',\''+FieldnameReal+'\')" title="Zoom"></a>' +
					'</div>';
					i++;
					} 
				})
				
				i = "1";
				thumbVideoCount.each(function(s) {
					Fieldname = 'video_'+s;
					FieldnameReal = 'video_'+i;
					if (tmpObjectList[0][Fieldname] != '') {
					
					extsplit = tmpObjectList[0][Fieldname].split(".");
					fileName = extsplit[0];

					browserDataItems = browserDataItems +
					'<div class="thumb">' +
							'<img src="footage/thumbnails/thumb_'+fileName+'.jpg" width="42" height="49" border="0" alt="" />' +
							'<a href="javascript:getViewer(\'viewer\',\''+tmpObjectList[0]['id']+'\',\''+language+'\',\''+FieldnameReal+'\')" title="Zoom"></a>' +
					'</div>';
					i++;
					} 
				})
				
				$('thumbs_main').update(browserDataItems);

				/* call the relateditems function to fill the navigation */
				getRelated('related',tmpObjectList[0]['related'],language,tmpObjectList[0]['hoofdthemaid']);
				
				/* Show the Lightbox and Detail page */
				fixMacFlash('show',language);
				$('thema').hide();
				$('lightbox').show();
				$('detailcontainer-bg').show();
				$('detailcontainer').show();
				$('detail').show();

			}

		}
		


/* function to get the data for viewer and render in the viewer template */
function getViewer(pageid,id,language,mediafield){
	var tmpUrl = "ajax/ajax_calls.php";
	var tmpParameters = "?action=viewer&iconid=" + id + "&language="+language;
	var req = new Ajax.Request(
			tmpUrl,
				{
					method: "get",
					parameters: tmpParameters,
					asynchronous: "true",
					onComplete: createViewerLayer
				}
			);
			
			
			function createViewerLayer(transport) {
				tmpObjectList = decodeJSON(transport.responseText);
				extsplit = tmpObjectList[0][mediafield].split(".");
				fileExt = extsplit[1].toLowerCase();
				
				/* initieer flvplayer */
				s0 = new SWFObject("flv_player.swf", "flvplayer", "550", "390", "7");
				s0.write("mediaflv");
				
				
				/* First remove all classnames from layers */
				titleClassNames = $('title_viewer').classNames();
				$('title_viewer').removeClassName(titleClassNames);
				$('title_viewer').addClassName(tmpObjectList[0]['thema_color']);


				/* Data voor title div */
				var TitleData = '' +
				'<a href="javascript:closeViewer();" class="close_window" title="close"></a>' +
				'<h3><strong>'+tmpObjectList[0]['thema']+'</strong> '+tmpObjectList[0]['jaartal']+'&nbsp;&nbsp;<strong>'+tmpObjectList[0]['title']+'</strong></h3>';
				$('title_viewer').update(TitleData);
				

		
				/* Bepalen breedte van afbeelding, wanneer 580 breed of breder, het bijschrift onder de foto plaatsen */
			
				
				/* controle of het video of plaatje is */
				if (fileExt == 'flv') {

					so.addParam("allowfullscreen","true");
					s0.addVariable("width","550");
					s0.addVariable("height","390");
					s0.addVariable("autostart","true");
					s0.addVariable("bufferlength","10"); 
					s0.addVariable("file", "footage/video/"+tmpObjectList[0][mediafield]);
					s0.write("mediaflv");
					$('media-tekst').removeClassName('tekststaand');
					$('media-tekst').addClassName('tekstliggend');
					$('media').hide();
					$('mediaflv').show();
					
				} else {
					
					s0.addVariable("file", "");
					s0.write("mediaflv");
					$('flvplayer').hide();
					$('mediaflv').hide();
					
					/* Het is een afbeelding, bepalen of het staand of liggend is */
					var img = new Image();
					img.src = 'http://www.project-westergasfabriek.nl/footage/'+tmpObjectList[0][mediafield];
					img.onload = function()
					{
						var width = img.width;
						if (width > '550') {
							$('media-tekst').removeClassName('tekststaand');
							$('media-tekst').addClassName('tekstliggend');
						} else {
							$('media-tekst').removeClassName('tekstliggend');
							$('media-tekst').addClassName('tekststaand');
						}
										
				$('media-tekst').show();
					}
						
				MediaData = '<img src="footage/'+tmpObjectList[0][mediafield]+'" border="0" alt="'+tmpObjectList[0]['title']+'"  class="foto_detail"  />';
				$('media').update(MediaData);
				$('media').show();
			}

				
				
				
				/* Data voor content div */
				if (language == "NL") {
					labelBron = '&copy; ';
				} else {
					labelBron = '&copy; ';
				}
				var contentData = '' +
				tmpObjectList[0][mediafield+'_bijschrift']+
				'<br />'+
				'<br />'+
				'<span class="roze">'+labelBron+' </span>'+tmpObjectList[0][mediafield+'_bron'];

				$('media-tekst').update(contentData);

				
			  /* Data voor browser (thumbs) div Images en Video */
			  var thumbCount = $R(1, 7).toArray();
			  var thumbVideoCount = $R(1, 2).toArray();
			  var i = "1";
				var browserDataItems = '';
				
				thumbCount.each(function(s) {
					Fieldname 		= 'foto_'+s;
					FieldnameReal = 'foto_'+i;
					if (tmpObjectList[0][Fieldname] != '') {
					browserDataItems = browserDataItems +
					'<div class="thumb">' +
							'<img src="footage/thumbnails/smaller/th_'+tmpObjectList[0][Fieldname]+'" width="30" height="35" border="0" alt="" />' +
							'<a href="javascript:getViewer(\'viewer\',\''+tmpObjectList[0]['id']+'\',\''+language+'\',\''+FieldnameReal+'\')" title="Zoom"></a>' +
					'</div>';
					i++;
					} 
				})
				
				i = "1";
				
				thumbVideoCount.each(function(s) {
					Fieldname = 'video_'+s;
					FieldnameReal = 'video_'+i;
					if (tmpObjectList[0][Fieldname] != '') {
					
					extsplit = tmpObjectList[0][Fieldname].split(".");
					fileName = extsplit[0];
					
					browserDataItems = browserDataItems +
					'<div class="thumb">' +
							'<img src="footage/thumbnails/smaller/thumb_'+fileName+'.jpg" width="30" height="35" border="0" alt="" />' +
							'<a href="javascript:getViewer(\'viewer\',\''+tmpObjectList[0]['id']+'\',\''+language+'\',\''+FieldnameReal+'\')" title="Zoom"></a>' +
					'</div>';
					i++;
					} 
				})
				
				$('thumbs_viewer').update(browserDataItems);
				

				
				/* call the relateditems function to fill the navigation */
				//getRelated('related',tmpObjectList[0]['related'],language);
				
				/* Show the Lightbox and Detail page */
				$('lightbox_viewer').show();
				$('viewer-bg').show();
				$('viewer').show();

			}

		
		}