// voor afmetingen hoofdscherm
var main_margin = 30;
var main_max_height = 800;
var main_height;
var main_width;

// voor slider
var slide;
var slide_item;
var slide_wait = 3500;
var slide_duration = 500;
var slide_timer = false;
var slide_current_width;
var slide_total_width;

var scrollable = true;

// scrollen van lines
var scrolling_line = false;
var scrolling_line_direction = 0;

// diary
var current_diary = 0;
var diary_timer = false;
var diary_going = false;


function set_main(scale_window)
{
	// hoofd div schalen naar juiste maat
	var window_width = $(window).width();
	var window_height = $(window).height();
	
	// margins schaalbaar maken. bij 600 hoog zijn ze 15 px. bij 800 hoog zijn ze 45px
	if (window_height<=600) main_margin = 15;
	else if (window_height>=800) main_margin = 45;
	else main_margin = 15 + (800-window_height)/200*30;
	
	if (scale_window)
	{
		main_width = window_width - 2 * main_margin;
		main_height = window_height - 2 * main_margin;
		
		if (main_width > 1.5 * main_height) main_width = 1.5 * main_height;
		else main_height = main_width / 1.5;
		
		main_height = Math.round(main_height);
		main_width = Math.round(main_width);
		
		if (main_height > main_max_height) { main_height = main_max_height; main_width = 1.5 * main_height; }
	}
	
	var margin_top = Math.ceil((window_height - main_height)/2);
	var margin_left = Math.ceil((window_width - main_width)/2);

	$('#main').css({'width':main_width, 'height':main_height, 'margin-top':margin_top, 'margin-left':margin_left}).show();
	$('#nojs').remove();
	
}

function center_boxes()
{
	$('div.box').each(function(index,item){
		item = $(item);
		var w = item.width();
		var h = item.height();
		var x = Math.round((main_width-w)/2);
		var y = Math.round((main_height-h)/2);
		item.css('left', 25);
		item.css('top', y);
	});

}

function set_line_heights()
{
	// bereken de hoogte en locatie van de eventuele lines
	// tel eerst hoeveel lines er zijn die gevuld zijn met foto's
	var lines = []; 
	$('.line').each(function(index,item){ lines[lines.length] = $(item); });

	// afmetingen afhankelijk van aantal gevulde regels:
	// 1 regel :	(32.5) 35 (32.5)
	// 2 regels :	(20) 25 (10) 25 (20)
	// 3 regels :	(15) 20 (5) 20 (5) 20 (15)
	
	switch(lines.length)
	{
		case 1:	
			$('.line').css({'height':'35%', 'top':'32.5%'});
		break;
		case 2:
			$('.line').css('height', '25%');
			lines[0].css('top', '20%');
			lines[1].css('top', '55%');
		break;
		case 3:
			$('.line').css('height', '20%');
			lines[0].css('top', '15%');
			lines[1].css('top', '40%');
			lines[2].css('top', '65%');
		break;
	}
	
}

function build_lines()
{
	$('.linecontents').each(function(index,line){
		
		// voor elke regel de plaatjes schalen naar de goede hoogte en ze achter elkaar aan zetten
		var line_height = $(line).height();
		var line_width = 0;
		
		$(line).children('img').each(function(index,image){
		
			image = $(image);
			var w = parseInt(image.css('width'));
			var h = parseInt(image.css('height'));
			image.data('w', w);
			image.data('h', h);
			image.data('t', image.attr('title'));
			image.data('d', image.attr('description'));
			
			var image_width = Math.round(w * line_height / h);
			image.css({'height': line_height, 'left': line_width, 'width': image_width});
			line_width += image_width;

			if ($(line).attr('id')!='slidecontents')
			{
				image.click(function(event){ show_image(event.target); });
				image.css('cursor','pointer');
			}
	
		});
		
		$(line).data('linewidth', line_width);
		
		if ($(line).attr('id')=='slidecontents')
			slide_total_width = slide_current_width = line_width;
			
		// slide buttons als het een line was
		if ($(line).parent().hasClass('line'))
		{
			// alleen iets doen als de line breder is dan het scherm
			if (line_width > main_width)
			{
				$(line).siblings('.fwd').fadeIn().children('a').mousedown(function(event){ start_line_scroll($(event.target),1); }).mouseup(function(event){ stop_line_scroll(); }).mouseout(function(event){ stop_line_scroll(); });
				$(line).siblings('.back').children('a').mousedown(function(event){ start_line_scroll($(event.target),-1); }).mouseup(function(event){ stop_line_scroll(); }).mouseout(function(event){ stop_line_scroll(); });
			}
		}
	
	}).fadeIn();

}	

