// snelheid van de effecten
_speed	= 350;

// hoogte van de footer in de multi-lightbox
_footerhoogte = 110;

// standaard marge van afbeeldingen in lightbox
_imagemargin = 10;

// aantal afbeeldingen in afbeeldingenbalk vin lightbox
_imagesinbar = 6;

// grotefotowrapper
_grotefotowrapperhoogte = 380;

_loginBoxState = '';

_productenbalk_breedte = 990;
_productenbalk_zijkant = 70;


var hasInnerTextProperty = (document.getElementsByTagName("body")[0].innerText != undefined) ? true : false;

//_host = 'http://crosspoint.sunnova10.nl/';

///////////////////////////////////////////////////////////////////
///////////////// VANAF HIER NIET MEER AANPASSEN! /////////////////
///////////////////////////////////////////////////////////////////

_barbusy			= false;
_categorybarbusy	= false;
_productbarbusy		= false;
_boxbusy			= false;
_schuifindex		= 0;

thumbnails			= new Array();
pictures			= new Array();
titles				= new Array();

_categorieid		= 0;
_categorieindex		= 0;
_categoriebarindex	= 0;
_productbarindex	= 0;

function schuifrechtscategoriebalk()
{	
	if(_categorybarbusy==false)
	{
		_categoriebarindex--;
		schuifcategoriebalk();
	}
}

function schuiflinkscategoriebalk()
{	
	if(_categorybarbusy==false)
	{
		_categoriebarindex++;
		schuifcategoriebalk();
	}
}

function schuifcategoriebalk()
{
	categories = $$('#categorybar a');
		
	if(_categorybarbusy == false)
	{
		_categorybarbusy	= true;
		_schuifbalk = $('categoriebarcontainer');
		
		nieuwemarge = ((_categoriebarindex-(_categoriebarindex*2)) * 247);

		new Fx.Style( _schuifbalk , 'margin-left', {duration:_speed,onComplete:function() 
			{
				if (_categoriebarindex>0)
				{
					$('category_button_left').className = 'zichtbaar';
				} else {
					$('category_button_left').className = 'onzichtbaar';
				}
				if (categories.length>(_categoriebarindex+4))
				{
					$('category_button_right').className = 'zichtbaar';					
				} else {
					$('category_button_right').className = 'onzichtbaar';	
				}
			}
		}).start( nieuwemarge );	
		
		_categorybarbusy	= false;
	}
}

function schuifrechtsproductbalk()
{	
	_productbarindex--;
	schuifproductenbalk();
}

function schuiflinksproductbalk()
{	
	_productbarindex++;
	schuifproductenbalk();
}

function schuifproductenbalk()
{
	if(_productbarbusy == false)
	{
		_productbarbusy	= true;

		_schuifbalk = $('categorywrapper_' + _categorieindex);
		
		if(_schuifbalk!=null)
		{
			buttonwidth = getButtonWidth(_categorieindex);
			
			nieuwemarge = ((_productbarindex-(_productbarindex*2)) * buttonwidth);
			
			new Fx.Style( _schuifbalk , 'margin-left', {duration:_speed,onComplete:function() 
				{
					if (_productbarindex>0)
					{
						$('product_button_left').className = 'zichtbaar';
						$('productbar_schaduw_links').className = 'zichtbaar';
					} else {
						$('product_button_left').className = 'onzichtbaar';
						$('productbar_schaduw_links').className = 'onzichtbaar';
					}
					if (_productbarindex<(Math.round(countProducts(_categorieindex)-(_productenbalk_breedte/(buttonwidth)))))
					{
						$('product_button_right').className = 'zichtbaar';
						$('productbar_schaduw_rechts').className = 'zichtbaar';				
					} else {
						$('product_button_right').className = 'onzichtbaar';
						$('productbar_schaduw_rechts').className = 'onzichtbaar';	
					}
				}
			}).start( nieuwemarge );	
		}
		_productbarbusy	= false;
	}
}

