// JavaScript Document
var RefScroller = new Class({

	Implements: [Events],

	initialize: function() {
		this.movement = 550;
		this.totalPanels = $('panels').getChildren().length;
		this.panel = 1;
		this.scroller;
		
		this.setPanelWidth();
		this.setScroller();
		this.addBtnEvents();
	},
	
	/* set panel width here, just add a reference and it will do the rest */
	setPanelWidth: function()
	{
		var width = (this.totalPanels * this.movement);
		$('panels').setStyle('width', width);
	},
	
	setScroller: function()
	{
		this.scroller = new Fx.Scroll('scroller', {
			wait: false,
			duration: 600
		});
	},
	
	addBtnEvents: function()
	{			
		$('refArrowLeft').addEvents({
			'mouseover': function() {
				this.setStyle('background', 'transparent url(images/prev.png) repeat-x scroll 0 -25px');
			},
			'mouseout': function() {
				this.setStyle('background', 'transparent url(images/prev.png) repeat-x scroll 0 0px');
			},
			'click': function() {
				this.panel--;
			
				var movement = ((this.movement * this.panel) - this.movement);
				this.scroller.start(movement);
				
				this.checkArrows();
			}.bind(this)
		});
		
		$('refArrowRight').addEvents({
			'mouseover': function() {
				this.setStyle('background', 'transparent url(images/next.png) repeat-x scroll 0 -25px');
			},
			'mouseout': function() {
				this.setStyle('background', 'transparent url(images/next.png) repeat-x scroll 0 0px');
			},
			'click': function() {
				var movement = (this.movement * this.panel);
				this.scroller.start(movement);
				this.panel++;
				
				this.checkArrows();
			}.bind(this)
		});
	},
	
	checkArrows: function()
	{
		if(this.panel == 1)
		{
			$('refArrowLeft').setStyle('display', 'none');
		}
		else
		{
			$('refArrowLeft').setStyle('display', 'block');
		}
		
		if(this.panel == this.totalPanels)
		{
			$('refArrowRight').setStyle('display', 'none');
		}
		else
		{
			$('refArrowRight').setStyle('display', 'block');
		}
	},
	
	resetScroll: function()
	{
		this.panel = 1;
	
		var movement = ((this.movement * this.panel) - this.movement);
		this.scroller.start(movement);
		this.checkArrows();
	}
});

var Slider = new Class({

		Implements: [Events],

		initialize: function() {
			this.sliders = $$('.slider');
			this.activeSlider = $('over');
			this.slideInLeft = 350;
			this.slideOutLeft;
			this.duration = 375;
				
			this.setSliderWidth(); 
		},
		
		setSliderWidth: function(refreshed)
		{		
			var viewport = $(document.body).getCoordinates();			
			var sliderWidth = (viewport.right - this.slideInLeft);
			
			// set slideOutLeft
			this.slideOutLeft = viewport.right;
			
			// set sliders width
			this.sliders.each(function(el) {
				var left = viewport.right;
				
				if($defined(refreshed) && el == this.activeSlider)
				{
					left = this.slideInLeft;
				}
				
				el.setStyles({
								'width': sliderWidth,
								'left': left
							});
			}.bind(this));
		},
		
		start: function()
		{
			this.slideIn();
		},
		
		slideIn: function()
		{
			this.activeSlider.set('tween', {duration: this.duration});
			this.activeSlider.tween('left', this.slideInLeft);
		},
		
		slideOut: function(which)
		{
			this.activeSlider.set('tween', {duration: this.duration, onComplete: function(){this.slideIn();}.bind(this)});
			this.activeSlider.tween('left', this.slideOutLeft);
			
			if(this.activeSlider.get('id') == 'portfolio')
			{
				SAIA.scroller.resetScroll();
			}
			else if(this.activeSlider.get('id') == 'contact')
			{
				// clear fields
				$('contactform').name.value = '';
				$('contactform').email.value = '';
				$('contactform').message.value = '';
			}
			
			this.activeSlider = $(which);
		},
		
		displayNew: function(which)
		{
			if($(which) == this.activeSlider)
			{
				return;
			}
			
			this.slideOut(which);
		}
});

var addClick = function(el, display, slider)
{
	$(el).addEvent('click', function() { slider.displayNew(display) });
}

