RP = function() {
	var self = this;
	
	self.setAnimated(0);

	// font replacement
	Cufon.replace('h1, a');

	// classvars
	self.img = null;
	self.loader = $('#loader');
	self.menu = $('#menu');
	self.wrap = $('#wrap');
	self.photoCanvas = $('#fotos');
	self.titleWrap = $('#titleWrap');
	self.animated = parseInt($.cookie('animated'));

	if (self.photoCanvas.length) {
		self.photoControl = new RP.Fotos(self.photoCanvas, function() {
			self.loader.hide();
		});
	}

	// animeren wanneer er nog niet geanimeerd is
	if (!self.animated) {
		self.animateIntro();
	} else {

		// anders alles direct op zijn plek
		self.bgImg = $('#imgWrap img');

		self.menu.css( {
			bottom : 20
		});

		setTimeout(function() {
			self.positionElements();
		}, 50);
	}
	
	self.initMenu();

	$(window).bind('resize', function() {
		self.positionElements();
	});

	$(self).queue(function() {

		self.resizeBg();

		$(window).bind('resize', function() {
			self.resizeBg();
		});

		$(self).dequeue();
	});
};

RP.prototype.setAnimated = function(animated) {
	self.animated = animated;
	$.cookie('animated', animated);
};

RP.prototype.initMenu = function() {
	var self = this;
	
	// wanneer er op het menu wordt geklikt, de openingsanimatie weergeven
	
	self.menu.find('a').click(function() {

		self.menu.find('li.active').removeClass('active');
		$(this).parents('li').addClass('active');
		Cufon.refresh('h1, a');
		
		self.loader.show();
		
		self.loadImages(this.href, function() {
			self.onImagesLoaded();
		});
		
		return false;
	});
		
};

RP.prototype.onImagesLoaded = function() {
	var self = this;
	
	self.loader.hide();
	
	if (!self.animated) {

		self.titleWrap.animate({
			top : self.titleStartposition.top
		}, 1500, function() {
			
			self.photoCanvas.show().animate( {
				opacity : 1
			});
		});
	
		self.menu.animate({
			bottom : '2%'
		}, 1500);
		
		self.animated = true;
		
	} else {
		self.photoCanvas.show().animate({opacity: 1});
	}
};

RP.prototype.positionElements = function() {
	var self = this;

	var maxWrapHeight;
	self.menu.css('marginLeft', -self.menu.width() / 2);

	if (self.photoControl) {

		switch (self.photoControl.size) {
		case 'small':
			maxWrapHeight = 500;
			break;
		case 'medium':
			maxWrapHeight = 700;
			break;
		case 'large':
			maxWrapHeight = 900;
			break;
		}
	}
	self.wrap.css( {
		height : $(window).height() < maxWrapHeight ? maxWrapHeight : '100%',
		minHeight : maxWrapHeight
	});
};

RP.prototype.animateIntro = function() {
	var self = this;

	$(self).queue(function() {

		if (self.animating) {
			return false;
		}

		self.animating = true;

//		// background image inladen/animeren
//
//		self.bgImg = $('<img />').load(function() {
//
//			$('#imgWrap').prepend(
//
//			$(this).fadeOut(10, 0).css( {
//				display : 'none',
//				left : 0,
//				top : 0
//			}));
//
//			self.resizeBg();
//
//			$(this).fadeIn(1000, function() {
//				$.cookie('animated', true);
//				$(self).dequeue();
//			});
//
//		}).attr('src', '/img/achtergrond.jpg');

		// beginlocaties instellen

		self.titleStartposition = $('#titleWrap').offset();
		
		self.menu.css({
			bottom: '50%',
			marginLeft: -self.menu.width() / 2
		});

		self.titleWrap.css({
			top : self.menu.position().top - self.titleWrap.height() - 50,
			position : 'absolute'
		});
		
		self.photoCanvas.css('opacity', 0);
	});
};

