/* triggered by /cmsadmin/editprodcatsub.php. */

(function() {
	
	function openDialog(categoryid) {
		var handleCancel = function(ev) {
			$(this).dialog("destroy");
		}
		var imagescontainer = $("<div class=image-select-container></div>");
		
		var content = $("<div class=\"image-select-dialog\"></div>");
		content.append(imagescontainer);
		
		var dialog = content.dialog({
			modal: true,
			closeOnEscape: true,
			height: 300,
			width: 400,
			centerOnScreen: true,
			title: "Category Image",
			buttons: { 
				"Cancel": handleCancel
			},
			open: function() {
				
				$.getJSON("get_category_images.php", function(response) {
					
					// restrict available images to those from categories
					// that are children of the selected category.
					var getCategoryImages = function() {
						var images = [];
						
						// Uncomment this bit to add images from the category itself.
						if (response["category_images"][categoryid]) {
							$.each(response["category_images"][categoryid], function() {
								images.push(this.normal);
							});
						}
						
						$.each(response["category_parents"], function(key, value) {
							if (value == categoryid) {
								// found a child category
								if (response["category_images"][key]) {
									$.each(response["category_images"][key], function() {
										images.push(this.normal);
									});
								}
							}
						});
						return images;
					};
					
					var myimages = getCategoryImages();
					if (myimages.length != 0) {
						$.each(myimages, function() {
							var path = "../custom/images/products/" + this;
							var thumbpath = "../custom/images/products/" + imageToThumb(this);
							var thumbimage = $("<img />").attr("src", thumbpath);
							var row = $("<a href=#><div></div></a>");
							row.attr("data-image", this);
							row.attr("data-categoryid", categoryid);
							row.prepend(thumbimage);
							row.find("div").text(this);
							imagescontainer.append(row);
						});
					} else {
						$("<div class=error-no-images>There are no images for the current category.</div>").appendTo(imagescontainer);
					}
				});
			}
		});
	}
	
	function imageToThumb(name) {
		return name.replace(/\.(png|jpg)$/, "_thumb.$1");
	}
	
	function thumbToImage(name) {
		return name.replace(/_thumb\./g, ".");
	}
	
	$(function() {
		
		/* open the image dialog from the settings window. The dialog is populated after it opens. */
		$(document.body).on("click", ".popup-choose-header", function(ev) {
			ev.preventDefault();
			
			var categoryid = $(ev.target).attr("data-categoryid");
			openDialog(categoryid);
		});
		
		/* close the dialog and return the result when a selection is made. */
		$(document.body).on("click", ".image-select-container > a", function(ev) {
			ev.preventDefault();
			
			var categoryid = $(this).attr("data-categoryid");
			var image = $(this).attr("data-image");
			
			var element = $("#headerImg_" + categoryid);
			
			// record the new image name
			if (element.length !== 0) {
				element.val(image);
			}
			
			var popupelement = $("#popup_" + categoryid);
			
			// update the thumbnail preview.
			if (popupelement.length !== 0) {
				popupelement.find(".popup-header-image").empty();
				
				$("<img />").attr("src", "../custom/images/products/" + image).appendTo(popupelement.find(".popup-header-image"));
			}
			
			// close the dialog.
			$(":ui-dialog.image-select-dialog:visible").dialog("destroy");
		});
	}); // end jquery onload
	
})(); // end of module

