// ================================================================
//                       CHEditor 5
// ----------------------------------------------------------------
// Homepage: http://www.chcode.com
// Copyright (c) 1997-2015 CHSOFT
// ================================================================
var UploadScript = "";
var DeleteScript = "";

var activeImage = false;
var readyToMove = false;
var moveTimer = -1;
var dragDropDiv;
var insertionMarker;
var hideTimer = null;

var offsetX_marker = -3;
var offsetY_marker = -3;

var geckoOffsetX_marker = -3;
var geckoOffsetY_marker = -1;

var destinationObject = false;

var divXPositions = [];
var divYPositions = [];
var divWidth = [];
var divHeight = [];

var tmpLeft = 0;
var tmpTop = 0;

var eventDiff_x = 0;
var eventDiff_y = 0;

var modifyImages = [];
var uploadMaxNumber = 12;
var imageCompleted = 0;
var imageCompletedList = [];
var UploadImagePath = "";
var ShowThumbnailSize = { width: 120, height: 90 };
var oEditor = null;
var button;

var imageResizeWidth = 0;
var makeThumbnail = true;
var makeThumbnailWidth = 120;
var makeThumbnailHeight = 90;
var browser = null;

function createInsertionMaker() {
	var wrapper = document.getElementById('insertionMarker');
	var topIco = new Image();
	topIco.src = UploadImagePath + '/marker_top.gif';
	topIco.style.width = '6px';
	topIco.style.height = '1px';
	wrapper.appendChild(topIco);

	var middleIco = new Image();
	middleIco.src = UploadImagePath + '/marker_middle.gif';
	middleIco.style.height = '96px';
	middleIco.style.width = '6px';
	wrapper.appendChild(middleIco);

	var bottomIco = new Image();
	bottomIco.src = UploadImagePath + '/marker_bottom.gif';
	bottomIco.style.width = '6px';
	bottomIco.style.height = '1px';
	wrapper.appendChild(bottomIco);
}

function popupClose() {
// ----------------------------------------------------------------------------------
   	oEditor.popupWinCancel();
}

function showContents() {
	var spacer = function(id) {
		var clear = document.createElement('div');
		clear.style.height = '0px';
		clear.style.width = '0px';
		clear.className = 'clear';
		clear.id = 'spacer' + id;

		return clear;
	};

	var spacerNo = 1, i, imgBox, theImg, lastSpacer;
	for (i=0; i<uploadMaxNumber; i++) {
		if (i > 0 && ((i % 4) === 0)) {
			document.getElementById('imageListWrapper').appendChild(spacer(spacerNo++));
		}

		imgBox = document.createElement('div');
		imgBox.id = 'imgBox' + i;
		imgBox.className = 'imageBox';
		theImg = document.createElement('div');
		theImg.id = 'img_' + i;
		theImg.className = 'imageBox_theImage';
		imgBox.appendChild(theImg);

		document.getElementById('imageListWrapper').appendChild(imgBox);
		if (i === (uploadMaxNumber-1)) {
            lastSpacer = spacer(spacerNo);
            lastSpacer.style.height = "7px";
			document.getElementById('imageListWrapper').appendChild(lastSpacer);
		}
	}

    document.getElementById('imageListWrapper').style.padding = '5px 7px 0px 5px';
    document.getElementById('imageInfoBox').style.height = '298px';
    document.getElementById('imageInfoBox').style.width = '130px';
}

function setImageCount() {
	imageCompleted++;
	document.getElementById('imageCount').innerHTML = imageCompleted;
}

function getImageCount() {
	return imageCompleted;
}

function allowedMaxImage() {
    return uploadMaxNumber - getImageCount();
}

function getUploadedCount() {
    return document.getElementById('imageListWrapper').getElementsByTagName('img').length;
}

function uploadedImageCount() {
	imageCompleted = getUploadedCount();
	document.getElementById('imageCount').innerHTML = imageCompleted;
}

function uploadError(msg) {
    alert(msg);
}

