window.addEvent('domready', function(){
	$$('.nojs').destroy();



	/*
	 * PRODUCTKLEUREN
	 */
	var colours = $(document.body).getElements('.attribute-colour label');
	var bigphoto = document.id('bigphoto');

	if(colours && bigphoto) {
		bigphoto = bigphoto.getElement('img');

		colours.addEvent('click', function(e) {
			var articlenr = this.getProperty('data-attribute').toString();
			bigphoto.set('src', '/media/article_media/' + articlenr.replace(/\./g, '') + '.jpg');
			document.id('articlenr_holder').set('html', articlenr);
		});
	}






	/*
 	 * OVERTEXT LABELS
	 */
	$$('.overtext').each(function(e){ new OverText(e); });

	/*
 	 * BRANDBOX
	 */
	var brandbox = document.id('brandbox');
	if (brandbox){
		var 	ul = brandbox.getElement('ul'),
			next = brandbox.getElement('.next'),
			prev = brandbox.getElement('.prev'),
			paging = brandbox.getElement('.paging');

		var animate = new Fx.Animate.Fade(ul, 'li', {
			duration: 1300,
			interval: 8000,
			onNavigate: function(from, to) {
				if(!paging) return;
				var pageFrom = paging.getElement('.page'+from);
				var pageTo = paging.getElement('.page'+to);
				if(pageFrom && pageTo) {
					pageFrom.removeClass('active');
					pageTo.addClass('active');
				}
			}
		});
	}

	/*
	 * PRODUCTS SLIDER (FRONT PAGE BANNER)
	 */
	var productsliders = $$('.productslider');
	if (productsliders){
		var animate = null;

		productsliders.each(function(slider) {
			var items = slider.getElements('li').length;
			if (items <= 4) return;

			animate = new Fx.Animate.Scroll(slider, 'li', {
				perPage: 4,
				perStep: 1,
				direction: 'right',
				duration: 800,
				interval: 6000,
				transition: 'sine:out'/*'linear'*/
			});
		});
		
		if(animate && productsliders.getParent('div')) {
			var next = productsliders.getParent('div').getElement('a.next');
			var prev = productsliders.getParent('div').getElement('a.prev');

			if(next) next.addEvent('click', function(e) { if(e) e.stop(); animate.next(); });
			if(prev) prev.addEvent('click', function(e) { if(e) e.stop(); animate.previous(); });
		}	
	}

	/*
	 * AUTO SUMBIT PRODUCT FILTER
	 */
	var shop = document.id('shop');
	if (shop){
		var delay = 1500,
			timeout = null,
			blur = null,
			main = shop.getElement('.main'),
			filter = shop.getElement('.filter'),
			autosubmit = function(){
				if (main && !timeout) main.spin();
				clearTimeout(timeout);
				timeout = (function(){ filter.getElement('form').submit(); /*this.form.submit();*/ }).delay(delay, this);
			};

		if (filter){


			/* Begin custom colours */
			filter.getElements('ul.colors a').addEvent('click', function(e) {
				var li = this.getParent('li');
				li.toggleClass('active');
				var checkboxes = li.getElements('input');
				if(checkboxes) {
					var checked = li.hasClass('active');
					checkboxes.each(function(chk) {
						chk.set('checked', (!checked) ? '' : 'checked');
					});
					autosubmit();
				}
			});
			/* End custom colours */

			filter.getElements('label').addEvent('click', function(e) {
				this.getParent('li').toggleClass('active');
			});

			
			filter.getElements('select,input').addEvent('change', autosubmit);
			filter.getElements('[type=radio],[type=checkbox]').addEvent('click', function(){ this.blur(); });
		}

		$$('.autosubmit').addEvents({
			change: function() {
				if (main && !timeout) main.spin();
				clearTimeout(timeout);
				timeout = (function(){ this.form.submit(); }).delay(delay, this);
			},
			keyup: function(){
				clearTimeout(blur);
				blur = (function(){ this.blur(); }).delay(delay * 2, this);
			}
		});

		var itemContainer = shop.getElement('#items .attributes .attribute-colour');
		if (itemContainer){
			var items = itemContainer.getChildren('li'), active = null;
			items.forEach(function(item){
				var input = item.getElement('input[type=radio]').addClass('hidden');
				input.addEvents({
					click: function(){ 
						this.blur(); 
					},
					change: function(){
						if (active) active.removeClass('active');
						active = item.addClass('active');
					}
				});
				if (input.checked) {
					active = item.addClass('active');
				}
			});
		}
	}
});