var totalWidth, totalHeight, footerHeight, activeWidth, remainingWidth, blinds, blindsAmount, blindsWidth, contentheight, oldBlindFX, newBlindFX, homeWidth, homeRemaining, homeBWidth, moosizer;
var animating = 0;
var homeShow = 0;
var homePage = 0;

window.addEvent("domready", function() { 
var DEBUG;(typeof(window.console) != "undefined")?DEBUG=1:DEBUG=0;//alert(DEBUG);

if (Browser.Engine.trident && Browser.Engine.version <= 4) {
	
	var ie6bar  = new Element('a', {id: 'ie6bar', href: 'http://www.browserchoice.eu/BrowserChoice/browserchoice_nl.htm'});
	ie6bar.appendText("U maakt gebruik van Internet Explorer 6. Dit is een sterk verouderde browser die een groot aantal standaarden voor webpagina's niet ondersteunt. Hierdoor kan het zijn dat de website niet goed wordt weergegeven. Wij adviseren u Internet Explorer te updaten of over te stappen op een andere browser. Klik hier voor een keuzescherm.");
	ie6bar.setStyles({
					 position: 'absolute',
					 backgroundColor: '#FFFF99',
					 borderBottom: 'solid black 1px',
					 top: 0,
					 left: '50%',
					 width: '100%',
					 marginLeft: '-50%',
					 zIndex: 50
					 });
	ie6bar.inject($('container'), 'top');
	
	$$('.section').setStyle('background-color','#fff');

} else {
	if ($('container').getElement('.section h1 a.home') != undefined) homeShow = 1;
	
	$$('body').setStyles({
						 overflow: 'hidden',
						 margin: 0
						 });
	$$('h1 a').setStyles({
						 color:'#fff',
						 textDecoration: 'none'
						 });
	resizeContent();
	chooseBlind();
	subpage();
	
	window.onresize = function(){
					resizeContent();
					};
	
	$('supersize').getElements('img').fade('hide');
	$('supersize').setStyle('display','block');
	
	var hash = window.location.hash.slice(1);
	
	if (location.href.indexOf('?page_id=') > -1 && location.href.indexOf('index.asp?page_id=9') == -1){
		//the location contains the special external link tag and opens the id in the contact page:
		getSubPage(location.href.split('?page_id=')[1], 14);
	}
	else if(location.href.indexOf('index.asp') == -1 && hash == "") {
		//if (DEBUG == 1)console.log("no index.asp and no hash");
		
		//go to home page:
		animateBlind($('container').getElement('.section .home'));
		
		//set hash to home:
		hash = 'home';
	}
	else if(hash != ""){
		//if (DEBUG == 1)console.log("hash is set ("+hash+")");

		//remove current active class and add it the element of the hash:
		$('container').getElement('.active').removeClass('active');
		$('container').getElement('.'+hash).getParent().getParent().addClass('active');

		//go to element with that hash:
		animateBlind($('container').getElement('.'+hash));
	}
	else if(location.href.indexOf('index.asp') > -1 || location.href.indexOf('index.asp?page_id=9') > -1){
		//if (DEBUG == 1)console.log("a url with index.asp in it or 'bestellen' page directly");
		//reset hash
		hash = $('container').getElement('.active a').getProperty('class');
		
		//use the .active page:
		animateBlind($('container').getElement('.active a'));
	}
	
	$('supersize').getElement('.'+hash).addClass('activeslide').fade('show');
	
	moosizer = new mooSizer({ bgElement:'supersize' });
	
	// Put the hash check on a timer.

	setInterval(function(){
		var $newHash = window.location.hash.slice(1);
		if (hash != $newHash) {
			hash = $newHash;
			animateBlind($('container').getElement('.'+hash));
			//does funky stuff to the home..
		}	 
	}, 500);

}//end ie6 check
});//end domready