var Contact = new Class({

		Implements: [Events],

		initialize: function() {
			this.form = $('contactform');
				
			this.makeSexy(); 
			this.setFormCheck(); 
		},
		
		makeSexy: function()
		{	
		/*	$$(".sexyform input", ".sexyform textarea").each(function(el) {
				el.DoSexy();
			});*/
			beautify_each_form();
		},
		
		setFormCheck: function()
		{	
			/*var contactCheck = new FormCheck(this.form, {
				submitByAjax : true,
				onAjaxRequest : function() {
					this.showSendBox();
				}.bind(this),
				onAjaxSuccess : function(response) {
					this.handleContact.delay(2000, this, response);
				}.bind(this),	
				display: {
					indicateErrors: 0
				}	
			});	*/
			var contactCheck = new FormCheck('contactform', {
				submitByAjax : true,
				onAjaxRequest : this.showSendBox.bind(this),				
				onAjaxSuccess : function(response) { this.handleContact.delay(2000, this, response) }.bind(this),	
				display: {
					indicateErrors: 0
				}	
			});	
		},
		
		showSendBox: function()
		{		
			var viewport = $(document.body).getCoordinates();		
			var width = 300;
			var height = 200;
			var top = ((viewport.bottom / 2) - (height / 2));
			var left = ((viewport.right / 2) - (width / 2));
			
			this.sendBox = new Element('div', {
				'id' : 'sendbox',
				'styles': {
					'width' : width,
					'height' : height,
					'background-image' : 'url(images/sendbox.png)',
					'top' : top,
					'left' : left,
					'position' : 'absolute'
				}
			});
			
			var loader = new Element('div', {
				'id' : 'loader',
				'styles': {
					'width' : 128,
					'height' : 15,
					'background-image' : 'url(images/ajax-loader.gif)',
					'margin-left' : ((width / 2) - (128 / 2)),
					'margin-top' : 10
				}
			});
			
			var text = new Element('div', {
				'id' : 'sendContactText',
				'styles': {
					'margin-left' : 10,
					'margin-top' : 10,
					'font-size' : 14,
					'color' : '#000000'
				},
				'text':'bericht wordt verzonden'
			});
			
			loader.inject(this.sendBox);
			text.inject(this.sendBox);
			this.sendBox.inject($(document.body));
		},
		
		handleContact: function(response)
		{
			var theResponse = handleResponse(response);
		
			$('loader').setStyle('visibility', 'hidden');
			$('sendContactText').set('text', theResponse.message);
			
			if(checkResponse(theResponse))
			{
				// clear fields
				this.form.name.value = '';
				this.form.email.value = '';
				this.form.message.value = '';
			}
			
			this.closeBox.delay(3000, this);
		},
		
		closeBox: function()
		{
			this.sendBox.destroy()
		}
});

var Promo = new Class({

		Implements: [Events],

		initialize: function() {
			this.promo = null;
			this.obj = null;
			this.closePromo = null;
			this.promoWidth = 150;
			this.promoHeight = 200;
			this.promoTop = (this.promoHeight - (2 * this.promoHeight) - 20);
			this.promoLink = 'http://www.saia.nl/kerstgame/';
			
			this.createElements();
			this.start.delay(3000, this);
		},
		
		createElements: function()
		{				
			var viewport = $(document.body).getCoordinates();	
			this.promo = new Element('div', {
											'id': 'promo',
											'styles': {
														'position':'absolute',
														'width': this.promoWidth,
														'height': this.promoHeight,
														'top': this.promoTop,
														'left': (viewport.right - this.promoWidth - 10),
														'cursor': 'pointer'
													}
									}).inject($(document.body));
											
			this.obj = new Swiff('promo.swf?rand=' + Math.random(), { 
												id: 'swf', 
												width: this.promoWidth, 
												height: this.promoHeight, 
												container: this.promo, 
												swLiveConnect: true
											}).toElement(); 
					
			this.closePromo = new Element('div', {
											'id': 'closePromo',
											'styles': {
														'position':'absolute',
														'width': 10,
														'height': 10,
														'z-index': 3,
														'cursor': 'pointer',
														'margin-top': 2,
														'margin-left': (this.promoWidth - 12)
													},
											'events' : {
														'click' : function() {
																	this.stop();
																}.bind(this)
														},
											'html': 'X'
											}).inject($('swf'), 'before');
					
			var ref = new Element('div', {
											'id': 'ref',
											'class': 'promoRef',
											'styles': {
														'width': this.promoWidth,
														'height': this.promoHeight
													},
											'events' : {
														'click' : function() {
																	 window.open(this.promoLink, '_blank');
																}.bind(this)
														}
											}).inject($('swf'), 'before');
		},

		start: function()
		{			
			this.promo.set('morph', {
				duration: 1000,
				transition: Fx.Transitions.linear,
				link: 'ignore',
				onComplete : function()
						{
							this.startFlash();
						}.bind(this)
			});
					
			this.promo.morph({'top' : 0});
		},

		stop: function()
		{			
			this.promo.set('morph', {
				duration: 1000,
				transition: Fx.Transitions.linear,
				link: 'ignore',
				onComplete : function()
						{
							this.stopFlash();
						}.bind(this)
			});
					
			this.promo.morph({'top' : this.promoTop});
		},

		startFlash: function()
		{
			this.obj.flashStart();
		},

		stopFlash: function()
		{
			this.obj.flashStop();
		}
});

