<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"
	import="org.apache.commons.lang.StringUtils,org.apache.commons.lang.math.NumberUtils,
com.revize.bean.config.WebspaceConfigBean,com.revize.utils.WebspaceConfigUtils"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%
String webspaceName = request.getParameter("webSpaceName");
String fileLocation = request.getParameter("fileLocation");
String selectedImgPath = request.getParameter("selectedImgPath");
String selectedImgDesc = request.getParameter("selectedImgDesc");
String selectedImgBorder = request.getParameter("selectedImgBorder");
String selectedImgHSpace = request.getParameter("selectedImgHSpace");
String selectedImgVSpace = request.getParameter("selectedImgVSpace");
String selectedImgWidth = request.getParameter("selectedImgWidth");
String selectedImgHeight = request.getParameter("selectedImgHeight");
String selectedImgAlign = request.getParameter("selectedImgAlign");
String displayElement = request.getParameter("displayElement");
String valueElement = request.getParameter("valueElement");
String fileId = request.getParameter("fileId");
boolean enableResize = false;
if(fileId == null){
	enableResize = true;
}
//System.out.println("fileId="+fileId);
//System.out.println("displayElement="+displayElement);
//System.out.println("valueElement="+valueElement);
boolean isAdministrtor = com.revize.utils.RzUserContext.getUserContext().isAdministrator();
boolean isSuperUser = com.revize.utils.RzUserContext.getUserContext().isSuperUser();
//System.out.println("isAdministrtor="+isAdministrtor);
//System.out.println("isSuperUser="+isSuperUser);
String repositoryLocation = com.revize.vh.imgmgr.ImageMgrVH.getRepositoryFolder();
String folderOnServer =  com.revize.vh.filemgr.FileMgrVH.getCorrectedFolderOnServer(fileLocation);
String locationOnServer =  folderOnServer;
//---------------------
//System.out.println("selectedImgPath="+selectedImgPath);
com.revize.bean.imgmgr.ViewImageBean selectedImageBean = com.revize.vh.imgmgr.ImageMgrVH.getFileDetails(webspaceName,folderOnServer,selectedImgPath,fileId);
//System.out.println("selectedImageBean="+selectedImageBean);

if(selectedImageBean != null){
	//System.out.println("selectedImageBean.description="+selectedImageBean.getDescription());
	//System.out.println("selectedImageBean.escapedJSdescription="+selectedImageBean.getEscapedJSDescription());
	//System.out.println("selectedImageBean.escapedHTMLdescription="+selectedImageBean.getEscapedHTMLDescription());
	//System.out.println("selectedImageBean.fileName="+selectedImageBean.getFileName());
	//System.out.println("selectedImageBean.escapedJSfilename="+selectedImageBean.getEscapedJSFileName());
	//System.out.println("selectedImageBean.escapedHTMLfilename="+selectedImageBean.getEscapedHTMLFileName());
	//System.out.println("selectedImageBean.nodeid="+selectedImageBean.getNodeId());
	//System.out.println("selectedImageBean.escapednodeid="+selectedImageBean.getEscapedJSNodeId());

	//System.out.println("selectedImgDesc="+selectedImgDesc);
	locationOnServer =  selectedImageBean.getLocation();
	if(fileId == null){
		//an image is selected and it exists in file system of the server
		selectedImageBean.setDescription(selectedImgDesc);
		selectedImageBean.setBorder(NumberUtils.toInt(selectedImgBorder));
		selectedImageBean.sethSpace(NumberUtils.toInt(selectedImgHSpace));
		selectedImageBean.setvSpace(NumberUtils.toInt(selectedImgVSpace));
		selectedImageBean.setWidth(NumberUtils.toInt(selectedImgWidth));
		selectedImageBean.setHeight(NumberUtils.toInt(selectedImgHeight));
		selectedImageBean.setAlign(StringUtils.lowerCase(selectedImgAlign));
	}
	request.setAttribute("selectedImageBean",selectedImageBean);
	//System.out.println("After selectedImageBean.escapedJSdescription="+selectedImageBean.getEscapedJSDescription());
}

WebspaceConfigBean wsConfigBean = WebspaceConfigUtils.getWebspaceConfigData(webspaceName);
String maxWidthToResize = wsConfigBean.getImageMaxHeight()+"";
String maxHeightToResize = wsConfigBean.getImageMaxWidth()+"";
//System.out.println("maxWidthToResize="+maxWidthToResize);
//System.out.println("maxHeightToResize="+maxHeightToResize);
//------------------


%>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Manager</title>

<%-- <script src="../../util/tiny_mce.${sessionScope.tinymce_version}/tiny_mce_popup.js"></script> --%>
<script src="../../util/tiny_mce.3.5.10/tiny_mce_popup.js"></script>
<!--jsTree-->
<link rel="stylesheet" href="./../../util/jstree/dist/themes/default/style.css" />
<!--Dropzone JS-->
<link rel="stylesheet" href="./../../util/dropzone/dist/dropzone.css">
<!--jQuery Lib-->
<script src="./../../util/jquery/jquery-2.1.4.min.js"></script>
<!--jsTree-->
<script src="./../../util/jstree/dist/jstree.js"></script>
<!--Dropzone JS-->
<script src="./../../util/dropzone/dist/min/dropzone.min.js"></script>
<!--imgareaselect JS-->
<script src="./../../util/imgareaselect/scripts/jquery.imgareaselect.js"></script>
<!-- bootstrap-->
<script src="./../../util/ui/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="./../../util/jstree/dist/themes/default/style.css" />
<link rel="stylesheet" type="text/css" href="./../../util/imgareaselect/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="./../../util/imgareaselect/css/imgareaselect-default.css" />
<link rel="stylesheet" type="text/css" href="./../../util/imgareaselect/css/revize-ui.css" />

