var currentThumbIndex = 1;
var totalThumbs = 0;
var thumbsOpen = false;
var totalThumbWidth = 0;
var leftThumbIndex = 0; // Which image is showing the most left of the whole
var thumbHolderOffset = 48;
var isLoading = false;
var slideShowTimer = 0;
var timerRunning = false;
var timerSpeed = 8000;
var totalProjectThumbWidth = 0;

$(document).ready(function(){
	
	// PROJECT LIST FUNCTIONS
	if ($("#projectListMask").length) {
		
		$("#projectListMask .projectThumbHolder").each(function(){
			totalProjectThumbWidth += $(this).width();
      	});
		
		$("#projectListContent").css('width', totalProjectThumbWidth);
		
		$("#thumbPrevImageProjectList").click(function(){ addProjectListScrollLeft(); });
		$("#thumbNextImageProjectList").click(function(){ addProjectListScrollRight(); });
		
	};
	
	
	if($("#thumbs").length){
		$("#thumbs").hide();
		$("#thumbs").animate({bottom:-68},200)
	}
	
	if($("#projectinfo").length){
		$("#projectinfo").click(function(){ showProjectInfo(); });
	}
	
	$(window).bind('resize', function() {
		resizeContainer();
	});
	
	resizeContainer();
	
	$("#paginator").css('visibility','hidden');
	
	// Click show/hide thumbs
	$("#showthumbs").click(function() {
		
		if(thumbsOpen == true){
			hideThumbs();
		}
		else{
			showThumbs();
		}	
		resizeContainer();
	});
	
	//start slideshow
	if ($("#startslideshow").length) {
		currentThumbIndex = 0;
		
		$("#startslideshow").click(function() {
			$("#projectdetail_container").hide();
			$("#photo_container").show();
			$("#photo").css('opacity',0);
			$("#photo").animate({opacity:1})
			$("#paginator").css('bottom',-70);
			$("#paginator").css('visibility','visible');
			$("#paginator").css('display','block');
			$("#paginator").delay(200).animate({bottom:15},200);
			
			$("#thumbList a:first").addClass("active");
			slideShowTimer = setInterval(nextImageByTimer,timerSpeed)
			
			resizeContainer();
			
		});
	}
	
	// Add scrollbar for project intro
	if ($("#detailInfoContent").length) {
		$('#detailInfoContent').tinyscrollbar();
	}
	
		
	// Add Prev
	if ($("#previous_photo")) {
		$("#previous_photo").click(function(){ previousImage(); });
	}
	if ($("#next_photo")) {
		$("#next_photo").click(function(){ nextImage(); });
	}
	
	//show image
	if ($("#thumbList").length) {
		
		totalThumbs = $("#thumbList a").length;
		
		$("#totalImages").html(totalThumbs);
		
		$("#thumbList a").click(function() {
			$("#thumbList a").removeClass("active");
			$(this).addClass("active");
			
			$("#currentpage").html($(this).index() + 1);
			currentThumbIndex = $(this).index();
			
			//todo: moeten twee foto's worden.. voor transition
			showNewImage($(this).attr("rel"), $(this).attr("title"));
			clearInterval(slideShowTimer);
			
			if (!$("#photo_container").is(":visible")) {
				$("#projectdetail_container").hide();
			}
		})
	};
	
	// HOME
	// Loop through thumbs to get entire list width

	if ($("#thumbs").length) {
		$("#thumbHolder a img").each(function(){
			totalThumbWidth += $(this).width();
      	});
	};

	// Give scrollable list 
	$("#thumbList").css('width',totalThumbWidth);
	
	if($("#thumbList").length){
		$("#thumbPrevImage").click(function(){ scrollThumbsNext(); });
		$("#thumbNextImage").click(function(){ scrollThumbsPrev(); });	
	}

});


// *****************************
// DETAIL PAGE - LOAD NEXT IMAGE
// *****************************

