/*
	Lightbox JS: Fullsize Image Overlays
	by Lokesh Dhakar - http://www.huddletogether.com

	For more information on this script, visit:
	http://huddletogether.com/projects/lightbox2/

	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
	(basically, do anything you want, just leave my name and link)

	Table of Contents
	-----------------
	Configuration

	Functions
	- getPageScroll()
	- getPageSize()
	- pause2()
	- getKey2()
	- listenKey()
	- showLightbox2()
	- hideLightbox2()
	- initLightbox2()
	- addLoadEvent()

	Function Calls
	- addLoadEvent(initLightbox2)

*/



//
// Configuration
//

// If you would like to use a custom loading image or close button reference them in the next two lines.
var loadingImage = '../images/loading.gif';
var closeButton = '../images/close.gif';





//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
	}

	arrayPageScroll = new Array('',yScroll)
	return arrayPageScroll;
}



//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){

	var xScroll, yScroll;

	if (window.innerHeight && window.scrollMaxY) {
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}

	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else {
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}
	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
	return arrayPageSize;
}


//
// pause2(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
//
function pause2(numberMillis) {
	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true) {
		now = new Date();
		if (now.getTime() > exitTime)
			return;
	}
}

//
// getKey2(key)
// Gets keycode. If 'x' is pressed then it hides the lightbox2.
//

function getKey2(e){
	if (e == null) { // ie
		keycode = event.keyCode;
	} else { // mozilla
		keycode = e.which;
	}
	key = String.fromCharCode(keycode).toLowerCase();
	if(key == 'x'){ hideLightbox2(); }
}


//
// listenKey()
//
function listenKey () {
	
	document.onkeypress = getKey2;
}
//
// showLightbox2()
// Preloads images. Pleaces new image in lightbox2 then centers and displays.
//
function showLightbox2(objLink) {
	var embed = '';
	if(objLink == 'reactie')
	{
		embed = '<textarea style="height:400px; width:550px"></textarea>';
		showLightboxContent(objLink, embed);
	}
	else
	{
		showLightboxAjax(objLink);
	}
}

