var img_instance = null;	// Manager/selector
var img_instance2 = null;	// Album viewer

$(document).ready(function(){
	img_instance = new Images("img_instance");
	img_instance2 = new Images("img_instance2");
});

function Images(divId) {
	$("body").append("<div id='"+divId+"' class='invisible'><div id='"+divId+"_div' class='img_instance_div'></div></div>");
	this.defaults =
	{
		onSelect: function(imageid, imagename){},
		public: false,
		albumid: "",
		albumdescription: ""
	};
	this.settings = null;
	this.divId = divId;
}

$.extend($, {
	singleImageHtml: function(o)
	{
		if (o.public !== false)	//	
			return 	"<span class='image "+o.extraclasses+"' name='"+o.image.name+"' image='"+o.image.imageid+
					"' description='"+o.image.description+"' style='margin: 10px'>"+
					"<img src='image.php?id="+o.image.imageid+
					((o.width && o.width>0)?("&width="+o.width+"' width='"+o.width+"px'"):("'"))+"/>"+
					"</span>";
		else
			return 	"<tr class='image' name='"+o.image.name+"' image='"+o.image.imageid+
					"' description='"+o.image.description+"'>"+
					"<td class='image_title'>" + o.image.name + "</td>"+
					"<td class='image_description'>" + o.image.description + "</td>"+
					"<td class='image_move'>Verplaats naar "+o.albumSelect+"</td>"+
					"<td class='jslink image_rename'>Hernoemen</td>"+
					"<td class='jslink image_delete'>Verwijderen</td>"+
					"</tr>";
	}
});