function nextImage(){
	clearInterval(slideShowTimer);
	
	var current = $("#thumbList").find('a.active');
	var next = current.next();

	if(!current.next().length){
		return;	
	}

	current.removeClass("active");
	next.addClass("active");
	
	showNewImage(next.attr("rel"), next.attr("title"));
	
	currentThumbIndex = next.index();
	$("#currentpage").html(currentThumbIndex + 1);
	resetArrows(currentThumbIndex);
	
}


function previousImage(){
	clearInterval(slideShowTimer);
	
	var current = $("#thumbList").find('a.active');
	var previous = current.prev();

	if(!current.prev().length){ return;	}

	showNewImage(previous.attr("rel"), previous.attr("title"))
	
	previous.addClass("active");
	current.removeClass('active');
	currentThumbIndex = previous.index();
	
	$("#currentpage").html(currentThumbIndex + 1);
	
	resetArrows(currentThumbIndex);
}


function nextImageByTimer(){
	var current = $("#thumbList").find('a.active');
	var next = current.next();

	if(!current.next().length){
		next = $("#thumbList a:first");	
	}
	
	current.removeClass("active");
	next.addClass("active");
	
	showNewImage(next.attr("rel"), next.attr("title"))
	
	currentThumbIndex = next.index();
	$("#currentpage").html(currentThumbIndex + 1);
	resetArrows(currentThumbIndex);
}


function pauseTimer(){
	clearInterval(slideShowTimer);
}


function pauseTimer(){
	slideShowTimer = setInterval(nextImageByTimer,timerSpeed);
}


function showNewImage(rel, title){
 	
	$('#photo').stop().animate({opacity: 0}, 100, function() {onLoadNewImage(rel)});
	$("#phototitle").html(title);
}


function onLoadNewImage(rel){
	$("#photo").attr("src", basepath+"photos/" + rel + ".jpg");
	$("#photo").css('opacity', 0);
	$("#photo").load(function() {
		resizeContainer();
		onNewImageLoaded();
	});
}

function onNewImageLoaded(){
	
	$('#photo').stop().animate({opacity: 1}, 200,function() {isLoading = false;});
}

function onFadeInComplete(){
	
}

// *****************
// SHOW / HIDE ARRUWS BASED ON CURRENT IMAGE
// *****************

function resetArrows(id){
	$("#next_photo").css('visibility',(id == (totalThumbs-1)) ? 'hidden' : 'visible');
	$("#previous_photo").css('visibility',(id == 0) ? 'hidden' : 'visible');
}

// *****************
// SCROLL THUMBS ON PROJECT DETAIL PAGE
// *****************
function scrollThumbsPrev(){
	var thumbHolderOffset = 48;
	var newLeft = ($("#thumbList").offset().left) - 100 - thumbHolderOffset;
	var maxLeft = $(window).width() - (2*thumbHolderOffset) - totalThumbWidth;
	
	$("#thumbList").animate({left:(newLeft < maxLeft) ? (maxLeft ): "-=100"},200)	

	setTimeout(checkScrollArrows,300);
}

// **********************************
// DETAIL PAGE - SCROLLING THE THUMBS
// **********************************

function scrollThumbsNext(){
	var newRight = ($("#thumbList").offset().left) + 100 - thumbHolderOffset;
	var maxRight = 0;
		
	$("#thumbList").animate({left:(newRight > maxRight) ? maxRight : "+=100"},200)	

	setTimeout(checkScrollArrows,300);
}

function checkScrollArrows(){
	var maxLeft = $(window).width() - totalThumbWidth;
	var newLeft = $("#thumbList").offset().left - thumbHolderOffset;
	
	//alert()
	if(($(window).width() - thumbHolderOffset) > totalThumbWidth){
		$("#thumbPrevImage").css('visibility','hidden');
		$("#thumbNextImage").css('visibility','hidden');
	}
	else{
		if($("#thumbList").offset().left == 48){
			$("#thumbPrevImage").css('visibility','hidden');
		}
		else{
			$("#thumbPrevImage").css('visibility','visible');	
		}
		if(newLeft == maxLeft){
			$("#thumbNextImage").css('visibility','hidden');
		}
		else{
			$("#thumbNextImage").css('visibility','visible');	
		}	
	
	}
}