function countProducts(catindex)
{
	products = $$('#categorywrapper_' + catindex + ' a');

	return products.length;
}

function getButtonWidth(catindex)
{
	button = $('product_button_' + catindex + '_0');
	if (button==null)
	{
		return 0;
	} else{
		return button.getStyle('width').toInt();
	}
}

function laadproduct(url1,url2)
{
	var position = "&productbarindex=" + _productbarindex + "&categoriebarindex=" + _categoriebarindex;
	document.location = url1 + position + url2 + position;
}

function laadproductenbalk( categorieindex )
{
	categories = $$('#categorybar a');
	_productbarindex = 0;

	if( categorieindex >= 0 &&  categorieindex < categories.length && _barbusy == false)
	{
		_barbusy	= true;
		
		_schuifbalknieuw = $('categorywrapper_' + categorieindex);
		
		_schuifbalkoud = $('categorywrapper_' + _categorieindex);
		
		if (_schuifbalkoud!=null&&_categorieindex!=categorieindex)
		{
			new Fx.Style( _schuifbalkoud , 'margin-left', {duration:_speed}).start( 1000 );
		}
		
		if (_schuifbalknieuw!=null)
		{			
			new Fx.Style( _schuifbalknieuw , 'margin-left', {duration:_speed,onComplete:
				function() 
				{			
					for(i=0;i<categories.length;i++)
					{
						categories[i].className = "categorybutton";
					}
					
					categories[categorieindex].className = "categorybuttonactive";

					buttonwidth = getButtonWidth(categorieindex);

					$('product_button_left').className = 'onzichtbaar';
					$('productbar_schaduw_links').className = 'onzichtbaar';
					/*
					$('product_button_right').className = 'onzichtbaar';
					$('productbar_schaduw_links').className = 'onzichtbaar';
					$('productbar_schaduw_rechts').className = 'onzichtbaar';
					*/
					/*
					if (_productbarindex<(countProducts(categorieindex)-(_productenbalk_breedte/(buttonwidth+(_productenbalk_zijkant*2)))))
					{
						$('product_button_right').className = 'zichtbaar';					
					} else {
						$('product_button_right').className = 'onzichtbaar';	
					}*/		
										
					if (_productbarindex<(countProducts(categorieindex)-(_productenbalk_breedte/(buttonwidth))))
					{
						$('product_button_right').className = 'zichtbaar';	
						$('productbar_schaduw_rechts').className = 'zichtbaar';				
					} else {
						$('product_button_right').className = 'onzichtbaar';	
						$('productbar_schaduw_rechts').className = 'onzichtbaar';
					}	
				}
			}).start( 0 );
			
			_categorieindex = categorieindex;
		}
		_barbusy	= false;
	}
}	

/////////////////////////////////////////////////////////////
// EFFECT VOOR SLUITEN VAN MUL
		
// voor het bladeren van producten in de productenbalk
/////////////////////////////////////////////TI-LIGHTBOX

	function closebox(moduleId)
	{
		_overlay	= $('overlay');
		_box 		= $('box_'+moduleId);
		if(_overlay.getStyle('display') != 'none')
		{
			new Fx.Style(_overlay, 'opacity', {duration:_speed,onComplete:
				function()
				{
					_overlay	= $('overlay');
					_overlay.setStyle('display','none');
					_checkscroll  = false;
				}
			}).start(0.75,0);
			new Fx.Style( _box , 'opacity' , {duration:_speed}).start( 1 , 0 );
			_box.style.display = 'none';	
		}
	}

