// LOAD/CREATE IMG
function showImage(id) {
	
	fixBackground();
	$('#background #imgcontainer').remove();
	$('#background img').remove();	
	$('#background').addClass('loading');
	var img = new Image();
	$(img).load(function () {
		$(this).hide();
		
		// DIMENSIONS IMAGE
		var iwidth = this.width; 
		var iheight = this.height;
		
		// DIMENSIONS CONTAINER
		var left = $('#left').width();
		var textcolumn = $('#textcolumn').width();
		var background = $('#background').width();
		var backgroundheight = $('#background').height();
		var totalwidth = left+textcolumn+background;
		var windowwidth = $(window).width();
		var backgroundwidth = '';
		
		if (windowwidth < totalwidth){
			var x = windowwidth - left - textcolumn;
		} else {
			var x = $('#background').width();
		}
		var y = backgroundheight;
	
		// DOING MAGIC!
		var modX = x/iwidth;	
		var modY = y/iheight;
		if (modX>modY) {
			iwidth=(iwidth*modX);
			iheight=(iheight*modX);
		} else {
			iwidth=(iwidth*modY);
			iheight=(iheight*modY);
		}
		$(this).css({marginLeft: - ( iwidth - x )/2,marginTop:  - ( iheight - y )/2,width: iwidth,height: iheight});		    				     
		$('#background').removeClass('loading').append(this);
		$(this).fadeIn();
	}).error(function () {
	// error?
	}).attr('src', images_full[id]);					
};	

// LOAD portfolio
function portfolio(id) {

	fixBackground();
	var left = $('#left').width();
	var textcolumn = $('#textcolumn').width() + 56; // PLUS PADDING-left-right
	var background = $('#background').width();
	var totalbreedte = left+textcolumn+background; // VAN ALLE CONTENT
	var windowwidth = $(window).width(); // VAN DE BROWSER ZELF
	
	if (totalbreedte > windowwidth){
		// CONTENT IS GROTER DAN BROWSER
		var bgW = windowwidth-(left+textcolumn);
	} else {
		// BROWSER IS GROTER DAN CONTENT
		var bgW = background;
	}
	
	// APPLY
	$("#background").css({width: bgW});	
	
	// REMOVE CURRENT IMG
	$("#background img").remove();
	$("#background #imgcontainer").remove();
	
	// APPEND CONTAINER
	$("#background").append("<div id='imgcontainer'></div>");	
	
	
	// THE IMG
	var img = new Image();
	$(img).load(function () {
		$(this).hide();
		// DOCUMENT
		var documentH = $("#background").height();
		var documentW = $("#background").width();
		$("#imgcontainer").css({height: documentH, width: documentW});
	
		// AFBEELDING
		var iwidth = this.width; 
		var iheight = this.height;
		
		// AFBEELDING VERHOUDING
		var y = documentH;
		var x = documentW;
		var modX = x/iwidth;
		var modY = y/iheight;		
				
		if (modX<=modY) {
			newW=(iwidth*modX);
			newH=(iheight*modX);
		} else {
			newW=(iwidth*modY);
			newH=(iheight*modY);
		}

		// DEBUGGING
		//alert(" docW:" +documentW+ " docH:" +documentH+ "\n iwidth:" +iwidth+ " iheight:" +iheight+ "\n modX:" +modX+ " modX:" +modY+ "\n newW:" +newW+ " newH:" +newH );			
		
		$(this).css({width: newW, height: newH, top: "50%", left: "50%", marginLeft: -(newW/2), marginTop: -(newH/2)});
	
		
		$('#imgcontainer').append(this);
		$(this).fadeIn();
	}).error(function () {
	// error?
	}).attr('src', images[id]);
	
	
};	

function fixBackground(){
	$("#background").css({width: 1427-(170+304)});
	var document_height = $(window).height();
	var header_height = 65+13;  // height + padding-top
	var footer_height = 16+20; // height + padding-top-bottom
	//alert(footer_height);
	var backgroundnewheight = document_height - (header_height + footer_height);
	//alert(backgroundnewheight);
	$("#background").css({height: backgroundnewheight});
}

