Event.observe(window, 'load', function() {
	
	if($('sapInBeeld') != null) placeFlash();		
	if($('showcase') != null) var sc = new showCase();
	
	$('login').observe('click',function(event){
		Event.stop(event);
		logins();
	});
	
});

logins = function(){
	$('header').scrollTo();
	var l = new overlay();	
	l.updateOverlay('login_options.php');
	l.showInner();	
}

var overlay = Class.create({
	initialize: function(element) {
		$$("body").first().insert(
	      new Element('div',{ id: 'overlay' })
	    );
		$$("body").first().insert(
	      new Element('div',{ id: 'overlayBox' })
	    );
		this.element  	= element;
		this.delay		= 2000;
		this.overlay 	= $('overlay'); 
		this.overlayBox	= $('overlayBox'); 
		this.overlayBox.hide();
		this.overlay.hide();
		this.showOverlay();
	},
	showOverlay: function(){
		var arrayPageSize = this.getPageSize();
		this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
		this.overlayBox.setStyle({ top: '50px' });
		
		new Effect.Appear(this.overlay,{duration:0.5, from:0.0, to:0.8});
		this.overlay.observe('click',this.closeOverlay.bind(this))
	},
	showInner: function(){
		new Effect.Appear(this.overlayBox,{delay:0.6,duration:0.5});
	},
	updateOverlay: function(update){
		new Ajax.Updater(this.overlayBox,'pages/'+update,{
			onComplete: function () {
				$$('.radio').invoke('observe','click', checkRadio);
			}
		});
	},
	closeOverlay: function(){
		new Effect.Fade(this.overlayBox,{duration:0.2, from:1, to:0.0});
		new Effect.Fade(this.overlay,{delay:0.2, duration:0.5, from:0.8, to:0.0});
		
		timer = setTimeout( function(){
			$('overlayBox').remove();
			$('overlay').remove();
		}, 600);
	},
	getPageSize: function(){
		var xScroll, yScroll;
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = window.innerWidth + window.scrollMaxX;
			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
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth; 
			} else {
				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 = xScroll;		
		} else {
			pageWidth = windowWidth;
		}

		return [pageWidth,pageHeight];
		
	}
});


function placeFlash(){
	var params = {};
	var flashvars = {
		flvToPlay: "sap_proces.flv",
		startImage: "images/proces_start.jpg",
		hiddenGui: "false",
		autoStart: "false"
	};
	var attributes = {};
	$('sapInBeeld').update('<div id="fc1"></div>');
	swfobject.embedSWF("flash/flvPlayer.swf", "fc1", "220", "188", "7.0.0", false, flashvars, params, attributes);

}

var showCase = Class.create({
	initialize: 	function() {
		if($('showcase').hasClassName("paused")) return;
		this.timer			= null;
		this.cases			= $('showcase').down();
		this.currentCase 	= this.cases.down();
		this.nextCase 		= this.cases.down().next();
		this.itemCount		= $$('#showcase .wrapper img').length-1;
		this.currentCount	= 0;
		this.selector		= this.cases.next();
		this.clickedItem	= null;
		this.speed			= 0.5;		
		
		this.timer = setTimeout(function(){
			this.fadeCurrent();
		}.bind(this),7000);
		
		this.observeClicks();
	},
	fadeCurrent: 	function(){
		//new debug("fade current case");		
		new Effect.Fade(this.currentCase,{
			duration:this.speed,
			afterFinish: function(){
				this.showNext();
				this.updateLbl();
				this.updateSelector();		
			}.bind(this)
		});
	},
	updateLbl: function(){
	},
	showNext: 		function(){
		//new debug("show next");		
		new Effect.Appear(this.nextCase,{
			duration:this.speed,
			afterFinish: function(){
				this.currentCase.removeClassName("active"); 
				this.nextCase.addClassName("active");
				
				this.currentCount++;
				this.createInterval();
				this.resetVars();
			}.bind(this)
		});
	},
	createInterval: function(){
		this.timer 	= setTimeout(function(){
			clearInterval(this.timer);
			this.timer = null;
			this.fadeCurrent();
		}.bind(this),7000);
	},
	resetVars: 		function(){
		if(this.currentCount == this.itemCount){
			this.currentCase 	= this.nextCase;
			this.nextCase 		= this.cases.down();
			this.currentCount	= -1;
		}else{		
			this.currentCase 	= this.nextCase;
			this.nextCase		= this.cases.down().next(this.currentCount);
		}
	},
	updateSelector: function(){
		$$('#showcase .thumbs img').invoke('removeClassName','active');
		if( this.currentCount == -1){
			this.selector.down().addClassName('active');
		}else{
			this.selector.down().next(this.currentCount).addClassName('active');
		}
	},
	observeClicks: 	function(){
		
		$$('#showcase .thumbs img').invoke('observe','click',function(event){
			//stop observer on selector
			$$('#showcase .thumbs img').invoke('stopObserving','click');
			
			var element = Event.element(event);
			var id		= parseInt(element.id.replace("case",""));
		
			// clear interval
			clearInterval(this.timer);
			this.timer = null;
			
			//new debug("interval cleared");		
			$$('.thumbs img').invoke('removeClassName','active');
			element.addClassName('active');
			
			// active case
			var activeItem 	= $$('#showcase .wrapper .active');
			if(id == 0) var clickedItem = this.cases.down();
			else var clickedItem = this.cases.down().next(id-1);
			
			// fade current item
			new Effect.Fade(activeItem[0] ,{
				duration:this.speed,
				afterFinish: function(){
					activeItem[0].removeClassName('active');
					clickedItem.addClassName('active');
					
					new Effect.Appear(clickedItem,{
						duration:this.speed,
						afterFinish: function(){
							//start observing selector clicks
							this.observeClicks();
						}.bind(this)
					});
					
				}.bind(this)
			});
			
		}.bind(this));
	
	}
});