var portfolio = false;

$(document).ready(function() {
	onReadyFunctions();
});

function onReadyFunctions(){


	// KNOP MUIS OVERS

		muisOvers();
	
	// WEB PORTFOlIO
	
		start_portfolio();
		
	// PICKS
	
		//pickInterval = setInterval("picksBewegen()",4000);
	
	//GRAFIEKEN
	
		//grafieken();
	//openPagina('','');
	
	// LIJN
	
		var lengte_kliko = $('#inhoud_kliko').height();
		
		if(lengte_kliko < 535){
		
			lengte_kliko = 535;
		
		};
		
		$('#lijn_vert').css('height',lengte_kliko + 'px');

};






function muisOvers(){

	
	$('.menu_item').unbind('mouseenter mouseleave');
	$('.rand').unbind('mouseenter mouseleave');
	
	
	$(".rand").mouseenter(function() {
  		
  		$(this).addClass('rand_muis');
	
	}).mouseleave(function(){  	
    	
    	$(this).removeClass('rand_muis');	
        	
	});
	
	
	$(".menu_item").mouseenter(function() {
  		
  		$(this).addClass('menu_item_muis');
	
	}).mouseleave(function(){  	
    	
    	$(this).removeClass('menu_item_muis');	
        	
	});

};


var geopend = false;

function openPagina(dit,pagina){
	
	$('.menu_item').removeClass('menu_item_selected');
	$(dit).addClass('menu_item_selected');
	
	$('#inhoud_kliko').fadeOut(100,function(){
		
		console.log(pagina);
		
		var url = "paginas/" + pagina + ".php";
		$.post(url, {}, function(data){
		
			if(data !== 'error'){
				$('#inhoud_kliko').html(data);
				muisOvers();
				$('#inhoud_kliko').fadeIn(100);
			}else{
			
				alert('Oops.. er is iets fout gegaan, probeer het nogmaals');
			
			};
		});
	});
	
	
	
	/*
if(geopend == false){
		
		console.log('verplaatsen');
		
		$('#logo').animate({"margin-left": "0%", "left": "50px"}, "fast");
		$('#subtitel').animate({"margin-left": "0%", "left": "56px"}, "fast");
		$('#menu').animate({"margin-left": "0%", "left": "50px"}, "fast");
		$('#menu').css("text-align", "left");
		$('#foto').animate({"margin-left": "0%", "left": "58px"}, "fast");
		
		geopend = true;
	};
*/

};



function open_popup(type,id){
	
	if(type=='web'){
	
		var titel = web_array[id].naam;
		var url = web_array[id].url;
		var resp = web_array[id].resp;
		var desc = web_array[id].desc;
		
		var start_img =  web_array[id].screens[0].src;
	
	};
	
	if(type=='proof'){
	
		var titel = proof_array[id].naam;
		var url = proof_array[id].url;
		var resp = proof_array[id].resp;
		var desc = proof_array[id].desc;
		
		var start_img =  proof_array[id].screens[0].src;
	
	};
	
	if(type=='opensource'){
	
		var titel = opensource_array[id].naam;
		var url = opensource_array[id].url;
		var resp = opensource_array[id].resp;
		var desc = opensource_array[id].desc;
		
		var start_img =  opensource_array[id].screens[0].src;
	
	};
	
	
	$('#popup_titel').html(titel);
	$('#popup_url').html(url);
	$('#popup_url').attr('href','http://' + url);
	$('#popup_verantwoordelijkheden').html(resp);
	$('#popup_omschrijving').html(desc);
	$('#popup_image').attr('src',start_img);
	
	$('#popup_inhoud').html('');
	
	$('#popup_kliko').fadeIn(100, function(){
	
		
	
	});
	

};



function sluit_popup(){

	$('#popup_kliko').fadeOut(100, function(){
	
		$('#popup_inhoud').html('');
	
	});
	

};