// EFFECT VOOR SLUITEN VAN MULTI-LIGHTBOX
/////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////
// EFFECT VOOR OPENEN VAN MULTI-LIGHTBOX.

	
function openboxWithTitle( foto , moduleId, title )
	{		
		_overlay			= $('overlay');
		_box				= $('box_'+moduleId);
		
		if( _overlay.getStyle('display') == 'none' )
		{			
			// overlay weergeven
			_checkscroll  = true;
			new Fx.Style( _overlay , 'opacity').set(0);
			_overlay.setStyle( 'display' , 'block' );
			
			// objecten ophalen
			_grotefotowrapper	= $('grotefotowrapper_'+moduleId);
			_grotefoto			= $('grotefoto_'+moduleId);
			_boxfooter			= $('boxfooter_'+moduleId);
			
			// afbeelding resetten zodat er bij een 2de keer openen van de box
			// niet de oude afbeelding al geladen is
			_grotefoto.setStyle( 'display' , 'none' );
			
			_overlay.setStyle( 'width' , document.body.clientWidth );
			_overlay.setStyle( 'height' , document.body.clientHeight );
			
			// hoogte op 1 zetten
			_grotefotowrapper.setStyle( 'height' , 1 );
			_boxfooter.setStyle( 'height' , 1 );
			
			// overlay laten faden
			new Fx.Style( _overlay , 'opacity' , {duration:_speed,
				onComplete:function(){
					// als overlay klaar is met faden
					
					new Fx.Style( _box , 'opacity').set(0);
					// box weergeven
					_box.setStyle( 'display' , 'block' );
					
					// box laten faden
					new Fx.Style( _box , 'opacity' , { duration:_speed ,
						onComplete:function()
						{
							// als box klaar is met faden
							
							// foto wrapper laten uitschuiven
							new Fx.Style( _grotefotowrapper , 'height', {duration:_speed , 
								onComplete:function()
								{									
									// footer uitvouwen
									new Fx.Style( _boxfooter , 'height', { duration:_speed } ).start( 1 , _footerhoogte );	
								}
							}).start( 1 , _grotefotowrapperhoogte );		
							
							// afbeelding weergeven / in en out faden
							animatepicture( foto , 0 , moduleId, title, true );	
						}
					}).start(0,1);
					
				}
			}).start(0,0.75);
			
					
			
		}else{
			animatepicture( foto , 1 , moduleId, title, false );
		}
	}
	

function openbox( foto , moduleId )
	{		
		openboxWithTitle(foto, moduleId, null);
	}
	
// EFFECT VOOR OPENEN VAN MULTI-LIGHTBOX
/////////////////////////////////////////////////////////////



/////////////////////////////////////////////////////////////
// EFFECT VOOR ANIMEREN VAN FOTO

function animatepicture( foto , frombox , moduleId, title, skipToSelectedIndex )
{	
	//msg('animatepicture('+foto+')');
	
	// objecten inladen
	_grotefoto				= $('grotefoto_'+moduleId);
	_grotefotowrapper		= $('grotefotowrapper_'+moduleId);
	_overlay				= $('overlay_'+moduleId);
	
	var _titlebox			= $('boxheader_title_'+moduleId);

	// oude foto laten wegfaden
	new Fx.Style( _grotefoto, 'opacity', {duration:_speed, 
		onComplete:function()
		{
			// als oude foto klaar is met infaden			
			// andere foto instellen
			
			if (_grotefoto!=null)
			{
				_grotefotowrapper.removeChild( _grotefoto );
			}
			
			_grotefoto				 = new Image();
			_grotefoto.src			 = foto; 
			_grotefoto.id			 = "grotefoto_"+moduleId;
			_grotefoto.className	 = "grotefoto"
			_grotefoto.style.display = 'none';

			if(title!=null)
			{
				if(hasInnerTextProperty==true)
					_titlebox.innerText		= title;
				else
					_titlebox.textContent	= title;
			}
			
			msg('image object gemaakt ' + foto );
			
			_grotefotowrapper.appendChild( _grotefoto );
			msg('append image object in wrapper en start watch');
			
			animatepicturewatch( frombox , moduleId, skipToSelectedIndex );
			
		}
	}).start(1,0);
}