function getTopPos(inputObj) {
// ----------------------------------------------------------------------------------
	var returnValue = inputObj.offsetTop;

    inputObj = inputObj.offsetParent;
  	while (inputObj) {
	  	if (inputObj.tagName.toLowerCase() !== 'html') {
	  		returnValue += (inputObj.offsetTop - inputObj.scrollTop);
			if (browser.msie) {
				returnValue += inputObj.clientTop;
            }
	  	}
        inputObj = inputObj.offsetParent;
	}
	return returnValue;
}

function getLeftPos(inputObj) {
// ----------------------------------------------------------------------------------
	var returnValue = inputObj.offsetLeft;

    inputObj = inputObj.offsetParent;
  	while (inputObj) {
	  	if (inputObj.id !== 'imageListWrapper') {
	  		returnValue += inputObj.offsetLeft;
	  	}
        inputObj = inputObj.offsetParent;
	}
	return returnValue;
}

function getDivCoordinates() {
// ----------------------------------------------------------------------------------
	var imgBox = document.getElementById('imageListWrapper').getElementsByTagName('DIV');
    var i;
	for (i=0; i < imgBox.length; i++) {
		if ((imgBox[i].className === 'imageBox' || imgBox[i].className === 'imageBoxHighlighted') && imgBox[i].id)
		{
			divXPositions[imgBox[i].id] = getLeftPos(imgBox[i]);
			divYPositions[imgBox[i].id] = getTopPos(imgBox[i]);
			divWidth[imgBox[i].id]  = imgBox[i].offsetWidth;
			divHeight[imgBox[i].id] = imgBox[i].offsetHeight;
		}
	}
}

function reOrder() {
// ----------------------------------------------------------------------------------
	var wrapper = document.getElementById('imageListWrapper');
	var imgBox = wrapper.getElementsByTagName('div');
	var imgNum = 0, i, spacer, breakline = [];

	for (i=0; i < imgBox.length; i++) {
		if (imgBox[i].id.indexOf('imgBox') === -1) {
            continue;
        }

        imgBox[i].className = 'imageBox';
		imgBox[i].firstChild.className = 'imageBox_theImage';

        if (imgNum > 0 && (imgNum % 4) === 0) {
            breakline.push(imgBox[i].id);
        }

		imgNum++;
	}

    for (i=0; i<breakline.length; i++) {
		spacer = document.getElementById('spacer' + (i+1));
		if (i+1 === breakline.length) {
            wrapper.appendChild(spacer);
        }
        else {
            wrapper.insertBefore(spacer, document.getElementById(breakline[i]));
        }
	}
}

function setImageInfo(id) {
    if (!id) {
        document.getElementById('selectedImageWidth').innerHTML = 0;
        document.getElementById('selectedImageHeight').innerHTML = 0;
        document.getElementById('selectedImageName').innerHTML = "없음";
    }
    else {
        document.getElementById('selectedImageWidth').innerHTML = imageCompletedList[id]['width'];
        document.getElementById('selectedImageHeight').innerHTML = imageCompletedList[id]['height'];
        document.getElementById('selectedImageName').innerHTML = imageCompletedList[id]['origName'];
    }
}

function showDelete() {
// ----------------------------------------------------------------------------------
	getDivCoordinates();

	var self = this;
	var btn = document.getElementById('removeImageButton');

	self.className = 'imageBox_theImage_over';
	btn.style.left = (makeThumbnailWidth - parseInt(btn.style.width, 10) - 1) + 'px';
	btn.style.top = '-1px';

    self.appendChild(btn);
	btn.style.display = 'block';

    btn.onmouseover = function(e) {
        oEditor.stopEvent(e);
        this.style.display = 'block';
        setImageInfo(self.id);
        this.className = 'removeButton_over';
        self.className = 'imageBox_theImage_over';
    };
    btn.onmouseout = function() { this.className = 'removeButton'; };
	btn.onmousedown = function() {
        var images = self.getElementsByTagName('img');
        var i;
        for (i=0; i<images.length; i++) {
            self.removeChild(images[i]);
        }

		self.removeChild(self.firstChild);
		self.className = 'imageBox_theImage';

		if (self.parentNode.nextSibling && self.parentNode.nextSibling.id) {
			var wrapper = document.getElementById('imageListWrapper');
			var moveobj = self.parentNode.nextSibling;
			var target = self.parentNode;

			while (moveobj !== null) {
                if (moveobj.firstChild && !moveobj.firstChild.firstChild) {
                    break;
                }
                if (/^spacer/.test(moveobj.id)) {
                    moveobj = moveobj.nextSibling;
                    continue;
                }
                wrapper.insertBefore(moveobj, target);
				moveobj = target.nextSibling;
			}
		}

		reOrder();
        uploadedImageCount();
        setImageInfo(0);
        this.style.display = 'none';
        document.body.appendChild(this);
        oEditor.removeEvent(self, 'mouseover', showDelete);
	};
    setImageInfo(self.id);
}