function start_portfolio(){

	if(portfolio == true){
	
		var begin_table = '<table style="margin-top:30px;position:relative;margin-left:68px;" cellpadding="20px" cellspacing="0">';
		var eind_table = '</table>';
		
		var web = begin_table;
		var proof = begin_table;
		var opensource = begin_table;
		
		var i = 0;
			
		while(i < web_array.length){
			
			web += '<tr>';
			web += '<td><img src="' + web_array[i].thumb + '" onclick="open_popup(\'web\',' + i + ');" height="135px" class="rand muisHand"></td>';
			
			i++;
			
			if(i == web_array.length){
				
				web += '<td>&nbsp;</td>';
				
			}else{
			
				web += '<td><img src="' + web_array[i].thumb + '" onclick="open_popup(\'web\',' + i + ');" height="135px" class="rand muisHand"></td>';
				i++;
			};
			
			web += '</tr>';
		
		};
		
		
		var i = 0;
			
		while(i < proof_array.length){
			
			proof += '<tr>';
			proof += '<td><img src="' + proof_array[i].thumb + '" onclick="open_popup(\'proof\',' + i + ');" height="135px" class="rand muisHand"></td>';
			
			i++;
			
			if(i == proof_array.length){
				
				proof += '<td>&nbsp;</td>';
				
			}else{
			
				proof += '<td><img src="' + proof_array[i].thumb + '" onclick="open_popup(\'proof\',' + i + ');" height="135px" class="rand muisHand"></td>';
				i++;
			};
			
			proof += '</tr>';
		
		};
		
		
		var i = 0;
			
		while(i < opensource_array.length){
			
			opensource += '<tr>';
			opensource += '<td><img src="' + opensource_array[i].thumb + '" onclick="open_popup(\'opensource\',' + i + ');" height="135px" class="rand muisHand"></td>';
			
			i++;
			
			if(i == opensource_array.length){
				
				opensource += '<td>&nbsp;</td>';
				
			}else{
			
				opensource += '<td><img src="' + opensource_array[i].thumb + '" onclick="open_popup(\'opensource\',' + i + ');" height="135px" class="rand muisHand"></td>';
				i++;
			};
			
			opensource += '</tr>';
		
		};
		
		web += eind_table;
		proof += eind_table;
		opensource += eind_table;
		
		
		$('#portfolio_web').html(web);
		$('#portfolio_proof').html(proof);
		$('#portfolio_opensource').html(opensource);
		
		muisOvers();
	
	};

};

