var fadeoutSnelheid = 1000;
var fadeinSnelheid = 1000;
var autoWisselheid = 4000;
var actiefClass = "actief";
var startID = "start";
var inhoudDIV = "#inhoud_port";
var menuDIV = "#menu_port";
var pijlClass = "gele-pijl";
var pijlSrc = "static/images/pijl.png";
var submenuClass = ".submenu";
var submenuOpenClass = "submenu-open";

var currentStep = 0;
//var currentPage = 0;
$(document).ready(function()
{
	// alle afbeeldingen onzichtbaar maken
	$('.images li a img.portfolio_image').css({opacity:0});
	//portfolio wissel
	/*
	var autoWissel = setInterval(function () {
		//wisselen tot er geen volgende meer is
		if (typeof $(inhoudDIV+" ."+actiefClass).next().attr("title") !== "undefined") {
			setItemsVisibility();
			$(menuDIV+" a img").not("."+submenuOpenClass).remove();
			$(menuDIV+" a#"+$("#inhoud_port div."+actiefClass).next().attr("title")).prepend("<img id='"+startID+"' src='"+pijlSrc+"' class='"+pijlClass+"'>");
			$(inhoudDIV+" div."+actiefClass).fadeOut(fadeoutSnelheid).next().fadeIn(fadeinSnelheid).addClass(actiefClass).prev().removeClass(actiefClass);
		}
		else{
			setItemsVisibility();
			$(menuDIV+" a img").not("."+submenuOpenClass).remove();
			$(inhoudDIV+" div."+actiefClass).fadeOut(fadeoutSnelheid).parent().find("div:first").fadeIn().addClass(actiefClass);
			$(inhoudDIV+" div:last").removeClass(actiefClass);
			$(menuDIV+" > a:first").prepend("<img id='"+startID+"' src='"+pijlSrc+"' class='"+pijlClass+"'>");
		}
	}, autoWisselheid);
	*/
	//menu item mouseover
	$(menuDIV+" > a:not([class='knop'])").mouseover(function(){
		$(menuDIV+" a img:not([id='"+startID+"'])").remove();
		if (!$(this).find("img#"+startID).length > 0){
			$(menuDIV+" a").removeClass(actiefClass);
			$(this).addClass(actiefClass);
			$(menuDIV+" a."+actiefClass).prepend("<img src='"+pijlSrc+"' class='"+pijlClass+"'>");
		}
		//open submenu
		$(submenuClass).hide();
		$(menuDIV+" a img").removeClass(submenuOpenClass);
		if ($(this).prev(submenuClass).length > 0) {
			$(this).prev().show();
			$(this).find("img."+pijlClass).addClass(submenuOpenClass)
		}
	//menu item mouseout
	}).mouseout(function(){
		$(menuDIV+" a img:not([id='"+startID+"'])").not("."+submenuOpenClass).remove();
	//menu item klik
	}).click(function () {
		//setItemsVisibility();
		//clearInterval(autoWissel);
		if ($(this).hasClass("sub"))
				return false;
		
		$(".submenu a").removeClass("klik");
		$(menuDIV+" a img").remove();
		$(this).prepend("<img id='"+startID+"' src='"+pijlSrc+"' class='"+pijlClass+"'>");
		$(inhoudDIV+" div").fadeOut(fadeoutSnelheid,function() {$(this).css({marginTop:0});}).parent().find("div[cid='"+$(this).attr("cid")+"']:first").fadeIn(fadeinSnelheid,function() {slide(0);}).addClass(actiefClass).parent().find("div:not([cid='"+$(this).attr("cid")+"'])").removeClass(actiefClass);
		//$(".image_slider:not([class="+actiefClass+"],:animated)").css({marginTop:0});
		
		resetSlide();
		return false;
	//mouseout
	}).parent().bind("mouseleave",function(){
		$(submenuClass).hide();
	//submenu klik
	}).parent().find(submenuClass+" a").bind("click", function(){
		//setItemsVisibility();
		//clearInterval(autoWissel);
		
		$(".submenu a").removeClass("klik");
		$(menuDIV+" a img").remove();
		//$(inhoudDIV+" div").hide().removeClass(actiefClass);
		$(inhoudDIV+" div").fadeOut(fadeoutSnelheid,function() {$(this).css({marginTop:0});}).removeClass(actiefClass).parent().find("div[cid="+$(this).attr("cid")+"]").fadeIn(fadeinSnelheid,function() {slide(0);}).addClass(actiefClass);
		$(this).parent().next().prepend("<img id='"+startID+"' src='"+pijlSrc+"' class='"+pijlClass+"'>");
		$(this).addClass("klik");
		
		//$(".image_slider:not([class="+actiefClass+"],:animated)");
		resetSlide();
		return false;
	});
	
	//hoofdmenu, submenu mouseout
	$(submenuClass,menuDIV).bind("mouseleave",function(){
		$(menuDIV+" a img:not([id='"+startID+"'])").remove();
		$(submenuClass).hide();
	});
	
	$("#next").click(function() {
		slide(+1);
		return false;
	});
	$("#prev").click(function() {
		slide(-1);
		return false;
	});
	
	
	
	slide(0);
	
	//$("a.klik", menuDIV).click();
	//
	//resetSlide();
	/*
	// volgende knop
	$("#next").click(function () { 
		if (typeof $(inhoudDIV+" ."+actiefClass).next().attr("title") !== "undefined") {
			//setItemsVisibility();
			clearInterval(autoWissel);
			$(inhoudDIV+" ."+actiefClass).fadeOut(fadeoutSnelheid, function () {
				$(menuDIV+" a img").remove();
				$(menuDIV+" a#"+$(this).next().attr("title")).prepend("<img id='"+startID+"' src='"+pijlSrc+"' class='"+pijlClass+"'>");
				$(this).next().fadeIn(fadeinSnelheid).addClass(actiefClass).prev().removeClass(actiefClass);
			});
		}
		return false;
	}).mouseover(function(){
		$(submenuClass).hide();
		$(menuDIV+" a img:not([id='"+startID+"'])").remove();
	});
	
	// vorige knop
	$("#prev").click(function () {
		if (typeof $(inhoudDIV+" ."+actiefClass).prev().attr("title") !== "undefined") {
			//setItemsVisibility();
			clearInterval(autoWissel);
			$(inhoudDIV+" ."+actiefClass).fadeOut(fadeoutSnelheid, function () {
				$(menuDIV+" a img").remove();
				$(menuDIV+" a#"+$(this).prev().attr("title")).prepend("<img id='"+startID+"' src='"+pijlSrc+"' class='"+pijlClass+"'>");
				$(this).prev().fadeIn(fadeinSnelheid).addClass(actiefClass).next().removeClass(actiefClass);
			});
		}
		return false;
	}).mouseover(function(){
		$(submenuClass).hide();
		$(menuDIV+" a img:not([id='"+startID+"'])").remove();
	});
	//einde portfolio wissel
	*/
	//corrigeer achtergrond
	function checkBG(){
		if ($(window).width() < 1025) {
			$("html").css("background-position","left");	
		}
		else {
			$("html").css("background-position","center");				
		}
	}
	
	checkBG();
	
	$(window).resize(function(){checkBG()});
	//setItemsVisibility(true);
	
	//clearInterval(autoWissel);
	//einde corrigeer achtergrond
});

