// 
// MappingDuBois.org
// Michelle Rajunov
// JQuery - photo gallery 
// Feb 27, 2009
//
// contains:
// 	- initialize galleria plugin
//	- tools for admin: add/edit/delete photos/albums/captions/images
//	- "ajax" image uploading
//
//


$(document).ready(function(){ 

	// initialize galleria
	galleriaInit();
	
	// AjaxUpload plguin to upload images "ajax"-style (not really)
	// avoids page refresh
	// check documentation for plugin
	// but just initialize Uploader, don't call it yet
	if($("#userID").val() > '0'){
	var Uploader = 
		new AjaxUpload('#upload_image', {
			action: 'php/gallery.update.php',	// make ajax call
			name: 'upload_image',				// name of image: $_FILES['upload_image']
			autoSubmit: false,
			onChange:  function(file, ext){		$("#filename").html(file);	},
			onSubmit : function(file , ext){ 	$('#filename').append('<img src="img/ajax-loader.gif">');	},
			onComplete : function(file, response){
				// file = filename, as originally uploaded
				// response = url of new file, including directory and new filename
				// take value of caption from form to update <img> tag
				$('<p></p>').appendTo($('#addImage_form div.files')).text("Uploaded: " + file);
				$('#filename').html("");
				var caption = $('#addImage_form input[name="image_caption"]');
				$("#thumbs ul.gallery").append('<li><img src="'+response+'" title="'+$(caption).val()
					+'" width="50px" height="50px"></li>');
				$(caption).val('');
				// reinitialize galleria
				galleriaInit();
			}
 		});
 	}
 	
	// click behaviour to slide Toggle mutliple elements
	// albums tab, comment form, edit forms
	$("#albums ul").hide();
	$("#addComment_form").hide();
	$("#albums a.albumSlider").click(function(){		toggle("#albums ul", "#albums a.albumSlider"); });
	$("#comments a.commentSlider").click(function(){	toggle("#addComment_form", "#comments a.commentSlider"); });
	$("#thumbs a.addImage").click(function(){	$("#addImage_form").slideToggle(); });
	$("#thumbs a.edit_image").click(function(){	$("#editCaption_form").slideToggle(); });
	
	// click behaviour to change views/items or submit forms
	// comments form, add/edit/delete album/images/caption	
	$("#addComment_form").submit(addComment);
	$("#addAlbum_form").submit(addAlbum);	
		$("a.album").next().hide().next().click(function(){		editAlbum(this); }).hide();
		$("a.edit_album").click(function(){		editAlbumToggle(this); });
		$("a.cancel_album").click(function(){	editAlbumUnToggle(this); }).hide();
	$("a.delete_album").click(function(){		deleteAlbum(this); });
	$("#albums a.album").click(function(){		changeAlbum(this); });
	$("#thumbs a.delete_image").click(deleteImage);
	$("#editCaption_form").submit(editCaption);
	$("#addImage_form").submit(function(){ addImage(Uploader); return false;});



});	
/******************* end document.ready *****************************/


// initialize galleria plugin
// see documentation for Galleria
function galleriaInit(){
	
	// delete duplicate galleria_wrappers 
	$("#main_image").html("");	
	
	var options = {
		history : false,
		clickNext : false,
		insert : '#main_image',
		onImage : changeImage,
		onThumb : function(thumb) { // thumbnail effects goes here
				
			var _li = thumb.parents('li');					// fetch the thumbnail container
			var _fadeTo = _li.is('.active') ? '1' : '0.3';	// if thumbnail is active, fade all the way.
			thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);	// fade in the thumbnail when finnished loading
			thumb.hover(	// hover effects
				function() { thumb.fadeTo('fast',1); },
				function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
				)
		}
	};
	
	// initialize
	$('#thumbs ul').galleria(options);
	$("#thumbs li:first").addClass("active");
}


// toggles target to slide Up and Down on click of link, and changes arrow orientation	
function toggle(target, link){
	$(target).slideToggle();
	var arrow = $(link).find('img').attr("alt").toString();
	if(arrow == "down"){	$(link).find('img').attr("src", "img/arrow_up.png").attr("alt", "up");}
	else if(arrow == "up"){	$(link).find('img').attr("src", "img/arrow_down.png").attr("alt", "down");}

}

/******************* Images *****************************/