function animatepicturewatch( frombox , moduleId, skipToSelectedIndex )
{
	_grotefoto = $('grotefoto_'+moduleId);
	
	_grotefoto.setStyle( 'opacity' , 0 );
	
	$('loading_'+moduleId).style.display = 'block';
	
	if( _grotefoto.complete )
	{
	
		msg('foto klaar met laden...');
	
		$('loading_'+moduleId).style.display = 'none';
		// foto weer weergeven
		_grotefoto.setStyle( 'display' , 'block' ); 
		
		// nieuwe foto weer uit-faden
		new Fx.Style( _grotefoto , 'opacity' , { duration:_speed, onComplete:
			function()
			{			
				// kijken of er nog geschoven moet worden zodat de juiste foto ook onderin
				// in de balk zichtbaar is
				images		= $$('#boxschuif_'+moduleId+' img');
				
				if( frombox == 0 )
				{
					$('boxschuif_'+moduleId).setStyle('margin-left',0);
					_schuifindex = 0;
				}
				
				srcvanklein = _grotefoto.src.replace( "picture" , "thumb" );
				
				for(i=0;i<images.length;i++)
				{	
					image = images[i];
					
					if( srcvanklein == image.src )
					{

						if( frombox == 0 )
						{
							aantalkeeropzij =  i-_imagesinbar;
							
							aantalkeeropzij++;
							
							//msg( 'i' + i );
							
							//msg( 'aantalkeeropzij' + aantalkeeropzij );
							
							if(aantalkeeropzij > 0)
							{
								boxmoveright( aantalkeeropzij, moduleId );
							}
						}
						
						par = getParent( image );
						par.className = 'imageactive';
						
					}else
					{
						par = getParent( image );
						par.className = 'imageinactive';
					}
				}
				
				if(skipToSelectedIndex==true)
				{
					var picturesList = pictures[moduleId];
					var curstring = getPictureFileName(_grotefoto.src);
					var pictureindex = -1;
					
					// huidige foto ophalen
					for(i = 0; i < picturesList.length; i++ )
					{
						var picstring =getPictureFileName(picturesList[i]);
						
						if( curstring == picstring )
						{
							pictureindex = i;
							break;
						}
					}
					
					if(pictureindex-5>0)
					{
						boxmoveright(pictureindex-5, moduleId);
					}
				
				}
			}
		} ).start( 0 , 1 );
	}else{
		setTimeout( 'animatepicturewatch(' + frombox + ' , ' + moduleId + ' , ' + skipToSelectedIndex +')' , 100 );
	}
}
	
// EFFECT VOOR ANIMEREN VAN FOTO
/////////////////////////////////////////////////////////////

function getPictureFileName(filename)
{
	var temp = new String(filename).replace('\\', '/');

	var lastIndex = temp.lastIndexOf('/')+1;
	var l =  (temp.length-lastIndex);
	
	return temp.substr(lastIndex, l);
}


function volgendefoto(moduleId)
{
	huidigeurl = $('grotefoto_'+moduleId).src;
	
	pictureindex = -1;
	
	var curstring = getPictureFileName(huidigeurl);
	var picturesList = pictures[moduleId];
	var tilesList = titles[moduleId];
	
	// huidige foto ophalen
	for(i = 0; i < picturesList.length; i++ )
	{
		var picstring =getPictureFileName(picturesList[i]);
	
		
		if( curstring == picstring )
		{
			pictureindex = i;
			break;
		}
	}
	
	volgendeindex = pictureindex + 1;
	if(volgendeindex < pictures[moduleId].length)
	{
		var title = null;
		
		if(tilesList!=null)
			title = tilesList[volgendeindex];
	
		animatepicture( picturesList[volgendeindex] , 1 , moduleId, title, false );
		
		boxmoveright( 1, moduleId );
		
	}
	 
}

