window.addEvent('domready', function(){

	var slides = $('slides1');

	if (slides){
		var css = new SlideShow('slides1', {
			autoplay: true,
			delay: 3000,
			transition: 'slideRight'
		});

		var slider = $('slider');
		var slideControl = function(method){
			return function(event){
				event.preventDefault();
				css.show(method, {
					transition: 'push' + (method == 'next' ? 'Left' : 'Right')
				}).pause();
			};
		};
		slider.getElement('.jFlowPrev').addEvent('click', slideControl('next'));
		slider.getElement('.jFlowNext').addEvent('click', slideControl('previous'));
	}


	// OMG!
	var sidebar = $('sidebar');

	sidebar.getElements('> div').each(function(elem){
		elem.grab(new Element('div.sidebarbgtop'), 'top')
			.grab(new Element('div.sidebarbgbot'), 'bottom');
	});
	sidebar.grab(new Element('div#sidebarbot'), 'top');

	// Lightbox
	$$('img.lightbox, .lightbox img').each(function(img){
		new Element('a', {
			rel: 'milkbox[gall1]',
			href: img.get('src'),
			styles: {display: 'none'}
		}).wraps(img);
	});
	milkbox.reloadGalleries();
	$$('.openlightbox').each(function(el, i){
		el.addEvent('click',function(event){
			event.stop();
			milkbox.showGallery({
				gallery: 'gall' + i
			});
		});
	});

	// Product Viewer
	var overlay_bg = new Overlay(document.body,{
		id: 'overlay',
		color: '#000',
		duration: 300,
		opacity: 0.4,
		onClick: function() {
			this.close();
		},
		onClose: function(){
			closeOverlay();
		}
	});

	// Ugh, looks almost jQuery, no time to do it properly :(
	var photos = [],
		current = 0,
		product = 0,
		imgs = {},
		overlay = new Element('div.overlay'),
		overlayNav = new Element('div.overlayNav').inject(overlay),
		oNavPrevious = new Element('a.previous', {
			href: '#',
			text: '<< Vorige',
			events: {click: function(event){
				event.preventDefault();
				var productIDs = Object.keys(imgs),
					index = productIDs.indexOf(product);
				if (index > 0) imgs[productIDs[index - 1]].fireEvent('click');
			}}
		}).inject(overlayNav),
		oNavNext = new Element('a.next', {
			href: '#',
			text: 'Volgende >>',
			events: {click: function(event){
				event.preventDefault();
				var productIDs = Object.keys(imgs),
					index = productIDs.indexOf(product);
				if ((index + 1) < productIDs.length) imgs[productIDs[index + 1]].fireEvent('click');
			}}
		}).inject(overlayNav),
		oNavClose = new Element('a.close', {
			href: '#',
			text: 'Sluit',
			events: {click: function(event){
				event.preventDefault();
				closeOverlay();
				overlay_bg.close();
			}}
		}).inject(overlayNav),
		overlayThumbs = new Element('div.overlayThumbs').inject(overlayNav),
		overlayTitle = new Element('div.overlayTitle').inject(overlayNav),
		overlayContent = new Element('div.overlayContent').inject(overlay),
		overlayText = new Element('div.overlayText').inject(overlay),
		loadPhoto = function(index){
			current = index;
			var photo = photos[current];
			overlayContent.empty().grab(new Element('img', {
				src: photo
			}));
			location.hash = '!/product/' + product + '/' + current;
		},
		setContent = function(element){
			Array.each(overlayText.childNodes, Element.dispose);
			overlayText.grab(element);
		},
		openOverlay = function(){
			overlay.setStyles({
				opacity: 0,
				display: 'block',
				top: window.getScroll().y + 20
			}).tween('opacity', 0, 1);
			overlay_bg.open();
		},
		closeOverlay = function(){
			overlay.tween('opacity', 1, 0);
			location.hash = '!';
		},/*
		navPrevNext = new Elements([oNavNext, oNavPrevious]),
		showNav = function(iWill){
			navPrevNext.setStyle('display', iWill ? 'inline' : 'none');
		},*/
		toThumbSrc = function(src){
			var thumb = "uploads/images/thumb/";
			if (src.indexOf(thumb) != -1) return src;
			var sizes = ['uploads/images/medium/', 'uploads/images/'];

			sizes.some(function(size){
				return (src.indexOf(size) != -1) && (src = src.replace(size, thumb));
			});
			return src;
		},
		setThumbs = function(photos){
			overlayThumbs.empty();
			photos.each(function(src, i){
				thumbSrc = toThumbSrc(src);
				new Element('img', {
					src: thumbSrc,
					events: {mouseenter: function(){
						loadPhoto(i);
					}}
				}).inject(overlayThumbs);
			});
		};

	overlay.inject(document.body, 'top').setStyle('display', 'none');

	$$('.productphoto').map(function(el){
		var _photos = Object.values(JSON.decode(el.get('data-photos'))).map(function(item){
				return item.url;
			}),
			content = el.getPrevious('.productcontent').dispose(),
			title = el.getNext('.productname').get('html');

		var _product = el.get('data-product');

		el.addEvent('click', function(){
			photos = _photos;
			product = _product;
			openOverlay();
			loadPhoto(0);
			setContent(content);
			overlayTitle.set('html', title);
			setThumbs(photos);
		}).set('tween', {duration: 300})
		  .setStyle('cursor', 'pointer');

		imgs[el.get('data-product')] = el;

	});

	// Update URL
	if (location.hash.slice(0, 3) == '#!/'){
		var _location = location.hash.slice(3).split('/');
		if (_location[0] == 'product'){
			imgs[_location[1]].fireEvent('click');
			loadPhoto(parseInt(_location[2], 10));
		}
	}


	// Email
	var email = document.getElement('.mail');
	if (email){
		email.addEvent('click', function(){
			this.set('href', this.get('href').replace('foin', 'info'));
			email.removeEvent('click', arguments.callee);
		}).set({
			text: email.get('text').replace('foin', 'info')
		});
	}

});