window.addEvent('domready', function() {
	if(Browser.Engine.trident4)//...do something for IE6
	{
		fixIeStuffs();
		Alert.info('U bekijkt deze site via een verouderde brouwser. Hierdoor wordt de site niet goed weergegeven, aangezien de browser niet de laatste technieken ondersteund. Gebruik internet explorer 7 of 8 om de site te bekijken.');
	}
	else
	{
	
	var slider = new Slider();
	slider.start();
	
	addClick('toggleOver', 'over', slider);
	addClick('toggleDiensten', 'diensten', slider);
	addClick('togglePortfolio', 'portfolio', slider);
	addClick('toggleContact', 'contact', slider);
	
	window.addEvent('resize', function() { slider.setSliderWidth(true); }); 
	
	//send the toggle and content arrays to vars
	var toggles = $$('.toggler');
	var content = $$('.element');
	 
	//set up your object var
	//create a "new" Accordion object
	//set the toggle array
	//set the content array
	//set your options and events 
	var AccordionObject = new Accordion(toggles, content, {
		//when you load the page
		//will "show" the content (by index)
		//with NO transition, it will just be open
		//also note: if you use "fixedHeight," 
		//show will not work when the page first loads
		//"show" will override "display"
		show: 0, 
	 
	 
		//when you load the page
		//this will "display" the content (by index)
		//and the content will transition open
		//if both display and show are set, 
		//show will override display
		//display: 0,
	 
		//defaults to true
		//this creates a vertical accordion
		height : true,
	 
		//this is for horizontal accordions
		//tricky to use due to the css involved
		//maybe a tutorial for another day?
		width : false,
	 
		//defaults to true
		//will give the content an opacity transition
		opacity: false,
	 
		//defaults to false, can be integar - 
		//will fix height of all content containters
		//would need an overflow css rule
		//wont work on page load if you use "show"
		fixedHeight: false, 
	 
		//can be false or an integer
		//similiar to fixedHeight above, 
		//but for horizontal accordions
		fixedWidth: false,
	 
		//lets you toggle an open item closed
		alwaysHide: false,
	 
		//standard onComplete event
		//passes a variable containing the element for each content element		
		onComplete: function(){
		},
	 	
		//this will fire when you toggle open an element
		//will pass the toggle control element
		//and the content element that is opening
		onActive: function(toggler, element) {
			toggler.removeClass('passive');
			toggler.addClass('active');
		},
	 
		//this will fire when an element starts to hide
		//will pass all other elements
		//the one closing or not opening
		onBackground: function(toggler, element) {
			toggler.removeClass('active');
			toggler.addClass('passive');
		}
	});
	
	toggles.each(function(el) { 
		el.addEvent('mouseover', function() { 
			this.highlight('#ccff00', '#000000');
		});
	});
	
	SAIA.scroller = new RefScroller();
	var contact = new Contact();
	
	if(!Browser.Plugins.Flash.version < 9)
	{
		/*var promo = new Promo();*/
	}
	}
});