$(document).ready(function() {
	
	photoContainer = $('#photo');
	
	images = [
		'_images/realisaties/de-puydt-haarden-01.jpg',
		'_images/realisaties/de-puydt-haarden-02.jpg',
		'_images/realisaties/de-puydt-haarden-03.jpg',
		'_images/realisaties/de-puydt-haarden-04.jpg',
		'_images/realisaties/de-puydt-haarden-05.jpg',
		'_images/realisaties/de-puydt-haarden-06.jpg',
		'_images/realisaties/de-puydt-haarden-07.jpg',
		'_images/realisaties/de-puydt-haarden-08.jpg',
		'_images/realisaties/de-puydt-haarden-09.jpg',
		'_images/realisaties/de-puydt-haarden-10.jpg',
		'_images/realisaties/de-puydt-haarden-12.jpg',
	];
	
	initControls(images);
	bindKeyPresses();
	bindResize();
	
});

/* play */
function play() {
	play = setInterval(loadNextImg, 5000);
}

/* pause */
function pause() {
	clearInterval(play);
}

/* initControls */
function initControls(array) {
	
	var list = '<ul class="controls">';
	for(i=0;i<array.length;i++)
	{
		var number = i+1;
		list += '<li><a href="'+array[i]+'" title="'+number+'">'+number+'</a></li>';
	}
	list += '</ul>';
	
	$('body').append(list);
	
	bindControls();
	
}

/* bindControls */
function bindControls() {

	trigger = $('ul.controls>li>a');
	
	first = trigger.first();
	first.addClass('active');
	loadImg(trigger.attr('href'));
	play();
	
	trigger.bind('click', function() {
		pause();
		trigger.removeClass('active');
		$(this).addClass('active');
		loadImg($(this).attr('href'));
		return false;
	});
	
}

/* imgExists */
function imgExists(url) {
	
	selectedImg = $('img[src="'+url+'"]');
	
	if(selectedImg.size()>0) {
		return selectedImg;
	}
	else
	{
		return false;
	}
	
}

/* loadNextImg */
function loadNextImg() {
	
	var controls =  $('ul.controls>li>a');
	var first = controls.first();
	var current = $('ul.controls>li>a.active');
	var next = current.parent().next().children('a');
	
	if(next.size()>0) {
		controls.removeClass('active');
		next.addClass('active');
		loadImg(next.attr('href'));
	}
	else
	{
		controls.removeClass('active');
		first.addClass('active');		
		loadImg(first.attr('href'));
	}
	
}

/* loadPrevImg */
function loadPrevImg() {
	
	var controls =  $('ul.controls>li>a');
	var last = controls.last();
	var current = $('ul.controls>li>a.active');
	var prev = current.parent().prev().children('a');
	
	if(prev.size()>0) {
		controls.removeClass('active');
		prev.addClass('active');
		loadImg(prev.attr('href'));
	}
	else
	{
		controls.removeClass('active');
		last.addClass('active');		
		loadImg(last.attr('href'));
	}
	
}

/* loadImg */
function loadImg(url) {

	if( imgExists(url) ) {
		
		photoContainer.children('img').hide();
		img = imgExists(url);
		positionImg(img);
		img.fadeIn();
		
	}
	else
	{
		createImg(url);
	}
	
}

/* createImg */
function createImg(url) {
	
	var img = new Image();
	
	$(img).load(function() {
	
		$(img).hide().addClass('fullscreen');
		$(photoContainer).append(img);
		photoContainer.children('img').hide();
		
		positionImg($(img));
		$(img).fadeIn(1000);
		
	});
	
	$(img).attr('src', url);
	
}

/* positionImg */
function positionImg(object) {
	
	imgWidth			= object.width();
	imgHeight 			= object.height();

	windowHeight		= $(window).height()-130;
	windowWidth			= $(window).width();
	
	ratio = windowHeight/imgHeight;
	
	newWidth	= imgWidth*ratio;
	newHeight	= imgHeight*ratio;
	
	halfImgHeight		= newHeight/2;
	halfWindowHeight	= windowHeight/2;

	halfImgWidth		= newWidth/2;
	halfWindowWidth		= windowWidth/2;
	
	newLeftPosition 	= -halfImgWidth+halfWindowWidth;
	
	object.css({
		'left': newLeftPosition,
		'height': newHeight,
		'width': newWidth
	});
	
}

/* bindResize */
function bindResize() {
	$(window).bind('resize', function(){
		positionImg($('img.fullscreen:visible'));
	});
}

/* bindKeyPresses */
function bindKeyPresses() {
	if ($.browser.mozilla) {
		$(document).keypress(keyPressed);
	} else {
		$(document).keydown(keyPressed);
	}
}

/* keyPressed */
function keyPressed(e) {
	if( e.keyCode == 37 ) { pause(); loadPrevImg(); }
	if( e.keyCode == 39 ) { pause(); loadNextImg(); }
}