// Constants
var offsetPercentageV = 50; //(TODO: make overwriteable)
var offsetPercentageH = 50; //(TODO: make overwriteable) percentage - Horizontal offset of image. F.e. 0 -> image will be centered on the left; 50 -> image will be centered horizontally; 100 -> image will be right aligned

// Global vars
var imgWidth = '';
var imgHeight = '';
var imgRatio = '';
var winWidth = '';
var winHeight = '';
var winRatio = '';

// Global Objects
var windowObj = $(window);

/* -------------------------------------- */
/* --- BACKGROUND RESIZE AND POSITION --- */
/* -------------------------------------- */

//onload, get measures of active image, init functions
$(document).ready(function () {

	imgWidth = $(".activeimg").attr("width");
	imgHeight = $(".activeimg").attr("height");	
	setNewImage();

	if (useflash) {
		var width = $(window).width();
		var height = $(window).height();
		var node = $('object#background');
		if (node) {
			node.css( { 'width': width, 'height': height} );	
		}
		
		imgWidth = $('#background2 img').attr("width");
		imgHeight = $('#background2 img').attr("height");
		
		if(imgHeight==0) {
			imgHeight = $('#background2 img').height();
		}
		
		if(imgWidth==0) {
			imgWidth = $('#background2 img').width();
		}
		/*
		alert($("#background2 img"));
		alert(imgWidth);
		alert(imgHeight);
		*/
		setNewImage();
		
	}else{
		windowObj.resize(function() {
			setImage();
		});
	}	
});

//this function is called when gallery buttons are clicked
function displayThatImage(imgnumber, run) { //imgnumber can be either an int or "slide"
	if (run==0) {
		window.clearInterval(aktiv);
	}

	var node = $('object#background');
	var nodeexists = $('object#background').length;

	if (useflash) {
		node = document.getElementById('background');
		node.currentIndex(imgnumber);

		$(".button").removeClass("active");
		var thisButton = $("#" + imgnumber + "button");
		$(thisButton).addClass("active");

		$(".photographer").removeClass("active");
		var thisPhotographer = $("#" + imgnumber + "photographer");
		$(thisPhotographer).addClass("active");
		
	}else{
		// First, mark old active image as "oldactive", then remove "activeimg" class
		// $("#background .activeimg").addClass("oldactive");
		$("#background .activeimg").removeClass("activeimg");

		$('#background img').each(function() { 
			var thisid = parseInt($(this).attr("id"));
			if (thisid==imgnumber) {

				$("#" + thisid + "image").addClass("activeimg");
				imgWidth = $("#" + thisid + "image").attr("width");
				imgHeight = $("#" + thisid + "image").attr("height");

				$(".button").removeClass("active");
				var thisButton = $("#" + thisid + "button");
				$(thisButton).addClass("active");

				$(".photographer").removeClass("active");
				var thisPhotographer = $("#" + thisid + "photographer");
				$(thisPhotographer).addClass("active");
			}
			setNewImage();
		});
	
	}
	return false;
}

function setNewImage() {
	imgRatio = imgWidth / imgHeight; // Get values  of imgWidth and imgHeight in template OR via displayThatImage
	setImage();
}

function setImage() {

	winWidth = windowObj.width();
	winHeight = windowObj.height();
	winRatio = winWidth / winHeight;
	
	if (winRatio>imgRatio) { resizeToWinWidth();} //window is wider than image -> image is 100% width of window
	if (winRatio<imgRatio) { resizeToWinHeight();}	//image is wider than window -> image is 100% height of window
}

function resizeToWinHeight() {
	var newImgWidth = winHeight * imgRatio;
	$("#background, #background2").css({"width":newImgWidth,"height":winHeight});
	
	$("#background .activeimg, #background2 img").css({"width":newImgWidth,"height":winHeight});
	var thisImgWidth = winHeight * imgRatio;
	var imgLeftOffset = (0-(((thisImgWidth-winWidth)/100) * offsetPercentageH));
	$("#background, #background2").css({"left":imgLeftOffset,"top":"0"});
	fadeInActive();
}