<style type="text/css">
body{background:#F3F7FC;padding:20px 20px 0;}
.container-fluid{padding:0!important}
.alert{border:1px solid}
.panel{background:#fff;box-shadow:1px 1px 2px rgba(0,0,0,.1);margin-bottom:20px}
.panel-inner{padding:20px}
label{font-weight:bold;font-size:12px;text-transform:uppercase}
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input{display:block;margin-bottom:10px;vertical-align:middle;box-sizing:border-box;width:100%}
.help{display:inline;top:-3px;position:relative;}
.help i{top:10px;left:10px;background:#2DC66E;color:#fff;font-size:11px;width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;z-index:99;cursor:help;z-index:999}
.help .tooltip{width:300px;}
.nomargin{margin-top:0!important;margin-bottom:0!important}
.container_image_class{display:block;width:100%;text-align:center;vertical-align:bottom;border:0;position:relative;height:270px;}
#showImgId{max-height:120px!important}
.set-btns{position:absolute;bottom:0;left:0;right:0}
.set-btns #btnCropImg{position:absolute;bottom:0;left:0;right:0;width:100%;border:0;border-right:1px solid #fff;border-radius:0}
.set-btns #imgSettings{position:absolute;bottom:0;right:0;right:0;width:50%;border:0;border-radius:0}
.imageFileTreeClass{vertical-align:middle;border:0;height:352px;padding:20px 20px 0 20px;overflow:scroll}
.file-tree-wrap{margin-bottom:0}
.file-tree-wrap .page-header{margin:0}
.file-tree-wrap .panel-inner{padding:0}
.page-header{padding:5px 20px;margin:0 0 20px;font-size:14px;text-transform:uppercase;text-align:left;}
#selected_image_info .page-header{display:none}
#imageFileTreeId .folder{background:url(./../../util/jstree/imgmgr/images/directory.png) 4px center no-repeat}
#imageFileTreeId .file{background:url(./../../util/jstree/imgmgr/images/file.png) 4px 5px no-repeat}
.selected_image_info{position:relative}
.selected_image_info_class{display:block;padding:0;overflow:hidden;position:relative}
.selected_image_info_class .panel-inner{padding:15px 20px 10px 20px}
.selected_image_info_class #imgAlt{width:100%}
.selected_image_info_class label{font-size:11px}
.selected_image_info_class form{margin:0}
.imageDragDropClass{display:inline-block;vertical-align:center;width:100%}
.cropDivClass{position:absolute;background-color:white;border:10px solid white;top:10px;left:15px}
.dropzone{min-height:57px;border:0;background:#fff;padding:0 20px;border:3px dashed #dde3eb;position:relative}
.dropzone .dz-message{margin:0;font-size:18px;line-height:1.5;background:#fff;margin:0 auto;padding:0;display:block;padding-top:10px}
.btn-group{width:100%;position:relative}
.btn-group .btn{width:33.3333333%;border-radius:0;display:block;float:left}
.btn-group .btn:last-child{border-right:0}
.modal{position:absolute!important;background:#F3F7FC;border:0;border-radius:0;width:90%;height:600px;left:5%;margin:20px 0 0 0}
.modal-header{border-color:#dde3eb;padding:10px 14px}
.modal-body{max-height:none!important;padding:0px;overflow-y:visible}
.modal .btn-group{position:absolute;bottom:0;z-index:99999999;left:0;}
.form-inline{margin-bottom:0!important}
.form-inline span{width:49%;display:inline-block}
.form-inline #cropHeight{width:150px}
.form-inline #cropWidth{width:150px}
.form-inline{margin-bottom:20px}
.img-croped{background:#fff;position:relative;padding:0px;overflow:hidden;text-align:left;vertical-align:top;}
.selectedCropImg{position:relative;max-width:100%;max-height:100%;vertical-align:top;}
#imgDeatislForm select{width:100%}
.modal-footer{padding:0;border:0}
.modal-footer .btn{width:50%;border:0;border-radius:0!important;float:right}
.modal-body{max-height:1350px;padding:20px;}
.input-group{overflow:hidden}
.input-group-btn{overflow:hidden;float:left;width:auto!important}
.input-group-btn .btn-danger{border-radius:3px 0 0 3px;font-size:18px!important;padding:4px 5px 8px 5px;width:25px}
.input-group-btn .btn-success{border-radius:0 3px 3px 0;font-size:18px!important;padding:4px 5px 8px 5px;width:25px}
.input-group input[type="text"]{float:left;border-radius:0;border-right:0;border-left:0;width:100%}
.dropzone .dz-preview .dz-image,.dropzone .dz-preview.dz-file-preview .dz-image{border-radius:3px!important;border:3px solid #dde3eb}
.modal.fade.in{top:0!important}
#loading {
	display: none;
	position:absolute;
	width:100%;
	height:100%;
	z-index:15;
	top:0;
	left:0;
	right:0;
	left:0;
	margin:0;
	background:rgba(0,0,0,.7) url(images/spinner.gif) no-repeat center center;
}
/* override for the dropzone thumbnail size*/
.dropzone .dz-preview .dz-image {
	width: 60px;
	height: 60px;
}
.jstree-default a.jstree-search { color:green; }
.search-grp {position:  relative;margin: 15px 30px 0;}
.search-btns {position:  absolute;top: 1px;right: 0;bottom: 1px;overflow: hidden;}
.search-btns .btn {border-radius: 0;border:0;color:#fff!important}
.search-btns #reset-btn {border-radius: 0 2px 2px 0;}
#jsFileTree_Search_txt_id {padding-right: 150px;}

#background_selector{display:inline-block;font-size:25px;line-height:36px;float:right;opacity:.5;transition: opacity .3s ease}
#background_selector:hover{opacity:1}
#background_selector>div{display:inline-block;width:25px;height:25px;border:1px solid #eee;vertical-align:middle;cursor:pointer}
#container_image>.panel-inner{transition: background-color .3s ease}
</style>

<script>
var preSelectedNodeId = "<c:out value="${selectedImageBean.escapedJSNodeId}" escapeXml="false" />";

var preSelectedNodeIdArray = null;
var pageId = '';
if(opener && opener.RZ && opener.RZ.pageid){
	pageId = opener.RZ.pageid;
}

        $(document).ready(function(){

			window.moveBy(0, 0);	//chrome needs to support screen.availHeight

			// invoked when sending ajax request
        	$(document).ajaxSend(function () {
        		  $("#loading").show();
			});

          // invoked when sending ajax completed
          $(document).ajaxComplete(function () {
            $("#loading").hide();
          });

        	Dropzone.autoDiscover = false;
    		$("#imageDragDropId").dropzone({
    			url: "upload.jsp",
    			parallelUploads: 1,
    			acceptedFiles: 'image/*',
    			maxFilesize: <%=com.revize.service.imgmgr.ImageCutService.MAX_IMAGE_SIZE_IN_MB%>,
    			filesizeBase: 1024,
    			paramName: "uploadedImage",
    			uploadMultiple: true,
    			clickable: true,
    			createImageThumbnails: true,
    			maxThumbnailFilesize: 1,
    			thumbnailWidth: 100,
    			thumbnailHeight: 100,
    			maxFiles: 30,
    			forceFallback: false,
    			autoProcessQueue: true,
    			dictDefaultMessage: 'Click here to upload images',
    			init: function() {
    				var totalFiles = 0;
                	var responseJsonObjects = {};
                	responseJsonObjects.successes = {};
                	responseJsonObjects.failures = {};
                	responseJsonObjects.successes.files = [];
                	responseJsonObjects.successes.responses = [];
                	responseJsonObjects.failures.files = [];
                	responseJsonObjects.failures.responses = [];

                	var currentDropzone =  this;

                	$("#clearThumbnails").change(function () {
                		//alert('clearThumbnails=' + $("#clearThumbnails").val());
                		//1- clear the thumbnails
                		if($("#clearThumbnails").val() === '1') {
                			//alert('inside');
                			//No upload started
                			$("#clearThumbnails").val('-1');
                			//alert('removing all files');
                			currentDropzone.removeAllFiles();
                		}
                    });

                	this.on("successmultiple", function(file, xhr) {
                		var response = xhr;
                    	if(response.status){
                    		responseJsonObjects.successes.files.push(file);
                    		responseJsonObjects.successes.responses.push(response);
                    	} else {
                    		responseJsonObjects.failures.files.push(file);
                    		responseJsonObjects.failures.responses.push(response);
                    	}
    				});

    				this.on("errormultiple", function(file, errorMessage, xhr) {
                		responseJsonObjects.failures.files.push(file);
                		errorMessage = $.trim(errorMessage);
                		responseJsonObjects.failures.responses.push(errorMessage);
    				});


    				this.on("queuecomplete", function(fileList) {


	    				var numRequests = responseJsonObjects.successes.files.length + responseJsonObjects.failures.files.length;
	    				//alert('totalFiles='+totalFiles);
						//alert('numRequests='+numRequests);
						if(totalFiles > 0 && numRequests === totalFiles) {
	    					//hide loading ....
	    					$("#loading").hide();

	    					var message = responseJsonObjects.successes.files.length +' of ' + numRequests +' file(s) uploaded successfully';
	    					var ctr = 0;
	    					for (var i = 0; i < responseJsonObjects.successes.files.length; i++) {
	    					    var tempFileName = responseJsonObjects.successes.files[i][0].name;
	    					    ctr++;
	    					    message += '\n'+ctr+'.'+ tempFileName+': success';
	    					}
	    					for (var i = 0; i < responseJsonObjects.failures.files.length; i++) {
	    						var resObj = responseJsonObjects.failures.responses[i];
	    						var errMsg;
	    						if($.type(resObj) === "string") {
	    							errMsg = resObj;
	    						} else {
	    							errMsg = resObj.errorMessage;
	    						}
	    						var tempFileName = responseJsonObjects.failures.files[i][0].name;
	    						ctr++;
	    					    message += '\n'+ctr+'.'+ tempFileName+': '+errMsg;
	    					}
	    					alert(message);
	    					if(responseJsonObjects.successes.responses.length > 0){
	    						//set the filename so that the node refresh event listener can use it for node selection
	    						$('#imgFileName').val(responseJsonObjects.successes.responses[0].currentFileName);
	    						var fileNodeId = responseJsonObjects.successes.responses[0].nodeId;
	    	   					var tempStr = fileNodeId.slice(0,fileNodeId.length-1); // remove last slash
	    	   					var indxOfLastSlash = tempStr.lastIndexOf('/');
	    	   					var parentNodeId =  tempStr.slice(0,indxOfLastSlash+1);
	    						$('#imageFileTreeId').jstree(true).refresh_node(parentNodeId);
	    					} else {
	    						$('#imgFileName').val('');
	    					}
	    					//reset following arrays
	    					totalFiles = 0;
	    	            	responseJsonObjects.successes.files = [];
	    	            	responseJsonObjects.successes.responses = [];
	    	            	responseJsonObjects.failures.files = [];
	    	            	responseJsonObjects.failures.responses = [];

    					}

    				});

    				this.on("sending", function(file, xhr, formData) {
    					formData.append('locationOnServer', $('#imgLocation').val());
    					formData.append('webspaceName','<%=webspaceName%>');
    					formData.append('folderOnServer','<%=folderOnServer%>');
    					formData.append('request','upload');
    					formData.append('enableResize',<%=enableResize%>);
                        formData.append('minimumWidthToResize','<%=maxWidthToResize%>');
                        formData.append('minimumHeightToResize','<%=maxHeightToResize%>');


    				});

	   				 this.on("addedfile", function (file) {
						 if(totalFiles === 0){
								//show loading ....
								$("#loading").show();
						 }
						//alert('added file='+file.name);
						totalFiles += 1;
						//0-upload started
						$("#clearThumbnails").val('0');
					});
    			}
    		});

   		 $('#fallbackFormId').bind("submit", function(event) {
 			/* stop form from submitting normally */
       		event.stopPropagation(); // Stop stuff happening
     		event.preventDefault(); // Totally stop stuff happening
 			var formData = new FormData($(this)[0]);
 			formData.append('locationOnServer', $('#imgLocation').val());
			formData.append("webspaceName","<%=webspaceName%>");
			formData.append('folderOnServer','<%=folderOnServer%>');
			formData.append('request','upload');
			formData.append('enableResize',<%=enableResize%>);
            formData.append('minimumWidthToResize','<%=maxWidthToResize%>');
            formData.append('minimumHeightToResize','<%=maxHeightToResize%>');

 				$.ajax({
 					method: "POST",
 					  url: "upload.jsp",
 					  dataType: "JSON",
 					  contentType: false,
 					  processData: false,
 					  data: formData
 				}).done(function( data, textStatus, jqXHR ) {
 					if(data.status){
 						var message = "Images uploaded successfully !!!";
 						//var message = data.uploadedFiles.length +' of ' + data.uploadedFiles.length +' file(s) uploaded successfully';
 						//var ctr = 0;
 						//for (var i = 0; i < data.uploadedFiles.length; i++) {
 						   // var tempFileName = data.uploadedFiles[i].oldFileName;
 						    //ctr++;
 						    //message += '\n'+ctr+'.'+ tempFileName+': success';
 						//}
 						alert(message);
 						//set the filename so that the node refresh event listener can use it for node selection
   						$('#imgFileName').val(data.currentFileName);
   						var fileNodeId = data.nodeId;
   	   					var tempStr = fileNodeId.slice(0,fileNodeId.length-1); // remove last slash
   	   					var indxOfLastSlash = tempStr.lastIndexOf('/');
   	   					var parentNodeId =  tempStr.slice(0,indxOfLastSlash+1);
   						$('#imageFileTreeId').jstree(true).refresh_node(parentNodeId);

 					} else {
 							alert('hi1='+data.errorMessage);
 							$('#imgFileName').val('');
 					}
 				}).fail(function( jqXHR, textStatus, errorThrown ) {
 					if(jqXHR.status === 450){
 						alert($.trim(jqXHR.responseText));
 					} else {
 						alert($.trim(errorThrown));
 					}
 					$('#imgFileName').val('');
 				});
 		});


            $.fn.getNodeLocation = function(isFileNode, nodeId){
            	var location = '<%=folderOnServer%>';
            	if(isFileNode){
	            	//fileNodeId has 2 slashes or 1 slashes
	            	var substrings = nodeId.split('/');
	   				var noOfSlashes = substrings.length - 1;
	   				if(noOfSlashes > 2){
	   					var tempStr = nodeId.slice(1,nodeId.length-1); // remove first and last slashes
	   					var indxOfLastSlash = tempStr.lastIndexOf('/');
	   					location = location + tempStr.slice(0,indxOfLastSlash+1);
	   				}
            	} else {
					location = location + nodeId.slice(1,nodeId.length);
            	}
   				return location;
            }


            $.fn.showSelectedImage = function(location, fileName){
            	var imgSrc = '<%=repositoryLocation%><%=webspaceName%>' + location + fileName +'?'+ Math.round(Math.random() * 9999);
            	//alert(imgSrc);
            	$('#showImgId').attr('src',imgSrc);
            	$('#selectedCropImg').attr('src',imgSrc);
				$('#btnCropImg , #imgSettings').show();
            }

            $.fn.removeSelectedImage = function(){
            	$('#showImgId').attr('src','images/no_image.png');
            	$('#selectedCropImg').attr('src','');
            	$('#btnCropImg, #imgSettings').hide();
            }

			$.fn.populateImageDetails = function(selectedNode){
				var nodeType = selectedNode.type;
				var selectedImageInfoElement = $('#selected_image_info');
				selectedImageInfoElement.show();
				if(nodeType == 'file'){
					var location = $.fn.getNodeLocation(true,selectedNode.id);
//					selectedImageInfoElement.find('#imgLocation').val(location);
					$('#imgLocation').val(location);
					var fileName = selectedNode.text;
    				selectedImageInfoElement.find('#imgFileName').val(fileName);
					var DataPost ={};
					DataPost["request"] = 'getImage';
					DataPost["webspaceName"] = '<%=webspaceName%>';
					DataPost["location"] = location;
					DataPost["imgFileName"] = fileName;
					DataPost["maxW"]= <%=maxWidthToResize%>;
	                DataPost["maxH"]=<%=maxHeightToResize%>;
	                DataPost["enableResize"] = <%=enableResize%>;
					var request = $.ajax({
	    		      url: "imageMgrProcessor.jsp",
	    		      method: "POST",
	    		      data: DataPost
	    		    })
	    		    .done(function(response) {
	    		    	var response = $.parseJSON(response);
	    		    	if(response.status){
							if(response.ID == '<c:out value="${selectedImageBean.ID}" />'){
			    		     	selectedImageInfoElement.find('#imgHeight').val('<c:out value="${selectedImageBean.height}" escapeXml="false" />');
			    		     	selectedImageInfoElement.find('#imgWidth').val('<c:out value="${selectedImageBean.width}" escapeXml="false" />');
			    				selectedImageInfoElement.find('#imgAlignment').val('<c:out value="${selectedImageBean.align}" escapeXml="false" />');
			    				selectedImageInfoElement.find('#imgBorder').val('<c:out value="${selectedImageBean.border}" escapeXml="false" />');
			    				selectedImageInfoElement.find('#imgVertical').val('<c:out value="${selectedImageBean.vSpace}" escapeXml="false" />');
			    				selectedImageInfoElement.find('#imgHorizontal').val('<c:out value="${selectedImageBean.hSpace}" escapeXml="false" />');
			    				selectedImageInfoElement.find('#imgAlt').val('<c:out value="${selectedImageBean.escapedJSDescription}" escapeXml="false" />');

	    		    		} else {
			    		     	selectedImageInfoElement.find('#imgHeight').val(response.currentHeight);
			    		     	selectedImageInfoElement.find('#imgWidth').val(response.currentWidth);
			    				selectedImageInfoElement.find('#imgAlignment').val(response.align);
			    				selectedImageInfoElement.find('#imgBorder').val(response.border);
			    				selectedImageInfoElement.find('#imgVertical').val(response.vs);
			    				selectedImageInfoElement.find('#imgHorizontal').val(response.hs);
			    				selectedImageInfoElement.find('#imgAlt').val(response.alt);
	    		    		}
	    		    		selectedImageInfoElement.find('#imgID').val(response.ID);
		    				selectedImageInfoElement.find("legend").text(response.currentFileName+' Details:');
		    				selectedImageInfoElement.find('#imgFileName').val(response.currentFileName);
	    		    		//alert('now setting image for='+fileName);
	    		    		//linkedPagesId
	    		    		var len = response.linkedPages;

			                $('#linkedPagesId').empty();
							var html1 = '<ol>';
			                for( var i = 0; i<response.linkedPages.length; i++){
			                    //var id = response[i]['id'];
			                    //var name = response[i]['name'];
			                    var url = response.linkedPages[i];
			                    html1 = html1 +'<li><a href="'+url+'" target="_blank">'+url+'</a></li>';
			                }
			                html1 = html1 + '</ol>';
		                    $("#linkedPagesId").append(html1);
		                    $('#linkedPagesId').hide();
		    				$.fn.showSelectedImage(location,fileName);
	    		    	} else {
	    		    		alert( "Failure inq getting="+response.errorMessage);
	    		    		selectedImageInfoElement.find('#imgID').val('');
		    				selectedImageInfoElement.find("legend").text(' Details:');
		    				selectedImageInfoElement.find('#imgFileName').val('');
		    		     	selectedImageInfoElement.find('#imgHeight').val('');
		    		     	selectedImageInfoElement.find('#imgWidth').val('');
		    				selectedImageInfoElement.find('#imgAlignment').val('');
		    				selectedImageInfoElement.find('#imgBorder').val('');
		    				selectedImageInfoElement.find('#imgVertical').val('');
		    				selectedImageInfoElement.find('#imgHorizontal').val('');
		    				selectedImageInfoElement.find('#imgAlt').val('');
		    				$('#linkedPagesId').empty();
		    				$.fn.removeSelectedImage();
	    		    	}
	    		    	selectedImageInfoElement.show();
	    		    })
	    		    .fail(function( jqXHR, textStatus ) {
	    		    	var response = $.parseJSON(response);
	    		      alert( "Request failed: " + textStatus );
	    		      selectedImageInfoElement.show();
	    		    });
				} else {
					var location = $.fn.getNodeLocation(false,selectedNode.id);
					//selectedImageInfoElement.find('#imgLocation').val(location);
					$('#imgLocation').val(location);
					$.fn.removeSelectedImage();
		    		selectedImageInfoElement.find('#imgID').val('');
    		     	selectedImageInfoElement.find('#imgHeight').val('');
    		     	selectedImageInfoElement.find('#imgWidth').val('');
    				selectedImageInfoElement.find("legend").text(' Details:');
    				selectedImageInfoElement.find('#imgAlignment').val('');
    				selectedImageInfoElement.find('#imgBorder').val('');
    				selectedImageInfoElement.find('#imgVertical').val('');
    				selectedImageInfoElement.find('#imgHorizontal').val('');
    				selectedImageInfoElement.find('#imgAlt').val('');
    				selectedImageInfoElement.find('#imgFileName').val('');
				}

				//alert('imgFN='+selectedImageInfoElement.find('#imgLocation').val());
		    };
		    //NOT IN USE FOR NOW
		    /*
		    $('#selected_image_info').find('#btnSave').bind("click", function() {
				var DataPost ={};
				DataPost["webspaceName"] = '<%=webspaceName%>';
				DataPost["ID"] = $('#imgID').val();
				DataPost["location"] = $('#imgLocation').val();
				DataPost["fileName"] = $('#imgFileName').val();
				DataPost["align"]=$('#imgAlignment').val();
				DataPost["border"]=$('#imgBorder').val();
				DataPost["vs"]=$('#imgVertical').val();
				DataPost["hs"]=$('#imgHorizontal').val();
				DataPost["alt"]=$('#imgAlt').val();
				DataPost["height"]=$('#imgHeight').val();
				DataPost["width"]=$('#imgWidth').val();
				DataPost["request"]='saveImageData';


				var request = $.ajax({
    		      url: "imageMgrProcessor.jsp",
    		      method: "POST",
    		      data: DataPost
    		    })

    		    .done(function(response) {
    		    	var response = $.parseJSON(response);
    		    	//alert(response.status);
    		    	if(response.status){
	    				alert('Image data has been saved successfully !!!');
    		    	} else {
    		    		alert( "Image data could not be saved -"+response.errorMessage);
    		    	}
    		    })

    		    .fail(function( jqXHR, textStatus ) {
    		      alert( "Request failed: " + textStatus);
    		    });

            });
			*/

		    var to = false;
		    var searchVal = "";
		    $('#jsFileTree_Search_txt_id').keyup(function (e) {
                searchVal = $('#jsFileTree_Search_txt_id').val();
                if(e.which === 13 || searchVal.length === 0){
                    $('#imageFileTreeId').jstree(true).search(searchVal);
                }

		    });

			$('#search-btn').on('click',function(e){
				e.preventDefault();
				$('#imageFileTreeId').jstree(true).search(searchVal);
			});

			$('#reset-btn').on('click',function(e){
				e.preventDefault();
				searchVal = "";
				$('#jsFileTree_Search_txt_id').val('');
				$('#imageFileTreeId').jstree(true).search("");
			});

		    $('#btnDone').bind("click", function() {
		    	//check if image is selected
		    	var imgID = $('#imgID').val();
		    	//alert('imgID='+imgID);
		    	if(!imgID || 0 == imgID.trim().length){
		    		alert("Please select an image!");
		    	} else {
					var DataPost ={};
					DataPost["webspaceName"] = '<%=webspaceName%>';
					DataPost["ID"] = $('#imgID').val();
					DataPost["location"] = $('#imgLocation').val();
					DataPost["fileName"] = $('#imgFileName').val();
					DataPost["align"]=$('#imgAlignment').val();
					DataPost["border"]=$('#imgBorder').val();
					DataPost["vs"]=$('#imgVertical').val();
					DataPost["hs"]=$('#imgHorizontal').val();
					DataPost["alt"]=$('#imgAlt').val();
					DataPost["height"]=$('#imgHeight').val();
					DataPost["width"]=$('#imgWidth').val();
					DataPost["request"]='saveImageData';

					var request = $.ajax({
	    		      url: "imageMgrProcessor.jsp",
	    		      method: "POST",
	    		      data: DataPost
	    		    })
	    		    .done(function(response) {
	    		    	var response = $.parseJSON(response);
    			    	//alert(response.status);
    			    	if(response.status){
    			    		var imgSrc = '<%=repositoryLocation%><%=webspaceName%>'
								+ $('#imgLocation').val()
								+ $('#imgFileName').val();

    			    		var imgWidth = $('#imgWidth').val();
							var imgHeight = $('#imgHeight').val();
							<%
							if(fileId == null) {
							%>
	    			    		var args = {
									'vspace' : $('#imgVertical').val(),
									'hspace' : $('#imgHorizontal').val(),
									'border' : $('#imgBorder').val(),
									'align' : $('#imgAlignment').val(),
									'src' : imgSrc,
									'alt' : $('#imgAlt').val()
								};
	    			    		if(parseInt(imgWidth) > 0 && parseInt(imgHeight) > 0){
	    			    			var styleDim='height: '+imgHeight+'px; width: '+imgWidth+'px;';
	    			    			//$.extend(args, {'width' : imgWidth, 'height' : imgHeight, 'original_width': imgWidth, 'original_height': imgHeight});
	    			    			$.extend(args, {'style' : styleDim, 'original_width': imgWidth, 'original_height': imgHeight});
	    			    		} else {
	    			    			$.extend(args, {'style' : ''});
	    			    		}
	    			    		$.fn.updateImageForRTE(args);
							<%
							} else {
							%>

							$.fn.updateImage(imgID, imgSrc,$('#imgAlt').val(),$('#imgFileName').val(), imgHeight, imgWidth,  $('#imgBorder').val(), $('#imgVertical').val(), $('#imgHorizontal').val());

							<%
							}
							%>

    		    		} else {
    		    			alert( "Image data could not be saved -"+response.errorMessage);
    		    		}
    		    	})
    		    	.fail(function( jqXHR, textStatus ) {
						alert( "Request failed: " + textStatus);
    		    	});

				}
		    });

		    $('#btnNone').bind("click", function() {
				<%
				if(fileId == null) {
				%>
				$.fn.updateImageForRTE();
				<%
				} else {
				%>
				$.fn.updateImage(-1);

				<%
				}
				%>
			});

		    $('#btnCancel').bind("click", function() {
		    	var opener = null;

		        if (window.dialogArguments) // Internet Explorer supports window.dialogArguments
		        {
		            opener = window.dialogArguments;
		        }
		        else // Firefox, Safari, Google Chrome and Opera supports window.opener
		        {
		            if (window.opener)
		            {
		                opener = window.opener;
		            }
		        }
				if(opener){
					opener.focus();
				}
				window.close();
			});
		    var newNodeIdAfterMove = null;
		    var nodeIdToDeleteAfterReprofile = null;
	        var nodeIdToSelectAfterRefresh = null;
			//For jstree
			$('#imageFileTreeId').jstree(
										{
											'core' : {
												'data' : {
													'url' : '/revize/util/jstree/imgmgr/imgmgrConnector.jsp?ws=<%=webspaceName%>&root=<%=folderOnServer%>',
													'data' : function(node) {
														return {
															'id' : node.id,
															'time': Math.round(Math.random() * 9999)
														};
													},
													"dataType" : "json" // needed only if you do not supply JSON headers
												},
												'force_text' : true,
												'check_callback' : true,
												'multiple' : false
											},
											'dnd' : {
							                    'is_draggable' : <%= (isAdministrtor || isSuperUser) %>,
							                    'copy' : false,

							                },
											'sort' : function(a, b) {
												return this.get_type(a) === this
														.get_type(b) ? (this
														.get_text(a).toLowerCase() > this
														.get_text(b).toLowerCase() ? 1 : -1)
														: (this.get_type(a) >= this
																.get_type(b) ? -1
																: 1);
											},
											'contextmenu' : {
												'items' : function(node) {
													var tmp = $.jstree.defaults.contextmenu.items();
													if(node.id == '/'){
														delete tmp.ccp;//remove edit
														delete tmp.remove; //remove delete
														delete tmp.rename; //remove rename
													} else {
														delete tmp.ccp;//remove edit
														tmp.create.label = "Create Folder";
														if (this.get_type(node) === "file") {
															delete tmp.create; //remove create
														}
													}
													return tmp;
												}
											},
											'types' : {
												'folder' : {
													'icon' : 'folder'
												},
												'file' : {
													'valid_children' : [],
													'icon' : 'file'
												},
												'default' : {
													'icon' : 'folder'
												}
											},
											'state' : { 'key' : 'rz_im_<%=webspaceName%>'+pageId,
												'filter': function(state) {
													//alert('filter='+state);
													//overide this so that it cleans the state everytime the jstree gets loaded
													return;
												}
											},
											'search' : {case_sensitive:false,show_only_matches:true, "ajax" : {"data": {

												'case_sensitive':false,
												'time': Math.round(Math.random() * 9999)

											}, "url" : '/revize/util/jstree/imgmgr/imgmgrConnector.jsp?ws=<%=webspaceName%>&root=<%=folderOnServer%>', 'dataType' : 'json'} },
											'plugins' : [ 'state', 'dnd',
													'sort', 'types',
													'contextmenu', 'unique','search' ]
										})
								.on('create_node.jstree', function(e, data) {
									//alert('create_node');
									var DataPost ={};
									DataPost["request"]='createFolder';
									DataPost["folderOnServer"] = '<%=folderOnServer%>'
									DataPost["webspaceName"] = '<%=webspaceName%>';
									DataPost["parentId"] = data.parent;
									DataPost["nodeName"] = data.node.text;
									DataPost["time"] = Math.round(Math.random() * 9999);
									var request = $.ajax({
					    		      url: "imageMgrProcessor.jsp",
					    		      method: "POST",
					    		      data: DataPost
					    		    })

					    		    .done(function(response) {
					    		    	var response = $.parseJSON(response);
					    		    	if(response.status){
					    		    		data.instance.set_id(data.node,response.id);
					    		    		data.instance.set_type(data.node,'folder');
					    		    	} else {
					    		    		data.instance.refresh();
					    		    		alert(response.errorMessage);
					    		    	}
					    		    })

					    		    .fail(function( jqXHR, textStatus ) {
					    		    	data.instance.refresh();
					    		    	var response = $.parseJSON(response);
					    		      alert( "Request failed: " + response.status );

					    		    });
								})
								.on('rename_node.jstree', function (e, data) {
									//alert('rename_node');
									var DataPost ={};
									DataPost["folderOnServer"] = '<%=folderOnServer%>';
									DataPost["webspaceName"] = '<%=webspaceName%>';
									DataPost["oldName"]=data.old;
									DataPost["newName"]=data.text;
									DataPost["parentId"] = data.node.parent;
									DataPost["time"] = Math.round(Math.random() * 9999);

									if(data.node.type == 'folder'){
										DataPost["request"]='renameFolder';

									} else {
										DataPost["request"]='renameImage';
										DataPost["ID"] = $('#imgID').val();
									}

									var request = $.ajax({
					    		      url: "imageMgrProcessor.jsp",
					    		      method: "POST",
					    		      data: DataPost
					    		    })

					    		    .done(function(response) {
					    		    	var response = $.parseJSON(response);
					    		    	if(response.status){
					    		    		data.instance.set_id(data.node,response.id);
					    		    		//$.fn.populateImageDetails(data.node);
					    		    		$('#imageFileTreeId').jstree(true).deselect_all(false);
					    		    		$('#imageFileTreeId').jstree(true).select_node(response.id,false,false);
					    		    	} else {
					    		    		data.instance.refresh();
					    		    		alert(response.errorMessage);
					    		    	}
					    		    })

					    		    .fail(function( jqXHR, textStatus ) {
					    		    	data.instance.refresh();
					    		    	var response = $.parseJSON(response);
					    		      	alert( "Request failed: " + response.status );

					    		    });


								})
								.on('delete_node.jstree', function (e, data) {
									//alert('delete_node');
									if(nodeIdToDeleteAfterReprofile===null){
										$.fn.deleteFileFolderNode(data,false);
									} else {
										//set the variable nodeIdToDeleteAfterReprofile to null
										nodeIdToDeleteAfterReprofile=null;
									 	$.fn.deleteFileFolderNode(data,true);
									}

								})
								.on('changed.jstree', function(e, data) {
									//alert('changed event');
								})
								.on('loaded.jstree', function(e, data) {
									//alert('loaded event');
								})
								.on(
										'open_node.jstree',
										function(event, data) {
											//alert('open_node id'+data.node.id);
											if (typeof preSelectedNodeIdArray !== 'undefined'
													&& preSelectedNodeIdArray) {
												//alert('preSelectedNodeIdArray='+preSelectedNodeIdArray.length);
												for (var k = 0; k < preSelectedNodeIdArray.length; k++) {
													//alert(data.node.id+':opened id:k='+k+':'+preSelectedNodeIdArray[k]);
													if (data.node.id == preSelectedNodeIdArray[k]) {
														var nextId = preSelectedNodeIdArray[k + 1];
														//alert(data.node.id+':opened id:nextId='+nextId);
														if (nextId == preSelectedNodeIdArray[preSelectedNodeIdArray.length - 1]) {//if the last node- select that node instead of open
															//alert ('select-'+nextId);
															preSelectedNodeIdArray = new Array();
															$(
																	"#imageFileTreeId")
																	.jstree(
																			true)
																	.select_node(
																			nextId);
															break;
														} else {
															$(
																	"#imageFileTreeId")
																	.jstree(
																			true)
																	.open_node(
																			nextId);
															break;
														}
													}
												}
											}
										})

								.on(
										'ready.jstree',
										function(e, data) {
											//alert('ready');
											//$("#imageFileTreeId").jstree(true).deselect_all(false);
											//alert('preSelectedNodeId='+preSelectedNodeId);
											if (typeof preSelectedNodeId !== 'undefined'
													&& preSelectedNodeId) {
												//alert('1preSelectedNodeId='+preSelectedNodeId);
												var nodeIds = preSelectedNodeId
														.split('/');
												if (nodeIds.length >= 3) {
													preSelectedNodeIdArray = new Array();
													nodeIds.shift();
													nodeIds.pop();
													var tempNodeId = '/';
													for (var k = 0; k < nodeIds.length; k++) {
														tempNodeId += nodeIds[k]
																+ '/';
														preSelectedNodeIdArray
																.push(tempNodeId);
													}
													//alert('preSelectedNodeIdArray.length='+preSelectedNodeIdArray.length);
													if (preSelectedNodeIdArray.length > 1) {
														//alert('open_node...'+preSelectedNodeIdArray[0]);
														$("#imageFileTreeId")
																.jstree(true)
																.open_node(
																		preSelectedNodeIdArray[0]);
													} else {
														//alert('select_node...'+preSelectedNodeIdArray[0]);
														$("#imageFileTreeId")
																.jstree(true)
																.select_node(
																		preSelectedNodeIdArray[0]);
													}

												}
											} else {
												//select the root node
												$("#imageFileTreeId").jstree(true).select_node('/');
											}

										})
								.on(
										'select_node.jstree',
										function(e, data) {
											//alert('select_node data='+data);
											if (data
													&& typeof data.node !== 'undefined'
													&& typeof data.node.id !== 'undefined') {
												//alert('select_node id='+data.node.id)
												var clearThumbs = $("#clearThumbnails").val();
												//alert('clearThumbs='+clearThumbs);
												if(clearThumbs === '0'){
													//set to 1 to clear next time
													$("#clearThumbnails").val('1');
												} else if(clearThumbs === '1'){
													$("#clearThumbnails").change();
												}
												$.fn.populateImageDetails(data.node);
											}
										})
								.on(
										'refresh.jstree',
										function(e, data) {
											//alert('refresh');
											//alert('newNodeIdAfterMove='+newNodeIdAfterMove);
											if (!(newNodeIdAfterMove===null)){
												$('#imageFileTreeId').jstree(true).deselect_all(true);
						    		    		$('#imageFileTreeId').jstree(true).select_node(newNodeIdAfterMove,false,false);
						    		    		//reset to null;
						    		    		newNodeIdAfterMove=null;
											}
											//alert('nodeIdToDeleteAfterReprofile='+nodeIdToDeleteAfterReprofile);
											if(!(nodeIdToDeleteAfterReprofile===null)){
												$('#imageFileTreeId').jstree(true).delete_node(nodeIdToDeleteAfterReprofile);
											}
											if (data
													&& typeof data.node !== 'undefined'
													&& typeof data.node.id !== 'undefined') {
												alert('refresh jstree event triggered'+data.node.id);
												$('#imageFileTreeId').jstree(
														true).select_node(
														data.node.id, false,
														false);
											}

											if(!(nodeIdToSelectAfterRefresh===null)){
												$('#imageFileTreeId').jstree(true).select_node(nodeIdToSelectAfterRefresh,false,false);
												nodeIdToSelectAfterRefresh = null;
											}

										})
								.on(
										'refresh_node.jstree',
										function(e, data) {
											//alert('refresh_node');
											if (data
													&& typeof data.node !== 'undefined'
													&& typeof data.node.id !== 'undefined') {
												if (data.node.type == 'folder') {
													var folderNodeId = data.node.id;
													var nodeIdToSelect = folderNodeId
															+ $(
																	'#selected_image_info')
																	.find(
																			'#imgFileName')
																	.val()
															+ '/';
													$('#imageFileTreeId')
															.jstree(true)
															.deselect_all(true);
													$('#imageFileTreeId')
															.jstree(true)
															.open_node(
																	folderNodeId);
													$('#imageFileTreeId')
															.jstree(true)
															.select_node(
																	nodeIdToSelect,
																	false,
																	false);
												} else {
													var fileNodeId = data.node.id;
													$('#imageFileTreeId')
															.jstree(true)
															.select_node(
																	fileNodeId,
																	false,
																	false);
												}
											}
										}).on('state_ready.jstree',
										function(e, data) {
											//alert('state_ready');

										}).on(
										'click',
										'.jstree-anchor',
										function(e) {
											//on clicking on a node , it should toggle
											$('#imageFileTreeId').jstree(true)
													.toggle_node(this);
										}).on('move_node.jstree',
										function(e, data) {
											//alert('move_node');
											var oldNodeId = data.node.id;
											var nodeType = data.node.type;
											var oldParent = data.old_parent;
											var newParent = data.parent;
											if(newParent == '#'){
												data.instance
												.refresh();
												$('#imageFileTreeId').jstree(true).select_node(oldNodeId,false,false);
												alert("This move is not allowed !!!");

											} else if(newParent != oldParent) {
												//alert('delete_node');
												var DataPost ={};
												DataPost["request"] = 'move';
												DataPost["folderOnServer"] = '<%=folderOnServer%>';
												DataPost["webspaceName"] = '<%=webspaceName%>';
												DataPost["oldNodeId"] = oldNodeId;
												DataPost["nodeType"] = nodeType;
												DataPost["oldParent"] = oldParent;
												DataPost["newParent"] = newParent;
												DataPost["time"] = Math.round(Math.random() * 9999);

												var request = $
												.ajax(
														{
															url : "imageMgrProcessor.jsp",
															method : "POST",
															data : DataPost
														})

												.done(
														function(response) {
															//alert('response='+response);
															var response = $
																	.parseJSON(response);
															if (response.status) {
																//select the new node id
																var newNodeId = response.id;
																newNodeIdAfterMove = newNodeId;
																//Open the new parent node before refresh so that it can select the new moved node
																//alert("opening -"+newParent);
																$('#imageFileTreeId').jstree(true).open_node(newParent);
																$('#imageFileTreeId').jstree(true).refresh();

															} else {
																data.instance
																		.refresh();
																alert(response.errorMessage);
															}
														})

												.fail(
														function(jqXHR,
																textStatus) {
															data.instance
																	.refresh();
															var response = $
																	.parseJSON(response);
															alert("Request failed: "
																	+ response.status);
														});
											}


										});


			$.fn.deleteFileFolderNode = function(data, profileRefFiles){


				var DataPost ={};
				DataPost["folderOnServer"] = '<%=folderOnServer%>';
				DataPost["webspaceName"] = '<%=webspaceName%>';
				DataPost["parentId"] = data.parent;
				DataPost["nodeName"] = data.node.text;
				DataPost["time"] = Math.round(Math.random() * 9999);


				if(data.node.type == 'folder'){
					DataPost["request"]='deleteFolder';

				} else {
					DataPost["request"]='deleteImage';
					DataPost["ID"] = $('#imgID').val();
					DataPost["reprofile"] = profileRefFiles;

				}


				var request = $.ajax({
			      url: "imageMgrProcessor.jsp",


			      method: "POST",
			      data: DataPost
			    })


			    .done(function(response) {

			    	var response = $.parseJSON(response);
			    	if(response.status){
							$.fn.removeSelectedImage();
							//select the parent node
							$("#imageFileTreeId").jstree(true).select_node(data.parent);
						} else {
			    		data.instance.refresh();
			    		//$("#imageFileTreeId").jstree(true).select_node(data.node.id);
			    		if(data.node.type == 'folder'){
			    			alert(response.errorMessage);
			    		} else {
				    		if(response.reprofile){
				    		var cnfMsg = 'This file cannot be deleted as it seems like its being referenced by other pages, if you think that is not the case, Please click OK for the system to double check and delete. Else click Cancel. \n\n*** THIS PROCESS MAY TAKE LONG!!!\n\n'+response.errorMessage;
			    			if (confirm(cnfMsg) == true) {
									//try deleting again with reprofile
									//alert(data.node.id);
									nodeIdToDeleteAfterReprofile = data.node.id;
									//$('#imageFileTreeId').jstree(true).select_node(data.node.id,false,false);
				    		       // $.fn.deleteFileFolderNode(data,true);
				    		    } else {
				    		        //Do nothing
				    		    	nodeIdToSelectAfterRefresh=data.node.id;
				    		    }
				    		} else {

				    			alert(response.errorMessage);
				    			nodeIdToSelectAfterRefresh=data.node.id;
				    		}
			    		}
			    	}
			    })


			    .fail(function( jqXHR, textStatus ) {

			    	data.instance.refresh();


			    	var response = $.parseJSON(response);
			      	alert( "Request failed: " + response.status );
			    });

			}


			$.fn.getCropImageViewerDimension = function(imgWidth, imgHeight) {
				var MAX_IMG_WH = 400;
				var cropImgViewWidth = imgWidth;
				var cropImgViewHeight = imgHeight;
				var scale = imgWidth/imgHeight;

				if(imgWidth > imgHeight) {
					if(imgWidth > MAX_IMG_WH){
						cropImgViewWidth = MAX_IMG_WH;
						cropImgViewHeight = Math.round(MAX_IMG_WH/scale);
					}
				} else {
					if(imgHeight > MAX_IMG_WH){
						cropImgViewHeight = MAX_IMG_WH;
						cropImgViewWidth = Math.round(MAX_IMG_WH * scale);
					}
				}
				var cropImgViewWH = new Array(2);
				cropImgViewWH[0] = cropImgViewWidth;
				cropImgViewWH[1] = cropImgViewHeight;
		        return cropImgViewWH;
			};

				$("#btnCropImg").click(function() {
					var MIN_W = 50;
					var MIN_H = 50;
					//set the height and width of div and image
					var imgWidth = $("#imgWidth").val();
					var imgHeight = $("#imgHeight").val();
					imgWidth = parseInt(imgWidth);
					imgHeight = parseInt(imgHeight);
					if(imgWidth <= MIN_W || imgHeight <= MIN_H) {
						alert('This image can not be cropped. Only large jpg, jpeg and png are allowed!!');
						return false;
					} else {
						var cropImgViewWH = $.fn.getCropImageViewerDimension(imgWidth, imgHeight);
						var cropImgViewWidth = cropImgViewWH[0];
						var cropImgViewHeight = cropImgViewWH[1];

						var minSelectionWidth = Math.round(MIN_W * (cropImgViewWidth/imgWidth));
						var minSelectionHeight = Math.round(MIN_H * (cropImgViewHeight/imgHeight));

						var INITIAL_W = Math.round(imgWidth/4);
						var INITIAL_H = Math.round(imgHeight/4);

						var T_MIN_W = Math.round(imgWidth/4);
						var T_MIN_H = Math.round(imgHeight/4);

						if(INITIAL_W < MIN_W){
							INITIAL_W = MIN_W;
						}
						if(INITIAL_H < MIN_H){
							INITIAL_H = MIN_H;
						}
						//alert(INITIAL_H + ':' + INITIAL_W);
						var initialSelectionWidth = Math.round(INITIAL_W * (cropImgViewWidth/imgWidth));
						var initialSelectionHeight = Math.round(INITIAL_H * (cropImgViewHeight/imgHeight));

						//set the image size to cropImgViewWidth and cropImgViewHeight
						$('.img-croped').css({"width":cropImgViewWidth});
						$('.img-croped').css({"height":cropImgViewHeight});
						$('#selectedCropImg').css({"width":cropImgViewWidth});
						$('#selectedCropImg').css({"height":cropImgViewHeight});


						//$('.modal').css({"width":cropImgViewWidth});
						//$('.modal').css({"width":800});
						//$('.modal').css({"width":800});
						//selection area to show at the middle
						var x1 = Math.round(cropImgViewWidth/2 - initialSelectionWidth/2);
						x1 = parseInt(x1);
						var y1 = Math.round(cropImgViewHeight/2 - initialSelectionHeight/2);
						y1 = parseInt(y1);
						var x2 = x1 + initialSelectionWidth;
						var y2 = y1 + initialSelectionHeight;

						//reset
						$("#X1").val(Math.round((x1*imgWidth)/cropImgViewWidth));
						$("#Y1").val(Math.round((y1*imgHeight)/cropImgViewHeight));
						$("#CW").val(INITIAL_W);
						$("#CH").val(INITIAL_H);
						$("#cropWidth").val(INITIAL_W);
						$("#cropHeight").val(INITIAL_H);


						//alert(imgWidth + ':'+imgHeight);
						//alert(x1 + ':'+y1+':'+x2+':'+y2);
						//remove if there is one
						$('#selectedCropImg').imgAreaSelect({ remove: true });
						//ImgAreaSelect
						$('#selectedCropImg').imgAreaSelect({
							handles: true,
							show: true,
							x1: x1,
							y1: y1,
							x2: x2,
							y2: y2,
							parent: '#img-croped',
							minHeight: minSelectionHeight,
							minWidth: minSelectionWidth,
							onSelectChange: function (img, selection) {
								var selectionWidth = Math.round((selection.width/cropImgViewWidth)*imgWidth);
								var selectionHeight = Math.round((selection.height/cropImgViewHeight)*imgHeight);
								if(selectionWidth < MIN_W){
									selectionWidth = MIN_W;
								}
								if(selectionHeight < MIN_H){
									selectionHeight = MIN_H;
								}
								$("#cropWidth").val(selectionWidth);
								$("#cropHeight").val(selectionHeight);
							},
							onSelectEnd: function (img, selection) {

							//alert('x1: ' + selection.x1 + '; y1: ' + selection.y1 + ';x2: ' + selection.x2 + '; y2: ' + selection.y2);
								var selectionX1 = Math.round((selection.x1/cropImgViewWidth)*imgWidth);
								var selectionY1 = Math.round((selection.y1/cropImgViewHeight)*imgHeight);
								var selectionWidth = Math.round((selection.width/cropImgViewWidth)*imgWidth);
								var selectionHeight = Math.round((selection.height/cropImgViewHeight)*imgHeight);
								if(selectionWidth < MIN_W){
									selectionWidth = MIN_W;
								}
								if(selectionHeight < MIN_H){
									selectionHeight = MIN_H;
								}
								//alert('cropImgViewWidth: ' + cropImgViewWidth + '; cropImgViewHeight: ' + cropImgViewHeight);
								//alert('imgWidth: ' + imgWidth + '; imgHeight: ' + imgHeight);
								//alert('width: ' + selection.width + '; height: ' + selection.height);
								//alert('Awidth: ' + selectionWidth + '; Aheight: ' + selectionHeight);
								//alert('selectionX1='+selectionX1+':selectionY1='+selectionY1);
								$("#X1").val(selectionX1);
								$("#Y1").val(selectionY1);
								$("#CW").val(selectionWidth);
								$("#CH").val(selectionHeight);

							}
					    });
					}
		    	});

			$("#btnDoCrop").click(function() {
				//alert('x1: ' + $("#X1").val() + '; y1: ' + $("#Y1").val() + ';CW: ' + $("#CW").val() + '; CH: ' + $("#CH").val());
					var w = $("#CW").val();
					var h = $("#CH").val();

					if(parseInt(w) > 0 && parseInt(h) > 0) {

					$.ajax({
						method: "POST",
						processData: false,
						  url: "crop.jsp",
						  dataType: "JSON",
						  data: { request:"crop",
							  	folderOnServer:"<%=folderOnServer%>",
							  webspaceName: "<%=webspaceName%>",
							  enableResize: <%=enableResize%>
							  },
						beforeSend: function(jqXHR,settings) {
									settings.data = $.extend(settings.data, {
										locationOnServer:$('#imgLocation').val(),
										toCropImgX: $("#X1").val(),
										toCropImgY: $("#Y1").val(),
										toCropImgW: $("#CW").val(),
										toCropImgH: $("#CH").val(),
										minimumWidthToResize: $("#imgWidth").val(),
										minimumHeightToResize: $("#imgHeight").val(),
										currentFileName:$('#imgFileName').val()
										});
									settings.data = jQuery.param(settings.data, false);
								}
					}).done(function( data, textStatus, jqXHR ) {
						if(data.status){
    						//set the filename so that the node refresh event listener can use it for node selection
    						$('#imgFileName').val(data.currentFileName);
    						var fileNodeId = data.nodeId;
    	   					var tempStr = fileNodeId.slice(0,fileNodeId.length-1); // remove last slash
    	   					var indxOfLastSlash = tempStr.lastIndexOf('/');
    	   					var parentNodeId =  tempStr.slice(0,indxOfLastSlash+1);
    						$('#imageFileTreeId').jstree(true).refresh_node(parentNodeId);
    						//close the crop
							$("#btnCloseCrop, .btnCloseCrop").click();
						} else {
    						alert(data.errorMessage);
    					}
					}).fail(function( jqXHR, textStatus, errorThrown ) {

						alert(errorThrown);

					});
					} else {
						alert('Please select crop area !!!');
					}
		    });


			$("#btnCloseCrop ,.btnCloseCrop").click(function()
		    {
				$('#myModal').modal('hide');


		    });

			$.fn.setCropSelectionArea = function(e) {

				var MIN_W = 50;
				var MIN_H = 50;
				var aSWidth = $("#cropWidth").val();
				var aSHeight = $("#cropHeight").val();
				var imgWidth = $("#imgWidth").val();
				var imgHeight = $("#imgHeight").val();
				//alert(aSWidth+':'+aSHeight+':'+imgWidth+':'+imgHeight);

				if( $.isNumeric(aSWidth) && $.isNumeric(aSHeight) ) {
					aSWidth = parseInt(aSWidth);
					aSHeight = parseInt(aSHeight);
				} else {
					aSWidth = MIN_W;
					aSHeight = MIN_H;
				}
				imgWidth = parseInt(imgWidth);
				imgHeight = parseInt(imgHeight);

				var cropImgViewWH = $.fn.getCropImageViewerDimension(imgWidth, imgHeight);
				var cropImgViewWidth = cropImgViewWH[0];
				var cropImgViewHeight = cropImgViewWH[1];

				var SELWIDTH = Math.round((MIN_W/imgWidth)*cropImgViewWidth);
				var SELHEIGHT = Math.round((MIN_H/imgHeight)*cropImgViewHeight);

				var tWidth = Math.round((aSWidth/imgWidth)*cropImgViewWidth);
				var tHeight = Math.round((aSHeight/imgHeight)*cropImgViewHeight);

				var ias = $('#selectedCropImg').imgAreaSelect({ instance: true });
				var selectionObject = ias.getSelection();

				var x1 = selectionObject.x1;
				var y1 = selectionObject.y1;
				if(typeof x1 === 'undefined') {
					x1 = 0;
				}
			 	if(typeof y1 === 'undefined') {
					y1 = 0;
				}
				x1 = parseInt(x1);
				y1 = parseInt(y1);

				var maxAllowedWidth = cropImgViewWidth - x1;
				var maxAllowedHeight = cropImgViewHeight - y1;

				if(maxAllowedWidth <= SELWIDTH){
					maxAllowedWidth = SELWIDTH;
					x1 = cropImgViewWidth - SELWIDTH;
				}

				if(maxAllowedHeight <= SELHEIGHT){
					maxAllowedHeight = SELHEIGHT;
					y1 = cropImgViewHeight - SELHEIGHT;
				}

				if(tWidth <= SELWIDTH) {
					tWidth = SELWIDTH;
					aSWidth = MIN_W;
				}

				if(tHeight <= SELHEIGHT) {
					tHeight = SELHEIGHT;
					aSHeight = MIN_H;
				}

				if(tWidth >= maxAllowedWidth) {
					tWidth = maxAllowedWidth;
					aSWidth = Math.round((tWidth/cropImgViewWidth)*imgWidth);
				}

				if(tHeight >= maxAllowedHeight) {
					tHeight = maxAllowedHeight;
					aSHeight = Math.round((tHeight/cropImgViewHeight)*imgHeight);
				}

				var selectionX1 = Math.round((x1/cropImgViewWidth)*imgWidth);
				var selectionY1 = Math.round((y1/cropImgViewWidth)*imgWidth);

				$("#cropWidth").val(aSWidth);
				$("#cropHeight").val(aSHeight);
				$("#X1").val(selectionX1);
				$("#Y1").val(selectionY1);
				$("#CW").val(aSWidth);
				$("#CH").val(aSHeight);

				var newWidth = tWidth;
				if((x1+ tWidth) > cropImgViewWidth){
					newWidth = cropImgViewWidth - x1;
				}
				var newHeight = tHeight;
				if((y1+tHeight)> cropImgViewHeight){
					newHeight = cropImgViewHeight - y1;
				}
				var x2 = x1 +  newWidth;
				var y2 = y1 +  newHeight;

				ias.setSelection(x1,y1,x2,y2);
				ias.setOptions({ show: true });
				ias.update();

            };

			$("#cropHeight").change(function() {
				$.fn.setCropSelectionArea();
			});

			$("#cropWidth").change(function() {
				$.fn.setCropSelectionArea();
			});

			$("#divLinkedPagesId").click(function() {
				$("#linkedPagesId").toggle();
			});


			$.fn.updateImage = function(imgId, imgLink,imgDesc,imgFilename, imgHeight, imgWidth, imgBorder, imgVSpace, imgHSpace) {
				var newImageId = -1;
				var newImageLink = '/revize/images/edit/noimage.gif';
				var newImageDesc = '';
				var newImageFilename = '--- None ---';
				var newImageHieght = '';
				var newImageWidth = '';
				var newImageBorder = '';
				var newImageVertical = '';
				var newImageHorizontal = '';
				if (parseInt(imgId) > 0) {
							newImageId = imgId;
							newImageLink = imgLink;
							newImageDesc = imgDesc;
							newImageFilename = imgFilename;
							newImageHieght = imgHeight;
							newImageWidth = imgWidth;
							newImageBorder = imgBorder;
							newImageVertical = imgVSpace;
							newImageHorizontal = imgHSpace;
				}
				opener.document.XMLForm['<%=valueElement%>'].value = newImageId;

				if (typeof opener.document.images['<%=displayElement%>'] != 'undefined') {
								opener.document.images['<%=displayElement%>'].src = newImageLink;
								opener.document.images['<%=displayElement%>'].alt = newImageDesc;
				}
				$.fn.closePopup();
			}

			$.fn.updateImageForRTE = function(args) {
				var ed = tinyMCEPopup.editor, v, el;

				tinyMCEPopup.restoreSelection();

				// Fixes crash in Safari
				if (tinymce.isWebKit)
					ed.getWin().focus();

				el = ed.selection.getNode();

				if (el && el.nodeName == 'IMG') {
					if (args == null) {
						ed.dom.remove(el);

					} else {

						tinymce.extend(args, {
							'class' : '',
							'id' : '',
							'dir' : '',
							'lang' : '',
							'usemap' : '',
							'longdesc' : ''
						});
						args.onmouseover = args.onmouseout = '';
						ed.dom.setAttribs(el, args);
					}
				} else {
					ed.execCommand('mceInsertContent', false, '<img id="__mce_tmp" />',
							{
								skip_undo : 1
							});
					ed.dom.setAttribs('__mce_tmp', args);
					ed.dom.setAttrib('__mce_tmp', 'id', '');
					ed.undoManager.add();
				}
				tinyMCEPopup.editor.execCommand('mceRepaint');
				tinyMCEPopup.editor.focus();
				tinyMCEPopup.close();
				$.fn.closePopup();
			}

			$.fn.closePopup = function (){

				if (window.dialogArguments) // Internet Explorer supports window.dialogArguments
				{
					opener = window.dialogArguments;
				} else // Firefox, Safari, Google Chrome and Opera supports window.opener
				{
					if (window.opener) {
						opener = window.opener;
					}
				}

				if (opener) {
					opener.focus();
				}

				window.close();
			}

	});
</script>
<script>


</script>
</head>
<body>

<div class="container-fluid">
	<div class="row-fluid">

		<div class="span6">

			<!-- file tree -->
			<div class="file-tree-wrap panel">
				<h3 class="page-header">Image Library <div class="help"><i class="fa fa-question" data-toggle="tooltip" data-placement="right" title="Select an image from the Image Library/Repository..."></i></div></h3>
				<div class="search-grp">
					<input type="text" id="jsFileTree_Search_txt_id" value="">
					<div class="search-btns">
						<a id="search-btn" class="btn btn-success" href="#">Search</a><a id="reset-btn" class="btn btn-danger" href="#">Reset</a>
					</div>
				</div>
				<div class="panel-inner">
					<div id="imageFileTreeId" class="imageFileTreeClass"></div>
				</div><!-- /.panel-inner -->
			</div><!-- /.file-tree-wrap -->
			<!-- file tree -->

			<!-- drop zone -->
			<div class="panel">
					<div class="panel-inner">
						<div id="imageDragDropId" class="dropzone imageDragDropClass">
							<div class="fallback">
								<form id="fallbackFormId">
									<div>
										<p>Please use the fallback form below to upload your files like in the olden days.</p>
										<input type="file" id="uploadedImage" name="uploadedImage" required>
										<input type="submit" value="Upload!">
									</div>
								</form>
							</div><!-- /.fallback -->
					</div><!-- /.drop zone -->
				</div><!-- /.panel-inner -->
			</div><!-- /.panel -->

		</div><!-- /.span6 -->

		<div class="span6">

			<!-- Container image -->
			<div id="container_image" class="container_image_class text-center panel">
				<div id="loading"></div>
				<h3 class="page-header">Image Preview <div class="help"><i class="fa fa-question" data-toggle="tooltip" data-placement="right" title="Selected Image Display Area. You can also crop the selected image..."></i></div>
				<div id="background_selector">
					<div style="background-color:#FFF"></div>
					<div style="background-color:#000"></div>
				</div>
				</h3>
				<div class="panel-inner">
					<img id='showImgId' src="images/no_image.png" style="max-width: 100%; max-height: 93%;">
					<br>
					<div class="set-btns">
						<button id="btnCropImg" href="#myModal" data-toggle="modal" type="button" class="btn btn-default btn-success">Crop Image </button>
					</div><!-- /.set-btns -->
				</div><!-- /.panel-inner -->
			</div><!-- Container image -->

			<div id="selected_image_info" class="selected_image_info_class panel">
				<h3 class="page-header">Image Settings <div class="help"><i class="fa fa-question" data-toggle="tooltip" data-placement="right" title="Define image properties i.e. vertical spacing horizontal spacing alignment and border width"></i></div></h3>
				<div class="panel-inner">
					<form id="imgDeatislForm">

						<div class="clearfix">
							<fieldset>

								<div class="row-fluid">
									<div class="span12">

										<label>Image Alignment:</label>
										<c:set var="defaultAlign" value="selected" />
										<c:if test="${selectedImageBean.align == 'left'}">
											<c:set var="leftAlign" value="selected" />
											<c:set var="defaultAlign" value="" />
										</c:if>

										<c:if test="${selectedImageBean.align == 'right'}">
											<c:set var="rightAlign" value="selected" />
											<c:set var="defaultAlign" value="" />
										</c:if>

										<c:if test="${selectedImageBean.align == 'top'}">
											<c:set var="topAlign" value="selected" />
											<c:set var="defaultAlign" value="" />
										</c:if>

										<c:if test="${selectedImageBean.align == 'middle'}">
											<c:set var="midAlign" value="selected" />
											<c:set var="defaultAlign" value="" />
										</c:if>

										<c:if test="${selectedImageBean.align == 'bottom'}">
											<c:set var="botAlign" value="selected" />
											<c:set var="defaultAlign" value="" />
										</c:if>
										<select name="imgAlignment" id="imgAlignment">
											<option value="default" ${defaultAlign}>Default - No
												Alignment</option>
											<option value="left" ${leftAlign}>Left - (Text Wraps)</option>
											<option value="right" ${rightAlign}>Right - (Text Wraps)</option>
											<option value="top" ${topAlign}>Text at Top</option>
											<option value="middle" ${midAlign}>Text at Middle</option>
											<option value="bottom" ${botAlign}>Text at Bottom</option>
										</select>

									</div><!-- /.span12 -->

								</div><!-- /.row-fluid -->

								<div class="row-fluid">

									<div class="span12">
										<label>Description (alt):</label>
										<input type="text" id="imgAlt" value="<c:out value="${selectedImageBean.description}" />" />
									</div><!-- /.span12 -->

								</div><!-- /.row-fluid -->

								<div class="row-fluid">

									<div class="span4">
										<label>Border:</label> <input type="number" id="imgBorder" min="1" max="99" value="<c:out value="${selectedImageBean.border}" />" class=" " />
									</div><!-- /.span2 -->

									<div class="span4">
										<label>V Spacing:</label>
										<input type="number" id="imgVertical" min="1" max="1000" value="<c:out value="${selectedImageBean.vSpace}" />" class=" " />
									</div><!-- /.span2 -->

									<div class="span4">
										<label>H Spacing:</label>
										<input type="number" id="imgHorizontal" min="1" max="9999" value="<c:out value="${selectedImageBean.hSpace}" />" class=" " />
									</div><!-- /.span2 -->

								</div><!-- /.row-fluid -->

						</fieldset>
						<input type="hidden" id="imgID" value="<c:out value="${selectedImageBean.ID}" />" /> <input
							type="hidden" id="imgFileName" value="<c:out value="${selectedImageBean.fileName}" />" />
						<input type="hidden" id="imgLocation"
							value="<c:out value="${selectedImageBean.location}" />" /> <input type="hidden"
							id="imgHeight" value="<c:out value="${selectedImageBean.height}" />" /> <input
							type="hidden" id="imgWidth" value="<c:out value="${selectedImageBean.width}" />" />

						</div><!-- /.row-fluid -->
					</form>
				</div><!-- /.panel-inner -->

					<div class="panel-inner">
						<a id="divLinkedPagesId">Linked Pages</a>
						<div id="linkedPagesId" style="height: 50px;overflow: scroll;">
							<c:if test="${not empty selectedImageBean.linkedPages}">
								<ol>
									<c:forEach items = "selectedImageBean.linkedPages" var="linkedPage">
	         							<li><a href="${linkedPage}" target="_blank">${linkedPage}</a></li>
	      							</c:forEach>
								</ol>
							</c:if>

						</div>
					</div>
			</div><!-- /#selected_image_info -->

		</div><!-- /.span6 -->

    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close btnCloseCrop" data-dismiss="modal" aria-hidden="true">&#10006;</button>
        <h3 id="myModalLabel">Crop Image</h3>
      </div>
      <div class="modal-body">

      <div class="form-inline">

				<span>
					<label for="cropHeight">Height:</label>
					<input id="cropHeight" type="number" min="1" max="99999" class="colorful" value="0">
				</span>

				<span>
					<label for="cropWidth">Width:</label>
					<input id="cropWidth" type="number" min="1" max="99999" class="colorful" value="0">
				</span>

			</div><!-- /.form-inline -->

			<div class="alert alert-info">Click and drag on the image first before using the inputs above</div>

				<div id="img-croped" class="img-croped">
					<img id='selectedCropImg' class="selectedCropImg" src="" />
				</div><!-- /.img-croped -->

      </div><!-- /.modal-body -->

      <div class="modal-footer">
	      <div class="btn-group">
					<input id="btnDoCrop" type="button" value="Crop" class="btn btn-success"/>
					<input id="btnCloseCrop" data-dismiss="modal" aria-hidden="true" type="button" value="Close" class="btn btn-danger"/>
				</div>
      </div>
    </div><!-- /#myModal  -->

			<input id="X1" type="hidden" value='0'/>
			<input id="Y1" type="hidden" value='0'/>
			<input id="CH" type="hidden" value='0'/>
			<input id="CW" type="hidden" value='0'/>

			<input id="clearThumbnails" type="hidden" value="-1"/>

			<div id="buttons_set" class="text-center btn-group">
				<fieldset>
					<input type="button" name="btnDone" id="btnDone" value="Save" class="btn btn-success">
					<input type="button" name="btnNone"	id="btnNone" value="Select None" class="btn btn-danger">
					<input type="button" name="btnCancel" id="btnCancel" value="Cancel" class="btn btn-warning">
				</fieldset>
			</div>

	</div><!-- /.row-fluid -->
</div><!-- /.container-fluid -->

<script>

$('#myModal').on('hidden', function () {
	$('#selectedCropImg').imgAreaSelect({ remove: true });
	//reset
	$("#X1").val('0');
	$("#Y1").val('0');
	$("#CW").val('0');
	$("#CH").val('0');
});

// tooltips
$("[data-toggle=tooltip]").tooltip();

$("#background_selector>div").click(function() {
	$("#container_image>.panel-inner").css("background-color",$(this).css("background-color"));
});

</script>
</body>
</html>