$.extend(Images.prototype, {
	view: function(settings, targetDiv) {
		$.extend((s = $.extend({}, this.defaults)), settings);
		this.settings = s;
		this.update();
		if (targetDiv)
			$(targetDiv).html($("#"+this.divId).html());
		else
			tb_show(null, "#TB_inline?height=300&width=700&inlineId="+this.divId, false);
	},
	hide: function() {
		tb_remove();
	},
	update: function() {
		var inst = this;
		$.getJSON("imagesconnector.php?action=view"+(s.public?"_public":"")+"&album="+s.albumid,
				  function(json){ inst.sethtml(json); });
	},
	sethtml: function(json)
	{
		var html = "";
		var s = this.settings;
		
		if (s.albumid === "")
		{
			html = albumHtml(s.public);
//			html += (!s.public && json)?uploadImagesHtml(json):"";
			html += (!s.public)?addAlbumHtml():"";
		}
		else
		{
			html += "<span class='album'><span class='jslink album_title'>Terug naar de lijst</span></span>";
			html += "<h2>"+ s.albumdescription +"</h2>";
			html += (!s.public)? uploadImagesHtmlSingleAlbum(s.albumid) : "";
			html += imageHtml(s.public);
//			html += (!s.public && json && json.albums)?uploadImagesHtml(json.albums):"";
		}
		
		var inst = this;
		var instdiv = "#"+inst.divId+"_div";

		$(instdiv).html(html);

		$("tr.image:even", $(instdiv)).addClass("even");
		$(".imageUpload", $(instdiv)).MultiFile({
			max: 5,
			accept: 'jpg|jpeg|png'
		});
		$(".addAlbumButton", $(instdiv)).click(function(){
			xajax_xAddAlbum($(".addAlbum", $(instdiv)).attr("value"));
		});
		$(".album", $(instdiv)).each(function(){
			var album = $(this);
			var albumid = (album.attr("album") == undefined)?(""):(album.attr("album"))
			var albumdescription = (album.attr("description") == undefined)?(""):(album.attr("description"));
			
			$(".album_title", this).click(function(){
				inst.settings.albumid = albumid;
				inst.settings.albumdescription = albumdescription;
				inst.update();
			});
			if (s.public)
			{
			}
			else
			{
				$(".album_public", this).click(function(){
					xajax_xTogglePublic(albumid);
				});
				$(".album_rename", this).click(function(){
					var curtitle = $(".album_title", album).html();
					$(".album_title", album).html("<input type='text' value='"+curtitle+"'></input>");
					$(".album_title input", album)
						.focus()
						.change(function(){$(this).blur()})
						.blur(function(){
							xajax_xEditAlbum(albumid, "title", $(this).attr("value"));
							album.attr("description", $(this).attr("value"));
							$(".album_title", album).html($(this).attr("value"));
						});
				});
				$(".album_delete", this).click(function(){
					xajax_xDeleteAlbum(albumid, albumdescription);
				});
			}
		});
		$(".image", $(instdiv)).each(function(){
			var image = $(this);
			var imageid = (image.attr("image") == undefined)?(""):(image.attr("image"))
			var imagename = (image.attr("name") == undefined)?(""):(image.attr("name"))
			var imagedescription = (image.attr("description") == undefined)?(""):(image.attr("description"))
			
			if (s.public)
			{
				image.click(function(){
					tb_show("<h3>"+imagename+"</h3>"+imagedescription, "image.php?id="+imageid, 'HAXZ0RS');
				});
			}
			else
			{
				image.tooltip({
					bodyHandler: function(){
						return "<img src='image.php?id="+imageid+"&width=150' width='150px'/>"+
								"<h3>"+imagename+"</h3>"+imagedescription;
					}
				});

				$(".image_title", this).click(function(){s.onSelect(imageid, imagename);});
				$(".image_rename", this).click(function(){
					var curname = $(".image_title", image).html();
					$(".image_title", image).html("<input type='text' value='"+curname+"'></input>");
					$(".image_title input", image)
						.focus()
						.change(function(){$(this).blur()})
						.blur(function(){
							xajax_xEditImage(imageid, "name", $(this).attr("value"));
							$(".image_title", image).html($(this).attr("value"));
						});
				});
				$(".image_description", this).click(function(){
					var curdesc = $(this).html();
					$(this).html("<input type='text' value='"+curdesc+"'></input>");
					$("input", this)
						.focus()
						.change(function(){$(this).blur()})
						.blur(function(){
							xajax_xEditImage(imageid, "desc", $(this).attr("value"));
							$(".image_description", image).html($(this).attr("value"));
						});					
				});
				$(".image_delete", this).click(function(){
					xajax_xDeleteImage(imageid, imagename);
				});
				$(".image_move select", this).change(function(){
					xajax_xMoveImageToAlbum(imageid, imagename, $(this).attr("value"));
				});
			}
		});

		function uploadImagesHtmlSingleAlbum(albumid)
		{
			ret = "";
			ret += "<hr style='margin: 10px 0px' />";
			ret += "<h2>Foto's toevoegen aan "+s.albumdescription+"</h2>";
			ret += "<form method='post' enctype='multipart/form-data' action='imagesconnector.php?action=upload' target='foo' onSubmit='window.open(\"\", \"foo\", \"width=450,height=300,status=yes,resizable=yes,scrollbars=yes\")'>";
			ret += "<input type='hidden' name='selectedalbum' value='" + albumid + "' />";
			ret += "<input type='file' name='image[]' class='imageUpload'></input>";
			ret += "<input type='submit' value='Toevoegen'></input></form>";
			ret += "<hr style='margin: 10px 0px' />";
			return ret;
		}
		function uploadImagesHtml(albums)
		{
			ret = "<hr style='margin: 10px 0px' />";
			ret += "<h2>Upload</h2>";
			ret += "<form method='post' enctype='multipart/form-data' action='imagesconnector.php?action=upload' target='foo' onSubmit='window.open(\"\", \"foo\", \"width=450,height=300,status=yes,resizable=yes,scrollbars=yes\")'>";
			ret += "Upload naar album: "+albumSelectHtml(albums);
			ret += "<input type='file' name='image[]' class='imageUpload'></input>";
			ret += "<input type='submit' value='Verzend'></input></form>";
			return ret;
		}
		function addAlbumHtml()
		{
			ret = "<hr style='margin: 10px 0px' />";
			ret += "<h2>Nieuw album maken</h2>";
			ret += "<input type='text' class='addAlbum'></input>";
			ret += "<input type='button' value='toevoegen' class='addAlbumButton'></input>";
			return ret;
		}

		function albumHtml(public)
		{
			// View album list
			var html = "";
			html += "<h2>Fotoalbums</h2>";
			html += "<table>";
			html += public?"":"<tr><td>Naam</td><td>In fotoalbum</td><td colspan='2'>Opties</td></tr>";
			if (json !== null)
				for (var i = 0; i < json.length; i++)
					html += singleAlbumHtml(public, json[i]);
			html += "</table>";
			return html;
		}
		function singleAlbumHtml(public, album)
		{
			return 	"<tr class='album' album='"+album.albumid+"' description='"+album.description+"'>"+
					"<td class='jslink album_title'>" + album.description + "</td>"+
					(public?"":"<td class='jslink album_public'>" + (album.public==1?"Ja":"Nee") + "</td>"+
					"<td class='jslink album_rename'>Hernoemen</td>"+
					"<td class='jslink album_delete'>Verwijderen</td>")+
					"</tr>";
		}
		
		function imageHtml(public)
		{
			// Get album selector
			var albumSelect = ((json !== null) && (json.albums !== null))?albumSelectHtml(json.albums):"";
			
			// View image list
			var html = "";
//			html += "<span class='album'><span class='jslink album_title'>Terug naar de lijst</span></span>" +
//					"<h2>"+s.albumdescription+" </h2>";
			if (public)
				html += "<div>";
			else
				html += "<table class='imagelist'><tr><td>Naam</td><td>Beschrijving</td>"+
						"<td colspan='3'>Opties</td></tr>";
			
			if ((json !== null) && (json.images !== null))
				for (var i = 0; i < json.images.length; i++)
//					html += $.singleImageHtml(public, json.images[i], albumSelect);
					html += $.singleImageHtml({public: public, image: json.images[i], albumSelect: albumSelect, width: 150});
			html += (public?"</table>":"<div>");
			return html;
		}
		function albumSelectHtml(albums)
		{
			var ret = "";
			ret += "<select name='selectedalbum'><option value=''></option>";
			for (var i = 0; i < albums.length; i++)
				ret += "<option value='"+albums[i].albumid+"'>"+albums[i].description+"</option>";
			ret += "</select>";
			return ret;
		}
	}
});