window.addEvents({
	'domready': function() {
		init();
		
		if (document.id('detail')) {
			initProdDetail();
		}

		if (document.id('prodoverview')) {
			initProdOverview();
		}
		
		// faq
		initFAQtoggling();
		
		// hotspots
		if (document.id('hotspots')) {
			initHotspots(document.id('hotspots'));
		}
	},
	'resize': function() {
		init();
	}
});

/**
 * default functionality when page loaded or resized
 * @author Rocco Janse, <rocco@efocus.nl>
 * @return void()
 */
function init() {
	
	// center site
	centerToParent(document.id('site'), 'body');
	
	// nav
	handleNavigation();
	
	// IE7 fix for nav icon layout
	fixNavIcon();
	
	// send select values to querystring
	if (document.id('theme') && document.id('product') && document.id('filterbut')) {
		document.id('filterbut').addEvent('click', function(e) {
			e.stop();
			sendFormParams([document.id('theme'), document.id('product')]);
		});
		document.id('theme').addEvent('change', function(e) {
			e.stop();
			sendFormParams([document.id('theme'), document.id('product')]);
		});
	} 
	
	// custom scrollbar
	if ($$('div.scrollcontent').length > 0) {
		$$('div.scrollcontent').each(function(el) {
			if (!el.getElement('div.scroll').hasClass('noscroll')) {
				if (el.getElement('div.scroll').getHeight() > el.getHeight()) {
					customScrollbar(el, el.getElement('div.scroll'), $$('div.scrollbar'));
				};
			}
		});
	}
}

/**
 * setup product overview pages
 * @author Rocco Janse, <rocco@efocus.nl>
 * @return void
 */
function initProdOverview() {
	prodimgs = document.id('prodoverview').getElements('a').getElement('img');
	prodimgs.each(function(img) {

		img.setStyles({
			'width': 55,
			'height': 85
		});
		
		var fx = new Fx.Morph(img, {duration: 'short'});
		
		img.addEvents({
			'mouseenter': function() {
				fx.start({'width': [55, 65], 'height': [85, 105], 'left': [13, 8]});				
			},
			'mouseleave': function() {
				fx.start({'width': [65, 55], 'height': [105, 85], 'left': [8, 13]});
			}
		});
	});
}

/**
 * radomizes position of hotspots and displays tooltip on hotspot
 * @author Rocco Janse, <rocco@efocus.nl>
 * @param object parent element
 */
function initHotspots(el) {

	// randomize positions
	var hotspots = el.getElements('div.arrow');
	var range = 50;
	var dim = [(el.getWidth()/hotspots.length).toInt(), el.getHeight()]
	var i = 1;
	
	// tooltips
	var tips = new Tips('.tip', {
		className: 'tooltip',
		offset: {'x': -20, 'y': -5},
		title: function(el, tip) {
			var data = el.get('rel').split('::');
			return data[0];
		},
		text: function(el) {
			var data = el.get('rel').split('::');
			return data[1];
		},
		onShow: function(tip, el) {
			tips.options.offset.y = 0-tip.getDimensions().y-5;
			tip.setStyles({
				'visibility': 'hidden',
				'display': 'block'
			}).fade('in');
		}
	});
	
	// set hotspots	
	hotspots.each(function(spot) {
		var left = Number.random(((i-1)*dim[0])+range, (i*dim[0])-range);
		var top = Number.random(range, dim[1]-range);
		spot.setStyles({
			'position': 'absolute',
			'left': left,
			'top': top
		});
		i++;
	});

}

/**
 * centers elements to its parent center
 * @author Rocco Janse, <rocco@efocus.nl>
 * @param {object} element to center
 * @return void
 */
function centerToParent(el, parentelement) {
	var parent = el.getParent(parentelement);
	var pHeight = parent.getHeight();
	var height = el.getHeight();
	var margin = ((pHeight-height)/2).toInt();
	el.setStyles({
		'margin-top': margin
	});
	if (parent.getStyle('background-image')) {
		parent.setStyles({
			'background-position': '0 '+margin+'px'
		});
	}
}

/**
 * creates custom scrollbar elements and functionality
 * @author Rocco Janse, <rocco@efocus.nl>
 * @param {object} container (parent) element
 * @param {object} scoll element
 * @param {object} scrollbar element
 * @return void
 */