// callback for click on thumb
// changes the main image with nice fade effect
// send imageID data via ajax, to keep track of current image (for displaying comments and editing)
function changeImage(image,caption,thumb) { 
	
	/////// Effects ////
	// fade in the image & caption
		if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) 
			image.fadeIn(750);										// FF/Win fades large images terribly slow
		var _li = thumb.parents('li');								// fetch the thumbnail container
		_li.siblings().children('img.selected').fadeTo(500,0.3);	// fade out inactive thumbnail
		thumb.fadeTo('fast',1).addClass('selected');				// fade in active thumbnail
	
	caption.insertBefore("div.galleria_wrapper");
	caption.css('display','none').fadeIn(1000);	
	
	// AJAX: change image_current in php gallery class
	// necessary to keep pointer updated for correct comments
	// get imageID (in thumb): image_##
	var id = thumb.attr("id").toString().substring(6);	
	var userID = $("#userID").val();
	var data = [];
			data.push("imageID="+id);
			data.push("adminID="+userID);
			data.push("action=changeImage");
		
	jQuery.ajax({ 
		type: "POST", 
		url: "../php/gallery.update.php", 
		dataType: "json", 
		data: data.join("&"),
		success: echoComments
	});

}

//
// add an image via call to "ajax" Uploader
// return false because Uploader does all the work
//
function addImage(Uploader){
	var id = $('#photos h2').attr("id").toString();
	Uploader.setData({
				'albumID':  id, 
				'caption' : $('#addImage_form input[name="image_caption"]').val(),
				'action'  : 'addImage' 
				});
	Uploader.submit();
 	return false;
}

// delete Image function sends imageID data via ajax
function deleteImage(){
	var id = $("#thumbs ul li.active").find('img').attr("id").toString().substring(6);
	
	var yes = confirm("Are you sure you want to delete this image?")
	if(!yes)
		return false;
	else{
	var data = [];
		data.push("imageID="+id);
		data.push("action=deleteImage");
	
	jQuery.ajax({ 
		type: "POST", 
		url: "../php/gallery.update.php",
		data: data.join("&"), 
		success: removeImage
	});
	
	}
}

// callback for deleteImage()
// text = imageID
function removeImage(text, status){
	$("#image_"+ trim(text)).parent().fadeOut(750);
	$("#main_image .galleria_wrapper img").fadeOut();
	$("#main_image span.caption").fadeOut();
	$("li.active").removeClass('active');
}

// send imageID data and new caption via ajax
function editCaption(){
	var id = $("#thumbs ul li.active").find('img').attr("id").toString().substring(6);
	var caption = $("#edit_caption").val();
	
	var data = [];
		data.push("imageID="+id);
		data.push("caption="+caption);
		data.push("action=editCaption");
	
	jQuery.ajax({ 
		type: "POST", 
		url: "../php/gallery.update.php",
		dataType: 'json',
		data: data.join("&"), 
		success: refreshCaption
	});
	return false;
}

// callback for editCaption()
// data = json array = data.caption, and data.imageID
function refreshCaption(data){
	$("#main_image span.caption").html(data.caption).effect("highlight", {"color": '#D6504C'}, 1000);
}

/******************* Albums *****************************/

// send albumID data via ajax
// keep track of current albumID for displaying and editing
function changeAlbum(link){
	var id = $(link).attr("id").toString().substring(6);	// get albumID: album_##
	
	var data = [];
		data.push("albumID="+id);
		data.push("action=changeAlbum");
	
	jQuery.ajax({ 
		type: "POST", 
		url: "../php/gallery.update.php",
		dataType: "json", 
		data: data.join("&"), 
		success: refreshAlbum
	});
	return false;
}

// callback for changeAlbum()
// update display info like album title and thumbnails
// data = json array = data.albumID, data.album_name, data.thumbs
function refreshAlbum(data){	
	$("#photos h2").attr("id", data.albumID).html(data.album_name);
	$("#thumbs ul").html(data.thumbs);	
	
	// re-initialize galleria every time album changes
	galleriaInit();
	// collapse albums tab
	toggle("#albums ul", "#albums a.albumSlider");
}

// send new album data via ajax			
function addAlbum(){
	var data = [];
		data.push("album_name=" + $("#album_name").val());
		data.push("action=addAlbum");
		
	jQuery.ajax({ 
				type: "POST", 
				url: "../php/gallery.update.php",
				dataType: "json", 
				data: data.join("&"), 
				success: displayAlbum
	});
	return false;
}

// callback for addAlbum()
// data = json array = data.albumID, data.name
function displayAlbum(data){
	$("#albums ul").prepend('<li><a class="album" id="album_' + data.albumID + '">'+ data.name + '(0)</a>' +
							'<a class="delete_album"><img src="img/icons-delete.png" alt="delete"></a></li>');
	$('#album_' + data.albumID).click(function(){	changeAlbum(this); }).parent().fadeOut().fadeIn(750);
	$("a.delete_album").click(function(){			deleteAlbum(this); });
		//rebind delete and change algums options
}