function vorigefoto(moduleId)
{
	huidigeurl = $('grotefoto_'+moduleId).src;
	
	pictureindex = 0;
	
	var curstring = getPictureFileName(huidigeurl);
	var picturesList = pictures[moduleId];
	var tilesList = titles[moduleId];

	// huidige foto ophalen
	for(i = 0; i < picturesList.length; i++ )
	{
		var picstring =getPictureFileName(picturesList[i]);

		if( curstring == picstring )
		{
			pictureindex = i;
			break;
		}
	}
	
	vorigeindex = pictureindex - 1;
	
	//msg( vorigeindex );
	
	if( vorigeindex >= 0 )
	{
		var title = null;
		
		if(tilesList!=null)
			title = tilesList[vorigeindex];

		animatepicture( picturesList[vorigeindex] , 1 , moduleId, title, false );
		boxmoveleft(moduleId);
	}
}


function boxmoveleft(moduleId)
{
	if( !_boxbusy )
	{
		// kijken of box niet vergrendeld is
		_boxbusy	= true;
		schuifbox	= $('boxschuif_'+moduleId);
		images		= $$('#boxschuif_'+moduleId+' img')
		
		// breedte van een afbeelding uitrekenen
		imagewidth	= images[0].offsetWidth + _imagemargin;
		
		// totale breedte van alle afbeeldingen uitrekken
		totalwidth	= (imagewidth + _imagemargin * 2 ) * images.lenght;
		
		// huidige marge naar int parsen
		margin		= parseInt( schuifbox.getStyle( 'margin-left' ).replace( "px" , "" ) );
		
		// niuwe marge uitrekenen
		newmargin	= margin + imagewidth;
		
		
		// kijken of nieuwe marge niet lager of gelijk is aan 0
		if(newmargin <= 0)
		{		
			// naar nieuwe marge verplaatsen
			new Fx.Style( schuifbox , 'margin-left' , { duration:_speed } ).start( newmargin );
			_schuifindex++;
		}
		
		// box weer vrijgeven
		setTimeout( '_boxbusy = false;' , _speed + 100 );
		
		
	}
	
}

function boxmoveright( steps , moduleId )
{
//	msg('boxmoveright('+steps+')');
	
	if( steps < 1) steps = 1;
	
	
	if(!_boxbusy)
	{
		// kijken of de box niet bezig is.
		
		// box vergrendelen
		_boxbusy	= true;
		schuifbox	= $('boxschuif_'+moduleId);
		images		= $$('#boxschuif_'+moduleId+' img')
		
		// breedte van een afbeelding uitrekenen
		imagewidth	= images[0].offsetWidth + _imagemargin;
		
		// totale breedte van alle afbeeldingen uitrekken
		totalwidth	= (imagewidth + _imagemargin * 2 ) * images.lenght;
		
		// de marge parsen naar int
		margin		= parseInt( schuifbox.getStyle( 'margin-left' ).replace( "px" , "" ) );
		
		// nieuwe marge uitrekenen 
		// niuwe marge = huidige marge - de breedte van een afbeelding		
		newmargin	= margin - imagewidth * steps;
				
		// maximale marge uitrekenen
		maxmargin	= 0 - ( images.length - _imagesinbar ) * imagewidth ;
		
		// kijken of maxmiale marge niet berijkt is
		if( newmargin >= maxmargin )
		{
			// schuifbox verplaatsten naar nieuwe marge			
			new Fx.Style( schuifbox , 'margin-left' , { duration:_speed } ).start( newmargin );
			_schuifindex--;
			
		}
	
		setTimeout( '_boxbusy = false;  ' , _speed + 100 );		
	}
	
}

function getParent( elem )
{
	if(navigator.appCodeName == "Mozilla")
	{
		return elem.parentNode;
	}else{
		return elem.parentElement;
	}
}

function msg( text )
{
	// debugging informatie plaatsen
	//$('overlay').innerHTML += ( "" + text );
}