function customScrollbar(parent, scroll, scrollbar) {

	var topElement = scrollbar.getElement('div.top');
	var botElement = scrollbar.getElement('div.bottom');
	var trackElement = scrollbar.getElement('div.track');
	var handleElement = scrollbar.getElement('div.handle');
	
	if (!topElement || !botElement || !trackElement || !handleElement) {
		return false;
	}

	parent.setStyles({
		'overflow-y': 'hidden',
		'overflow-x': 'hidden'
	});
	
	scrollbar.setStyles({
		'display': 'block',
		'height': parent.getHeight()
	});

	var trackLength = scrollbar.getHeight()-topElement.getHeight()-botElement.getHeight();
	
	trackElement.setStyles({
		'height': trackLength
	});	
	
	var scrollFx = new Fx.Tween($$('div.scroll')[0]);
	var lastPos = 0;
	var skipFirst = false;
	
	var trackSlider = new Slider($$('div.track')[0], $$('div.handle')[0], {
		wheel: false,
		offset: 0,
		range: [0, ((scroll.getHeight()*1.2)/2)],
		steps: 350,
		snap: true,
		onTick: function(pos) {
			scrollFx.set('margin-top', 0 - this.step - pos);
			this.knob.setStyle(this.property, pos);		
		},
		onChange: function(step){
			if (skipFirst == true) {
				scrollFx.set('margin-top', 0-step);		
			}
			skipFirst = true;
		},
		mode: 'vertical'
	});

	topElement.addEvent('click', function() {
		if ((trackSlider.step - 20) >= 0) {
			trackSlider.set(trackSlider.step - 20);
		}
	});
	
	botElement.addEvent('click', function() {
		if ((trackSlider.step + 20) <= ((scroll.getHeight()*1.2)/2)) {
			trackSlider.set(trackSlider.step + 20);
		}
	});

}

/**
 * sends form params to querystring
 * @author Rocco Janse, <rocco@efocus.nl>
 * @param {array} elements to send value of
 */
function sendFormParams(arrElements) {

	var uri = window.location.href.split('?');
	var url = uri[0];
	var params = [];
	
	if(window.location.search.substring(1)) {
		var query = window.location.search.substring(1);
		var params = query.split('&');
	}
	
	arrElements.each(function(select) {
		arrElements.each(function(el) {
			params.each(function(param, index) {
				var pair = param.split('=');
				
				if (pair[0] == 'pg') {
					params.erase(pair.join('='));
				}
				
				if (pair[0] == el.get('id')) {
					params.erase(pair.join('='));
				}
			});
			params.include(el.get('id')+'='+el.getSelected()[0].value);
		});
		window.location.replace(url+'?'+params.join('&'));
	});
}

/**
* puts FAQ categories in an accordion and enables toggling of answers
* @author Klaas Dieleman <klaas[AT]efocus.nl>
* @return void
*/
function initFAQtoggling() {

	var list = $(document.body).getElement('ul.faq');
	if (!list) return;

	var items = list.getChildren('li');

	if (items.length > 0) {

		var handles = [];
		var questions = [];

		items.each(function(item) {
			if (item.getElement('div.questions')) {
				handles.include(item.getElement('h3'));
				questions.include(item.getElement('div.questions'));
			}
		});

		var faqAccordion = new Fx.Accordion(handles, questions, {
			'onActive': function(toggler) {
				toggler.getParent().addClass('active');
			},
			'onBackground': function(toggler) {
				toggler.getParent().removeClass('active');
			},
			'alwaysHide': true,
			'display': 0,
			'opacity': false
		});
		$$('div.questions')[0].setStyle('height', $$('div.questions')[0].getSize().y);
	}

	if ($$('ul.faq dd').length > 0) {
		if ($$('ul.faq dt').length == $$('ul.faq dd').length) {
			$$('ul.faq dt').each(function(item, index) {
				item.addEvent('click', function() {
					var oldHeight = item.getParent().getSize().y;

					$$('ul.faq dt').removeClass('open');
					$$('ul.faq dd').removeClass('open');

					$$('ul.faq dt')[index].addClass('open');
					$$('ul.faq dd')[index].addClass('open');

					// fix: edited by Rocco
					item.getParent('div.questions').setStyle('height', item.getParent().getSize().y);
					init();
				});
			});
		}
	}
}

