// Image Picker

function doImageDialog(op,onPick,container,showCancel,cancelCb) {
	var imagePaths = "";
	var fetchImages = null;
	var pdImagePicker = null;
	if(container) {
		pdImagePicker = container;
	} else {
		pdImagePicker = $("#pdImagePicker");
	}

	var fileType = 'Image';
	var fileTypes = 'Images';
		
	var imagePaths = "images";
	if (op.choices) {
		if (op.choices.image != null) {
			imagePaths = op.choices.image;
		} else {
			imagePaths = $.string(op.choices).sub("image:", "").str;
		}
		if(imagePaths == "") {
			imagePaths = "images";
		}
	}

	if(imagePaths == 'files')
	{
		fileType = 'File';
		fileTypes = 'Files';
	}
	
	if(imagePaths == 'media')
	{
		fileType = 'Media';
		fileTypes = 'Media';
	}

	pdImagePicker.html('');

	var divAlbums = $("<div class='albums'>Folder: </div>");
	pdImagePicker.append(divAlbums);
	var ddAlbums = $("<select id='albums' class='albums-select'/>");
	divAlbums.append(ddAlbums);
	ddAlbums.append("<option value=''>Fetching Folders...</option>")
	ddAlbums.change( function() {
		if(ddAlbums.val() == '') {
			return;
		}
		imagePaths = ddAlbums.val();
		ddAlbums.html('');
		qwFetchImages(imagePaths,fetchImages);
	});
	var thumbContainer = $("<div id='thumb-container' class='thumb-container'/>");
	pdImagePicker.append(thumbContainer);

	var thumbBoxes = [];
	var revealThumb = function() {
		$(thumbBoxes).each( function(i,b) {
			if(isInView(b,i)) {
				b.data().img.attr('src',b.data().thumbUrl);
			}
		});
	}
	thumbContainer.scroll(revealThumb);

	thumbContainer.html("<div class='please-wait'>Fetching " + fileTypes + ". Please wait...</div>");

	var imagePreview = $("<div id='image-preview' class='image-preview'/>");
	pdImagePicker.append(imagePreview);

	var info = $("<div class='info'/>");
	pdImagePicker.append(info);

	var controls = $("<div class='controls'/>");
	pdImagePicker.append(controls);

	if(imagePaths.indexOf('$t') < 0) {
		var btnUpload = $("<input type='button' value='Upload New " + fileTypes + "' class='upload-button'/>");
		controls.append(btnUpload);
	}

	if(showCancel) {
		var btnCancel = $("<input type='button' value='Cancel' class='cancel-button'/>");
		controls.append(btnCancel);
		btnCancel.click(cancelCb);
	}

	var showUpload = function() {
		thumbContainer.html('');
		imagePreview.html('');
		pdImagePicker.filter(".info").html('');
		controls.html('');

		var fileUploader = $("<div id='file-uploader' class='file-uploader'/>");
		thumbContainer.append(fileUploader);

		var uploader = new qq.FileUploader({
			element: document.getElementById('file-uploader'),
			action: '/uploadfile/',
			allowedExtensions: ['jpg','gif','png','pdf','swf'],
			text: "Upload " + fileType,
			params: {
				path:imagePaths
			},
			onComplete: function(id, fileName, responseJSON) {
				var elem = $('li.qq-upload-success:last');
				elem.append("<span class='success-word'>Success</span>");
			}
		});

		imagePreview.html("<div class='upload-instructions'><p>Click the the upload button on the left to upload files. You may upload multiple files by reselecting the upload button.</p><p>Choose Finish Uploading below when done.</p></div>");
		var finish = $("<input type='button' value='Finish Uploading' class='finish-uploading'>");
		controls.append(finish);
		finish.click( function() {
			imagePreview.html("");
			controls.html("");
			if(imagePaths.indexOf('$t') < 0) {
				controls.append(btnUpload);
				btnUpload.click(showUpload);
			}
			qwFetchImages(imagePaths,fetchImages);
		});
	}
	if(imagePaths.indexOf('$t') < 0) {
		btnUpload.click(showUpload);
	}

	// SHOW

	if(!container) {
		pdImagePicker.modal({
			containerId: 'pd-modal',
			autoResize: true,
			zIndex: 50000,
			minWidth: 750,
			minHeight: 505,
			onClose: function() {
				if (op.target != null && typeof(op.target) != 'undefined') {
					qwSetImage(op, op.value);
				}
				$.modal.close();
			}
		});
	}

	// FETCH FUNCTION

	fetchImages = function(images) {

		ddAlbums.html('');
		if(images.error){
			thumbContainer.html("<div class='please-wait'>" + images.error + "</div>");
			return;
		}
		ddAlbums.append("<option value='images'>Site " + fileTypes + "</option>")
		$(images.folders).each( function(i,f) {
			ddAlbums.append("<option value='images/" + f + "'>" + $.string(f).sub('_',' ').str + "</option>")
		});
		thumbBoxes = [];
		thumbContainer.html('');

		$(images.files).each( function(i,f) {

			var thumbBox = $("<div class='thumbBox'/>");
			thumbContainer.append(thumbBox);
			thumbBoxes.push(thumbBox);

			var mvert = Math.floor((136 - f.thumbHeight)/2);
			var mhorz = Math.floor((136 - f.thumbWidth)/2);
			var w = 138 - (mhorz * 2);
			var h = 138 - (mvert * 2);

			if(f.type != 'image') {
				w = 138;
				h = 138;
			}

			var imgBox = $("<div class='imageBox'/>");
			imgBox.attr('style',"width:" + w + "px;height:" + h + "px;padding-top:" + mvert + "px;padding-bottom:" + mvert + "px;padding-left:" + mhorz + "px;padding-right:" + mhorz + "px;");
			thumbBox.append(imgBox);

			thumbBox.click( function(e) {

				// SHOW PREVIEW

				var box = $(e.currentTarget);
				var previewImage = $("<img class='preview-image'/>");
				previewImage.attr('src',box.data().url);
				previewImage.css('width',($('#image-preview').width()-15) + 'px');
				previewImage.css('visibility','hidden');
				$('#image-preview').html('');
				$('#image-preview').append(previewImage);
				previewImage.load( function(e) {
					var image = $(e.currentTarget);
					var height = image.height();
					if(height < $('#image-preview').height()) {
						var dif = $('#image-preview').height() - height;
						dif = Math.floor(dif/2);
						image.css('position','relative');
						image.css('top',dif + "px");
					}
					previewImage.css('visibility','visible');
				});
				// HILITE THUMB BOX

				$("div.thumbBox").css('border','2px inset silver');
				box.css('border','2px inset #ffff00');

				// DISPLAY OP TARGET

				if (box.data().op.target != null && typeof(box.data().op.target) != 'undefined') {
					qwSetImage(box.data().op, box.data().url);
				}

				// SHOW INFO

				info.html("<div><label>Image:</label> " + box.data().title + "</div>");
				info.append("<div><label>Width:</label> " + box.data().width + "</div>");
				info.append("<div><label>Height:</label> " + box.data().height + "</div>");

				// SHOW CONTROLS

				controls.html('');
				var btnPic = $("<input type='button' value='Choose This " + fileType + "' class='pick-button'/>");
				controls.append(btnPic);

				btnPic.click( function() {
					var value = box.data().url;
					var thumb = box.data().thumbUrl;
					if (box.data().op.target != null && typeof(box.data().op.target) != 'undefined') {
						qwCommit(box.data().op, value);
					}
					if(onPick) {
						onPick(value,thumb)
					}
					if(!container) {
						$.modal.close();
					}
				});
				if(imagePaths.indexOf('$t') < 0) {
					var btnDelete = $("<input type='button' value='Delete This " + fileType + "' class='delete-button'/>");
					controls.append(btnDelete);

					btnDelete.click( function() {
						var value = box.data().url;
						var file = box.data().file;

						if(confirm('Are you sure you wish to delete ' + file + '?') == false) {
							return;
						}
						url = "/remove/" + imagePaths + "/" + file + "/";
						$.ajax(url, {
							type:'get',
							success: function(transport) {
								var result = $.evalJSON(transport);
								if(result.error) {
									alert(result.error);
								}
								imagePreview.html("");
								controls.html("");
								info.html("");
								qwFetchImages(imagePaths,fetchImages);
							}
						});
						return false;
					});
					var btnUpload = $("<input type='button' value='Upload New " + fileTypes + "' class='upload-button'/>");
					controls.append(btnUpload);

					btnUpload.click(showUpload);
				}

				if(showCancel) {
					var btnCancel = $("<input type='button' value='Cancel' class='cancel-button'/>");
					controls.append(btnCancel);
					btnCancel.click(cancelCb);
				}
			});
			thumbBox.data('url',images.baseUrl + f.file);
			thumbBox.data('height',f.height);
			thumbBox.data('width',f.width);
			thumbBox.data('title',f.file);
			thumbBox.data('op',op);
			thumbBox.data('file',f.file);

			var thumburl = "";
			if (f.type == 'image') {
				thumbUrl = images.baseUrl + f.thumb;
			}
			if (f.type == 'pdf') {
				thumbUrl = "/media/images/pdficon_large.png";
			}
			if (f.type == 'swf') {
				thumbUrl = "/media/images/swficon_large.png";
			}
			thumbBox.data('thumbUrl',thumbUrl);

			var img = $("<img class='thumb-image'/>");

			img.attr('title',f.file);
			imgBox.append(img);
			thumbBox.data('img',img);

		});
		revealThumb();
	};
	// FETCH

	qwFetchImages(imagePaths,fetchImages);
}

function isInView(elem,i) {
	var docHeight = $('#thumb-container').height();
	//$('#image-preview').html(docHeight);
	var elemTop = $(elem).position().top;
	var elemBottom = elemTop + $(elem).height();
	//$(elem).html(i+ ") " + elemTop + ", " + elemBottom);
	return ((elemTop >= 0) && (elemTop <= docHeight)) || ((elemBottom >= 0) && (elemBottom <= docHeight));
}