function showLightboxAjax(objLink) {
	var rel = objLink.getAttribute('rel');
	switch(rel)
	{
		case 'foto':
            var vriend = $('#friend').val();
            $('#friend').val('');
            $.ajax({
					type: "GET",
					dataType: "json",
					cache: false,
					global: false,
					url: base_path+"ajax.php",
					data: 'page=redirect&action=word_vriend&id=' + vriend,
					success: function(json){
                        showLightboxContent(objLink,'<img src="' +objLink.getAttribute('href')+ '"/>');
					}
				});
			break;
		case 'doorsturen':
			showLightboxContent(objLink,'<form action="' +objLink.getAttribute('href')+ '" method="POST" id="nieuws_doorsturen">\n\
						<input type="hidden" name="link" value="' +objLink.getAttribute('link')+ '" /> \n\
							<table align="center" width="400">\n\
								<tr>\n\
									<td align="left" width="100px">naam:</td>\n\
									<td align="left" id="naam"><input type="text" name="naam" /></td>\n\
								</tr>\n\
								<tr>\n\
									<td align="left">email:</td>\n\
									<td align="left" id="email"><input type="text" name="email" /></td>\n\
								</tr>\n\
								<tr>\n\
									<td align="left">vriends naam:</td>\n\
									<td align="left" id="v_naam"><input type="text" name="v_naam" /></td>\n\
								</tr>\n\
								<tr>\n\
									<td align="left">vriends email:</td>\n\
									<td align="left" id="v_email"><input type="text" name="v_email" /> </td>\n\
								</tr>\n\
								<tr>\n\
									<td align="left">bericht:</td>\n\
									<td align="left"><textarea name="tekst"></textarea></td>\n\
								</tr>\n\
								<tr>\n\
									<td align="left">&nbsp;</td>\n\
									<td align="right"><input type="button" name="submit" value="verstuur" onclick="doorsturen();" /></td>\n\
								</tr>\n\
							</table>\n\
							</form>');
			break;
		case 'embeb':
				var info = objLink.getAttribute('href');
                info = info.split('/');
                var eerste = info.length - 1;



				$.ajax({
					type: "GET",
					dataType: "json",
					cache: false,
					global: false,
					url: base_path+"ajax.php",
					data: 'page=nieuws&action=get_video_embeb&id=' + info[eerste],
					success: function(json){
						showLightboxContent(objLink, json);
					}
				});
			break;
                case 'beeld':
                    var info = objLink.getAttribute('href');
                    info = info.split('/');

                    var eerste = info.length - 2;
                    
                    $.ajax({
					type: "GET",
					dataType: "json",
					cache: false,
					global: false,
					url: base_path+"ajax.php",
					data: 'page=beeld&action=get_embeb&id=' + info[(eerste + Number(1))] + '&cat='+info[eerste],
					success: function(json){
                        if(json.type == 'success')
                        {
                            showLightboxContent(false, json.gegevens);
                        }
                        else
                        {
                            alert('er is iets fout gegaan.\n Mocht dit probleem zich blijven voordoen neem contact op met tgpl.nl');
                        }
						
					}
				});
                    return false;
                    break;
        case 'kennis':
                    var info = objLink.getAttribute('href');
                    info = info.split('/');

                    var eerste = info.length - 1;

                    $.ajax({
					type: "GET",
					dataType: "json",
					cache: false,
					global: false,
					url: base_path+"ajax.php",
					data: 'page=kennis&action=get_embeb&id=' + info[eerste],
					success: function(json){
                        if(json.type == 'success')
                        {
                            showLightboxContent(false, json.gegevens);
                        }
                        else
                        {
                            alert('er is iets fout gegaan.\n Mocht dit probleem zich blijven voordoen neem contact op met tgpl.nl');
                        }

					}
				});
                break;
           case 'waarom':
               showLightboxContent(objLink, '\n\
                <embed height="270" width="480" type="application/x-shockwave-flash" src="http://www.zie.nl/swf/player/myzie.swf" quality="high"allowfullscreen="true"allowscriptaccess="always"wmode="transparent"flashvars ="autostart=false&amp;displaywidth=480&amp;displayheight=270&amp;streamscript=http://bin.ilsemedia.nl/m/&amp;flashvars=&amp;file=http://www.zie.nl/xml/embed/m1dz4uafi3vw/&amp;fullscreen=true&amp;repeat=true&amp"/>');
           break;
		default:
			showLightboxContent(objLink, '\n\
		<object codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"\n\
			width="550"\n\
			height="400"\n\
			id="flashMovie">\n\
			<param name="movie" value="'+objLink.getAttribute('href')+'" />\n\
			<param name="quality" value="high" />\n\
			<param name="bgcolor" value="#ffffff" />\n\
			<embed id="film_id" \n\
					src="'+objLink.getAttribute('href')+'"\n\
				   quality="high"\n\
				   bgcolor="#ffffff"\n\
				   width="550"\n\
				   height="400"\n\
				   name="flashMovie"\n\
				   allowScriptAccess="sameDomain"\n\
				   type="application/x-shockwave-flash"\n\
				   pluginspage="http://www.macromedia.com/go/getflashplayer" />\n\
			</object>\n\
			');
	}
}

function showLightboxContent(objLink, embeb)
{
	// prep objects
	var objOverlay = document.getElementById('overlay2');
	var objLightbox = document.getElementById('lightbox2');
	var objCaption = document.getElementById('lightbox2Caption');
	var objLightboxDetails = document.getElementById('lightbox2Details');



	var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();

	// center loadingImage if it exists
	

	// set height of Overlay to take up whole page and show
	objOverlay.style.height = (arrayPageSize[3] + 'px');
	objOverlay.style.display = 'block';

	// preload image
	

	objLightbox.style.display = 'inline';
    /*
*/
    if(objLink == false)
    {
        $('#obj_swf').html(embeb.bronhtml);
        $('#film_titel').html('<h3>'+embeb.titel+'</h3>');
        $('#omschrijving').html(embeb.tekst);
    }
    else
    {
        $('#obj_swf').html(embeb);
        if(objLink == 'reactie')
        {
            var titel = false;
        }
        else
            {
                 var titel = objLink.getAttribute('titel');
            }

        //var titel = false;

        if(titel)
        {
                $('#film_titel').html('<h3>'+objLink.getAttribute('titel')+'</h3>');
                $('#omschrijving').html(objLink.getAttribute('omschrijving'));
        }
        else
        {
                $('#film_titel').html('');
                $('#omschrijving').html('');
        }
        $('#lightbox2Caption').show();
    }

    var width = Number(objLightbox.offsetWidth) / 2;
	objLightbox.style.left = '50%';
	objLightbox.style.top= '50%';
	objLightbox.style.margin = '-270px 0 0 -'+width+'px';
}


//
// hideLightbox2()
//
function hideLightbox2()
{
	// get objects
	objOverlay = document.getElementById('overlay2');
	objLightbox = document.getElementById('lightbox2');

	// hide lightbox2 and overlay2
	objOverlay.style.display = 'none';
	objLightbox.style.display = 'none';

	// make select boxes visible
	selects = document.getElementsByTagName("select");
    for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "visible";
	}

	// disable keypress listener
	document.onkeypress = '';
}