function showProjectInfo(){
	clearInterval(slideShowTimer);
	$("#projectdetail_container").show();
	$("#photo_container").hide();
	$("#paginator").css('display','none');
	hideThumbs();
	
}

function hideProjectInfo(){
	$("#projectdetail_container").hide();
	$("#photo_container").show();
}

function showThumbs(){
	$("#thumbs").show();
	$("#thumbs").animate({bottom:-2},200)
	//$("#thumbs").animate({bottom:-2},200)	
	$("#paginator").animate({bottom:100},200)
	thumbsOpen = true;
}

function hideThumbs(){
	
	$("#thumbs").animate({bottom:-104},200)
	$("#paginator").animate({bottom:0},200)
	thumbsOpen = false;
	
}


// **************************************
// SCROLL THUMBS ON HOMEPAGE / BOOKS PAGE
// **************************************

function addProjectListScrollLeft(){
	var maxLeft = 0;
	var newLeft = $("#projectListContent").offset().left + 200;
	
	if(newLeft > maxLeft){newLeft = maxLeft;} 
	
	$("#projectListContent").stop().animate({left:newLeft},300);
	
	setTimeout(checkProjectListScrolling,500)
}


function addProjectListScrollRight(){
	var maxLeft = $("#projectListMask").width() - $("#projectListContent").width() - 24;
	var newLeft = $("#projectListContent").offset().left - 200;
	
	if(newLeft < maxLeft){newLeft = maxLeft;}
	
	$("#projectListContent").stop().animate({left:newLeft},300);
	
	setTimeout(checkProjectListScrolling,500)
}


function checkProjectListScrolling(){
	var maxLeft = $("#projectListMask").width() - $("#projectListContent").width()
	var currLeft = $("#projectListContent").offset().left - (2 * 48);
	
	if($("#projectListMask").width() < $("#projectListContent").width()){
		$("#thumbPrevImageProjectList").css('visibility',($("#projectListContent").offset().left == 48) ? 'hidden' : 'visible');
		$("#thumbNextImageProjectList").css('visibility',(currLeft <= (maxLeft-48)) ? 'hidden' : 'visible');
	}
	else{
		$("#thumbNextImageProjectList").css('visibility','hidden');
		if($("#projectListContent").offset().left == 48){
			$("#thumbPrevImageProjectList").css('visibility','hidden');	
		}
	}
}



function resizeContainer() {
	
	var height = $("#sizer").height() - $("#header").height();
	
	var height_panels = 0;
	
	if(thumbsOpen){
		 height_panels += $("#thumbs").height();
	}
	
	if ($("#projectListMask").length) {
		$("#projectListMask").css('width',$(window).width()-100);
		checkProjectListScrolling();	
	}	
	
	/*if ($("#thumbs").is(":visible")) {
		 height_panels += $("#thumbs").height();
	}*/
	
	if ($("#paginator").is(":visible")) {
		 height_panels += $("#paginator").height();
	}
	$("#site_container").css("padding-bottom", (height_panels + 28)+"px");
	$("#site_container").height(height-(height_panels+28));
	
	$("#photo").scaleImage({
        parent: '#photo_container',
        center: true,
		  scale: 'fit',
		  maxwidth: 1000,
		  maxheight: 1000,
        fade: 0
    });
	
	// Scale thumb holder
	$("#thumbHolder").css('width',$(window).width()-100);
	
	//
	if ($("#thumbList").length)
		checkScrollArrows();


	//align project detail info also
	if ($("#projectdetail_container").length) {
		var newtop = ($(document).height()-$("#header").height())/2 - ($("#projectdetail_container").height()/2);
		if (newtop<=$("#header").height()) {
			newtop = $("#header").height();
		}
		$("#projectdetail_container").css('top',newtop);
	}
	
	
	if($("#projectlist").length){
		$("#projectlist").css('top',($(document).height()/2) - ($("#projectlist").height()/2));
	}
}