function resizeToWinWidth() {
	var newImgHeight = winWidth * (1 / imgRatio);
	$("#background, #background2").css({"width":winWidth,"height":newImgHeight});
	$("#background .activeimg, #background2 img").css({"width":winWidth,"height":newImgHeight});
	var thisImgHeight = winWidth * (1 / imgRatio);
	var imgHeightOffset = (0-(((thisImgHeight-winHeight)/100) * offsetPercentageV));
	$("#background, #background2").css({"top":imgHeightOffset,"left":"0"});
	fadeInActive();
}

function fadeInActive() {
//	$("#background .activeimg").fadeIn(400);
//	$("#background .oldactive").fadeOut(400); 
//	$("#background .oldactive").removeClass("oldactive");
}

/* -------------------------------------------------- */
/* --- CONTENT RESIZING ON LOAD AND WINDOW RESIZE --- */
/* -------------------------------------------------- */

var logoHeight = '';
var naviHeight = '';
var naviPadding = '';
var anchorHeight = '';
var innerheight = '';

var maxhidden = 0; //HEIGHT OF HIDDEN CONTENT

$(document).ready(function () {

	//height of head elements
	logoHeight =$("#logo").height();
	naviHeight = $("#navigation").height();
	naviPadding = $("#navigation").css("padding-bottom");
	
	if($("#anchors").length) {
		anchorHeight = $("#anchors").height();
	}else{
		anchorHeight = 0;
	}
	
	//height of inner content
	innerheight = $("#inner").height();

	/*
	$('#content img').load(function() { //do it again if one image is loaded
		calcContent();
	});
	*/

	if ($.browser.opera) { //jScrollPane is buggy in Opera, so objects will be position:relative with body scrolling
		$("#contentwrapper").css({"overflow":"show", "position":"relative", "height":innerheight});
		$("body").css({"overflow":"auto"});
		$("#textbutton").css({"display":"none"});
		$("#anchors").css({"display":"none"});
	} else { 
		var checkifhidden = 0;
		$(".measureheight").each(function() {
			var temphidden = $(this).height();
			if(temphidden>maxhidden) {
				maxhidden = temphidden;
				
			}
		});
		if (maxhidden > 0) {
			initHiddenContent(); //hidden content exists
		}else{
			bindResizeCalcContent(); //no hidden content... normal behaviour			
		}
	} 
	
	
});

//this initializes the content size calculation if window resized (and calls function right away)
function bindResizeCalcContent() {
	$(window).bind("resize", calcContent);
	calcContent();
}

//this stops the content size calculation if window resized (necessary for project page)
function unbindResizeCalcContent() {
	$(window).unbind("resize", calcContent);
}

function calcContent() {
	innerheight = $("#inner").height();

	winHeight= $(window).height();
	//calculate maximum content height dynamically
	var maxContentHeight = winHeight - logoHeight - naviHeight - parseInt(naviPadding) -2;

	
	if (anchorHeight > 0) {
		maxContentHeight = maxContentHeight - 1 - anchorHeight;
	}
	
	//adapt content height, either maxContentHeight or its native innerHeight
	if(innerheight > maxContentHeight) {
		if (maxContentHeight < 0) maxContentHeight = 0;
		updateContent(maxContentHeight);
	}else{
		updateContent(innerheight); //TODO: This does not have to be fired at any resize
	}
}

function updateContent(contentHeight) {

	$(".jScrollPaneContainer").css({"height":contentHeight+"px"});
	$(".jScrollPaneDrag").css({"height":contentHeight+"px"});
	$("#contentwrapper").css({"height":contentHeight+"px"});
	$("#content").css({"height":contentHeight+"px"});

	$('#content').jScrollPane({ //re-init scrollbars
		reinitialiseOnImageLoad: true
	});

	var content = $('#content');
	$('.anchorlink').bind('click', function() {
		var targetElementSelectorString = $(this).attr('rel');
		content[0].scrollTo(targetElementSelectorString);
		return false;
	});
	setphantom();
}