// toggle - hide images for edit/delete, show images for save/cancel 
function editAlbumToggle(link){
	// goal:
	// <albumID><input><input save><cancel_album><edit_album><delete_album>
	var id = $(link).parent().children('a.album').attr("id").toString().substring(6);
	var name = $("#album_"+id).html();
	$("#album_"+id).html("");
	$("#album_"+id).next().val(name).show().next().show();
	$(link).hide().next().hide();
	$(link).prev().show();
			// link = <a class="edit_album">
}
// toggle - hide images for save/cancel, show images for edit/delete
function editAlbumUnToggle(link){
	// goal:
	// <albumID><input><input save><cancel_album><edit_album><delete_album>
	var id = $(link).parent().children('a.album').attr("id").toString().substring(6);
	var name =  $("#album_"+id).next().val();
	$("#album_"+id).html(name).next().hide().next().hide();
	$(link).hide().next().show().next().show();
		// link = <a class="cancel_album">
}

// send edit Album data via ajax
function editAlbum(save){
	var id = $(save).prev().prev().attr("id").toString().substring(6);
	var name = $(save).prev().val();
	var data = [];
		data.push("albumID="+id);
		data.push("name="+name);
		data.push("action=editAlbum");

	jQuery.ajax({ 
		type: "POST", 
		url: "../php/gallery.update.php",
		dataType: 'json',
		data: data.join("&"), 
		success: refreshAlbumName
	});
	
	return false;
}

// callback for editAlbum()
// updates images to hide save/cancel and show edit/delete
// data = json array = data.albumID, data.name
function refreshAlbumName(data){
	$("#album_"+data.albumID).html(data.name).next().hide().next().hide().next().hide().next().show().next().show();	//sorry!
	$("#album_"+data.albumID).html(data.name);
}

// send delete data via ajax
function deleteAlbum(link){
	var yes = confirm("Are you sure you want to delete this albums?")
	if(!yes)
		return false;
	
	var id = $(link).parent().children().eq(0).attr("id").toString().substring(6);

	var data = [];
		data.push("albumID="+id);
		data.push("action=deleteAlbum");
	
	jQuery.ajax({ 
		type: "POST", 
		url: "../php/gallery.update.php",
		data: data.join("&"), 
		success: removeAlbum
	});
	
	return false;
}

// callback for deleteAlbum()
// text = albumID
function removeAlbum(text, status){
	$("#album_"+ trim(text) ).parent().fadeOut(1000);
}


/******************* Comments *****************************/

// display all comments 
// initial call to function
// bind the delete comments link
// callback for changeImage() above
function echoComments(data){
	$("#comments ul").html("");		// reset #comments ul
	if(data.length == 0){
		$("#comments ul").prepend('<li><div class="noComments">Nobody has made any comments yet.</div></li>');
	}
	else{	$.each(data, function(i, comment){ displayComment(data[i]); });	
			$("#comments a.delete_comment").click(function(){ 	deleteComment(this);	});
			// bind delete comment
		}
}

// send comment form data via ajax
function addComment(){
	
	var id = $("#thumbs li.active img").attr("id").toString().substring(6);	
	var data = [];
		data.push("imageID="+id);
		data.push("comment_user=" + $("#comment_user").val());
		data.push("comment_text="+  $("#comment_text").val());
		data.push("blanky=blank"+ $("#blanky").val());		//spam protection
		data.push("action=addComment");
		
	jQuery.ajax({ 
				type: "POST", 
				url: "../php/gallery.update.php",
				dataType: "json", 
				data: data.join("&"), 
				success: displayComment
	});
	toggle("#addComment_form", "#comments a.commentSlider");
	return false;
}

// callback for addComment()
// data = json array = data.commentID, data.text, data.user, data.date
function displayComment(data){
	
	$("#comments ul").prepend('<li id="comment_' + data.commentID + '">' +
								'<div class="text"> '  + data.text + 	' </div>' 	+
								'<div class="name">'   + data.user + 	' <br> ' 	+
								'<span class="date">' + data.date +  	' </span> </div>' +
								'</li>');
}

// send comment info via ajax
function deleteComment(link){
	var id = $(link).parent().parent().attr("id").toString().substring(8);
		var data = [];
		data.push("commentID="+id);
		data.push("action=deleteComment");
		
	jQuery.ajax({ 
				type: "POST", 
				url: "../php/gallery.update.php",
				data: data.join("&"), 
				success: removeComment
	});
	return false;
}

// callback for deleteComment()
// text = commentID
function removeComment(text, status){
	$("#comment_"+ trim(text) ).fadeOut(750);
}


/******************* other *****************************/

function trim(str) {
	return str.replace(/^\s*([\S\s]*?)\s*$/, '$1');
}