function hideDelete() {
// ----------------------------------------------------------------------------------
	document.getElementById('removeImageButton').style.display = 'none';
}

function startUpload(count) {
// ----------------------------------------------------------------------------------
	var el = document.getElementById('imageListWrapper').getElementsByTagName('div');
    var i, imgBox;
	for (i=0; i < el.length; i++) {
		imgBox = el[i];
		if (imgBox.className !== 'imageBox_theImage') {
			continue;
        }

		if (count === 0) {
            break;
        }

		if (!imgBox.firstChild || imgBox.firstChild.tagName.toLowerCase()  !== 'img') {
			imgBox.style.backgroundImage = "url('"+UploadImagePath+"/loader.gif')";
			count--;
		}
	}
}

function fileFilterError(file) {
	alert("선택하신 '" + file + "' 파일은 전송할 수 없습니다.\n" +
		  "gif, png, jpg 사진 파일만 전송할 수 있습니다.");
}

function imgComplete(img, imgSize, boxId) {
    img.setAttribute("border", 0);
    var resizeW, resizeH, M;

    if (imgSize.width > ShowThumbnailSize.width || imgSize.height > ShowThumbnailSize.height) {
        if (imgSize.width > imgSize.height) {
            resizeW = (imgSize.width > ShowThumbnailSize.width) ? ShowThumbnailSize.width : imgSize.width;
            resizeH = Math.round((imgSize.height * resizeW) / imgSize.width);
        }
        else {
            resizeH = (imgSize.height > ShowThumbnailSize.height) ? ShowThumbnailSize.height : imgSize.height;
            resizeW = Math.round((imgSize.width * resizeH) / imgSize.height);
        }

        if (resizeH > ShowThumbnailSize.height) {
            resizeH = (imgSize.height > ShowThumbnailSize.height) ? ShowThumbnailSize.height : imgSize.height;
            resizeW = Math.round((imgSize.width * resizeH) / imgSize.height);
        }

    }
    else {
        resizeW = imgSize.width;
        resizeH = imgSize.height;
    }

    img.style.width  = resizeW - 2+ 'px';
    img.style.height = resizeH - 2+ 'px';
    img.style.margin = "1px";

    if (resizeW < ShowThumbnailSize.width) {
        M = ShowThumbnailSize.width - resizeW;
        img.style.marginLeft = Math.round(M/2) + 'px';
    }

    if (resizeH < ShowThumbnailSize.height) {
        M = ShowThumbnailSize.height - resizeH;
        img.style.marginTop = Math.round(M/2) + 'px';
    }

    var elem = document.getElementById(boxId);
    elem.style.backgroundImage = "url('"+UploadImagePath+"/dot.gif')";
    oEditor.addEvent(elem, 'mouseover', showDelete);
    elem.onmouseout = function() {
        this.className = 'imageBox_theImage';
        setImageInfo(0);
        hideDelete();
    };

    setImageCount();
}