function toggledownloadlist( divId , buttonId )
{
	div	= $( divId );
	button	= $( buttonId );
	
	if( div.className == 'opendirectorydiv' )
	{
		div.className		= 'closeddirectorydiv';
		button.className	= 'closeddirectory';
	}
	else
	{
		div.className		= 'opendirectorydiv';
		button.className	= 'opendirectory';
	}
}


function CheckLogin()
{
	var loc = document.location.toString();
	
	if( loc.indexOf('#login') > 0  && (_loginBoxState!='gettingvisible' && _loginBoxState!='visible'))
	{
		_loginBoxState = 'gettingvisible';

		_loginwrapper = $('loginwrapper');	
		new Fx.Style(_loginwrapper, 'opacity', { duration:_speed * 2, onComplete:
				function() 
				{
					_loginBoxState == 'visible';
					
					_loginBoxAnimating = false;
				}
			}).start( 0.3 , 1 );
		_loginwrapper.style.display = 'block';
	}
	else if( loc.indexOf('#hidelogin') > 0  && _loginBoxState!='hiding' && _loginBoxState!='hiden')
	{
		_loginBoxState = 'hiding';

		_loginwrapper = $('loginwrapper');	
		new Fx.Style(_loginwrapper, 'opacity', { duration:_speed * 2, onComplete:
					function() 
					{
						_loginBoxState == 'hiden';
						
						_loginwrapper = $('loginwrapper');
						_loginwrapper.style.display = 'none';	
					}
				}).start( 1, 0.3 );

		_loginwrapper.style.display = 'block';	
	}

	setTimeout( 'CheckLogin()' , 250 ); // lekker snel

}

function CheckCategory()
{

	var loc = document.location.toString();
	if( loc.indexOf('#catindex=') > 0 && loc.indexOf('productindex=') > 0)
	{
		s = '#catindex=';
		catindex = parseInt( loc.substring( loc.indexOf(s) + s.length ) );
		
		p = 'productindex=';
		productindex = parseInt( loc.substring( loc.indexOf(p) + p.length ) );
		
		_categorieindex = catindex;
		
		buttonwidth = getButtonWidth(catindex);
		
		aantalproducten = countProducts(catindex);
		
		if (productindex>1)
		{
			if((productindex>(aantalproducten-2)&&(aantalproducten>3)))
			{
				_productbarindex = productindex-3;
			}
			else if(productindex>(aantalproducten-3))
			{
				_productbarindex = productindex-2;
			} 
			else 
			{
				_productbarindex = productindex-1;
			}
		}
		
		pb = 'productbarindex=';
		var productbarindex = parseInt( loc.substring( loc.indexOf(pb) + pb.length ) );
		if(productbarindex >= 0)
		{
			_productbarindex = productbarindex;
		}
		
		
		categories = $$('#categorybar a');
		
		for(i=0;i<categories.length;i++)
		{
			categories[i].className = "categorybutton";
		}
					
		categories[catindex].className = "categorybuttonactive";
		
		if(catindex>3)
		{
			_categoriebarindex = catindex-3;			
		}
		
		cb = 'categoriebarindex=';
		var categoriebarindex = parseInt( loc.substring( loc.indexOf(cb) + cb.length ) );
		if(categoriebarindex >= 0)
		{
			_categoriebarindex = categoriebarindex;
		}
		schuifcategoriebalk();
		
	}
	schuifproductenbalk();
}

_checkscroll = false;

function checkscroll()
{
	if(_checkscroll)
	{
		if (navigator.appName == "Microsoft Internet Explorer")
			$('overlay').style.top = document.body.scrollTop;
		else 
			$('overlay').style.top = window.pageYOffset;
	}

}
window.addEvent('domready', 
	function() 
	{ 
	
		CheckLogin();
		CheckCategory();
		
		setInterval( 'checkscroll()' , 5 );
	}
	, 'javascript');