window.addEvent('domready', function() {
	
	var menu = $('menu'), content = $('content'), main = $('main'), container = $('container'), activeScrollbar, contact = $('contact'), start = $('start'), about = $('about'), shoppingBasket;
	
	//SHOP
	
	var Basket = new Class({
						   
		initialize: function() {
			this.icon = $('basket');
			this.contents = {};
			this.length = 0;
			this.contents = JSON.decode(Cookie.read('basket')) || {};
			var shoppingContainer = this.shoppingContainer = $('shopping-basket');
			var shoppingFx = new Fx.Tween(shoppingContainer, {'property': 'opacity', 'duration': 500, 'link': 'cancel'});
			var show = function(event) {
				event.stop();
				shoppingContainer.setStyles({'display': 'block', 'opacity': 0});
				shoppingFx.start(1);
			};
	
			var hide = function() {
				shoppingFx.start(0).chain(function() {
					shoppingContainer.setStyles({'display': 'none', 'opacity': 0});
				});
			};
			
			this.shoppingContainer.getElements('.return').addEvent('click', hide.bindWithEvent(this));
			this.icon.addEvent('click', show.bindWithEvent(this));
			
			this.title = $('shopping-title');
			this.subTitle = $('shopping-sub');
			this.number = $('shopping-number');
			this.label = $('shopping-label');
			this.labelPlural = $('shopping-label-plural');
			this.shoppingItems = $('shopping-items');
			this.slideUp = new Fx.Tween($('iContainTheShop'), {property: 'height', duration: 300});
			this.shoppingContainer.getElement('.button').addEvent('click', this.send.bindWithEvent(this));
			this.notice = $('send-notice');
			this.hasBeenSent = false;
			this.noMoreClicks = false;
			
			this.form = shoppingContainer.getElement('form').set('send', {onSuccess: this.afterSend.bindWithEvent(this)});;
			this.formName = this.form.getElement('input[name=clientName]');
			this.formMail = this.form.getElement('input[name=clientMail]');
			this.formComments = this.form.getElement('textarea[name=clientComments]');
			this.formTime = this.form.getElement('input[name=orderTime]');
			this.formHTML = this.form.getElement('input[name=orderHtml]');
			this.loader = $('form-loader');
			
			this.shoppingTotal = $('shopping-total');
			
			this.make();
		},
		
		add: function(product) {
			var labels = ["title", "frameImg", "topImg", "frameColor", "price", "topColor"];
			var id = $time().toString();
			var obj = {};
			product.each(function(item, i) {
				obj[labels[i]]  = item.get((i == 3 || i == 0 || i == 4) ? "text" : "src");
			});
			this.contents[id] = obj;
			
			
			var el = new Element('div', {'class': 'shopping-item', 'id': id}).set('html', '<div class="item-image"><img src="{frameImg}" /><img src="{topImg}" /></div><div class="item-title"><b>{title}</b>, frame: <b>{frameColor}</b></div><div class="item-price">{price}</div><a class="removeItem">- verwijderen</a>'.substitute(obj)).inject(this.shoppingItems);
			el.getElement('.removeItem').addEvent('click', this.remove.bindWithEvent(this, id));
			this.icon.set('text', '(' + this.length + ')');
			this.cookie = Cookie.write('basket', JSON.encode(this.contents), {domain: 'feretdubois.be'});
			this.length++;
			return this.update();
		},
		
		remove: function(event, id) {
			delete this.contents[id];
			$(id).destroy();
			this.cookie = Cookie.write('basket', JSON.encode(this.contents), {domain: 'feretdubois.be'});
			this.length--;
			return this.update();
		},
		
		update: function() {
			if (this.hasBeenSent == true) {
				this.slideUp.element.setStyle('height', 'auto');
				this.notice.removeClass("show");
			}
			
			if (this.length > 0) {
				this.number.addClass("show").set('text', this.length);
				this.label.addClass("show");
				if (this.length > 1) this.labelPlural.addClass("show");
				else this.labelPlural.removeClass("show");
			}
			else {
				this.number.removeClass("show")
				this.label.removeClass("show");
				this.labelPlural.removeClass("show");
			}
			
			var total = 0;
			$$('.item-price').each(function(el) {
				total += el.get('text').toInt();
			});
			
			this.shoppingTotal.set('html', total > 0 ? '<b>totaal</b>: ' + total + ' €' : '');
			
			this.icon.set('text', this.length ? '(' + this.length + ')'  : '');
			
			return this;			
		},
		
		make: function() {
			
			this.update();
			
			$each(this.contents, function(product, id) {
				var el = new Element('div', {'class': 'shopping-item', 'id': id}).set('html', '<div class="item-image"><img src="{frameImg}" /><img src="{topImg}" /></div><div class="item-title"><b>{title}</b>, frame: <b>{frameColor}</b></div><div class="item-price">{price}</div><a class="removeItem">- verwijderen</a>'.substitute(product)).inject(this.shoppingItems);
				el.getElement('.removeItem').addEvent('click', this.remove.bindWithEvent(this, id));
			}, this);
			
			this.length = $('shopping-items').getChildren().length;
			return this.update();
		},
		
		send: function() {
			if (this.noMoreClicks) return this;
			this.noMoreClicks = true;
			this.loader.setStyle("display", "block");
			this.formHTML.value = '<div id="shopping-title">' + this.title.get('html') + '</div><div id="shopping-sub">' + this.subTitle.get('html') + '</div><div id="shopping-items">' + this.shoppingItems.get('html') + '</div><div id="shopping-total">' + this.shoppingTotal.get('html') + '</div>';
			this.formTime.value = $time();
			this.form.send();
			
			this.formMail.disabled = true;
			this.formName.disabled = true;
			this.formComments.disabled = true;
			return this;
		},
		
		afterSend: function(response) {
			this.hasBeenSent = true;
			this.contents = {};
			this.length = 0;
			this.shoppingItems.empty();
			this.number.removeClass("show")
			this.label.removeClass("show");
			this.labelPlural.removeClass("show");
			this.notice.set('text', response).addClass("show");
			
			this.slideUp.start(0);
			this.loader.setStyle("display", "none");
			this.cookie = Cookie.write('basket', JSON.encode(this.contents), {domain: 'feretdubois.be'});
			this.noMoreClicks = false;
			
			this.updateIcon();
			this.formMail.disabled = false;
			this.formName.disabled = false;
			this.formComments.disabled = false;
			
			return this;
		}
		
	});
	
	shoppingBasket = new Basket();
	
	var shopItems = $$('.content.shop');	
	var price = $$('.price')

	if (shopItems.length != 0) {
		
		var setChoice = function(els, i, index) {
			els.each(function(el, j) {
				if (i != j) el.removeClass("selected");
				else {
					el.addClass("selected");
					if (index != undefined && el.getParent().hasClass('top')) price[index].set('text', el.get('alt') + ' €');
				}
			});
		};
		
		shopItems.each(function(el, i) {
			var frames = el.getElements('.frame img'), tops = el.getElements('.top img'), buttonTop = el.getElements('.tops img'), buttonFrame = el.getElements("span.choice");
			buttonTop.each(function(button, j) {
				button.addEvent('click', setChoice.pass([tops, j, i]));
				button.addEvent('click', setChoice.pass([buttonTop, j, i]));
				
			});
			
			buttonFrame.each(function(button, k) {
				button.addEvent('click', setChoice.pass([frames, k]));
				button.addEvent('click', setChoice.pass([buttonFrame, k]));
			});
		});
		
		var addToBasket = function(i) {
			shoppingBasket.add(shopItems[i].getElements('.title span, .selected'));
		};
		
		$$('.content.shop .add').each(function(el, i) {
			el.addEvent('click', addToBasket.pass(i));
		});
		
	}
	
	//switcher
	var switcher = new Fx.Tween($('switcher'), {unit: '%', duration: 750, transition: Fx.Transitions.Quad.easeInOut});
	
	var SBstart = new ScaledBackground('startBG', {gravity: [0.5, 0.4]}).resize();
	var SBcontact = new ScaledBackground('contactBG', {gravity: [0.5, 0.35]}).resize();
	var SBabout = new ScaledBackground('infoBG', {gravity: [0.5, 0.6]}).resize();
	start.addEvent('click', function() {switcher.start('left', -100)});
	contact.addEvent('click', function() {
		switcher.start('left', -100).chain(function() {contact.setStyle('display', 'none')});
	});
	about.addEvent('click', function() {
		switcher.start('left', -100).chain(function() {about.setStyle('display', 'none')});
	});
	
	var changecurrent = false;
	
	//horizontal scrolling
	if (content.getSize().x > main.getSize().x) {
		
		var makeHScroll = function() {
		var Hscrollcontainer = $('scroll');
		var Hscrollbar = new Element('a', {'id' : 'scrollbar'});
		
		Hscrollbar.inject(Hscrollcontainer);
		Hscrollbar.addEvent('mousedown',function() {this.setStyle('cursor', 'url(/styles/cursor-grab-closed.gif), move'); activeScrollbar = this;});
		document.addEvent('mouseup', function() {if(activeScrollbar) activeScrollbar.setStyle('cursor', 'url(/styles/cursor-grab-open.gif), move'); activeScrollbar = false});
		
		var adjustHScrollbar = function() {
			var L1 = main.getSize().x;
			var w1 = content.getSize().x;
			var d1 = main.getScroll().x;
			
			var w2 = Hscrollcontainer.getSize().x;
			var d2 = d1 * w2 / w1;
			var L2 = L1 * w2 / w1;
			Hscrollbar.setStyles({'width': Math.max(50, L2), 'left': d2});
		} ;
		
		var adjustHContent = function() {
			var w1 = Hscrollcontainer.getSize().x
			var d1 = Hscrollbar.getStyle('left').toInt();
			
			var w2 = content.getSize().x;
			var d2 = d1 * w2 / w1;
			main.scrollTo(d2, 0);
		};
		
		var Hscrollslider = new Drag.Move(Hscrollbar, {'container': Hscrollcontainer, 'onDrag': adjustHContent, 'snap': 0});
		var Hfire = function() {adjustHScrollbar(); adjustHScrollbar.delay(10);}
			main.addEvent('scroll', Hfire);
			window.addEvent('resize', adjustHScrollbar);
			Hscrollcontainer.addEvent('mousewheel', function(event) {
				var r = 150;
				var d = event.wheel < 0 ? r : -r;
				main.scrollTo(main.getScroll().x + d, 0);
				adjustHScrollbar();
			});
			
			adjustHScrollbar();
		};
		makeHScroll();
		window.addEvent('load', function() {
			if (!$('scrollbar')) makeHScroll();
		});
	}
	
	//vertical scrolling
	var adjustVScrollbar = function(obj, viewport, scrollcontainer, scrollbar) {
		var L1 = viewport.getSize().y;
		var w1 = obj.getScrollSize().y;
		var d1 = obj.getScroll().y;
		
		var w2 = scrollcontainer.getSize().y;
		var d2 = d1 * w2 / w1;
		var L2 = L1 * w2 / w1;
		scrollbar.setStyles({'height': Math.max(10, L2), top: d2});
	};
	
	var adjustVContent = function(obj, viewport, scrollcontainer, scrollbar) {
		var w1 = scrollcontainer.getSize().y
		var d1 = scrollbar.getStyle('top').toInt();
		
		var w2 = obj.getScrollSize().y;
		var d2 = d1 * w2 / w1;
		obj.scrollTo(0, d2);
	};
	
	var loaded = function(el, obj) {
		if (el.getSize().y < obj.getScrollSize().y) {
			var scrollcontainer = el.getElement('div.scroll');
			var scrollbar = new Element('a', {'class': 'scrollbar'});
			scrollbar.addEvent('mousedown', function() {this.setStyle('cursor', 'url(/styles/cursor-grab-closed.gif), move'); activeScrollbar = this;});
			scrollbar.inject(scrollcontainer);
			
			var scrollslider = new Drag.Move(scrollbar, {'container': scrollcontainer, 'onDrag': adjustVContent.pass([obj, el, scrollcontainer, scrollbar])});
			var fire = function() {adjustVScrollbar(obj, el, scrollcontainer, scrollbar); adjustVScrollbar.delay(10, this, [obj, el, scrollcontainer, scrollbar]);}
			fire();
			obj.addEvent('scroll', fire);
		}
			
		TB_init(obj);
	};
	
	//image loading
	$$('.item').each(function(el) {
		var obj = el.getElement('div.content');
		new Asset.images(el.getElements('img').getProperty('src'), {'onComplete': loaded.pass([el, obj])});
	});
	
	/*
	---
	
	script: Fx.SmoothScroll.js
	
	description: Class for creating a smooth scrolling effect to all internal links on the page. Edited.
	
	license: MIT-style license
	
	authors:
	- Valerio Proietti, Klaas Moerman: slightly edited
	
	requires:
	- core:1.2.4/Selectors
	- /Fx.Scroll
	
	provides: [Fx.SmoothScroll]
	
	...
	*/
	
	Fx.FDSmoothScroll = new Class({
	
		Extends: Fx.Scroll,
	
		initialize: function(options, source, context) {
			this.context = context;
			this.doc = context.getDocument();
			var win = context.getWindow();
			this.parent(context, options);
			
			source.each(function(col, i) {
				if (i != 0) {
					col.getElements('a').each(function(a, j) {
						var anchor = a.href.substr(a.href.indexOf('#') + 1);
						if (anchor) this.useLink(a, anchor);
					}, this);
				}
			}, this);
			
			/*if (!Browser.Engine.webkit419) {
				this.addEvent('complete', function(){
					win.location.hash = this.anchor;
				}, true);
			}*/
		},
	
		useLink: function(link, anchor) {
			var el;
			link.addEvent('click', function(event){
				if (el !== false && !el) el = this.doc.getElement('a[name=' + anchor + ']');
				if (el) {
					event.stop();
					ajaxMenu.get({'q': link.name, 'ajaxMenu': 1});
					$('menu').getElements('a[name^=' + link.name.substring(0, link.name.lastIndexOf('/')) + '].current').removeClass('current');
					link.addClass('current');
					if (link.hasClass('work')) changecurrent = link.href;
					this.anchor = anchor;
					this.customHScrollToCenter(el, 'x').chain(function(){
						this.fireEvent('scrolledTo', [link, el]);
					}.bind(this));
					link.blur();
				}
			}.bind(this));
		}
	});
	
	var menuChange = function(html, els) {
		shoppingBasket.update();
		var menu = els[0];
		if (changecurrent) menu.getElements('a.work').each(function(el) {el.href == changecurrent ? el.addClass('current') : el.removeClass('current');});
		changecurrent = false;
		menu.replaces($('menu'));
		iniSmoothScroll();
	};
	
	var ajaxMenu = new Request.HTML({'url': '/index.php', 'onSuccess': menuChange, 'link': 'cancel'});
	var FDsmoothscroll;
	var menuItems =  '#menu .column';
	var iniSmoothScroll = function() {
		FDsmoothscroll = new Fx.FDSmoothScroll({'link': 'cancel', 'transition': Fx.Transitions.Circ.easeInOut}, $$(menuItems), main);

		var menu = $('menu');
		/* about and contact pages */
		menu.getElement('div.column.first a[name$=about]').addEvent('click', function(event) {
			event.stop();
			about.setStyle('display', 'block');
			switcher.start('left', -200);
		});
		menu.getElement('div.column.first a[name$=contact]').addEvent('click', function(event) {
			event.stop();
			contact.setStyle('display', 'block');
			switcher.start('left', -200);
		});
		menu.getElement('a[name=home]').addEvent('click', function(event) {
			//event.stop();
			//contact.setStyle('display', 'block');
			//switcher.start('left', 0);
		});
	};
	iniSmoothScroll();
});