function showUploadWindow() {
// ----------------------------------------------------------------------------------
  	var uploadWindow  = document.getElementById("uploadWindow");
  	var uploadWindowWidth  = 700;
  	var winWidth;

  	if (!(oEditor.undefined(window.innerWidth))) {
  		winWidth  = window.innerWidth;
  	}
	else if (document.documentElement && (!(oEditor.undefined(document.documentElement.clientWidth))) &&
            document.documentElement.clientWidth !== 0)
	{
		winWidth  = document.documentElement.clientWidth;
	}
	else if (document.body && (!(oEditor.undefined(document.body.clientWidth)))) {
		winWidth  = document.body.clientWidth;
	}
	else {
		alert('현재 브라우저를 지원하지 않습니다.');
		return;
	}

  	var left = winWidth / 2 - (uploadWindowWidth / 2) + 'px';

  	uploadWindow.style.left = left;
  	uploadWindow.style.display = "block";
  	uploadWindow.style.width = uploadWindowWidth + 'px';

  	if (modifyImages.length > 0) {
		var el = document.getElementById('imageListWrapper').getElementsByTagName('DIV');
        var i, j, imgBox, img;
	  	for (i=0; i < modifyImages.length; i++) {
			if (i > 7) {
                break;
            }

			for (j=0; j < el.length; j++) {
				imgBox = el[j];
				if (imgBox.className !== 'imageBox_theImage') {
                    continue;
                }

				if (imgBox.firstChild && (imgBox.firstChild.src === modifyImages[i])) {
					break;
				}

				if (imgBox.firstChild === null) {
					img = new Image();
					img.src = modifyImages[i];
					img.border = 0;
					img.alt = '';
					img.style.width = '120px';
					img.style.height = '90px';
					imgBox.appendChild(img);
					break;
				}
	  		}
	  	}
  	}
}

function removeImages() {
	var images = [], i, j, theImage, img, remove;
    document.body.appendChild(document.getElementById('removeImageButton'));

	for (i=0; i < uploadMaxNumber; i++) {
		theImage = document.getElementById('img_'+i);
		if (theImage.hasChildNodes() && theImage.firstChild.tagName.toLowerCase() === 'img') {
            images.push(theImage);
        }
	}

    for (i=0; i<images.length; i++) {
        img = images[i];
        if (img.firstChild !== null) {
            oEditor.removeEvent(img, 'mouseover', showDelete);
            remove = img.getElementsByTagName('img');

            for (j=0; j<remove.length; j++) {
                img.removeChild(remove[j]);
            }

            img.parentNode.className = 'imageBox';
            oEditor.removeEvent(img, 'mouseover', showDelete);
        }
    }
    uploadedImageCount();
    imageCompletedList = [];
}

function removeImage() {
// ----------------------------------------------------------------------------------
	var i, theImage, found = false;

	for (i=0; i < uploadMaxNumber; i++) {
		theImage = document.getElementById('img_'+i);
		if (theImage.hasChildNodes() && theImage.firstChild.tagName.toLowerCase() === 'img') {
            found = true;
            break;
        }
	}

	if (found) {
		if (!confirm('추가하신 사진이 있습니다. 사진 넣기를 취소하시겠습니까?')) {
			return false;
		}
        removeImages();
	}

	return true;
}

function closeWindow() {
// ----------------------------------------------------------------------------------
	if (removeImage()) {
        popupClose();
    }
}

function cancelEvent() {
// ----------------------------------------------------------------------------------
	return false;
}

function startMoveTimer() {
// ----------------------------------------------------------------------------------
	if (moveTimer >= 0 && moveTimer < 10) {
		moveTimer++;
		setTimeout('startMoveTimer()', 8);
	}

	if (moveTimer === 5) {
		getDivCoordinates();
		var subElements = dragDropDiv.getElementsByTagName('div');
		if (subElements.length > 0) {
			dragDropDiv.removeChild(subElements[0]);
		}

		dragDropDiv.style.display = 'block';
		var newDiv = activeImage.cloneNode(true);
		newDiv.className = 'imageBox';
        newDiv.style.opacity = 0.5;

		newDiv.id = '';
		newDiv.style.padding = '2px';
		dragDropDiv.appendChild(newDiv);

		dragDropDiv.style.top = tmpTop + 'px';
		dragDropDiv.style.left = tmpLeft + 'px';
	}

	return false;
}

function selectImage(e) {
// ----------------------------------------------------------------------------------
	if (browser.msie) {
		e = event;
    }

	var el = this.parentNode.firstChild.firstChild;
	if (!el) {
        return;
    }

	var obj = this.parentNode;
    hideDelete();
	if (activeImage) {
        activeImage.className = 'imageBox';
    }

	obj.className = 'imageBoxHighlighted';
	activeImage = obj;
	readyToMove = true;
	moveTimer = 0;

	tmpLeft = e.clientX + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
	tmpTop = e.clientY + Math.max(document.body.scrollTop,document.documentElement.scrollTop);

	startMoveTimer();
	return false;
}

