window.addEvent('domready', function(){
	
	//initGrid();
	
	if ($('units'))
		initUnits();
	
	if ($('info_dennis'))
		initLinks();
	
});

sfHover = function() {

	var sfEls = $$('div.bestellen');
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" bestellen_hover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" bestellen_hover\\b"), "");
			
		}
	}
	
	var sfEls = $$('div.portfolio');
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" portfolio_hover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" portfolio_hover\\b"), "");
		}
	}
	
	var sfEls = $$('div.informatie');
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" informatie_hover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" informatie_hover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


function initGrid() {
	$('gridknop').onclick = function() {
		if ($('grid').style.display == 'block')
			$('grid').style.display = 'none';
		else
			$('grid').style.display = 'block';		
	}
}

var currentunit;
var nextunit;
var previousunit;
function initUnits() {
	
	var previous = $('arrow_previous');
	var next = $('arrow_next');
	var units = $$('div.unit');
	var unitlength = 480;
	currentunit = 0;
	nextunit = 1;
	previousunit = units.length-1;
	
	// hide all
	units.each(function(element) {
		element.style.left = unitlength+'px';
	});
	
	// show first
	units[0].style.left = '0';

	next.onclick = function() {
		nextUnit();
	}
	previous.onclick = function() {
		previousUnit();
	}


}

function nextUnit() {
	var units = $$('div.unit');
	
	// current unit slideout
	var fx = new Fx.Styles(units[currentunit], {duration:1000, wait:false, transition: Fx.Transitions.Quint.easeInOut});
 	fx.start({
			'left': [0,'-480px']
	});
	
	
	// next unit slidein
	var fx = new Fx.Styles(units[nextunit], {duration:1000, wait:false, transition: Fx.Transitions.Quint.easeInOut});
 	fx.start({
			'left': ['480px',0]
	});
	
	if (nextunit == units.length-1) {
		currentunit++;
		nextunit = 0;
		previousunit = units.length-2;
	}
	else if(currentunit == units.length-1) {
		currentunit = 0;
		nextunit = 1;
		previousunit = units.length-1;
	}
	else {
		currentunit++;
		nextunit++;
		previousunit=currentunit-1;
	}
}

function previousUnit() {
	var units = $$('div.unit');
	
	// current unit slideout
	var fx = new Fx.Styles(units[currentunit], {duration:1000, wait:false, transition: Fx.Transitions.Quint.easeInOut});
 	fx.start({
			'left': [0,'480px']
	});
	
	
	// previous unit slidein
	var fx = new Fx.Styles(units[previousunit], {duration:1000, wait:false, transition: Fx.Transitions.Quint.easeInOut});
 	fx.start({
			'left': ['-480px',0]
	});
	
	if (previousunit == 0) {
		currentunit = 0;
		nextunit=currentunit+1;
		previousunit = units.length-1;
	}
	else if(currentunit == 0) {
		currentunit = units.length-1;
		nextunit = 0;
		previousunit = units.length-2;
	}
	else {
		currentunit--;
		nextunit=currentunit+1;
		previousunit=currentunit-1;
	}
	
}

function initLinks() {
	$('link_dennis').onmouseover = function() {
		showInfo('info_dennis');
	}
	$('link_dennis').onmouseout = function() {
		hideInfo('info_dennis');
	}
	$('link_martijn').onmouseover = function() {
		showInfo('info_martijn');
	}
	$('link_martijn').onmouseout = function() {
		hideInfo('info_martijn');
	}
	$('link_joost').onmouseover = function() {
		showInfo('info_joost');
	}
	$('link_joost').onmouseout = function() {
		hideInfo('info_joost');
	}
}

function showInfo(elm) {
	if (document.getElementById(elm)) {
		var fx = new Fx.Styles(elm, {duration:0, wait:false});
		fx.start({
				'opacity': [0,1]
		});
		var fx = new Fx.Styles($('random_quote'), {duration:0, wait:false});
		fx.start({
				'opacity': [1,0]
		});
		
	}
	
}

function hideInfo(elm) {
	if (document.getElementById(elm)) {
		var fx = new Fx.Styles(elm, {duration:0, wait:false});
		fx.start({
				'opacity': [1,0]
		});
		var fx = new Fx.Styles($('random_quote'), {duration:0, wait:false});
		fx.start({
				'opacity': [0,1]
		});
	}	
	
}

function mouseOverProperty(elm) {
	elm.className = 'hover';
	if (elm.nextSibling.nodeName == "TD")
	{
		if (elm.nextSibling.className == "red")
			elm.nextSibling.className = 'hoverRed';
		else if (elm.nextSibling.className == "orange")
			elm.nextSibling.className = 'hoverOrange';
		else if (elm.nextSibling.className == "green")
			elm.nextSibling.className = 'hoverGreen';
		else
			elm.nextSibling.className = 'hoverValue';
	}
	else
	{
		if (elm.nextSibling.nextSibling.className == "red")
			elm.nextSibling.nextSibling.className = 'hoverRed';
		else if (elm.nextSibling.nextSibling.className == "orange")
			elm.nextSibling.nextSibling.className = 'hoverOrange';
		else if (elm.nextSibling.nextSibling.className == "green")
			elm.nextSibling.nextSibling.className = 'hoverGreen';
		else
			elm.nextSibling.nextSibling.className = 'hoverValue';
	}
}

function mouseOverValue(elm) {
	if (elm.className == "red")
		elm.className = 'hoverRed';
	else if (elm.className == "orange")
		elm.className = 'hoverOrange';
	else if (elm.className == "green")
		elm.className = 'hoverGreen';
	else
		elm.className = 'hoverValue';
	if (elm.previousSibling.nodeName == "TD")
		elm.previousSibling.className = 'hover';
	else
		elm.previousSibling.previousSibling.className = 'hover';
}

function mouseOutProperty(elm, className) {
	elm.className = 'property';
	if (elm.nextSibling.nodeName == "TD")
		elm.nextSibling.className = className;
	else
		elm.nextSibling.nextSibling.className = className;
}

function mouseOutValue(elm, className) {
	elm.className = className;
	if (elm.previousSibling.nodeName == "TD")
		elm.previousSibling.className = 'property';
	else
		elm.previousSibling.previousSibling.className = 'property';
}