// RE-RENDER DIMENSIONS CURRENT IMAGE
function onWindowResize(){
		
		
		if ($("#background #imgcontainer").length > 0){
			// ALS IMGCONTAINER BESTAAT
								
					fixBackground();
					var left = $('#left').width();
					var textcolumn = $('#textcolumn').width() + 56; // PLUS PADDING-left-right
					var background = $('#background').width();
					var totalbreedte = left+textcolumn+background; // VAN ALLE CONTENT
					var windowwidth = $(window).width(); // VAN DE BROWSER ZELF
	
					if (totalbreedte > windowwidth){
						// CONTENT IS GROTER DAN BROWSER
						var bgW = windowwidth-(left+textcolumn);
					} else {
						// BROWSER IS GROTER DAN CONTENT
						var bgW = background;
					}				
	
					// APPLY
					$("#background").css({width: bgW});	
	
					// DOCUMENT
					var documentH = $("#background").height();
					var documentW = $("#background").width();
					$("#imgcontainer").css({height: documentH, width: documentW});
					
					// AFBEELDING
					var iwidth = $("#imgcontainer img").width(); 
					var iheight = $("#imgcontainer img").height();
					// AFBEELDING VERHOUDING
					/*	if (iwidth >= iheight){	
							var ratioImg = iwidth / iheight;
						} else {
							var ratioImg = iheight / iwidth;
						}
					// CONTAINER VERHOUDING
					if (documentW >= documentH){	
						var newH = documentH;
						var newW = documentH * ratioImg;
					} else {
						var newH = documentW / ratioImg;
						var newW = documentW;
					}
					$("#imgcontainer img").css({width: newW, height: newH, marginLeft: -(newW/2), marginTop: -(newH/2)});*/
					
					// AFBEELDING VERHOUDING
					var y = documentH;
					var x = documentW;
					var modX = x/iwidth;
					var modY = y/iheight;
							
			
					//modX = Math.round(modX*100)/100  //returns 28.5	
					//modY = Math.round(modY*100)/100  //returns 28.5						
							
					if (modX<=modY) {
						newW=(iwidth*modX);
						newH=(iheight*modX);
					} else {
						newW=(iwidth*modY);
						newH=(iheight*modY);
					}
			
					// DEBUGGING
					//alert(" docW:" +documentW+ " docH:" +documentH+ "\n iwidth:" +iwidth+ " iheight:" +iheight+ "\n modX:" +modX+ " modX:" +modY+ "\n newW:" +newW+ " newH:" +newH );			
					
					//$(this).css({width: newW, height: newH, top: "50%", left: "50%", marginLeft: -(newW/2), marginTop: -(newH/2)});					
					$("#imgcontainer img").css({width: newW, height: newH, top: "50%", left: "50%", marginLeft: -(newW/2), marginTop: -(newH/2)});

		
		} else {
			// ALS IMGCONTAINER NIET BESTAAT
			
				// DIMENSIONS IMAGE
				var iwidth = $('#background img').width(); 
				var iheight = $('#background img').height();
				
				// DIMENSIONS CONTAINER
				var left = $('#left').width();
				var textcolumn = $('#textcolumn').width() + 56 // PLUS Padding-left-right;
				var background = $('#background').width();
				var backgroundheight = $('#background').height();
				var totalwidth = left+textcolumn+background;
				var windowwidth = $(window).width();
				var backgroundwidth = '';
				
				if (windowwidth < totalwidth){
					var x = windowwidth - left - textcolumn;
				} else {
					var x = $('#background').width();
				}
				
				var y = backgroundheight;
			
				// DOING MAGIC!
				var modX = x/iwidth;	
				var modY = y/iheight;
				if (modX>modY) {
					iwidth=(iwidth*modX);
					iheight=(iheight*modX);
				} else {
					iwidth=(iwidth*modY);
					iheight=(iheight*modY);
				}
				$('#background img').css({marginLeft: - ( iwidth - x )/2,marginTop:  - ( iheight - y )/2,width: iwidth,height: iheight});
		}
}


function scrollPane(){	
	// REMOVE FIRST, THEN RELOAD
	$("#scrollcolumn").jScrollPaneRemove();
	var textcolumn = $("#textcolumn").height();
	$("#scrollcolumn").css({height: textcolumn});
	$("#scrollcolumn").jScrollPane({
		scrollbarWidth: 3,
		maintainPosition: true,
		showArrows: false,
		arrowSize: 5,
		scrollbarMargin: 0,
		dragMaxHeight: 50,
		reinitialiseOnImageLoad: true
	});
}

$(document).ready(function(){
	fixBackground();
    showImage(0); // LOAD THE IMAGE;
    scrollPane();
    
});


// ON WINDOW RESIZE
$(window).bind('resize', function(){
	fixBackground();
	onWindowResize();
	scrollPane();	
})