var animateBlind = function(object){
	if (object.hasClass('home')) {
		homePage = 1;
		//if (DEBUG == 1) console.log(object);
	} else {
		homePage = 0;
	};
	
	if (!object.hasClass('activepage')&&animating === 0){
		current = object.getProperty('class');
		window.location.hash = current;
		$$('.active h1 a').setStyles({
							fontSize:16,
							fontWeight: 'normal',
						 	color:'#FFF'
						 });
		object.setStyles({
						 	fontSize:20,
						 	fontWeight: 'bold',
						 	color:'#45352E'
						 });
		//reset the old behavour for the old slide:
		$$('.active h1 a').removeClass('activepage').removeEvent('click',clickReload).addEvent('click',clickAnimate);
		
		//and add new behavour to the new slide link:
		object.addClass('activepage').removeEvent('click',clickAnimate).addEvent('click',clickReload);
		
		animating = 1;
		oldBlindFX = new Fx.Tween($('container').getElement('.section.active'), {duration : 'short'});
		newBlindFX = new Fx.Tween(object.getParent().getParent(),{
				   duration : 'short',
				   onComplete: function(){
						$('container').getElements('.section').removeClass('active');
						object.getParent().getParent().addClass('active');
						$('container').getElement('.section.active .content').set('tween',{
																				  onComplete: function(){
																					  animating = 0;
																					  //change background:
																					  bgFade(current);
																					  //resize content again:
																					  resizeContent();
																					  }
																				  }).fade('in');
					}
				});
		oldBlindFX.set('background-color','transparent');
		oldBlindFX.set('background-image','none');
		object.getParent().getParent().fade('hide');
		newBlindFX.set('background-color','#FFF');
		newBlindFX.set('background-image','url(../images/nijisaman/logo.png)');
		
		object.getParent().getParent().fade('in');
		
		
		$('container').getElement('.section.active .content').setStyles({
																		visibility: 'hidden',
																		opacity: 0
																		});

		//object.getParent().getParent().getElement('.broad').load("includes/request.asp?"+object.href.split('?')[1]+"&noCache="+Math.random());
		//if current blind isn't the home blind:
		if (homePage == 0){
			// if last page (.active) is home then go to 0:
			if ($('container').getElement('.section.active h1 a').hasClass('home')){
				blinds.each(function(item, index){
									item.setStyles({
										width: blindsWidth
									});
				});
				oldBlindFX.start('width',0);
				$('container').getElement('.home').getParent().getParent().fade('hide');
			} else {
				oldBlindFX.start('width',blindsWidth);
			}
			
			newBlindFX.start('width',activeWidth);
		//when current blind is the home blind:
		} else {
			newBlindFX.set('background-position','26px 10px');
			newBlindFX.set('height',250);
			object.setStyle('display','none');
			// set h3 to 170 px width
			$('container').getElement('.home').getParent().getParent().getElement('h3').setStyles({
				display: 'block',
				width: 170,
				fontWeight: 'normal',
				fontSize: 22
			});
			blinds.each(function(item, index){
									item.setStyles({
										width: homeBWidth
									});
				});
			oldBlindFX.start('width',homeBWidth);
			newBlindFX.start('width',homeWidth);
		}
																  
		
		/* old function with disappearing old content before going to new content: 
		$('container').getElement('.section.active .content').set('tween',{
																	duration : 500,
																	onComplete: function(){
																		oldBlindFX.start('width',blindsWidth);
																		newBlindFX.start('width',activeWidth);
																	}
																}).fade('out');
		*/	
	
	} 
};

var resizeContent = function(){
	var clientsize = window.getSize();
	totalWidth = clientsize.x-20;
	totalHeight = clientsize.y;
	footerHeight = $('footer').getStyle('height').toInt();
	blindsHeight = totalHeight - footerHeight;
	activeWidth = 500;
	remainingWidth = totalWidth - activeWidth;
	blinds = $('container').getElements('.section');
	
	//normaly it's -1 (all page -1 active page) but now it's -2 (because home = 0 width when not active)
	blindsAmount= blinds.length-1;
	if (homeShow == 1)blindsAmount--
	
	blindsWidth= (remainingWidth/blindsAmount)-0.5;
	
	//added extra dimensions for the home page:
	homeWidth = 200;
	homeRemaining = totalWidth - homeWidth;
	//if (DEBUG == 1) console.log(homeRemaining+" "+(blindsAmount+1));
	
	//the width of the blinds on home:
	homeBWidth = (homeRemaining/(blindsAmount+1))-0.5;
	
	contentheight = blindsHeight-210;
	$('container').getElements('.content').setStyle('height', contentheight);
	//if (DEBUG == 1) console.log(contentheight);
	/*
	blinds.each(function(item, index){
									item.setStyles({
										float: 'left',
										width: blindsWidth,
										height: blindsHeight
								   });
									item.getElement('.content').fade('hide');
								  });
	*/
	
	if (homePage == 0){
		blinds.each(function(item, index){
									item.setStyles({
										float: 'left',
										width: blindsWidth,
										height: blindsHeight
									});
									item.getElement('.content').fade('hide');
		});
		
		if(homeShow==1) $('container').getElement('.home').getParent().getParent().setStyle('width',0).fade('hide');
		//if(location.href.indexOf('index.asp') > -1) {
			$('container').getElement('.active').setStyle('width', activeWidth).getElement('.content').fade('show');
		//}
	} else {
		blinds.each(function(item, index){
									item.setStyles({
										float: 'left',
										width: homeBWidth,
										height: blindsHeight
									});
									item.getElement('.content').fade('hide');
		});
		//if(location.href.indexOf('index.asp') > -1) {
			$('container').getElement('.active').setStyles({
		   		width: homeWidth,
				height: 250
			}).getElement('.content').fade('show');
		//}
	}

};