window.addEvent('load', function() {
	var facebookLoad = true;
	window.fbAsyncInit = function() {
		FB.init({appId: '164595330218783', status: false, cookie: true, xfbml: true});
	};
	
	var facebook = $('fb-root'), like = $('like'), facebookContainer = $('facebook');
	var facebookFx = new Fx.Tween(facebookContainer, {'property': 'opacity', 'duration': 500, 'link': 'cancel'});
	
	var showFB = function() {
		facebookContainer.setStyles({'display': 'block', 'opacity': 0});
		facebookFx.start(1).chain(function() {
			facebook.setStyle('display', 'block');
		});
	};
	
	var hideFB = function() {
		facebook.setStyle('display', 'none');
		facebookFx.start(0).chain(function() {
			facebookContainer.setStyles({'display': 'none', 'opacity': 0});
		});
	};
	
	facebookContainer.addEvent('click', hideFB);
		
	var facebookJS = new Asset.javascript('http://connect.facebook.net/en_US/all.js', {
		id: 'facebook-js', 
		onload: function(){
			like.addEvent('click', function(e) {
				if (facebookLoad){
					FB.XFBML.parse(document.getElementById('fb-root'));
					facebookLoad = false;
				}
				e.stop();
				showFB();
			});
		}
	}).inject(facebook);
});