function ini_flash_light()
{
    if (!document.getElementsByTagName){ return; }
	var anchors = document.getElementsByTagName("a");
    
    for (var i=0; i<anchors.length; i++){
		var anchor = anchors[i];

		if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "film" ||
			anchor.getAttribute("rel") == "foto" ||
			anchor.getAttribute("rel") == "doorsturen"||
			anchor.getAttribute("rel") == "beeld"||
			anchor.getAttribute("rel") == "embeb" ||
			anchor.getAttribute("rel") == "kennis" ||
			anchor.getAttribute("rel") == "waarom"
		)){
			anchor.onclick = function () {
				showLightbox2(this); return false;}
		}
	}
}

//
// initLightbox2()
// Function runs on window load, going through link tags looking for rel="lightbox2".
// These links receive onclick events that enable the lightbox2 display for their targets.
// The function also inserts html markup at the top of the page which will be used as a
// container for the overlay2 pattern and the inline image.
//
function initLightbox2()
{

	if (!document.getElementsByTagName){ return; }
	var anchors = document.getElementsByTagName("a");

	// loop through all anchor tags
	for (var i=0; i<anchors.length; i++){
		var anchor = anchors[i];


		if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "film" ||
			anchor.getAttribute("rel") == "foto" ||
			anchor.getAttribute("rel") == "doorsturen"||
			anchor.getAttribute("rel") == "beeld"||
			anchor.getAttribute("rel") == "embeb" ||
			anchor.getAttribute("rel") == "kennis" ||
			anchor.getAttribute("rel") == "waarom"
		)){
			anchor.onclick = function () {
				showLightbox2(this); return false;}
		}
	}
	
	// the rest of this code inserts html at the top of the page that looks like this:
	//
	// <div id="overlay2">
	//		<a href="#" onclick="hideLightbox2(); return false;"><img id="loadingImage" /></a>
	//	</div>
	// <div id="lightbox2">
	//		<a href="#" onclick="hideLightbox2(); return false;" title="Click anywhere to close image">
	//			<img id="closeButton" />
	//			<img id="lightbox2Image" />
	//		</a>
	//		<div id="lightbox2Details">
	//			<div id="lightbox2Caption"></div>
	//			<div id="keyboardMsg"></div>
	//		</div>
	// </div>

	var objBody = document.getElementsByTagName("body").item(0);

	// create overlay2 div and hardcode some functional styles (aesthetic styles are in CSS file)
	var objOverlay = document.createElement("div");
	objOverlay.setAttribute('id','overlay2');
	objOverlay.style.display = 'none';
	objOverlay.style.position = 'fixed';
	objOverlay.style.zIndex = '90';
	objOverlay.style.top = '0px';
	objOverlay.style.left = '0px';
	objOverlay.style.width = '100%';
	objBody.insertBefore(objOverlay, objBody.firstChild);

	var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();

	// create lightbox2 div, same note about styles as above
	var objLightbox = document.createElement("div");
	objLightbox.setAttribute('id','lightbox2');
	objLightbox.style.display = 'none';
	objOverlay.style.zIndex = '100';
	objLightbox.style.position = 'fixed';
	objBody.insertBefore(objLightbox, objOverlay.nextSibling);
	//objOverlay.appendChild(objLightbox);


	// create details div, a container for the caption and keyboard message

	
	/*var lightboxheader = document.createElement("div");
	lightboxheader.setAttribute('id','lightboxheader');
	lightboxheader.onclick = function () {hideLightbox2(); return false;}
	lightboxheader.style.zIndex = '150';
	lightboxheader.style.position = 'relative';*/
	
	lightboxheader = '\n\
        <table cellpadding="0" cellspacing="0" style="z-index:200;">\n\
            <tr>\n\
                <td colspan="3"><div class="sluit_lightbox" onclick="hideLightbox2();">&nbsp;</div></td>\n\
            </tr>\n\
            <tr>\n\
                <td class="hoekje1"></td>\n\
                <td class="table">&nbsp;</td>\n\
                <td class="table">&nbsp;</td>\n\
            </tr>\n\
            <tr class="table">\n\
                <td>&nbsp;</td>\n\
                <td>\n\
                    <div id="lightboxcontent" style="position: relative;">\n\
                        <div id="film_titel" style="position: relative;"/>\n\
                        <div id="keyboardMsg" style="position: relative;"/>\n\
                        <div id="obj_swf"></div>\n\
                        <div id="omschrijving"/>\n\
                    </div>\n\
                </td>\n\
                <td>&nbsp;</td>\n\
            </tr>\n\
            <tr>\n\
                <td class="hoekje2"></td>\n\
                <td class="table">&nbsp;</td>\n\
                <td class="hoekje3"></td>\n\
            </tr>\n\
       </table>\n\
       ';





        $('#lightbox2').append(lightboxheader);