var clickAnimate = function(event){
	//use this click event for switching the blind
	event.stop();
	animateBlind(this);	
};

var clickReload = function(event){
	//use this click event for reloading the original content
	event.stop();
	this.getParent().getParent().getElements('.subnav a').removeClass('activesub');
		
	if(document.getElementById('form1')) {
		document.getElementById('form1').innerHTML = '';
	}
	
	this.getParent().getParent().getElement('.broad').set('load',{
		  data: this.href.split('?')[1],
		  noCache: true
	});
	this.getParent().getParent().getElement('.broad').load("includes/request.asp");
};

var chooseBlind = function(){
	
	$('container').getElements('.section h1 a').addEvent('click', clickAnimate
	).addEvent('mouseover', function(event){
			if( window.location.hash.slice(1) != this.className.replace(' ','') ) {
				textSize(this, 'big');
			}
	}).addEvent('mouseout', function(event){
			if( window.location.hash.slice(1) != this.className.replace(' ','') ) {
				textSize(this, 'small');
			}
	});
	
	//footer link to home blind:
	if (homeShow == 1) $('footer').getElement('.home').addEvent('click', function(event){
																  event.stop();
																  if($('container').getElement('.section.active .home') == undefined){
																  	animateBlind($('container').getElement('.section .home'));
																  }
	});

};

var textSize = function(object, modifier){
	//modifiers: 
	//big: go to bigger fontsize
	//small: go to smaller fontsize
	if (!object.hasClass('activepage')&&animating === 0){
		object.set('tween',{duration: 'short'});
		if (modifier == "big"){
			object.tween('fontSize','20');
		} else if(modifier == "small"){
			object.tween('fontSize','16');
		}
	}
};

var bgFade = function(toImage) {
	var oldslide = $('supersize').getElement('.activeslide');
	var newslide = $('supersize').getElement('.'+toImage);
	if (oldslide != newslide){
		oldslide.setStyle('z-index', 1);
		newslide.setStyle('z-index', 2).set('tween',{
			onStart: function(){
				oldslide.removeClass('activeslide');
				newslide.addClass('activeslide');
			
				//reset moosizer on new dimensions around the middle of the fade animation:
				setTimeout(function(){
					moosizer.initialize();
				},200);
			},
		  onComplete: function(){
			oldslide.fade('hide');
			
			//reset moosizer on new dimensions:
			//moosizer.initialize();
		  }
	  }).fade('in');
	}
};

var subpage = function() {
	
	$('container').getElements('.subnav .button').each(function(item, index){
		item.addEvent('click', function(event){
			event.stop();
			if (!this.hasClass('activesub')) {
				if (this.getParent().getElement('.activesub')) {
					//check if there's already another activesub and remove it
					this.getParent().getElement('.activesub').removeClass('activesub');
				}
				this.addClass('activesub');
				this.getParent().getParent().getElement('.broad').set('load',{
																	  data: this.href.split('?')[1],
																	  noCache: true
																	  });
				this.getParent().getParent().getElement('.broad').load("includes/request.asp");
			}
			

			/*
			if(document.getElementById('form1')) {
				document.getElementById('form1').innerHTML = '';
			}
			*/
			
		});
	});
	
};