function slide(dir)
{
	var num = 4;
	var itemHeight = $("#inhoud_port .actief li").height();
	//var totalHeight = $("#inhoud_port .images").height();

	var total = $("#inhoud_port .actief li").length;
	var steps = Math.ceil(total/num);
	var top = null;
	
	if ((dir > 0 && currentStep < steps-1) || (dir < 0 && currentStep > 0))
	{
		currentStep+=dir;
		top = currentStep * itemHeight;
		//$("#inhoud_port .actief").animate({marginTop:-top},250);
	}
	
	var sel = [];
	for (var i=0; i<num; i++)
		sel.push('#inhoud_port .actief ul li:eq(' + ((currentStep*num)+i) + ') img');
	
	var $img = $(sel.join(','));
	$img.each(function() {
		if ($(this).css("opacity") < 1)
		{
			var src = $(this).attr('data-src');
			this.onload = function() {
				$(this).animate({opacity:1}, 250);
			}
			$(this).attr("src",src);
		}
	});
	
	if (top != null)
		$("#inhoud_port .actief").animate({marginTop:-top},250);
	
	if (dir == 0)
	{
		//currentStep =
		var t = Math.abs(parseInt($("#inhoud_port .actief").css("margin-top")));
		currentStep = t / itemHeight;
	}
	
	// next uitschakelen als men niet verder kan scrollen
	if (currentStep == steps-1)
		$("#next").css({opacity:.5});
	else
		$("#next").css({opacity:1});
	
	if (currentStep == 0)
		$("#prev").css({opacity:.5});
	else
		$("#prev").css({opacity:1});
}

function resetSlide()
{
	$("#next").css({opacity:1});
	$("#prev").css({opacity:.5});
	currentStep = 0;
}

function setItemsVisibility(first)
{
	var max = 4;
	if (first)
		loop($(inhoudDIV+" ."+actiefClass));
	else
		$(inhoudDIV+" div").not("."+actiefClass).each(function() {
			loop(this);
		});
	function loop(obj)
	{
		var i,j,n = $("a",obj).length;
		if (n > max)
		{
			var items = new Array();
			do {
				var found = false;
				var num = parseInt(Math.random() * n);
				for (i in items)
					if (items[i]===num)
						found = true;
				if (!found)
					items.push(num);
			} while (items.length<max);	
			$("a",obj).css("display","none");
			for (i in items)
			{
				j = items[i];
				var img = $("a:eq("+j+")",obj).css("display","block").find("img");
				if ($(img).attr("src") == "undefined" || $(img).attr("src") == undefined || $(img).attr("src") == "")
					$(img).attr("src",$(img).attr("longdesc"));
				if (i<max)
					$("a:eq("+j+")",obj).css("margin-right","20px");
			}
		}
	};
}