function start_line_scroll(target, d)
{
	scrolling_line = $(target).closest('div').siblings('.linecontents').get(0);
	scrolling_line_direction = d;

	var pos = parseInt($(scrolling_line).css('left'));
	
	if (scrolling_line_direction==1 && pos > main_width - $(scrolling_line).data('linewidth'))
	{
		// scroll naar rechts. schuif item naar links
		$(scrolling_line).stop().animate({left:main_width-$(scrolling_line).data('linewidth')}, 1000*(pos-(main_width-$(scrolling_line).data('linewidth')))/main_width, 'linear');
		$(scrolling_line).siblings('.back').fadeIn();
	}
	else if (scrolling_line_direction==-1 && pos < 0)
	{
		// scroll naar links. schuif item naar rechts
		$(scrolling_line).stop().animate({left:0}, 1000*pos/main_width*-1, 'linear');
		$(scrolling_line).siblings('.fwd').fadeIn();
	}
	else
	{
		stop_line_scroll();
	}

}

function stop_line_scroll()
{
	if (scrolling_line)
	{
		$(scrolling_line).stop();

		// aan begin of eind? fadeout knoppen
		var pos = parseInt($(scrolling_line).css('left'));
		
		if (pos <= main_width - $(scrolling_line).data('linewidth'))
		{
			$(scrolling_line).siblings('.fwd').fadeOut();
		}
		if (pos >= 0)
		{
			$(scrolling_line).siblings('.back').fadeOut();
		}	
	
		scrolling_line = false;
		scrolling_line_direction = 0;

	}

}


function start_slide()
{
	if (slide_timer) clearInterval(slide_timer);
	
	slide = $('#slidecontents');
	slide_item = slide.children('img:first');
	slide.css('left', Math.round((main_width-slide_item.width())/2));
	
	slide_timer = setInterval(do_slide, slide_wait);
}

function do_slide()
{
	// bepaal scroll waarde
	slide_item = slide_item.next();
	slide.animate({'left':Math.round(main_width/2-parseInt(slide_item.css('left'))-slide_item.width()/2)}, slide_duration, 'swing', function() {

		// items die eraf gevallen zijn terug naar rechts brengen
		slide_item.prevAll().each(function (index, item) {
			item = $(item);
			if (parseInt(item.css('left'))+parseInt(item.css('width'))+parseInt(slide.css('left'))<0)
			{
				item.css('left', slide_current_width).detach().appendTo(slide);
				slide_current_width += item.width();
			}
		});

		// zijn we weer op het beginpunt? dan het hele ding terugzetten
		if (parseInt(slide.css('left'))<=-1*slide_total_width)
		{
			slide.children('img').each(function(index, item) {
				item = $(item);
				item.css('left', parseInt(item.css('left'))-slide_total_width);
			});
			slide.css('left', parseInt(slide.css('left'))+slide_total_width);
			slide_current_width -= slide_total_width;
		}

	});

}

function set_imagetitle(title, description)
{
	if (title)
		$('#imagetitle h1').html(title).show();
	else
		$('#imagetitle h1').hide();

	if (description)
		$('#imagetitle .description').html(description).show();
	else
		$('#imagetitle .description').hide();
}

function show_image(item)
{
	item = $(item);
	
	var img = $('<img>');
	img.attr('src', item.attr('src').replace('/small/','/'));
	
	var w = item.data('w');
	var h = item.data('h');

	if (w/h > main_width/main_height)
	{
		var ww = main_width;
		var hh = h * main_width/w;
		var x = 0;
		var y = Math.round((main_height-hh)/2);
	}
	else
	{
		var hh = main_height;
		var ww = w * main_height/h;
		var y = 0;
		var x = Math.round((main_width-ww)/2);
	}
	ww = Math.round(ww);
	hh = Math.round(hh);
	
	img.css({'width':ww, 'height':hh, 'top':y, 'left':x}).hide();
	$('#image').append(img).fadeIn();
	$('#image img').unbind('click').click(function(){hide_image();}).fadeIn(400, function(){img.prevAll().remove();});
	
	if (item.prev().length==1)
	{
		add_preload( $(item.prev()).attr('src').replace('/small/','/') );
		// is er nog een volgende dan die ook vast
		if ($(item.prev()).prev().length==1)
			add_preload( $(item.prev()).prev().attr('src').replace('/small/','/') );
		$('#main > .back a').unbind('click').click(function(){show_image(item.prev());}).closest('div').fadeIn();
	}
	else
	{
		$('#main > .back').fadeOut();
	}
	
	if (item.next().length==1)
	{
		add_preload( $(item.next()).attr('src').replace('/small/','/') );
		if ($(item.next()).next().length==1)
			add_preload( $(item.next()).next().attr('src').replace('/small/','/') );

		$('#main > .fwd a').unbind('click').click(function(){show_image(item.next());}).closest('div').fadeIn();
	}
	else
	{
		$('#main > .fwd').fadeOut();
	}
	
	set_imagetitle(item.data('t'), item.data('d'));
	$('#title').slideUp();
	$('#imagetitle').slideDown();
	
}