RP.prototype.loadImages = function(url, callback) {
	
	var self = this;
	
	if (self.animated) {
		self.photoCanvas.show().animate({opacity: 0});
	}
	
	self.photoCanvas.queue(function() {	
		self.photoCanvas.load(url, function() {
			self.photoControl = new RP.Fotos($(this), callback);
			$(this).dequeue();
		});
	});
};

RP.prototype.resizeBg = function() {
	var self = this;

	var maxWidth = $(window).width(), maxHeight = $(window).height(), imgw = self.bgImg
			.width(), imgh = self.bgImg.height(), destHeight, destWidth;

	if ((maxHeight / maxWidth) > (imgh / imgw)) {
		img_prop = imgw / imgh;
		destHeight = maxHeight;
		destWidth = maxHeight * img_prop;
	} else {
		img_prop = imgh / imgw;
		destWidth = maxWidth;
		destHeight = maxWidth * img_prop;
	}

	self.bgImg.css( {
		left : maxWidth * .5 - destWidth * .5,
		top : maxHeight * .5 - destHeight * .5,
		width : destWidth,
		height : destHeight
	});
};

RP.Fotos = function(container, callback) {
	var self = this;

	self.callback = callback;
	self.canvas = container;
	self.photoContainer = self.canvas.find('.fotosContainer');
	self.photoWrappers = self.photoContainer.find('div.foto');
	self.photos = self.photoWrappers.find('img');
	self.btnPrev = self.canvas.find('.btnPrev');
	self.btnNext = self.canvas.find('.btnNext');
	self.currentIndex = 0;
	self.canvasWidth = self.canvas.width();
	self.canvasHeight = self.canvas.height();

	if (self.canvas.hasClass('small')) {
		self.size = 'small';
	} else if (self.canvas.hasClass('medium')) {
		self.size = 'medium';
	} else {
		self.size = 'large';
	}

	self.photoWrappers.hide();
	self.preloadPhotos(function() {
		self.photoContainer.width(self.photoWrappers.length	* self.canvasWidth);
	
		self.btnPrev.click(function() {
			if (self.currentIndex > 0) {
				self.step(-1);
			}
			return false;
		});
	
		self.btnNext.click(function() {
			if (self.currentIndex < self.photos.length - 1) {
				self.step(1);
			}
			return false;
		});
	
		self.initButtons();
	
		$(window).resize(function() {
			self.positionElements();
		});
		self.positionElements();
	});
};

RP.Fotos.prototype.positionElements = function() {
	var self = this;

};

RP.Fotos.prototype.preloadPhotos = function(callback) {
	var self = this;

	self.photoWrappers.hide();
	self.photos.preload( {
		onComplete : function(res) {
			var img = res.original;
			var wrapper = $(img).parents('div.foto');
			var imgIndex = self.photos.index(img);
			
			wrapper.css( {
				marginTop : (self.canvasHeight / 2) - (wrapper.height() / 2),
				left : imgIndex * self.canvasWidth,
				display : 'block'//,
				//opacity: 0
			});

			// wanneer de eerste afbeelding ingeladen is
			if (imgIndex === self.currentIndex) {
				wrapper.css('opacity', 1);
			}
		},
		onFinish : function() {
			if (callback) {
				callback();
			}
			if (self.callback) {
				self.callback();
			}
		}
	});
};

RP.Fotos.prototype.step = function(nr) {
	var self = this;

	var nextIndex = self.currentIndex + nr;
	self.photoContainer.stop().animate( {
		marginLeft : nextIndex * -self.canvasWidth
	}, 2000, 'easeOutSine');
	//self.photoWrappers.eq(self.currentIndex).stop().animate( {
	//	opacity : 0
	//}, 2000);
	//self.photoWrappers.eq(nextIndex).stop().animate( {
	//	opacity : 1
	//}, 2000);

	self.currentIndex = nextIndex;
	self.initButtons();
};

RP.Fotos.prototype.initButtons = function() {
	var self = this;

	self.btnPrev[(self.currentIndex > 0) ? 'show' : 'hide']();
	self.btnNext[(self.currentIndex < self.photos.length - 1) ? 'show' : 'hide']
			();
};

$(function() {
	new RP();
});