function dragDropEnd() {
// ----------------------------------------------------------------------------------
	readyToMove = false;
	moveTimer = -1;
	dragDropDiv.style.display = 'none';
	insertionMarker.style.display = 'none';

	if (destinationObject && destinationObject !== activeImage) {
		var parentObj = destinationObject.parentNode;
		var chkObj = destinationObject.previousSibling;
		var turn = false;

		if (chkObj === null) {
			chkObj = document.getElementById('imageListWrapper').firstChild;
			turn = true;
		}

		if (chkObj.id.indexOf('spacer') !== -1) {
			chkObj = chkObj.previousSibling;
		}

		if (chkObj.firstChild.firstChild === null) {
			reOrder();
			return;
		}

		if (chkObj && chkObj.id !== null) {
			while (chkObj) {
				if (chkObj.firstChild.firstChild !== null) {
					break;
				}
				chkObj = chkObj.previousSibling;
			}
			destinationObject = turn ? chkObj : chkObj.nextSibling;
		}

		parentObj.insertBefore(activeImage, destinationObject);
		reOrder();

		activeImage.className = 'imageBox';
		activeImage = false;
		destinationObject = false;
		getDivCoordinates();
		return false;
	}
	return true;
}

function dragDropMove(e) {
// ----------------------------------------------------------------------------------
	if (moveTimer === -1) {
        return;
    }

	if (browser.msie) {
        e = window.event;
    }

	var leftPos = e.clientX + document.documentElement.scrollLeft - eventDiff_x;
	var topPos = e.clientY + document.documentElement.scrollTop - eventDiff_y;
	dragDropDiv.style.top = topPos + 'px';
	dragDropDiv.style.left = leftPos + 'px';

	leftPos = leftPos + eventDiff_x;
	topPos = topPos + eventDiff_y;

	if (e.button !== 1 && browser.msie) {
        dragDropEnd();
    }

	var elementFound = false, prop, offsetX, offsetY;

	for (prop in divXPositions) {
		if (divXPositions[prop].className === 'clear') {
            continue;
        }

		if  (divXPositions[prop] < leftPos &&
			(divXPositions[prop] + divWidth[prop] * 0.7) > leftPos &&
			 divYPositions[prop] < topPos &&
			(divYPositions[prop] + divWidth[prop]) > topPos)
		{
			if (browser.msie) {
				offsetX = offsetX_marker;
				offsetY = offsetY_marker;
			}
			else {
				offsetX = geckoOffsetX_marker;
				offsetY = geckoOffsetY_marker;
			}

			insertionMarker.style.top = divYPositions[prop] + offsetY + 'px';
			insertionMarker.style.left = divXPositions[prop] + offsetX + 'px';
			insertionMarker.style.display = 'block';
			destinationObject = document.getElementById(prop);
			elementFound = true;
			break;
		}
	}

	if (!elementFound) {
		insertionMarker.style.display = 'none';
		destinationObject = false;
	}

	return false;
}

function saveImageOrder() {
// ----------------------------------------------------------------------------------
	var rData = [];
	var objects = document.getElementById('imageListWrapper').getElementsByTagName('DIV');
    var i;
	for (i=0; i < objects.length; i++) {
		if (objects[i].className === 'imageBox' ||
			objects[i].className === 'imageBoxHighlighted')
		{
			rData.push(objects[i].id);
		}
	}

	return rData;
}

function initGallery() {
// ----------------------------------------------------------------------------------
	var imgBox = document.getElementById('imageListWrapper').getElementsByTagName('DIV');
    var i;
	for (i=0; i < imgBox.length; i++) {
		if (imgBox[i].className === 'imageBox_theImage') {
            imgBox[i].onmousedown = selectImage;
		}
	}

	document.body.onselectstart = cancelEvent;
	document.body.ondragstart = cancelEvent;
	document.body.onmouseup = dragDropEnd;
	document.body.onmousemove = dragDropMove;

	dragDropDiv = document.getElementById('dragDropContent');
	insertionMarker = document.getElementById('insertionMarker');
	getDivCoordinates();
}

