var DEBUG = false;

var processing = false, firstTime = true;

var previewMaxwidth = 350;

$(document).ready(function(e) {
	// add debugging if needed first
	if (DEBUG) $('body').append('<div id="debug" class="box" ><h3>Debugging:</h3><div id="debugContent"></div></div>');

	updatePreviousImages();

});

// function success(stamp, imgUrl) {
function success(stamp, imgUrl) {
	processing = false;

	dbug('<h1>Success</h1>Image URL is ' + stamp);

	// fade out throbber
	$("#uploadBox").slideUp("normal");

//	$('<div id="imgPreview" class="hidden"><a href="' + imgUrl + '" target="_blank"><img src="pic.php?p=' + stamp + '&x=350" alt="image preview" ></a><strong>Image preview</strong></div>')
	$('<div id="imgPreview" class="hidden"><a href="' + imgUrl + '" class="lightbox-enabled" onclick="$(this).lightbox({start:true,events:false}); return false;"><img src="pic.php?p=' + stamp + '&x=' + previewMaxwidth + '" alt="image preview" ></a><strong>Image preview</strong></div>')
		.appendTo('#work')
		.animate({opacity: 'show', height: 'show'}, 'slow');
	$('<p class="another"><button type="button" id="another">Upload another</button></p>').appendTo('#work').show('slow');
	$("#another").click(function (e){
		$("#work").slideUp('slow', function (e) {
			$(this).empty();
		});
		loadForm();
		showForm();
	});
	$("#imgPreview").animate({opacity: 'show', height: 'show'}, 'slow');
	setTimeout('updatePreviousImages()', 0);
}

function updatePreviousImages() {
	
	// don't wait to show previous images the first time the page loads
	var delay = firstTime ? 0 : 1000;
	firstTime = false; 
	 
    // try to work around annoying cache issues on "certain browsers"
    var tstamp = (new Date()).getTime();
	$("#oldimageWrapper").slideUp(1000, function() {
		$("#oldimageWrapper").load("allimages.php?" + tstamp, function() {
			$("#oldimageWrapper a:first").css('margin','0 auto 10px auto');
			$("#oldimageWrapper a:first").css('text-align','center');
			$("#oldimageWrapper a:first").after('<div class="clear"> &nbsp;</div>');

			setTimeout('$("#oldimageWrapper").animate({height: "show", opacity: "show"}, 2000)', 500);
		});
	});
}

function throbberSetup() {
	// display throbber
	$('<div id="uploadBox"><p>Uploading your file</p><button type="button">Cancel</button></div>').appendTo('#work');
	$("#work").animate({height: 'show', opacity: 'show'}, 'slow');
	hideForm();

	// add Cancel button's functionality
	$('#uploadBox button').bind('click', cancelUpload);

	processing = true;
}

function errorDuringProcessing() {
	processing = false;

	// then will need to shrink & fade-out the work area,
	$("#work").slideUp('slow', function() {
		$("#work").empty();

		// re-enable form
		loadForm();
		showForm();
	});
}

function cancelUpload() {
	processing = false;

	// Cancel button clicked
	dbug('you clicked Cancel');

	// then will need to shrink & fade-out the work area
	$("#work").slideUp('slow', function() {
		$("#work").html('');

		// re-enable form
		// display an error,
		error('Upload cancelled by user.');

		loadForm();
		showForm();
	});

}

function loadForm() {
//	$("#ifr")[0].src = $("#ifr").attr('src');
	dbug('Trying to reset the frame to ' + $("#ifr").attr('src'));
	frames['ifr'].location.href = $("#ifr").attr('src');	// have to do it this way because of Opera, of all things
}

function showForm () {
	// $("#ifr").animate({height: 'show'}, 'normal');
	$("#work").animate({marginTop: 0}, 'slow');
	$("#warning").animate({height: 'show', opacity: 'show'}, 'normal');

}
function hideForm () {
	// $("#ifr").animate({height: 1}, 'normal');
	$("#warning").animate({height: 'hide', opacity: 'hide'}, 'normal');
	$("#work").animate({marginTop: -20}, 'slow');
}

function timedMsg (msg, target) {
	msgCount++;
	var box = target ? $(target) : $('#error');	// assume it's an error

	// add an initially-hidden message div to the box
	var mbox = $('<div class="msg hidden" id="msg' + msgCount + '">' + msg + '</div>');
	box.append(mbox);

	// grow & fade in the message
	$("#msg" + this.msgCount).fadeIn("normal");

	if (!target) {	// no target means it was an error
		// add a timeout call that, when it goes off, will hide & fade-out the message
		setTimeout(new Function('$("#msg" + ' + msgCount + ').animate({height: "hide", opacity: "hide"}, "slow");')
			//function() {	//$("#msg" + msgCount).animate({height: 'hide', opacity: 'hide'}, 'slow'); }
		, 4000);
	} else if (target == '#debugContent') {
		$("#msg" + msgCount).prepend('<div class="stamp">' + (new Date()).toTimeString() + '</div>');
	}

	return this;
}

var msgCount = 0;

function error(msg) {
	// wrapper for timedMsg
	timedMsg(msg);

	if (processing) {
		errorDuringProcessing();
	}

	return this;
}

function dbug (msg) {
	timedMsg(msg, '#debugContent');

	return this;
}

function disableForm() {
	$('#uform input,#uform button').each(function (){
		$(this).attr({disabled: 'disabled'});
	});

	return this;
}

function enableForm() {
	$('#uform input,#uform button').each(function (){
		$(this).attr({disabled: ''});
	});

	return this;
}