var currentPhoto = 0;
	var steps = 8;
	var blnDebug = false;
	var blnSentafriendActive = false;
	var linkArray = new Array();
	
	Event.observe(
		window, 'load', function() {
			initBrowser();
			if(blnImageBox) imageGallery();
			setHover();
			if($('browser')) sentaFriendLink();
			//setHover('mainmenu','li');
		}
	);

	Event.observe(document, 'keydown', function(e) {onKeydown(e); }	);
	
	function onKeydown(e){
		switch(e.keyCode){
			case 13:
				handleEnterKey(e);
				break
		}
	}
	
	function handleEnterKey(evt){
		var elmnt = Event.element(evt);
		if(blnSentafriendActive && elmnt.id!="sentafriend_field_message"){
			$('sentafriend_submit').click();
		}
	}

	function sentaFriendLink(){
		var span;
		span = new Element('span',{'id':'sentafriend'}).update('Stuur dit door');
		$('leftcolumn').appendChild(span);
		span.onclick = function(){
			SentafriendForm();
			Overlay();
			blnSentafriendActive = true;
			$('formbox_container').style.display='block';
		}
		formboxcontainer = new Element('div',{'id':'formbox_container'});
		formbox = new Element('div',{'id':'formbox'});
		objBody = document.getElementsByTagName("body").item(0);
		objBody.appendChild(formboxcontainer);
		formboxcontainer.appendChild(formbox);
		SentafriendForm();
	}

	function SentafriendForm(){
		var div,title,error,span,field,submit,close;
		div = new Element('div',{'id':'sentafriend_form'});
		
		title = new Element('p',{'id':'formbox_title'}).update('<b>'+sentafriend_title+'</b> op www.zeilwerk.nl');
		div.appendChild(title);
		error = new Element('p',{'id':'formbox_error'}).update('&#160;');
		div.appendChild(error);

		span = new Element('span').update('Je naam');
		field = new Element('input',{'type':'text','id':'sentafriend_field_name'});
		div.appendChild(span);div.appendChild(field);

		div.appendChild(new Element('br'));

		span = new Element('span').update('Je e-mail');
		field = new Element('input',{'type':'text','id':'sentafriend_field_from'});
		div.appendChild(span);div.appendChild(field);

		div.appendChild(new Element('br'));

		span = new Element('span').update('Zijn/haar e-mail');
		field = new Element('input',{'type':'text','id':'sentafriend_field_to'});
		div.appendChild(span);div.appendChild(field);

		div.appendChild(new Element('br'));

		span = new Element('span').update('Bericht');
		field = new Element('textarea',{'cols':30,'rows':4,'id':'sentafriend_field_message'});
		div.appendChild(span);div.appendChild(field);

		span = new Element('span').update('&#160;');
		submit = new Element('input',{'type':'button','id':'sentafriend_submit','class':'submit','value':'Verstuur'});
		div.appendChild(span);div.appendChild(submit);
		submit.onclick = function(){
			validateSentafriend();
		}
		
		close = new Element('div',{'id':'formbox_close','title':'sluiten'}).update('Sluit scherm');
		close.onclick = function(){
			hideFormBox();
		}

		$('formbox').innerHTML = '';
		$('formbox').appendChild(div);
		$('formbox').appendChild(close);
	}

	var errFunc = function(t) {
		//alert('Error ' + t.status + ' -- ' + t.statusText);
	}
	
	function validateSentafriend(){
		var strparams = "?s=1"; 
		strparams += '&name='+$('sentafriend_field_name').value;
		strparams += '&from='+$('sentafriend_field_from').value;
		strparams += '&to='+$('sentafriend_field_to').value;
		strparams += '&message=' + escape($('sentafriend_field_message').value);
		strparams += '&blog=' + escape(sentafriend_title);
		strparams += '&url=' + sentafriend_url + escape(document.location.search);
		new Ajax.Request('/_inc/sentafriend.php',{method:'post', parameters:strparams, onSuccess:newCalendarResponse, onFailure:errFunc});
	}
	
	function newCalendarResponse(t){ 
		var xmlDoc,result,description,field;
		xmlDoc = t.responseXML;
		result = xmlDoc.documentElement.getAttribute('value');
		description = xmlDoc.documentElement.getAttribute('description');
		field = xmlDoc.documentElement.getAttribute('field');
		if(result == 'failed'){
			$('formbox_error').update(description);
			$(field).focus();
		}
		else{
			$('sentafriend_form').innerHTML = "";
			var p = new Element('p').update(description);
			$('sentafriend_form').appendChild(p);
		}
	}

	function hideFormBox(){
		blnSentafriendActive = false;
		$('formbox_container').style.display='none';
		hideOverlay();
	}
	
	function setHover() {
		var listitems = document.getElementsByTagName('li');
		for (var i=0; i<listitems.length; i++) {
			listitems[i].onmouseover = function(){
				this.className = this.className + ' hover'; 
			}
			listitems[i].onmouseout = function(){
				this.className=this.className.replace("hover", "");
			}
		}
	}
	
	sIFR.prefetch(
	{
		src: '/_img/britanic.swf', 
		highsrc: '/_img/britanic.swf'
	});

	sIFR.compatMode = true;
	sIFR.activate();

	sIFR.replace(
	{
		selector: '.leftcolumn h1', 
		src: '/_img/britanic.swf', 
		highsrc: '/_img/britanic.swf',
		wmode: 'transparent',
		css: {'.sIFR-root': { 'background-color': '#313131', 'color': '#87BBCD' }}
	});
	sIFR.replace(
	{
		selector: '.leftcolumn h2', 
		src: '/_img/britanic.swf', 
		highsrc: '/_img/britanic.swf',
		wmode: 'transparent',
		css: {'.sIFR-root': { 'background-color': '#313131', 'color': '#87BBCD' }}
	});
	sIFR.replace(
	{
		selector: '.leftcolumn h3', 
		src: '/_img/britanic.swf', 
		highsrc: '/_img/britanic.swf',
		wmode: 'transparent',
		css: {'.sIFR-root': { 'background-color': '#313131', 'color': '#87BBCD' }}
	});

	sIFR.replace(
	{
		selector: '.rightcolumn h3', 
		src: '/_img/britanic.swf', 
		highsrc: '/_img/britanic.swf',
		wmode: 'transparent',
		css: {
			'.sIFR-root': { 'background-color': '#484848', 'color': '#87BBCD' },
			'a': { 'text-decoration': 'none' },
			'a:link': { 'color': '#87BBCD' },
			'a:hover': { 'color': '#dddddd' }
			}
	});

	
	function popwindow(strURL,windowname,popwidth,popheight,features){
		var strfeatures;
		strfeatures = 'width='+popwidth+',height='+popheight+','+features;
		if(window.screen){
			var WindowLeft = (screen.width-popwidth)/2;
			var WindowTop = (screen.height-popheight)/2;
			strfeatures = 'top='+WindowTop+',left='+WindowLeft+','+strfeatures;
		}
		var openen=window.open(strURL,windowname,strfeatures);
		openen.focus();
		return false;
	}

	function imageGallery(){
		var images,imgboxcontainer,imgbox,imgboxClose,objBody;
		
		images = $$('div.leftcolumn img');
		for(i=0;i<images.length;i++){
			images[i].className = 'link';
			images[i].title = 'vergroten: ' + images[i].alt;
			images[i].onclick = function(){
				ImageBox(this.src);
			}
		} 
		if(images.length>0){
			imgboxcontainer = new Element('div',{'id':'ImageBox_container'});
			imgbox = new Element('div',{'id':'ImageBox'});
			imgboxClose = new Element('div',{'id':'ImageBox_close','title':'sluiten'}).update('&#160;');
			imgboxClose.style.display='none';
			imgboxClose.onclick = function(){
				hideImageBox();
			}
			objBody = document.getElementsByTagName("body").item(0);
			objBody.appendChild(imgboxcontainer);
			imgboxcontainer.appendChild(imgbox);
			imgbox.appendChild(imgboxClose);
		}
	}

	function ImageBox(strSrc){
		Overlay();
		$('ImageBox_container').style.display='block';
        var imgPreloader = new Image();
		imgPreloader.onload = function(){
			var arrImageBoxdimensions = $('ImageBox').getDimensions();
			var img = new Element('img',{'id':'ImageBoxImage','src':this.src});
			img.style.display='none';
			$('ImageBox').appendChild(img);
	        var xScale = ((this.width+10)  / arrImageBoxdimensions.width)  * 100;
	        var yScale = ((this.height+10) / arrImageBoxdimensions.height) * 100;
			new Effect.Scale($('ImageBox'), xScale, {scaleY: false, duration: 0.4, queue: 'end'}); 
			new Effect.Scale($('ImageBox'), yScale, {scaleX: false, duration: 0.4, queue: 'end'}); 
			new Effect.Appear($('ImageBoxImage'), {duration: 0.3, queue: 'end'});
			new Effect.Appear($('ImageBox_close'), {duration: 0.3, queue: 'end'});
		}
		imgPreloader.src = strSrc;
	}

	function hideImageBox(){
		$('ImageBoxImage').remove();
		$('ImageBox_container').style.display = "none";
		$('ImageBox_close').style.display='none';
		hideOverlay();
	}
	
	function renderLinklist(){
		var start,end;
		start = parseInt(currentPhoto)-5;
		if(start>photos.length-10) start = photos.length-10;
		if(start<0) start = 0;
		end = start+10;
		if(end>photos.length) end = photos.length;
		$('browser_linklist').innerHTML = '';
		if(start>0){
			dash = new Element('span',{'class':'dots'}).update('...');
			$('browser_linklist').appendChild(dash);
		}
		for(i = start;i<end;i++){
			var link = document.createElement('span');
			linkArray.push(link);
			link.unselectable = 'unselectable';
			if(i==currentPhoto) link.className='active';
			link.innerHTML = (parseInt(i)+1);
			link.id = 'photolink_' + i
			link.onclick = function(){
				stripid = this.id.split('_');
				currentPhoto = stripid[1];
				browse();
			}
			$('browser_linklist').appendChild(link);
			
			if(i<end-1){
				dash = new Element('span',{'class':'gray'}).update('|');
				$('browser_linklist').appendChild(dash);
			}
		}
		if(end<photos.length){
			dash = new Element('span',{'class':'dots'}).update('...');
			$('browser_linklist').appendChild(dash);
		}
	}

	function initBrowser(){
		if(!$('photonav')) return;
		if(photos.length<2) return;
		var blankImg;
		var dash;
		var arrowPrevious;
		var arrowNext;
		
		$('photo').unselectable = "unselectable";
		arrowPrevious = new Element('span',{'id':'arrowPrevious','class':'arrowPrevious'}).update('&#160;');
		$('photonav').appendChild(arrowPrevious);
		var div;
		div = new Element('div',{'id':'browser_linklist'});
		$('photonav').appendChild(div);
		renderLinklist();
		arrowNext = new Element('span',{'id':'arrowNext','class':'arrowNext_active'}).update('&#160;');
		$('photonav').appendChild(arrowNext);

		blankImg = new Element('img',{'src':photos[currentPhoto]});
		blankImg.unselectable = "unselectable";
		$('prev').appendChild(blankImg);
		$('prev').firstChild.hide();
		blankImg = new Element('img',{'src':photos[currentPhoto+1]});
		blankImg.unselectable = "unselectable";
		$('next').appendChild(blankImg);
		$('next').firstChild.hide();
		
		$('next').onmouseover = function(e){
			if(currentPhoto<(photos.length-1)){
				this.className = 'nextover';
				showNeighbours('next');
			}
		}
		$('next').onmouseout = function(e){
			this.className = 'next';
			hideNeighbours('next');
		}
		$('prev').onmouseover = function(e){
			if(currentPhoto>0){
				this.className = 'prevover';
				showNeighbours('prev');
			}
		}
		$('prev').onmouseout = function(e){
			this.className = 'prev';
			hideNeighbours('prev');
		}

		$('prev').onclick = function(){
			if(currentPhoto>0){
				currentPhoto--;
				browse();
			}
			else{
				$('prev').className = 'prev';
			}
		}
		$('arrowPrevious').onclick = function(){
			if(currentPhoto>0){
				currentPhoto--;
				browse();
			}
			else{
				$('prev').className = 'prev';
			}
		}
		$('next').onclick = function(){
			if(currentPhoto<(photos.length-1)){
				currentPhoto++;
				browse();
			}
			else{
				$('next').className = 'next';
			}
		}
		$('arrowNext').onclick = function(){
			if(currentPhoto<(photos.length-1)){
				currentPhoto++;
				browse();
			}
			else{
				$('next').className = 'next';
			}
		}
	}
	
	function browse(){
		resetLinks();
		renderLinklist();
		//JSdebug('currentPhoto>0: ' + currentPhoto>0);
		//JSdebug('currentPhoto<(photos.length-1): ' + currentPhoto<(photos.length-1));
		$('photo').src = photos[currentPhoto];
		if(currentPhoto>0){
			$('arrowPrevious').className = 'arrowPrevious_active';
			$('prev').firstChild.src = photos[parseInt(currentPhoto)-1];
		}
		else{
			JSdebug('browser() ' +currentPhoto);
			$('arrowPrevious').className = 'arrowPrevious';
			$('prev').firstChild.hide();
			$('prev').className = 'prev';
		}
		if(currentPhoto<(photos.length-1)){
			$('arrowNext').className = 'arrowNext_active';
			$('next').firstChild.src = photos[parseInt(currentPhoto)+1];
		}
		else{
			$('arrowNext').className = 'arrowNext';
			$('next').firstChild.hide();
			$('next').className = 'next';
		}
		$('alt').update(alts[currentPhoto]);
	}
	
	function resetLinks(){
		var links = $('photonav').getElementsByTagName('span');
		for(var l=0;l<linkArray.length;l++){
			linkArray[l].className = '';
		}
		linkArray[currentPhoto].className='active';
	}
	
	function hideNeighbours(){
		$('prev').firstChild.hide();
		$('next').firstChild.hide();
	}
	
	
	function showNeighbours(dir){
		if(dir=='prev'){	
			$('prev').firstChild.src = photos[parseInt(currentPhoto)-1];
			$('prev').show();
			$('prev').firstChild.show();
		}
		if(dir=='next'){
			$('next').firstChild.src = photos[parseInt(currentPhoto)+1];
			$('next').show();
			$('next').firstChild.show();
		}
	}
	
	function JSdebug(str){
		if(!blnDebug) return;
		if(!$('jsdebug')){
			objBody = document.getElementsByTagName("body").item(0);
			objDebug = new Element("div",{'id':'jsdebug'});
			objBody.appendChild(objDebug);
			objDebug.onclick = function(){
				$('jsdebug').remove();
			}
			
		}
		var par = new Element('p');
		par.innerHTML = str;
		$('jsdebug').appendChild(par);
		$('jsdebug').scrollTop+=20;
	}
	
	function Overlay(){
		if($('overlay')) return;
		objBody = document.getElementsByTagName("body").item(0);
		objOverlay = new Element('div', { 'id': 'overlay' })
		objOverlay.style.display = 'none';
		objBody.appendChild(objOverlay);
		//objBody.style.overflow = 'hidden';
		
		var arrayPageSize = document.viewport.getDimensions();
		var arrayPageScrolls = document.viewport.getScrollOffsets();

		$('overlay').setStyle({width: arrayPageSize.width});
		$('overlay').setStyle({height: arrayPageSize.height});
		$('overlay').style.top = '0px'; //arrayPageScrolls.top + 'px';
		new Effect.Appear('overlay', {duration: 0.1, from:0, to:0.5 });
		$('overlay').onclick = function(){
			if($('ImageBox')) hideImageBox();
			if($('formbox_container')) hideFormBox();
		}
	}

	function hideOverlay(){
		$('overlay').remove();
	}