$(document).ready(function()
	{
		jp.init();
		jp_home.init_photoWall();
	});

	var jp_home =
	{
		config : {
			activeCatId : function() {
				return $('#jp_filters li.active a').attr('rel');
			}
		},
		
		init : function()
		{
			this.init_photoWall();
		},
		
		init_photoWall : function()
		{
			var jp_home = this;
			
			jp_home.loadPhotos();
			
			$('#jp_photoContainer .jp_intro .jp_close, #jp_photoContainer .jp_overlay').click(function() { jp_home.closeOverlay(); return false; });
			
			$('#jp_photoContainer').find('.navRight,.navLeft').click(function(){
				jp_home.removePhotos(function() {
					catId = jp_home.config.activeCatId();
					
					jp_home.loadPhotos(catId);
				});
				return false;
			});
			
			$('#jp_filters a').click(function() {
				var catId = $(this).attr('rel');
				jp_home.removePhotos(function() {
					jp_home.loadPhotos(catId);
				});
				
				$(this).parent().addClass('active').siblings().removeClass('active');
							
				return false;
			});
		},
		
		closeOverlay : function()
		{
			$('#jp_photoContainer .jp_intro').fadeOut().parent().find('.jp_overlay').fadeOut('slow');
		},
		
		removePhotos : function(callback)
		{
			var randomnumber=Math.floor(Math.random()*15)	
			$('#jp_photoContainer .inner .photo').remove();

			if ($.isFunction(callback)) callback(this);
		},
		
		loadPhotos : function(catId, callback)
		{
			$.ajax(
			{
				url: '/json/get_fotos.json.php?type=homepage',
				dataType: 'json',
				data: ({ catId : catId }),
				success: function(data)
				{
					var photo = [], totalPhotos = data.photos.length, loaded = 0;
		
					for (var i=0; i<totalPhotos; i++)
					{
						$('<div/>', {
							'id': 'photo'+data.photos[i].id+'_'+i, 
							'class': 'photo'
						}).appendTo('#jp_photoContainer .inner');
					
						photo = new Image();
						$(photo).attr('src', data.photos[i].url).appendTo('#photo'+data.photos[i].id+'_'+i).wrap('<a href="'+data.photos[i].student_foto_url+'" />')
						.load(function() { $(this).show(); });
						

					}
				}
			});
		}
	}

	var jp =
	{
		config :
		{
			activeUserId : function() {
				return $('#jp_photoCaroussel').attr('rel');
			},

			activePhotoPosition : function() {
				return $('#jp_photoCaroussel .jp_photo.first').attr('rel');
			},
			
			loadedUserIds : function() {
				arr = new Array();
				$('#jp_otherUserPhotos').find('.jp_user').each(function() {
					arr.push($(this).attr('id'));
				});
				return arr;
			},
			
			clickedPhotoPosition : ''
		},
		
		init : function() 
		{
			this.init_otherUsersPhotoNavigation();
			this.init_photoCaroussel();
			this.init_vote();
		},
		
		init_vote : function()
		{
			var jp = this;
			var mainElement = $('#jp_photoCaroussel .jp_vote');
		
			$('#jp_photoCaroussel .jp_vote:not(.thanks)').find('.btn').live('click', function()
			{
				$(this).parent().find('form .inner').css({ opacity: 1, height: 'auto' });
			
				$(this).parent().parent().find('.jp_description').animate({ opacity: 0 })
				.parent().find('.jp_vote').animate({ top: 0 }, 500, function() {
					$(this).parent().find('form').animate({ height: 285 }, 1000, 'easeOutExpo').find('.inner').fadeIn(1000);
				});
				
				return false;
			});
			
			$('#jp_photoCaroussel .jp_vote.thanks').live('click', function() { return false; });
			
			$('#jp_photoCaroussel .jp_vote input[value!=][type=text]').focus(function () { 
				if(!$(this).attr("startvalue")) $(this).attr("startvalue", $(this).val());
				if($(this).val() == $(this).attr("startvalue")) $(this).val('');	
			}).blur(function() { 
				if($(this).val() == '') $(this).val($(this).attr("startvalue"));
			});
			
			$('#jp_photoCaroussel .jp_vote form').submit(function()
			{
				var naam = $(this).find('input[name=naam]').val();
				var email = $(this).find('input[name=email]').val();
				var jp_foto_id = $(this).find('input[name=jp_foto_id]').val();
				
				if ((naam == '' || naam == 'Naam' || naam == 'Name') || (email == '' || email == 'E-mailadres' || email == 'E-mail address')){
					$(this).find('.error').show();
				} else if (!email.match(/^([\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+\.)*[\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+@((((([a-z0-9]{1}[a-z0-9\-]{0,62}[a-z0-9]{1})|[a-z])\.)+[a-z]{2,6})|(\d{1,3}\.){3}\d{1,3}(\:\d{1,5})?)$/i)) {
					$(this).find('.error').show().find('span').text('E-mail address is invalid');
				} else {
					$(this).find('.error').hide();
					
					var obj = $(this).closest('.jp_vote');
	
					jp.closeVoteButton(function()
					{
						$.ajax({
							url: '/ajax/stemmen.ajax.php',
							data : ({ name: naam, email: email, jp_foto_id: jp_foto_id }),
							success: function(response)
							{
								//console.log(response);
								obj.find('#jp_aantal_stemmen').text(response.aantal_stemmen);
								obj.addClass('thanks').find('.btn').find('span').text('Thank you for voting!');
							}
						});
					});
				}
	
				return false;
			});
			
			$('#jp_photoCaroussel .jp_vote .jp_close').click(function() {
				jp.closeVoteButton();
				return false;
			});
		},
		
		closeVoteButton : function(callback)
		{
			$('#jp_photoCaroussel .jp_vote').find('.inner').animate({ opacity: 0, height: 0 }, 500, function() {
				$(this).hide(); // fix for IE6 because height gets reset after animation
				if ($.isFunction(callback)) callback(this);
			}).parent().animate({ height: 0 }, 500, function() {
				$(this).parent().animate({ top: 285 }, 1000, 'easeOutExpo').parent().find('.jp_description').animate({ opacity: 1 }, 1000);
			});
		},
		
		init_otherUsersPhotoNavigation : function()
		{
			var jp = this;
			var mainElement = $('#jp_otherUserPhotos');
		
			mainElement.find('.jp_user li:not(.selected)').live('click', function()
			{
				jp.config.clickedPhotoPosition = $(this).find('a').attr('rel');
				
				$('#jp_photoCaroussel').attr('rel', $(this).closest('.jp_user').attr('id'));
		
				var a = $(this).closest('.jp_wrapper').find('.first').index();
				var b = $(this).closest('.jp_user').index();
				var c = b-a;
				
				if (c > 0)
				{
					jp.loadOtherUsersPhotos(1, function() {
						jp.scrollOtherUsersPhotos(c, function() {
							if (c == 2) jp.loadOtherUsersPhotos(1);
						});
					});
				}
			
				newIndex = mainElement.find('.jp_user li').index(this);
				oldIndex = mainElement.find('.jp_user li').index(mainElement.find('.jp_user li.selected'));
				
				$(this).closest('.jp_user').addClass('first').siblings().removeClass('first');
				$(this).addClass('selected').closest('.jp_wrapper').find('.jp_user li').not($(this)).removeClass('selected');
				
				if (newIndex > oldIndex)
				{
					jp.loadPhoto(1, function() {
						jp.scrollPhoto(1);
					}, 0);
				}
				else
				{
					jp.loadPhoto(0, function() {
						jp.scrollPhoto(0);
					}, 0);
				}
				
				//alert($('#jp_photoCaroussel .jp_photo.first').attr('rel'));
				
				return false;
			});
			
			mainElement.find('.jp_user').mouseover(function() {
				$(this).addClass('active').siblings().removeClass('active');
			});
			
			mainElement.find('.navLeft').click(function() {
				jp.loadOtherUsersPhotos(0, function() {
					mainElement.find('.jp_user.first').removeClass('first').prev('.jp_user').addClass('first');
					jp.scrollOtherUsersPhotos(0);
				});
				return false;
			});
			
			mainElement.find('.navRight').click(function() {
				jp.loadOtherUsersPhotos(1, function() {
					mainElement.find('.jp_user.first').removeClass('first').next('.jp_user').addClass('first');
					jp.scrollOtherUsersPhotos(1);
				});
				return false;
			});
		},
		
		init_photoCaroussel : function()
		{
			var jp = this;		
			var mainElement = $('#jp_photoCaroussel');
			
			mainElement.find('.jp_navLeft').click(function() {
				jp.loadPhoto(0, function() {
					jp.scrollPhoto(0);
				}, -1);
				return false;
			});
		
			mainElement.find('.jp_navRight').click(function(){
				jp.loadPhoto(1, function() {
					jp.scrollPhoto(1);
				}, 1);
				return false;
			});
		},
	
		loadPhoto : function(direction, callback, offset)
		{
			//$('#jp_otherUserPhotos .jp_user.first').attr('id');
		
			var jp = this;
			var mainElement = $('#jp_photoCaroussel');
			
			//console.log(jp.config.activeUserId());
			
			if (direction == 0)
			{
				$.ajax(
				{
					url: '/json/get_fotos.json.php?type=carrousel',
					dataType: 'json',
					data : ({ active_user_id: jp.config.activeUserId(), foto_nummer: jp.config.activePhotoPosition(), user_ids: jp.config.loadedUserIds(), clicked_foto_nummer: jp.config.clickedPhotoPosition, direction : 0 }),
					success: function(response) 
					{
						foto_data = response[0];

						mainElement.attr('rel', foto_data.id);
						jp.config.clickedPhotoPosition = '';
						
						var obj = mainElement.find('.jp_photo:last').clone(true);
						obj.find('.jp_vsl img').attr('src', foto_data.photo);
						
						$('#jp_photoDetailSup #jp_foto_titel').html(foto_data.titel);
						$('#jp_photoDetailSup #jp_fotograaf').html('Photographer: '+foto_data.name);
						
						$('.socialShare #jp_twitter_link').attr('href', foto_data.twitter_link);
						$('.socialShare #jp_facebook_link').attr('href', foto_data.facebook_link);
						$('.socialShare #jp_hyves_link').attr('href', foto_data.hyves_link);
						
						obj.find('.jp_description #jp_fotograaf').html(foto_data.name);
						obj.find('.jp_description #jp_school').html(foto_data.school);
						obj.find('.jp_description #jp_categorie').html(foto_data.categorie);
						obj.find('.jp_description #jp_beschrijving').html(foto_data.beschrijving);
						
						obj.find('.jp_vote #jp_aantal_stemmen').html(foto_data.aantal_stemmen);
						obj.find('.jp_vote #jp_foto_id').val(foto_data.id);
						
						obj.attr('rel', foto_data.foto_nummer);
						
						if (foto_data.gebruiker_heeft_al_gestemd == 1) {
							obj.find('.jp_vote').addClass('thanks').find('.btn span').text('Thank you for voting!');
							obj.find('#jp_aantal_stemmen').text(foto_data.aantal_stemmen);
						} else {
							obj.find('.jp_vote').removeClass('thanks').find('.btn span').text('Vote for this photo!');
							obj.find('#jp_aantal_stemmen').text(foto_data.aantal_stemmen);
						}
												
						mainElement.find('.jp_wrapper').css({ width: 910 * (mainElement.find('.jp_photo').length+1) });
						obj.css({ marginLeft: -910 }).prependTo(mainElement.find('.jp_wrapper'));
					},
					complete: function()
					{
						if ($.isFunction(callback)) callback(this);
					}
				});
			}
			
			if (direction == 1)
			{
				$.ajax(
				{
					url: '/json/get_fotos.json.php?type=carrousel',
					dataType: 'json',
					data : ({ active_user_id: jp.config.activeUserId(), foto_nummer: jp.config.activePhotoPosition(), user_ids: jp.config.loadedUserIds(), clicked_foto_nummer: jp.config.clickedPhotoPosition, direction: 1 }),
					success: function(response) 
					{
						
						foto_data = response[0];
						
						mainElement.attr('rel', foto_data.id);
						jp.config.clickedPhotoPosition = '';
						
						var obj = mainElement.find('.jp_photo:last').clone(true);
						
						$('#jp_photoCaroussel').attr('rel', foto_data.id);						
						
						obj.find('.jp_vsl img:eq(0)').attr('src', foto_data.photo);
						
						$('#jp_photoDetailSup #jp_foto_titel').html(foto_data.titel);
						$('#jp_photoDetailSup #jp_fotograaf').html('Photographer: '+foto_data.name);
						
						$('.socialShare #jp_twitter_link').attr('href', foto_data.twitter_link);
						$('.socialShare #jp_facebook_link').attr('href', foto_data.facebook_link);
						$('.socialShare #jp_hyves_link').attr('href', foto_data.hyves_link);
						
						obj.find('.jp_description #jp_fotograaf').html(foto_data.name);
						obj.find('.jp_description #jp_school').html(foto_data.school);
						obj.find('.jp_description #jp_categorie').html(foto_data.categorie);
						obj.find('.jp_description #jp_beschrijving').html(foto_data.beschrijving);
						
						obj.find('.jp_vote #jp_aantal_stemmen').html(foto_data.aantal_stemmen);
						obj.find('.jp_vote #jp_foto_id').val(foto_data.id);
						
						obj.attr('rel', foto_data.foto_nummer);

						if (foto_data.gebruiker_heeft_al_gestemd == 1) {
							obj.find('.jp_vote').addClass('thanks').find('.btn span').text('Thank you for voting!');
							obj.find('#jp_aantal_stemmen').text(foto_data.aantal_stemmen);
						} else {
							obj.find('.jp_vote').removeClass('thanks').find('.btn span').text('Vote for this photo!');
							obj.find('#jp_aantal_stemmen').text(foto_data.aantal_stemmen);
						}
						
						mainElement.find('.jp_wrapper').css({ width: 910 * (mainElement.find('.jp_photo').length+1) });
						obj.appendTo(mainElement.find('.jp_wrapper'));
					},
					complete: function()
					{
						if ($.isFunction(callback)) callback(this);
					}
				});
			}			
		},
		
		scrollPhoto : function(direction, callback)
		{
			var jp = this;
			mainElement = $('#jp_photoCaroussel');
			
			if (direction == 0)
			{
				mainElement.find('.jp_photo.first').removeClass('first').prev('.jp_photo').addClass('first');
				mainElement.find('.jp_photo:first').animate({ marginLeft: 0 }, 500, function() {
					mainElement.find('.jp_photo:last').remove();
					mainElement.find('.jp_wrapper').css({ width: 910 * (mainElement.find('.jp_photo').length) });
					if ($.isFunction(callback)) callback(this);
				});

			}

			
			if (direction == 1)
			{
				mainElement.find('.jp_photo.first').removeClass('first').next('.jp_photo').addClass('first');
				mainElement.find('.jp_photo:first').animate({ marginLeft: -910 }, 500, function() {
					$(this).remove();
					mainElement.find('.jp_wrapper').css({ width: 910 * (mainElement.find('.jp_photo').length) });
					if ($.isFunction(callback)) callback(this);
				});
			}
		},
		
		loadOtherUsersPhotos : function(direction, callback)
		{
			var jp = this;
			var mainElement =  $('#jp_otherUserPhotos');
			var groupWidth = 380;

			if (direction == 0)
			{
				if (mainElement.find('.jp_user.first').prevAll('.jp_user').length <=1)
				{
					$.ajax(
					{
						url: '/json/get_fotos.json.php?type=userphotos',
						dataType: 'json',
						data : ({ activeUserId: jp.config.activeUserId(), activePhotoPosition: jp.config.activePhotoPosition(), user_ids: jp.config.loadedUserIds() }),
						success: function(response) 
						{
							var obj = mainElement.find('.jp_user:last').clone(true);
							
							obj.find('.jp_user_fotograaf').html('Photos by <a href="'+response.url+'">'+response.name+'</a>');
							
							for(var i=0; i<5; i++) obj.find('li img:eq('+i+')').attr('src', response.photos[i].url);
							mainElement.find('.jp_wrapper').css({ width: groupWidth * (mainElement.find('.jp_user').length+1) });
							obj.css({ width: 0 }).prependTo(mainElement.find('.jp_wrapper'));
						},
						complete: function()
						{
							if ($.isFunction(callback)) callback(this);
						}
					});
				} else {
					if ($.isFunction(callback)) callback(this);
				}
			}

			if (direction == 1)
			{
				if (mainElement.find('.jp_user.first').nextAll('.jp_user').length <= 3)
				{				
					$.ajax(
					{				
						url: '/json/get_fotos.json.php?type=userphotos',
						dataType: 'json',
						data : ({ activeUserId: jp.config.activeUserId(), activePhotoPosition: jp.config.activePhotoPosition(), user_ids: jp.config.loadedUserIds() }),
						success: function(response)
						{
							var obj = mainElement.find('.jp_user:last').clone(true);
							
							obj.attr('id', response.id);
							
							obj.find('.jp_user_fotograaf').html('Photos by <a href="'+response.url+'">'+response.name+'</a>');
							
							for(var i=0; i<5; i++) { 
								obj.find('li img:eq('+i+')').attr('src', response.photos[i].url);
							}
							
							mainElement.find('.jp_wrapper').css({ width: groupWidth * (mainElement.find('.jp_user').length+1) });
							obj.appendTo(mainElement.find('.jp_wrapper'));
						},
						complete: function()
						{
							if ($.isFunction(callback)) callback(this);
						}
					});
				} else {
					if ($.isFunction(callback)) callback(this);
				}
			}
		},
		
		scrollOtherUsersPhotos : function(amount)
		{
			var jp = this;
			var mainElement =  $('#jp_otherUserPhotos');
			
			(amount < 1) ? direction = '+=' : direction = '-=';

			if (amount == 0) {
				if (mainElement.find('.jp_user.first').prevAll('.jp_user').length <=1 && mainElement.find('.jp_user:first').width() == 0) {
					mainElement.find('.jp_user:first').animate({ width: 380 }, 1000);
				} else { 				
					mainElement.find('.jp_wrapper').animate({ left: '+=380' }, 1000, 'easeOutExpo');
				}
			} else {
				if (mainElement.find('.jp_user.first').nextAll('.jp_user').length <= 3) {
					mainElement.find('.jp_wrapper').animate({ left: direction+(amount*380) }, 1000, 'easeOutExpo');
				} else {
					mainElement.find('.jp_wrapper').animate({ left: '-=380' }, 1000, 'easeOutExpo');
				}
			}
		}
	};