/*
	
	// create details div, a container for the caption and keyboard message
	var lightboxcontent = document.createElement("div");
	lightboxcontent.setAttribute('id','lightboxcontent');
	lightboxcontent.style.position = 'relative';
	objOverlay.style.zIndex = '100';
	objLightbox.appendChild(lightboxcontent);
	// create details div, a container for the caption and keyboard message
	var lightboxfooter = document.createElement("div");
	lightboxfooter.setAttribute('id','lightboxfooter');
	lightboxfooter.style.position = 'relative';
	objLightbox.appendChild(lightboxfooter);

	// create keyboard message
	var objKeyboardMsg = document.createElement("div");
	objKeyboardMsg.setAttribute('id','film_titel');
	objKeyboardMsg.style.position = 'relative';
	objOverlay.style.zIndex = '100';
	objKeyboardMsg.innerHTML = '';
	lightboxcontent.appendChild(objKeyboardMsg);

	// create keyboard message
	var objKeyboardMsg = document.createElement("div");
	objKeyboardMsg.setAttribute('id','keyboardMsg');
	objKeyboardMsg.style.position = 'relative';
	objOverlay.style.zIndex = '100';
	lightboxcontent.appendChild(objKeyboardMsg);
	$('#lightboxcontent').append('<div id="obj_swf"></div><div id="omschrijving"></div>');
*/

/*
	// create link
	var objLink = document.createElement("a");
	objLink.setAttribute('href','#');
	objLink.setAttribute('title','Click to close');
	objLink.onclick = function () {hideLightbox2(); return false;}
	objLightbox.appendChild(objLink);

	// preload and create close button image
	var imgPreloadCloseButton = new Image();

	// if close button image found,
	imgPreloadCloseButton.onload=function(){

		var objCloseButton = document.createElement("img");
		objCloseButton.src = closeButton;
		objCloseButton.setAttribute('id','closeButton');
		objCloseButton.style.position = 'absolute';
		objCloseButton.style.zIndex = '200';
		objLink.appendChild(objCloseButton);

		return false;
	}

	imgPreloadCloseButton.src = closeButton;
*//*
	var objImage = document.createElement("object");
	objImage.setAttribute('id', 'lightbox2_film');
	objImage.setAttribute('width', '630');
	objImage.setAttribute('height', '360');
	objLightbox.appendChild(objImage);

	var objParam2 = document.createElement("param");
	objParam2.setAttribute('name', 'FileName');
	objParam2.setAttribute('value', '');
	objImage.appendChild(objParam2);

	var objParam3 = document.createElement("param");
	objParam3.setAttribute('name', 'ShowStatusBar');
	objParam3.setAttribute('value', 'True');
	objImage.appendChild(objParam3);

	var objParam4 = document.createElement("param");
	objParam4.setAttribute('name', 'DefaultFrame');
	objParam4.setAttribute('value', 'mainFrame');
	objImage.appendChild(objParam4);
*/

	

/*
	var objEmbed = document.createElement("embed");
	objEmbed.setAttribute('type', 'application/x-shockwave-flash');

	objEmbed.setAttribute('src', '');
	objEmbed.setAttribute('id', 'film_id');
	objEmbed.setAttribute('align', 'center');
	objEmbed.setAttribute('width', '630');
	objEmbed.setAttribute('height', '360');
	objEmbed.setAttribute('defaultframe', 'rightFrame');
	objEmbed.setAttribute('showstatusbar', 'true');

*/
	//objImage.appendChild(objEmbed);


	// create keyboard message
	//var objKeyboardMsg = document.createElement("div");
	//objKeyboardMsg.setAttribute('id','omschrijving');
	//objKeyboardMsg.innerHTML = '';
	//objImage.appendChild(objKeyboardMsg);



}




//
// addLoadEvent()
// Adds event to window.onload without overwriting currently assigned onload functions.
// Function found at Simon Willison's weblog - http://simon.incutio.com/
//
function addLoadEvent2(func)
{
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
    	window.onload = func;
	} else {
		window.onload = function(){
		oldonload();
		func();
		}
	}

}



addLoadEvent2(initLightbox2);	// run initLightbox2 onLoad