var vp_midX = ($('.viewport').width()/2);
var vp_minLeft = 0;
var vp_maxLeft = 0;
var vp_minTop = 0;
var vp_maxTop = 0;
var vp_midX = 0;
var vp_midY = 0;
var vp_posX = 0;
var vp_posY = 0;
var vp_bezig = false;
var vp_interval = '';
var vp_mouseovercount = 0;

$(document).ready(function(){
	
	$('.viewport').addClass('viewporteffect').removeClass('viewport');
	$('.viewporteffect').parent().append('<div class="viewport"></div>');
	$('.viewport').append($('.viewporteffect').clone());
	$('.viewporteffect').eq(0).remove();
	$('.viewport').css({'position':'absolute','cursor':'pointer'})
	$('.viewporteffect').attr('id', 'viewporteffect').removeClass('viewporteffect');
	
	//$('#rubrieken').append('<input id="log" type="text" style="position:absolute;top:560px" />');
	//$('#rubrieken').append('<input id="log1" type="text" style="position:absolute;top:580px" />');

	
	$('#viewporteffect').load(function(){
		vp_minLeft = 0;
		vp_maxLeft = ($('#viewporteffect').width() - $('.viewport').width());
		vp_minTop = 0;
		vp_maxTop = ($('#viewporteffect').height() - $('.viewport').height());
		
		// Center middle
		$('.viewport').scrollTop( (vp_maxTop/2) );
		$('.viewport').scrollLeft( (vp_maxLeft/2) );	
		vp_midX = ($('.viewport').offset().left + ($('.viewport').width()/2));
		vp_midY = ($('.viewport').offset().top + ($('.viewport').height()/2));
		
	});
	
	$('.viewport').click(function(){
		window.location = $('#hftlink').attr('href');	
	});
	
	$(document).ready(function(e){
		vp_bezig = true;
		vp_mouseovercount++;
		vp_interval = setInterval(function(e){ 
			viewportLoop(e);
		},20);
	});
	
	//$(document).mouseout(function(e){
	//	clearInterval(vp_interval);
	//	vp_bezig = false;
	//});
	
	$('.viewport img').hover(function(){
		//console.log("Erop");
		clearInterval(vp_interval);
	},function(){
		//console.log("Eraf");
		vp_interval = setInterval(function(e){ 
			viewportLoop(e);
		},20);
	});
	
	$('#container').mousemove(function(e){
		//Bereken positie van de muis;
		vp_posX = e.pageX;
		vp_posY = e.pageY;
		//$('#log').val(vp_posX);
		//$('#log1').val(vp_posY);
	});
	
	function viewportLoop(e){
		if(vp_bezig){
			
			//Bereken midden van de viewport;
			vp_midX = ($('.viewport').offset().left + ($('.viewport').width()/2));
			vp_midY = ($('.viewport').offset().top + ($('.viewport').height()/2));
			
			//Richting berekenen
			vp_naarRechts = (vp_posX > vp_midX);
			vp_naarBeneden = (vp_posY > vp_midY);
	
			
			
			if(vp_naarRechts && vp_naarBeneden){
				if($('.viewport').scrollLeft() < vp_maxLeft){
					vp_plus = ($('.viewport').scrollLeft()+1);
					$('.viewport').scrollLeft(vp_plus);
				}
				if($('.viewport').scrollTop() < vp_maxTop){
					vp_plus = ($('.viewport').scrollTop()+1);
					$('.viewport').scrollTop(vp_plus);
				}
			}else if(!vp_naarRechts && !vp_naarBeneden){
				if($('.viewport').scrollLeft() > vp_minLeft){
					vp_plus = ($('.viewport').scrollLeft()-1);
					$('.viewport').scrollLeft(vp_plus);
				}
				if($('.viewport').scrollTop() > vp_minTop){
					vp_plus = ($('.viewport').scrollTop()-1);
					$('.viewport').scrollTop(vp_plus);
				}
			}else if(vp_naarRechts && !vp_naarBeneden){
				if($('.viewport').scrollLeft() < vp_maxLeft){
					vp_plus = ($('.viewport').scrollLeft()+1);
					$('.viewport').scrollLeft(vp_plus);
				}
				if($('.viewport').scrollTop() > vp_minTop){
					vp_plus = ($('.viewport').scrollTop()-1);
					$('.viewport').scrollTop(vp_plus);
				}
			}else if(!vp_naarRechts && vp_naarBeneden){
				if($('.viewport').scrollLeft() > vp_minLeft){
					vp_plus = ($('.viewport').scrollLeft()-1);
					$('.viewport').scrollLeft(vp_plus);
				}
				if($('.viewport').scrollTop() < vp_maxTop){
					vp_plus = ($('.viewport').scrollTop()+1);
					$('.viewport').scrollTop(vp_plus);
				}
			}
		}
	}
});