var oContent = null;
var oOverlay = null;

var oParentGrid = null;
var o11 = null;
var o12 = null;		
var o13 = null;
var o21 = null;	
var o22 = null;
var o23 = null;	
var o31 = null;
var o32 = null;	
var o33 = null;
var oxx = null;

var iBoundaryMargin = 100;
var bAllowDraw = false;
var bAllowClick = false;

var iFrameRate = 45;
var iFrameInterval = Math.round( 1000 / iFrameRate );

var iOffsetX = 0;
var iOffsetY = 0;

var bDragging = false;
var bAnimating = false;

var iPrevMouseX = -1;
var iPrevMouseY = -1;	

var iStartMouseX = -1;
var iStartMouseY = -1;	


setTimeout("cadencer()", iFrameInterval );
function cadencer(){
	bAllowDraw = true;
	setTimeout("cadencer()", iFrameInterval );	
}
enx.support.touch = typeof Touch === 'object';	

enx('#clickme').click(
	function() {
	  enx('#book').animate({
		opacity: 0.25,
		left: '+=50',
		height: 'toggle'
	  }, 5000, function() {
		// Animation complete.
	  });
	}
);


function HideContent(){
	// Then make sure the content fades out
	
	if( location.hash != '' ){
		location.hash = '';
	}
	if( bRetrievingPage ){		
		bBlockRetrievingPage = true;
	}
	oContent.fadeOut( 500, function(){} );										
	oOverlay.fadeOut( 500, function(){} );		
	SetGridState(true);	
}
				
function onMouseDown( oASender ){
	
	// First make sure the animation stops if there is one
	o11.stop();
	o12.stop();
	o13.stop();
	o21.stop();
	o22.stop();
	o23.stop();
	o31.stop();
	o32.stop();
	o33.stop();	
	
	// Then make sure the content fades out
	// HideContent(); // this doesnt work on browsers, but does work on iPad and causes a problem
	
	// Init all the properties	
	bDragging = true;
	bAnimating = false;
		
	if (!enx.support.touch) {
		iPrevMouseX = oASender.pageX;
		iPrevMouseY = oASender.pageY;		
	}else{
		var touch = oASender.changedTouches[0];
		iPrevMouseX = touch.pageX;
		iPrevMouseY = touch.pageY;			
	}
	
	iStartMouseX = iPrevMouseX;
	iStartMouseY = iPrevMouseY;
	
	iOffsetX = 0;
	iOffsetY = 0;				
	
	// And quickly check if the boudaries are still OK
	CheckBoundaries();			
}	

function onMouseUp( oASender ){

	if( ( bDragging == false ) ){		
		return false;
	}

	bDragging = false;
	iClickMarge = 5;
		
	if (!enx.support.touch) {		
		iCurX = oASender.pageX;
		iCurY = oASender.pageY;
	}else{
		var touch = oASender.changedTouches[0];
		iCurX = touch.pageX;
		iCurY = touch.pageY;	
	}	
	
	if( 
		( iCurX < ( iStartMouseX + iClickMarge ) ) && 
		( iCurX > ( iStartMouseX - iClickMarge ) ) && 		
		( iCurY < ( iStartMouseY + iClickMarge ) ) && 
		( iCurY > ( iStartMouseY - iClickMarge ) )
	){
			bAllowClick = true;
	}
	
	iPrevMouseX = -1;
	iPrevMouseY = -1;
	
	iDuration = 700;
	iModifier = 1.6;													
	
	o11.animate({ top : ( o11.offset().top + (iOffsetY*iModifier) ) + "px", left : ( o11.offset().left + (iOffsetX*iModifier) ) + "px"}, iDuration);													
	o12.animate({ top : ( o12.offset().top + (iOffsetY*iModifier) ) + "px", left : ( o12.offset().left + (iOffsetX*iModifier) ) + "px"}, iDuration);													
	o13.animate({ top : ( o13.offset().top + (iOffsetY*iModifier) ) + "px", left : ( o13.offset().left + (iOffsetX*iModifier) ) + "px"}, iDuration);													
	o21.animate({ top : ( o21.offset().top + (iOffsetY*iModifier) ) + "px", left : ( o21.offset().left + (iOffsetX*iModifier) ) + "px"}, iDuration);													
	o22.animate({ top : ( o22.offset().top + (iOffsetY*iModifier) ) + "px", left : ( o22.offset().left + (iOffsetX*iModifier) ) + "px"}, iDuration);													
	o23.animate({ top : ( o23.offset().top + (iOffsetY*iModifier) ) + "px", left : ( o23.offset().left + (iOffsetX*iModifier) ) + "px"}, iDuration);													
	o31.animate({ top : ( o31.offset().top + (iOffsetY*iModifier) ) + "px", left : ( o31.offset().left + (iOffsetX*iModifier) ) + "px"}, iDuration);													
	o32.animate({ top : ( o32.offset().top + (iOffsetY*iModifier) ) + "px", left : ( o32.offset().left + (iOffsetX*iModifier) ) + "px"}, iDuration);													
	o33.animate({ top : ( o33.offset().top + (iOffsetY*iModifier) ) + "px", left : ( o33.offset().left + (iOffsetX*iModifier) ) + "px"}, iDuration);															
	
	CheckBoundaries();						
}		