function doSubmit() {
// ----------------------------------------------------------------------------------
	var el = document.getElementById('imageListWrapper').getElementsByTagName('DIV');
	var imageArray = [];
	var num = 0;
    var fm_elem = document.getElementById('fm_alignment');
	var fm_align = fm_elem.alignment;
	var img_align = 'top', i, imgBox;
    var imgParagraph = fm_elem.para.checked;
    var useSpacer = fm_elem.use_spacer.checked;

	for (i=0; i < fm_align.length; i++) {
		if (fm_align[i].checked) {
			img_align = fm_align[i].value;
			break;
		}
	}

	for (i=0; i < el.length; i++) {
		imgBox = el[i];
		if (imgBox.className !== 'imageBox_theImage') {
			continue;
        }

		if (imgBox.firstChild !== null) {
			imageArray[num] = imageCompletedList[imgBox.id];

			if (img_align === 'break' ) {
				imageArray[num]['alt'] = "break";
			}
			else {
				imageArray[num]['alt'] = "";
				imageArray[num]['align'] = img_align;
			}

			num++;
		}
	}

	if (imageArray.length > 0) {
		oEditor.doInsertImage(imageArray, imgParagraph, useSpacer);
    }
	oEditor.popupWinClose();
}

var selectedFilesNum = 0;
var uploadedFiles = [];

function getDateTime() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    return String(10000 * year + 100 * month + day +
            ('0'+hours).slice(-2) + ('0'+minutes).slice(-2) + ('0'+seconds).slice(-2));
}

function makeFilename() {
	var chars = "abcdefghiklmnopqrstuvwxyz";
	var len = 8;
	var clen = chars.length;
	var rData = '', i, rnum;
	for (i=0; i<len; i++) {
		rnum = Math.floor(Math.random() * clen);
		rData += chars.substring(rnum,rnum+1);
	}
	return getDateTime() + '_' + rData;
}

function doUpload() {
    var reader = new FileReader();
    var file = uploadedFiles[selectedFilesNum];

    reader.onload = function(readerEvent) {
        var origImage = new Image();

        origImage.onload = function(imageEvent) {
            var canvas = document.createElement("canvas");
            var width = origImage.width;
            var height = origImage.height;

            var xhr = new XMLHttpRequest();
            xhr.open('POST', UploadScript, true);
            var data = new FormData();

            if (imageResizeWidth > 0 && origImage.width > imageResizeWidth) {
                width = imageResizeWidth;
                height = (imageResizeWidth / origImage.width) * origImage.height;

                canvas.width = width;
                canvas.height = height;
                canvas.getContext("2d").drawImage(origImage, 0, 0, width, height);

                var bitmapData = canvas.toDataURL(readerEvent.target.filetype);
                data.append('filehtml5', bitmapData.replace(/^(.*)base64,/, ''));
            }
            else {
                data.append('file', readerEvent.target.file);
            }

            var fileFormat = readerEvent.target.filename.substring(readerEvent.target.filename.lastIndexOf('.'));
            data.append('origname', readerEvent.target.filename);
            data.append('randomname', makeFilename() + fileFormat.toLowerCase());

            var el = document.getElementById('imageListWrapper').getElementsByTagName('div');
            var imgBox = null, imgInfo;

            xhr.onreadystatechange = function(xhrEvent) {
                if (this.readyState === 4 && this.status === 200) {
                    var jsonText = decodeURI(oEditor.trimSpace(this.responseText));
                    jsonText = jsonText.replace(/\+/g, ' ').replace(/\\/g, '\\\\');
                    var jsonData = JSON.parse(jsonText);
                    var img = new Image(), i;

                    img.onload = function() {
                        for (i=0; i < el.length; i++) {
                            imgBox = el[i];

                            if (imgBox.className !== 'imageBox_theImage') {
                                continue;
                            }

                            if (!imgBox.firstChild || imgBox.firstChild.tagName.toLowerCase() !== 'img') {
                                imgInfo = { "width":    this.width,
                                            "height":   this.height,
                                            "fileName": jsonData.fileName,
                                            "fileUrl":  jsonData.fileUrl,
                                            "origName": readerEvent.target.filename,
                                            "filePath": jsonData.filePath,
                                            "fileSize": jsonData.fileSize };

                                imageCompletedList[imgBox.id] = imgInfo;
                                imgComplete(this, imgInfo, imgBox.id);
                                imgBox.appendChild(img);
                                break;
                            }
                        }

                        if (selectedFilesNum < uploadedFiles.length) {
                            doUpload();
                        }
                        else {
                            uploadedFiles = [];
                            selectedFilesNum = 0;
                        }
                    };
                    img.src = decodeURIComponent(jsonData.fileUrl);
                }
            };

            selectedFilesNum++;
            xhr.send(data);
        };

        origImage.src = readerEvent.target.result;
    };

    reader.file = file;
    reader.filename = file.name;
    reader.filetype = file.type;
    reader.readAsDataURL(file);
}

