function positionContent(varOnImageChange) {
	// image is allways the width of browser unless image is less heigh than browser and scaling is proportionally
    
	// determine browser height and width
	var varBrowserWidth;
	var varBrowserHeight;
	
	if( typeof( window.innerWidth ) == 'number' ) {	
		//Non-IE 		
		varBrowserWidth = window.innerWidth;
		varBrowserHeight = window.innerHeight; 
	
	} else if( document.documentElement &&	
	( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { 
		//IE 6+ in 'standards compliant mode' 
		varBrowserWidth = document.documentElement.clientWidth; 
		varBrowserHeight = document.documentElement.clientHeight; 
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { 
		//IE 4 compatible 
		varBrowserWidth = document.body.clientWidth; 
		varBrowserHeight = document.body.clientHeight; 
	} 
	
	// determine variables
    var varImageWidth = document.getElementById('largeImage').width;
	var varImageHeight = document.getElementById('largeImage').height;
    var varDifferenceWidth = varImageWidth - varBrowserWidth;
    var varMarginLeft = -1 * ((varImageWidth - varBrowserWidth)/2);	
	
	// if user is resizing: background should be redone
	if (varOnImageChange == 1) {
		// reset variables in case of refresh
		document.getElementById('largeImage').style.marginLeft = "0px";
		document.getElementById('largeImage').style.width = "1280px";
		document.getElementById('largeImage').style.height = "760px";
		document.getElementById('largeImage').style.width = "100%";
		// determine scaling of width of image and calculate new height of image
		var varScalingPercentageWidth = Math.round( ((varBrowserWidth/1280) * 100) );
		var varNewHeight = Math.round( ( ( 760 * varScalingPercentageWidth )/100 ) );
		document.getElementById('largeImage').style.height = varNewHeight + "px";
		var varImageHeight = document.getElementById('largeImage').height;
	}
	// if imageheight is smaller than browserheight: image must be set to height of browser
	if (varImageHeight < varBrowserHeight) {

		document.getElementById('largeImage').style.height = "100%";
		varImageWidth = document.getElementById('largeImage').width;		
		
		// calculate scaling percentage of image to scale width of image in proportions
		varScalingPercentage = Math.round( ((varBrowserHeight/varImageHeight) * 100) );
		document.getElementById('largeImage').style.width = varScalingPercentage + "%";
		// calculate the amount of pixels to move image to left because it's scaled to a larger size
		var varNewWidth = Math.round( ( ( varImageWidth * varScalingPercentage )/100 ) );
		var varNewMargin = -1 * ( Math.round( (varNewWidth - varImageWidth)/2 ) );
		document.getElementById('largeImage').style.marginLeft = varNewMargin + "px";
	}

	// make pix on homepage larger or smaller
	if (checkobject("home_holder")) {
		// first calculate new width of large images on homepage
		if (varImageWidth > varBrowserWidth) {
			var varNewWidthImageHome = (varBrowserWidth/2) - 50;
		} else {
			var varNewWidthImageHome = (varImageWidth/2) - 50;
		}
		var varEnlargementPercentageImageHome = Math.ceil((varNewWidthImageHome/document.getElementById('home_large_left').width)*100)/100;
		var varNewHeightImageHome = document.getElementById('home_large_left').height * varEnlargementPercentageImageHome;

		// now check if the height of the recalculated images is not too high else the height needs to be reset
		if  (varBrowserHeight < (varNewHeightImageHome + 68)) { 
			var varNewHeightImageHome = varBrowserHeight - 100;
			var varEnlargementPercentageImageHome = Math.ceil((varNewHeightImageHome/document.getElementById('home_large_left').height)*100)/100;
			var varNewWidthImageHome = document.getElementById('home_large_left').width * varEnlargementPercentageImageHome;
		}
		
		document.getElementById('home_large_left').width = varNewWidthImageHome;
		document.getElementById('home_large_left').height = varNewHeightImageHome;
		document.getElementById('home_large_right').width = varNewWidthImageHome;
		document.getElementById('home_large_right').height = varNewHeightImageHome;


	}
	
	// make pix and content on content page larger or smaller
	if (checkobject("content_page_holder")) {
		// first calculate new width of large images on homepage
		
		if (varImageWidth > varBrowserWidth) {
			var varNewWidthImageContent = (varBrowserWidth/2) - 50;
		} else {
			var varNewWidthImageContent = (varImageWidth/2) - 50;
		}
		var varEnlargementPercentageImageContent = Math.ceil((varNewWidthImageContent/document.getElementById('content_image_left').width)*100)/100;
		var varNewHeightImageContent = document.getElementById('content_image_left').height * varEnlargementPercentageImageContent;

		// now check if the height of the recalculated images is not too high else the height needs to be reset
		if  (varBrowserHeight < (varNewHeightImageContent + 68)) { 
			var varNewHeightImageContent = varBrowserHeight - 100;
			var varEnlargementPercentageImageContent = Math.ceil((varNewHeightImageContent/document.getElementById('content_image_left').height)*100)/100;
			var varNewWidthImageContent = document.getElementById('content_image_left').width * varEnlargementPercentageImageContent;
		}
		
		document.getElementById('content_image_left').width = varNewWidthImageContent;
		document.getElementById('content_image_left').height = varNewHeightImageContent;
		document.getElementById('content_page_right').style.width = (varNewWidthImageContent + 8) + "px";
		document.getElementById('content_page_right').style.height = (varNewHeightImageContent + 8) + "px";
		document.getElementById('content_text').style.width = ((varNewWidthImageContent + 8) - 30) + "px";
		var varContentTextHeight = Math.round( ((varNewHeightImageContent + 8) - 15) );
		document.getElementById('content_text').style.margin = "15px 15px 15px 30px"; 
		
		// check if text is higher than background element
		var varContentTextHolderHeight = parseInt(document.getElementById('content_page_right').style.height);
		if (varContentTextHolderHeight < document.getElementById('content_text').offsetHeight) {
			document.getElementById('content_text').style.fontSize = '11px';
			document.getElementById('content_text').style.lineHeight = '14px';
		}
	}
	
	
	// position and enlarge photo on project page
	// determine if the large image stays within the width of the browser
	if (checkobject("large_image_projectpage")) { 
		var varNewHeight = (varBrowserHeight - 220);
		var varEnlargementPercentage = Math.ceil((varNewHeight/document.getElementById('large_image_projectpage').height)*100)/100;
		var varNewWidth = Math.round(varEnlargementPercentage * document.getElementById('large_image_projectpage').width);
		
		if (varNewWidth > varBrowserWidth) {
			document.getElementById('large_image_projectpage').width = varBrowserWidth - 40;
		} else {
			document.getElementById('large_image_projectpage').height = varNewHeight;
		}
	}
	
	// make all items visible after image loads (only once)
	//showAllObjects(varOnImageChange);
}

// make all objects on page invisible
function hideAllObjects() {
	// make all items invisible (not until image loads)
	document.getElementById('image_holder').style.visibility = "hidden";
	document.getElementById('content_holder').style.visibility = "hidden";
	if (checkobject("projectpage")) { document.getElementById('projectpage').style.visibility = "hidden"; }
	//if (checkobject("large_image_projectpage_holder")) { document.getElementById('large_image_projectpage_holder').style.visibility = "hidden";	}
	if (checkobject("home_holder")) { document.getElementById('home_holder').style.visibility = "hidden"; }	
	if (checkobject("content_page_holder")) { document.getElementById('content_page_holder').style.visibility = "hidden"; }
}

// show all objects on page
function showAllObjects(varOnImageChange) {
	// make loading div invisible
	document.getElementById('loading').style.visibility = "hidden";
	// make all items visible
	document.getElementById('image_holder').style.visibility = "visible";
	document.getElementById('content_holder').style.visibility = "visible";
	if (checkobject("projectpage")) { document.getElementById('projectpage').style.visibility = "visible"; }
	if (varOnImageChange == 1) {
		if (checkobject("large_image_projectpage_holder")) { document.getElementById('large_image_projectpage_holder').style.visibility = "visible"; }
	}
	if (checkobject("home_holder")) { document.getElementById('home_holder').style.visibility = "visible"; }
	if (checkobject("content_page_holder")) { document.getElementById('content_page_holder').style.visibility = "visible"; }
}

// load large visual by pressing thumbnail
function loadImage(varSiteURL,varGalleryName,varImageName) {
	// hide video and audio (in case another media is active
	document.getElementById('video_holder').style.visibility = "hidden";					 
	if (checkobject("myytplayer")) {
		ytplayer = document.getElementById("myytplayer");
		ytplayer.stopVideo();
	}
	
	document.getElementById('large_image_projectpage_holder').style.visibility = "visible"; //"hidden";
	document.getElementById('large_image_projectpage_holder').innerHTML = "<center><img src=" + varSiteURL + "/wp-content/gallery/" + varGalleryName + "/" + varImageName + ".jpg id=large_image_projectpage /></img></center>";
	
	// set interval to see if image is loaded by checking the width (if not loaded it's 0)
	var checkImageLoaded = setInterval(function() {
		 var imageWidth = document.getElementById('large_image_projectpage').width;
		 if(imageWidth != 0) {
			clearInterval(checkImageLoaded);
			positionContent(0);
		 }
	}, 100);
}

// load video by pressing thumbnail
function loadVideo(youtube_id,starttime) { //youtube_title
	if (starttime == '') {
		starttime ='0';
	} 
	// hide image and audio (in case another media is active
	document.getElementById('large_image_projectpage_holder').style.visibility = "hidden";
	
	// show video
	document.getElementById('video_holder').style.visibility = "visible";
	ytplayer = document.getElementById("myytplayer");
	ytplayer.loadVideoByUrl('http://www.youtube.com/v/' + youtube_id,'' + starttime + '');
}

// check if object is on page
function checkobject(obj) { 
	if (document.getElementById(obj)) { return true; } else { return false; } 
} 

// these actions are executed at bottom of page
function actionsInitiate() {
	// reposition image after resize of browser
	$(window).resize(function() {
		positionContent(1);		
	});
	// make all items invisible (not until image loads)
	//hideAllObjects();
}