function MoveDiv( oADiv, iAOffsetX, iAOffsetY ){	
	oADiv.css({ top : ( oADiv.offset().top + iAOffsetY ) + "px", left : ( oADiv.offset().left + iAOffsetX ) + "px" });				
}
		
function MoveDivTo( oADiv, iAX, iAY ){
	oADiv.css({ top : iAY + "px", left : iAX + "px"});				
}		

function AnimateAllDivs( iAOffsetX, iAOffsetY, iADuration, iAModifier ){

	o11.animate({ top : ( o11.offset().top + (iAOffsetY*iAModifier) ) + "px", left : ( o11.offset().left + (iAOffsetX*iAModifier) ) + "px"}, iADuration);													
	o12.animate({ top : ( o12.offset().top + (iAOffsetY*iAModifier) ) + "px", left : ( o12.offset().left + (iAOffsetX*iAModifier) ) + "px"}, iADuration);													
	o13.animate({ top : ( o13.offset().top + (iAOffsetY*iAModifier) ) + "px", left : ( o13.offset().left + (iAOffsetX*iAModifier) ) + "px"}, iADuration);													
	o21.animate({ top : ( o21.offset().top + (iAOffsetY*iAModifier) ) + "px", left : ( o21.offset().left + (iAOffsetX*iAModifier) ) + "px"}, iADuration);													
	o22.animate({ top : ( o22.offset().top + (iAOffsetY*iAModifier) ) + "px", left : ( o22.offset().left + (iAOffsetX*iAModifier) ) + "px"}, iADuration);													
	o23.animate({ top : ( o23.offset().top + (iAOffsetY*iAModifier) ) + "px", left : ( o23.offset().left + (iAOffsetX*iAModifier) ) + "px"}, iADuration);													
	o31.animate({ top : ( o31.offset().top + (iAOffsetY*iAModifier) ) + "px", left : ( o31.offset().left + (iAOffsetX*iAModifier) ) + "px"}, iADuration);													
	o32.animate({ top : ( o32.offset().top + (iAOffsetY*iAModifier) ) + "px", left : ( o32.offset().left + (iAOffsetX*iAModifier) ) + "px"}, iADuration);													
	o33.animate({ top : ( o33.offset().top + (iAOffsetY*iAModifier) ) + "px", left : ( o33.offset().left + (iAOffsetX*iAModifier) ) + "px"}, iADuration);	
}

function CheckBoundaries(){



	// Check de bovenkant
	if( ( o11.offset().top + o11.height() ) > (oViewport.offset().top - iBoundaryMargin) ){				
		
		// alert( o11.offset().top + ' > ( ' + oViewport.offset().top + ' - ' + iBoundaryMargin + ' )' )
		
		// Verplaats de divs aan de onderkant naar boven
		MoveDivTo( o31, o11.offset().left, o11.offset().top - o31.height() );
		MoveDivTo( o32, o12.offset().left, o11.offset().top - o31.height() );
		MoveDivTo( o33, o13.offset().left, o11.offset().top - o31.height() );												
		// Reset de pointers naar de divs zodat de volgende keer de berekeningen kloppen
		oxx=o31;o31=o11;o11=o21;o21=oxx;				
		oxx=o32;o32=o12;o12=o22;o22=oxx;							
		oxx=o33;o33=o13;o13=o23;o23=oxx;		
	}	
	
	// Check de onderkant
	if( ( o31.offset().top + o31.height() ) < ( ( oViewport.offset().top + oViewport.height() ) + iBoundaryMargin ) ){				
		// Verplaats de divs aan de bovenkant naar de onderkant
		MoveDivTo( o11, o31.offset().left, o31.offset().top + o31.height() );
		MoveDivTo( o12, o32.offset().left, o31.offset().top + o31.height() );
		MoveDivTo( o13, o33.offset().left, o31.offset().top + o31.height() );									
		// Reset de pointers naar de divs zodat de volgende keer de berekeningen kloppen
		oxx=o21;o21=o11;o11=o31;o31=oxx;							
		oxx=o22;o22=o12;o12=o32;o32=oxx;				
		oxx=o23;o23=o13;o13=o33;o33=oxx;				
	}		
	
	// Check de rechterkant
	if( ( o13.offset().left + o13.width() ) < ( ( oViewport.offset().left + oViewport.width() ) + iBoundaryMargin ) ){				
		// Verplaats de divs aan de linkerkant naar de rechterkant
		MoveDivTo( o11, o13.offset().left + o13.width(), o13.offset().top );
		MoveDivTo( o21, o13.offset().left + o13.width(), o23.offset().top );
		MoveDivTo( o31, o13.offset().left + o13.width(), o33.offset().top );									
		// Reset de pointers naar de divs zodat de volgende keer de berekeningen kloppen
		oxx=o12;o12=o11;o11=o13;o13=oxx;			
		oxx=o22;o22=o21;o21=o23;o23=oxx;				
		oxx=o32;o32=o31;o31=o33;o33=oxx;
		
	}	
	
	// Check de linkerkant			
	if( o11.offset().left > ( oViewport.offset().left - iBoundaryMargin ) ){		
		// Verplaats de divs aan de rechterkant naar de linkerkant
		MoveDivTo( o13, o11.offset().left - o13.width(), o11.offset().top );
		MoveDivTo( o23, o11.offset().left - o13.width(), o21.offset().top );
		MoveDivTo( o33, o11.offset().left - o13.width(), o31.offset().top );									
		// Reset de pointers naar de divs zodat de volgende keer de berekeningen kloppen				
		oxx=o13;o13=o11;o11=o12;o12=oxx;
		oxx=o23;o23=o21;o21=o22;o22=oxx;
		oxx=o33;o33=o31;o31=o32;o32=oxx;				
	}		
	
}