function add_preload(preload_src)
{
	// alleen als er nog geen img in de preload is met deze src
	var pres = $('#preload img[src="'+preload_src+'"]');
	if (!pres || !pres.length)
	{
		var pre = $('<img>');
		pre.attr('src', preload_src);
		$('#preload').append(pre);
	}
}

function hide_image()
{
	$('#imagetitle').slideUp();
	$('#title').slideDown();	
	$('#main > .back').fadeOut();
	$('#main > .fwd').fadeOut();
	$('#image').fadeOut(400, function() { $('#image img').remove(); });
}

function go_tab(name)
{
	$('#tabs a#tab_'+name).addClass('active');
	$('div#'+name).slideDown();
	$('#tabs a').not('#tab_'+name).removeClass('active');
	$('div.box').not('#'+name).slideUp();
}

function diary_next()
{
	if (!diary_going)
	{
		current_diary --;
		if (current_diary<0) current_diary=0;
		go_diary();
	}
}

function diary_back()
{
	if (!diary_going)
	{
		current_diary++;
		if (current_diary>=diary_items.length) current_diary=diary_items.length-1;
		go_diary();
	}
}

function go_diary(now)
{
	diary_going = true;
	
	var item = diary_items[current_diary];

	// reken formaat uit
	if (item.w > item.h)
	{
		var w = 375;
		var h = Math.round(w*item.h/item.w);
	}
	else
	{
		var h = 375;
		var w = Math.round(h*item.w/item.h);
	}
	
	// eerste keer, dan gewoon alles instellen
	if (now)
	{
		$('#diary').css({width: w+200, height: h+25});
		$('#diary_img').css({width:w, height:h}).attr('src', item.i);
		$('#diary_date').html(item.d);
		$('#diary_text').html(item.t);
		diary_going = false;
	}
	
	// wordt ie groter dan fade out en meteen resize
	// dan plaatje laten zien
	else if (w > $('#diary_img').width() || h > $('#diary_img').height())
	{
		$('#diary_img').fadeOut();
		$('#diary_date').fadeOut();
		$('#diary_text').fadeOut();
		$('#diary').animate({width: w+200, height: h+25}).css('overflow','visible');
		
		diary_timer = setTimeout( function() {

			$('#diary_img').css({width:w, height:h}).attr('src', item.i).fadeIn();
			$('#diary_date').html(item.d).fadeIn();
			$('#diary_text').html(item.t).fadeIn();
		
			diary_timer = setTimeout( function() { clearTimeout(diary_timer); diary_going=false; }, 400);

		}, 400);
	}
	
	// wordt ie kleiner, dan fade out
	// verklein en laat plaatje zien tegelijk
	else
	{
		$('#diary_img').fadeOut();
		$('#diary_date').fadeOut();
		$('#diary_text').fadeOut();
	
		diary_timer = setTimeout( function() {

			$('#diary').animate({width: w+200, height: h+25}).css('overflow','visible');	
			$('#diary_img').css({width:w, height:h}).attr('src', item.i).fadeIn();
			$('#diary_date').html(item.d).fadeIn();
			$('#diary_text').html(item.t).fadeIn();

			diary_timer = setTimeout( function() { clearTimeout(diary_timer); diary_going=false; }, 400);

		}, 400);

	}	
	
	// is er nog een volgende dan preload instellen
	if (current_diary<diary_items.length-1)
		add_preload( diary_items[current_diary+1].i );
	// zelfs twee? dan ook de tweede
	if (current_diary<diary_items.length-2)
		add_preload( diary_items[current_diary+2].i );
	
	if (current_diary<diary_items.length-1) $('#diary_back').show(); else $('#diary_back').hide();
	if (current_diary>0) $('#diary_next').show(); else $('#diary_next').hide();

}


/* opstarten */

$(document).ready(function(){

	$(window).resize(function(){set_main(false);});
	set_main(true);
	if (!$('#diary').length) center_boxes();
	start_page();

});