//Global constants
var slideDur = 350; //ms

//Global vars
var closebottomPosition = 0; 
var unscrolledHeight = 0;
var openbottom = 0; //boolean value to indicate if content is open oder hidden
var hidecontent = 0; //to indicate

//this function sets the original height and position in order to reset it

function initHiddenContent() {

	$(".jScrollPaneContainer").css({"height":innerheight+"px"});
	$(".jScrollPaneDrag").css({"height":innerheight+"px"});
	$("#contentwrapper").css({"height":innerheight+"px"});
	$("#content").css({"height":innerheight+"px"});	

	//get native size of content
	unscrolledHeight = innerheight;
	
	//set bottom position value for contentwrapper
	var maxhiddenPadding = $(".measureheight").css("padding-bottom");	//maxhidden, we know already... add padding-bottom of measureheight element
	maxhidden = maxhidden + parseInt(maxhiddenPadding);
	closedbottomPosition = -(maxhidden);
	
	//on load, hide content
	$("#contentwrapper").css({"bottom":closedbottomPosition + "px"});
	
	//init toggler
	openbottom = 0;
	$("#textbutton").click(function () {
		if (openbottom==1) { //hide project details
			hideHiddenContent();
			openbottom=0;
		}else{ //show project details
			showHiddenContent();
			openbottom=1;
		}
		return false;
	});
}

function showHiddenContent() {
	var maxContentHeight = winHeight - logoHeight - naviHeight - parseInt(naviPadding) -2;
	if (maxContentHeight > unscrolledHeight) {
		maxContentHeight = unscrolledHeight;
	}
	$("#contentwrapper").animate({"bottom":0,"height":maxContentHeight +"px"}, slideDur, function() {
		bindResizeCalcContent();
	});
	$("#textbutton").addClass("active");
}

function hideHiddenContent() {
	$("#content").jScrollPaneRemove();
	unbindResizeCalcContent();
	$("#contentwrapper").animate({"bottom":closedbottomPosition,"height":unscrolledHeight+"px"}, slideDur);
	$("#content").animate({"height":unscrolledHeight+"px"});
	$("#textbutton").removeClass("active");
}

/* ------------------------- */
/* --- TOGGLE NAVIGATION --- */
/* ------------------------- */

$(document).ready(function () {
	
	//get height of navigation and fix for good it before sub-elements are hidden
	var navnativeheight = $("#navigation").height();
	
	//catch an opera bug of making navigation muuuch too high
	if (navnativeheight>190) {
		navnativeheight=190;
	}
	
	//fix naviheight and submenu height
	$("#navigation").css({"height":navnativeheight});
	$("#navigation ul").css({"height":navnativeheight});
	
	// hide all...
	
	$("#navigation ul").each(function(){
		$(this).css({display:"none"});
	});
	
	// hover
	$(".toggleparent").each(function (i) {
		var thisParent = $(this);
		if (($.browser.msie)) {
			thisParent.mouseenter(function (e) {
				thisParent.find("ul").css({display:"block"});
			});	
			thisParent.mouseleave(function (e) {
				thisParent.find("ul").css({display:"none"});
			});

		}else{
			thisParent.mouseenter(function (e) {
				thisParent.find("ul").stop().compatFadeIn(400, function() {
					$(this).css({opacity:"1"});
				});
			});	
			thisParent.mouseleave(function (e) {
				thisParent.find("ul").css({display:"none"});
			});
		}
	});
});

/* Phantom Space */

function setphantom() {
	var phantom = $('#contentwrapper').height();
	$('.phantom').css({height: phantom});
}