function onMouseMove( oASender ){
	
	//CheckBoundaries();	

	if( ( bDragging == true ) && bAllowDraw ){	
		bAllowDraw = false;
		
		if (!enx.support.touch) {
			iOffsetX = ( oASender.pageX - iPrevMouseX );
			iOffsetY = ( oASender.pageY - iPrevMouseY );	
		}else{
			var touch = oASender.changedTouches[0];
			iOffsetX = ( touch.pageX - iPrevMouseX );
			iOffsetY = ( touch.pageY - iPrevMouseY );			
		}
				
		//MoveDiv( oParentGrid, iOffsetX, iOffsetY );
				
		// Verplaats alle divs naar gelang de offset
		MoveDiv( o11, iOffsetX, iOffsetY );
		MoveDiv( o12, iOffsetX, iOffsetY );
		MoveDiv( o13, iOffsetX, iOffsetY );
		MoveDiv( o21, iOffsetX, iOffsetY );
		MoveDiv( o22, iOffsetX, iOffsetY );
		MoveDiv( o23, iOffsetX, iOffsetY );
		MoveDiv( o31, iOffsetX, iOffsetY );
		MoveDiv( o32, iOffsetX, iOffsetY );
		MoveDiv( o33, iOffsetX, iOffsetY );			
		
		// Onthou de huidige muis positie voor de volgende move event			
		if (!enx.support.touch) {
			iPrevMouseX = oASender.pageX;
			iPrevMouseY = oASender.pageY;
		}else{
			var touch = oASender.changedTouches[0];
			iPrevMouseX = touch.pageX;
			iPrevMouseY = touch.pageY;
		}
		
		// Controleer elke keer of de content nog wel zichtbaar is				
		CheckBoundaries();	
		
	}
}		

function InitDivPositions(){
	
	// First place the main content holder in de center of the screen. If content is large enough there will be an overlap			
	var iContWidth = o22.width();
	var iContHeight = o22.height();	
	var iOriginX = ( oViewport.width() - iContWidth ) / 2;
	var iOriginY = ( oViewport.height() - iContHeight ) / 2;			
	
	// Give all the divs the same content
	o11.html( o22.html() );
	o12.html( o22.html() );
	o13.html( o22.html() );
	o21.html( o22.html() );
	o23.html( o22.html() );
	o31.html( o22.html() );
	o32.html( o22.html() );
	o33.html( o22.html() );		
		
    // Centering the primary div on the screen
	MoveDivTo( o22, iOriginX, iOriginY );		
	
	// Position all surrounding divs to correct x and y values
	MoveDivTo( o11, (iOriginX - iContWidth), ( iOriginY - iContHeight ) );				
	MoveDivTo( o12, (iOriginX)			   , ( iOriginY - iContHeight ) );				
	MoveDivTo( o13, (iOriginX + iContWidth), ( iOriginY - iContHeight ) );				
	MoveDivTo( o21, (iOriginX - iContWidth), ( iOriginY) );				
	MoveDivTo( o23, (iOriginX + iContWidth), ( iOriginY) );				
	MoveDivTo( o31, (iOriginX - iContWidth), ( iOriginY + iContHeight ) );				
	MoveDivTo( o32, (iOriginX)			   , ( iOriginY + iContHeight ) );				
	MoveDivTo( o33, (iOriginX + iContWidth), ( iOriginY + iContHeight ) );				
}