/**
 * handles product detail ingredients and info panels
 * @author Rocco Janse, <rocco@efocus.nl>
 * @return void(0)
 */
function initProdDetail() {
	
	var panels = document.id('detail').getElements('div.panel');
	var buttons = document.id('detail').getElements('a.but');
	var i = 0;

	setActive = function(classname) {
		
		buttons.each(function(but) {
			but.removeClass('active');
			but.getParent('li').removeClass('active');
			if (but.hasClass(classname)) {
				but.addClass('active');
				but.getParent('li').addClass('active');
				init();
			}
		});
				
		panels.each(function(panel) {
			if (panel.hasClass(classname)) {
				panel.setStyle('display', 'block');
			} else {
				panel.setStyle('display', 'none');
			}
		});
	}
		
	buttons.each(function(but) {
		but.addEvent('click', function(e) {
			e.stop();
			var classname = but.get('class').split(' ');
			setActive(classname[1]);
		});
	});

	panels.each(function(panel) {
		panel.setStyle('display', 'none');
		if (i == 0) {
			panel.setStyle('display', 'block');
			var classname = panel.get('class').split(' ');
			setActive(classname[1]);
		}
		i++;
	});

}

/**
 * hides end popup
 * @author Rocco Janse, <rocco@efocus.nl>
 * @return {boolean} true || false
 */
function initPopups() {
	document.id('endpopup').fade('hide');	
	document.id('endpopup').setStyle('display', 'block');
	return true;
}

/**
 * hides home popup, starts video
 * @author Rocco Janse, <rocco@efocus.nl>
 * @return {boolean} true || false
 */
function startHomeVideo() {
	if(Browser.name =='ie') {
		document.id('homepopup').fade('hide');
		document.id('endpopup').fade('hide');	
	} else {
		document.id('homepopup').fade('out');
		document.id('endpopup').fade('out');
	}
	document.id('overlay').setStyle('display', 'none');
	jwplayer().play();	
	return true;
}

/**
 * shows home popup on end of video
 * @author Rocco Janse, <rocco@efocus.nl>
 * @return {boolean} true || false
 */
function completeHomeVideo() {
	if(Browser.name =='ie') {
		document.id('homepopup').fade('hide');
		document.id('endpopup').fade('show');	
	} else {
		document.id('homepopup').fade('out');
		document.id('endpopup').fade('in');
	}
	document.id('overlay').setStyle('display', 'block');
	return true;
}

/**
 * nasty fix for z-index on navigation icon in IE7
 * @author Rocco Janse, <rocco@efocus.nl>
 * @return void
 */
function fixNavIcon() {
	var icons = $$('li.active div.arrow');
	if (Browser.name =='ie' && Browser.version =='7' && icons.length > 0) {
		icons.each(function(icon) {
			newicon = icon.clone(true,true);
			var dim = icon.getPosition();
			newicon.setStyles({
				'position': 'absolute'
			});
			newicon.replaces(icon);
		});
	}
}

/**
 * handles hovers on navigation (mainly because of IE6)
 * @author Rocco Janse, <rocco@efocus.nl>
 * @return void
 */
function handleNavigation() {
	var li_row = $(document.body).getElements('ul.nav li.row'); // Request: FCVASP-5 - SEO aanpassingen
    var li = li_row.concat($(document.body).getElements('ul.nav li.active'));
	var nav = $(document.body).getElements('ul.nav li a.main');
	var icons = [];
	li.each(function(row, index) {
		var item = row.getElement('a.main');
		icons[index] = item.getElement('span.arrow');
		icons[index].setStyle('z-index', 50);
		if (item.hasClass('active')) {
			icons[index].setStyle('display', 'block');
		} else {
			icons[index].setStyle('display', 'none');
		}
		row.addEvents({
			'mouseenter': function() {
				icons[index].setStyle('display', 'block');
				if (row.getElement('div.subnav')) {
					row.getElement('div.subnav').setStyle('display', 'block');
				}
			},
			'mouseleave': function() {
				icons[index].setStyle('display', 'none');
				if (row.getElement('div.subnav')) {
					row.getElement('div.subnav').setStyle('display', 'none');
				}
			}
		});
	});
}