var web_array = [	{
    					"korte_naam": "mr",
    					"naam": "Marock&Roll",
    					"url": "www.marockandroll.com",
    					"cat": "site",
    					"resp": "Concept, Design & Front-end development",
    					"desc": "Band website with custom CMS, guestbook, photo-viewer, music player and webshop. Complete AJAX based.",
    					"thumb": "http://www.jasperbel.nl/v4/images/marockandroll.png",
    					"screens": [
    					    {
    					 
    					        "src": "http://www.jasperbel.nl/v4/images/mr_0.jpg"
    					        
    					    },
    					    {
    					     
    					        "src": "http://www.jasperbel.nl/v4/images/mr_1.jpg"
    					    }
    					]
					},						
 					{
    					"korte_naam": "vindiknu",
    					"naam": "Vindik.nu",
    					"url": "www.vindik.nu",
    					"cat": "site",
    					"resp": "Idea, Concept, Design, back & Front-end development",
    					"desc": "A website and tool for making online questionnaires. Including analyze tools for interpreting the results.",
    					"thumb": "http://www.jasperbel.nl/v4/images/vindiknu.png",
    					"screens": [
    					    {
    					        "omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/vindiknu_0.jpg"
    					        
    					    },
    					    {
    					      	"omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/vindiknu_1.jpg"
    					    }
    					]
					},
					{
    					"korte_naam": "iphoneapps",
    					"naam": "iPhoneApps",
    					"url": "www.iphoneapps.nl",
    					"cat": "site",
    					"resp": "Idea, Concept, Design, Back & Front-end development",
    					"desc": "A website focused on iPhone apps. You can find the top apps from all categories and send them strait to your iPhone.",
    					"thumb": "http://www.jasperbel.nl/v4/images/iphoneapps.png",
    					"screens": [
    					    {
    					        "omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/iphoneapps_0.jpg"
    					        
    					    },
    					    {
    					      	"omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/iphoneapps_1.jpg"
    					    }
    					]
					},	
					{
    					"korte_naam": "musiculum",
    					"naam": "Musiculum",
    					"url": "www.musiculum.com",
    					"cat": "site",
    					"resp": "Concept, Design, lead developer & Front-end development",
    					"desc": "A social platform for artists and music lovers. Listen, buy and discover music. Completely custom site, including webshop, musicplayer and social system.",
    					"thumb": "http://www.jasperbel.nl/v4/images/musiculum.png",
    					"screens": [
    					    {
    					        "omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/musiculum_0.jpg"
    					        
    					    },
    					    {
    					      	"omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/musiculum_1.jpg"
    					    }
    					]
					},
					{
    					"korte_naam": "vindiknu_oud",
    					"naam": "Vindik.nu (old/offline)",
    					"url": "n.v.t.",
    					"cat": "site",
    					"resp": "Idea, Concept, Design, Back & Front-end development",
    					"desc": "A social platform to not only 'like' something but all kind of opinions.",
    					"thumb": "http://www.jasperbel.nl/v4/images/vindiknu_oud.png",
    					"screens": [
    					    {
    					        "omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/vindiknu_oud_0.jpg"
    					        
    					    },
    					    {
    					      	"omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/vindiknu_oud_1.jpg"
    					    }
    					]
					},
					{
    					"korte_naam": "dd",
    					"naam": "DirtyDiamond",
    					"url": "www.dirtydiamond.nl",
    					"cat": "site",
    					"resp": "Concept, Design & Front-end development",
    					"desc": "Business website",
    					"thumb": "http://www.jasperbel.nl/v4/images/dd.png",
    					"screens": [
    					    {
    					        "omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/dd_0.jpg"
    					        
    					    },
    					    {
    					      	"omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/dd_1.jpg"
    					    }
    					]
					},
					{
    					"korte_naam": "avi",
    					"naam": "Avi",
    					"url": "www.checkavi.com",
    					"cat": "site",
    					"resp": "Concept, Design, Back & Front-end development",
    					"desc": "Music artists webpage, including blog, guestbook and agenda",
    					"thumb": "http://www.jasperbel.nl/v4/images/avi.png",
    					"screens": [
    					    {
    					        "omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/avi_0.jpg"
    					        
    					    },
    					    {
    					      	"omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/avi_0.jpg"
    					    }
    					]
					},
					{
    					"korte_naam": "jasperbelfotografie",
    					"naam": "Jasper Bel Fotografie",
    					"url": "www.jasperbel.nl/fotografie",
    					"cat": "site",
    					"resp": "Idea, Concept, Design, Back & Front-end development",
    					"desc": "My photography website",
    					"thumb": "http://www.jasperbel.nl/v4/images/jasperbelfotografie.png",
    					"screens": [
    					    {
    					        "omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/jasperbelfotografie_0.jpg"
    					        
    					    },
    					    {
    					      	"omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/jasperbelfotografie_0.jpg"
    					    }
    					]
					}
];

var proof_array = [	
					{
    					"korte_naam": "bookcom",
    					"naam": "Booking.com",
    					"url": "www.jasperbel.nl/bookingcom",
    					"cat": "proof",
    					"resp": "Everything",
    					"desc": "The original: http://bit.ly/A49oGE  In the meantime they updated their site a bit, so it ain't that bad anymore.",
    					"thumb": "http://www.jasperbel.nl/v4/images/bookcom.png",
    					"screens": [
    					    {
    					        "omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/bookcom_0.jpg"
    					        
    					    }
    					]
					},
					{
    					"korte_naam": "funda",
    					"naam": "Funda",
    					"url": "www.jasperbel.nl/funda",
    					"cat": "proof",
    					"resp": "Everything",
    					"desc": "The original: http://bit.ly/znDkiC",
    					"thumb": "http://www.jasperbel.nl/v4/images/funda.png",
    					"screens": [
    					    {
    					        "omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/funda_0.jpg"
    					        
    					    }
    					]
					}

];

var opensource_array = [			
					{
    					"korte_naam": "sqplayer",
    					"naam": "sqPlayer",
    					"url": "n.v.t.",
    					"cat": "opensource",
    					"resp": "Concept, Design & Front-end development",
    					"desc": "A secure media player for the web. Build using Javascript, PHP and MySQL. Open source release coming soon. Already in use at www.marockandroll.com and Musiculum",
    					"thumb": "http://www.jasperbel.nl/v4/images/sqplayer.png",
    					"screens": [
    					    {
    					        "omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/sqplayer_0.jpg"
    					        
    					    },
    					    {
    					      	"omschr": "",
    					        "src": "http://www.jasperbel.nl/v4/images/sqplayer_1.jpg"
    					    }
    					]
					}	

];