function fileSelect(selected) {
    var files = selected.files;
    var file, i, num = files.length;

    for (i=0; i < num; i++) {
        file = files[i];
        if (!file.type.match('image.*')) {
            fileFilterError(file.name);
            continue;
        }

        uploadedFiles.push(file);
    }

    if (num < 1 || uploadedFiles.length < 1) {
        return;
    }

    startUpload(num);
    doUpload();

    var inputFile = document.getElementById('inputImageUpload');
    var theForm = document.createElement('form');
    var fileSelectButton = document.getElementById('fileSelectButton');
    theForm.appendChild(inputFile);
    theForm.reset();
    fileSelectButton.parentNode.insertBefore(inputFile, fileSelectButton);
    fileSelectButton.style.marginLeft = '-1px';
}

function fileSelectDrop(ev) {
    oEditor.stopEvent(ev);
    this.className = "imageListWrapperHtml5";

    var files = ev.dataTransfer.files;
    var file, i, num = files.length;

    for (i=0; i < num; i++) {
        file = files[i];
        if (!file.type.match('image.*')) {
            fileFilterError(file.name);
            continue;
        }
        uploadedFiles.push(file);
    }

    if (uploadedFiles.length < 1) {
        return;
    }

    startUpload(num);
    doUpload();
}

function dragOver(ev) {
    oEditor.stopEvent(ev);
    this.className = "dragOver";
}

function dragOut(ev) {
    oEditor.stopEvent(ev);
    this.className = "imageListWrapperHtml5";
}

function init(dialog) {
	oEditor = this;
	oEditor.dialog = dialog;
	var dlg = new Dialog(oEditor);
    browser = oEditor.getBrowser();

	UploadImagePath = oEditor.config.iconPath + 'imageUpload';
    uploadMaxNumber = oEditor.config.imgUploadNumber;
	UploadScript = oEditor.config.editorPath + 'imageUpload/upload.php';
	DeleteScript = oEditor.config.editorPath + 'imageUpload/delete.php';

	imageResizeWidth = oEditor.config.imgMaxWidth;
    makeThumbnail = oEditor.config.makeThumbnail;
    makeThumbnailWidth = oEditor.config.thumbnailWidth;
    makeThumbnailHeight = oEditor.config.thumbnailHeight;

    document.getElementById("maxImageNum").appendChild(document.createTextNode(uploadMaxNumber));

    button = [ { alt : "", img : 'submit.gif', cmd : doSubmit, hspace : 2 },
               { alt : "", img : 'cancel.gif', cmd : closeWindow, hspace : 2 } ];

	dlg.setDialogHeight(370);
	dlg.showButton(button);
	showContents();
	initGallery();
	showUploadWindow();
	createInsertionMaker();

    var dropTarget = document.getElementById("imageListWrapper");
    oEditor.addEvent(dropTarget, 'dragover', dragOver);
    oEditor.addEvent(dropTarget, 'dragleave', dragOut);
    oEditor.addEvent(dropTarget, 'drop', fileSelectDrop);

    var align = document.getElementById('fm_alignment');
    var i;
    for (i=0; i<align.length; i++) {
        if (align[i].value === oEditor.config.imgDefaultAlign) {
            align[i].checked = "checked";
            break;
        }
    }
}