diff --git a/croppic.ts b/croppic.ts
new file mode 100644
index 0000000..3fc8132
--- /dev/null
+++ b/croppic.ts
@@ -0,0 +1,889 @@
+module CroppicModule {
+
+    export class CroppicOptions {
+        uploadUrl = '';
+        uploadData = {};
+        cropUrl = '';
+        cropData = {};
+        outputUrlId = '';
+        //styles
+        imgEyecandy = true;
+        imgEyecandyOpacity = 0.2;
+        zoomFactor = 10;
+        rotateFactor = 5;
+        doubleZoomControls = true;
+        rotateControls = true;
+        modal = false;
+        customUploadButtonId = '';
+        loaderHtml = '';
+        scaleToFill = true;
+        processInline = false;
+        loadPicture = '';
+        onReset: any;
+        enableMousescroll = false; 			
+			
+        //callbacks
+        onBeforeImgUpload: any;
+        onAfterImgUpload: any;
+        onImgDrag: any;
+        onImgZoom: any;
+        onImgRotate: any;
+        onBeforeImgCrop: any;
+        onAfterImgCrop: any;
+        onBeforeRemoveCroppedImg: any;
+        onAfterRemoveCroppedImg: any;
+        onError: any;
+
+    }
+
+    export class Croppic {
+        id = '';
+        options: CroppicOptions;
+        imgInitW = 0;
+        imgInitH = 0;
+        imgW = 0;
+        imgH = 0;
+        objW = 0;
+        objH = 0;
+        actualRotation = 0;
+        windowW = 0;
+        windowH = $(window).height();
+        obj: any;
+        outputDiv: JQuery;
+        imgUploadControl: JQuery;
+        outputUrlObj = {};
+        img: JQuery;
+        defaultImg: {};
+        croppedImg: JQuery;
+        imgEyecandy: JQuery;
+        form: JQuery;
+        iframeform: JQuery;
+        iframeobj: JQuery;
+        cropControlsUpload: JQuery;
+        cropControlsCrop: JQuery;
+        cropControlZoomMuchIn: JQuery;
+        cropControlZoomMuchOut: JQuery;
+        cropControlZoomIn: JQuery;
+        cropControlZoomOut: JQuery;
+        cropControlCrop: JQuery;
+        cropControlReset: JQuery;
+        cropControlRemoveCroppedImage: JQuery;
+        modal: JQuery;
+        loader: JQuery;
+        imgUrl: string;
+
+        constructor(id, options: any) {
+            var that = this;
+            that.id = id;
+            that.obj = $('#' + id);
+            that.outputDiv = that.obj;
+
+            // DEFAULT OPTIONS
+            that.options = {
+                uploadUrl: '',
+                uploadData: {},
+                cropUrl: '',
+                cropData: {},
+                outputUrlId: '',
+                //styles
+                imgEyecandy: true,
+                imgEyecandyOpacity: 0.2,
+                zoomFactor: 10,
+                rotateFactor: 5,
+                doubleZoomControls: true,
+                rotateControls: true,
+                modal: false,
+                customUploadButtonId: '',
+                loaderHtml: '',
+                scaleToFill: true,
+                processInline: false,
+                loadPicture: '',
+                onReset: null,
+                enableMousescroll: false, 			
+			
+                //callbacks
+                onBeforeImgUpload: null,
+                onAfterImgUpload: null,
+                onImgDrag: null,
+                onImgZoom: null,
+                onImgRotate: null,
+                onBeforeImgCrop: null,
+                onAfterImgCrop: null,
+                onBeforeRemoveCroppedImg: null,
+                onAfterRemoveCroppedImg: null,
+                onError: null
+
+            };
+
+            // OVERWRITE DEFAULT OPTIONS
+            for (var i in options) that.options[i] = options[i];
+
+            // INIT THE WHOLE DAMN THING!!!
+            that.init();
+        }
+
+        init() {
+            var that = this;
+
+            that.objW = that.obj.width();
+            that.objH = that.obj.height();
+			
+            // reset rotation
+            that.actualRotation = 0;
+
+            if ($.isEmptyObject(that.defaultImg)) { that.defaultImg = that.obj.find('img'); }
+
+            that.createImgUploadControls();
+
+            if ($.isEmptyObject(that.options.loadPicture)) {
+                that.bindImgUploadControl();
+            } else {
+                that.loadExistingImage();
+            }
+
+        }
+        createImgUploadControls() {
+            var that = this;
+
+            var cropControlUpload = '';
+            if (that.options.customUploadButtonId === '') { cropControlUpload = '<i class="cropControlUpload"></i>'; }
+            var cropControlRemoveCroppedImage = '<i class="cropControlRemoveCroppedImage"></i>';
+
+            if ($.isEmptyObject(that.croppedImg)) { cropControlRemoveCroppedImage = ''; }
+            if (!$.isEmptyObject(that.options.loadPicture)) { cropControlUpload = ''; }
+
+            var html = '<div class="cropControls cropControlsUpload"> ' + cropControlUpload + cropControlRemoveCroppedImage + ' </div>';
+            that.outputDiv.append(html);
+
+            that.cropControlsUpload = that.outputDiv.find('.cropControlsUpload');
+
+            if (that.options.customUploadButtonId === '') { that.imgUploadControl = that.outputDiv.find('.cropControlUpload'); }
+            else { that.imgUploadControl = $('#' + that.options.customUploadButtonId); that.imgUploadControl.show(); }
+
+            if (!$.isEmptyObject(that.croppedImg)) {
+                that.cropControlRemoveCroppedImage = that.outputDiv.find('.cropControlRemoveCroppedImage');
+            }
+
+        }
+        bindImgUploadControl() {
+
+            var that = this;
+			
+            // CREATE UPLOAD IMG FORM
+            var formHtml = '<form class="' + that.id + '_imgUploadForm" style="display: none; visibility: hidden;">  <input type="file" name="img" id="' + that.id + '_imgUploadField">  </form>';
+            that.outputDiv.append(formHtml);
+            that.form = that.outputDiv.find('.' + that.id + '_imgUploadForm');
+			
+			
+            // CREATE FALLBACK IE9 IFRAME
+            var fileUploadId = that.createFallbackIframe();
+
+            that.imgUploadControl.off('click');
+            that.imgUploadControl.on('click', function () {
+                if (fileUploadId === "") {
+                    that.form.find('input[type="file"]').trigger('click');
+                } else {
+                    //Trigger iframe file input click, otherwise access restriction error
+                    that.iframeform.find('input[type="file"]').trigger('click');
+                }
+            });
+
+            if (!$.isEmptyObject(that.croppedImg)) {
+
+                that.cropControlRemoveCroppedImage.on('click', function () {
+                    if (typeof (that.options.onBeforeRemoveCroppedImg) === typeof (Function)) {
+                        that.options.onBeforeRemoveCroppedImg.call(that);
+                    }
+
+                    that.croppedImg.remove();
+                    $(this).hide();
+
+                    if (typeof (that.options.onAfterRemoveCroppedImg) === typeof (Function)) {
+                        that.options.onAfterRemoveCroppedImg.call(that);
+                    }
+
+                    if (!$.isEmptyObject(that.defaultImg)) {
+                        that.obj.append(that.defaultImg);
+                    }
+
+                    if (that.options.outputUrlId !== '') { $('#' + that.options.outputUrlId).val(''); }
+
+                });
+
+            }
+
+            that.form.find('input[type="file"]').change(function () {
+
+                if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that);
+
+                that.showLoader();
+                that.imgUploadControl.hide();
+
+                if (that.options.processInline) {
+
+                    var reader = new FileReader();
+                    reader.onload = (e: any) => {
+                        var image = new Image();
+                        image.src = e.target.result;
+                        image.onload = () => {
+                            that.imgInitW = that.imgW = image.width;
+                            that.imgInitH = that.imgH = image.height;
+
+                            if (that.options.modal) { that.createModal(); }
+                            if (!$.isEmptyObject(that.croppedImg)) { that.croppedImg.remove(); }
+
+                            that.imgUrl = image.src;
+
+                            that.obj.append('<img src="' + image.src + "\">");
+
+                            that.initCropper();
+                            that.hideLoader();
+
+                            if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);
+
+                        }
+                    };
+                    var files = <any> that.form.find('input[type="file"]')[0];
+                    reader.readAsDataURL(files.files[0]);
+
+                } else {
+
+                    var formData = new window['FormData'](that.form[0]);
+
+                    for (var key in that.options.uploadData) {
+                        if (that.options.uploadData.hasOwnProperty(key)) {
+                            formData.append(key, that.options.uploadData[key]);
+                        }
+                    }
+
+                    var ajaxsettings = {
+                        url: that.options.uploadUrl,
+                        data: formData,
+                        context: document.body,
+                        cache: false,
+                        contentType: false,
+                        processData: false,
+                        type: 'POST'
+                    }
+
+
+
+                    $.ajax(<JQueryAjaxSettings> ajaxsettings).always(data => {
+
+                        that.afterUpload(data);
+                    });
+                }
+            });
+
+        }
+        loadExistingImage() {
+            var that = this;
+
+            if ($.isEmptyObject(that.croppedImg)) {
+                if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that);
+
+                that.showLoader();
+                if (that.options.modal) { that.createModal(); }
+                if (!$.isEmptyObject(that.croppedImg)) { that.croppedImg.remove(); }
+
+                that.imgUrl = that.options.loadPicture;
+
+                var img = $('<img src="' + that.options.loadPicture + '">');
+                that.obj.append(img);
+                img.load(function () {
+                    that.imgInitW = that.imgW = this.width;
+                    that.imgInitH = that.imgH = this.height;
+                    that.initCropper();
+                    that.hideLoader();
+                    if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);
+                });
+
+            } else {
+                that.cropControlRemoveCroppedImage.on('click', function () {
+                    that.croppedImg.remove();
+                    $(this).hide();
+
+                    if (!$.isEmptyObject(that.defaultImg)) {
+                        that.obj.append(that.defaultImg);
+                    }
+                    if (that.options.outputUrlId !== '') { $('#' + that.options.outputUrlId).val(''); }
+                    that.croppedImg = null;
+                    that.reset();
+                });
+            }
+
+        }
+        afterUpload(data) {
+            var that = this;
+
+            var response = typeof data == 'object' ? data : jQuery.parseJSON(data);
+
+
+            if (response.status == 'success') {
+
+                that.imgInitW = that.imgW = response.width;
+                that.imgInitH = that.imgH = response.height;
+
+                if (that.options.modal) { that.createModal(); }
+                if (!$.isEmptyObject(that.croppedImg)) { that.croppedImg.remove(); }
+
+                that.imgUrl = response.url;
+
+                var img = $('<img src="' + response.url + '">');
+
+                that.obj.append(img);
+
+                img.load(() => {
+                    this.initCropper();
+                    this.hideLoader();
+                    if (this.options.onAfterImgUpload) this.options.onAfterImgUpload.call(this);
+                });
+
+                if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);
+
+            }
+
+            if (response.status == 'error') {
+                if (that.options.onError) that.options.onError.call(that, response.message);
+                that.hideLoader();
+                setTimeout(() => { this.reset(); }, 2000);
+            }
+        }
+
+        createModal() {
+            var that = this;
+
+            var marginTop = that.windowH / 2 - that.objH / 2;
+            var modalHTML = '<div id="croppicModal">' + '<div id="croppicModalObj" style="width:' + that.objW + 'px; height:' + that.objH + 'px; margin:0 auto; margin-top:' + marginTop + 'px; position: relative;"> </div>' + '</div>';
+
+            $('body').append(modalHTML);
+
+            that.modal = $('#croppicModal');
+
+            that.obj = $('#croppicModalObj');
+
+        }
+        destroyModal() {
+            var that = this;
+
+            that.obj = that.outputDiv;
+            that.modal.remove();
+            that.modal = null;
+        }
+        initCropper() {
+            var that = this;
+			
+            /*SET UP SOME VARS*/
+            that.img = that.obj.find('img');
+            that.img.wrap('<div class="cropImgWrapper" style="overflow:hidden; z-index:1; position:absolute; width:' + that.objW + 'px; height:' + that.objH + 'px;"></div>');
+	
+            /*INIT DRAGGING*/
+            that.createCropControls();
+
+            if (that.options.imgEyecandy) { that.createEyecandy(); }
+            that.initDrag();
+            that.initialScaleImg();
+        }
+        createEyecandy() {
+            var that = this;
+
+            that.imgEyecandy = that.img.clone();
+            that.imgEyecandy.css({ 'z-index': '0', 'opacity': that.options.imgEyecandyOpacity }).appendTo(that.obj);
+        }
+        destroyEyecandy() {
+            var that = this;
+            that.imgEyecandy.remove();
+        }
+        initialScaleImg() {
+            var that = this;
+            that.zoom(-that.imgInitW);
+            that.zoom(40);
+			
+            // Adding mousewheel zoom capabilities
+            if (that.options.enableMousescroll) {
+                that.img.on('mousewheel', (event: any) => {
+                    event.preventDefault();
+                    this.zoom(this.options.zoomFactor * event.deltaY);
+                });
+            }
+            // initial center image
+			
+            that.img.css({ 'left': -(that.imgW - that.objW) / 2, 'top': -(that.imgH - that.objH) / 2, 'position': 'relative' });
+            if (that.options.imgEyecandy) { that.imgEyecandy.css({ 'left': -(that.imgW - that.objW) / 2, 'top': -(that.imgH - that.objH) / 2, 'position': 'relative' }); }
+
+        }
+
+        createCropControls() {
+            var that = this;
+			
+            // CREATE CONTROLS
+            var cropControlZoomMuchIn = '';
+            var cropControlZoomIn = '<i class="cropControlZoomIn"></i>';
+            var cropControlZoomOut = '<i class="cropControlZoomOut"></i>';
+            var cropControlZoomMuchOut = '';
+            var cropControlRotateLeft = '';
+            var cropControlRotateRight = '';
+            var cropControlCrop = '<i class="cropControlCrop"></i>';
+            var cropControlReset = '<i class="cropControlReset"></i>';
+
+            var html;
+
+            if (that.options.doubleZoomControls) {
+                cropControlZoomMuchIn = '<i class="cropControlZoomMuchIn"></i>';
+                cropControlZoomMuchOut = '<i class="cropControlZoomMuchOut"></i>';
+            }
+            if (that.options.rotateControls) {
+                cropControlRotateLeft = '<i class="cropControlRotateLeft"></i>';
+                cropControlRotateRight = '<i class="cropControlRotateRight"></i>';
+            }
+
+            html = '<div class="cropControls cropControlsCrop">' + cropControlZoomMuchIn + cropControlZoomIn + cropControlZoomOut + cropControlZoomMuchOut + cropControlRotateLeft + cropControlRotateRight + cropControlCrop + cropControlReset + '</div>';
+
+            that.obj.append(html);
+
+            that.cropControlsCrop = that.obj.find('.cropControlsCrop');
+
+            // CACHE AND BIND CONTROLS
+            if (that.options.doubleZoomControls) {
+                that.cropControlZoomMuchIn = that.cropControlsCrop.find('.cropControlZoomMuchIn');
+                that.cropControlZoomMuchIn.on('click', () => { this.zoom(this.options.zoomFactor * 10); });
+
+                that.cropControlZoomMuchOut = that.cropControlsCrop.find('.cropControlZoomMuchOut');
+                that.cropControlZoomMuchOut.on('click', () => { this.zoom(-this.options.zoomFactor * 10); });
+            }
+
+            that.cropControlZoomIn = that.cropControlsCrop.find('.cropControlZoomIn');
+            that.cropControlZoomIn.on('click', () => { this.zoom(this.options.zoomFactor); });
+
+            that.cropControlZoomOut = that.cropControlsCrop.find('.cropControlZoomOut');
+            that.cropControlZoomOut.on('click', function () { that.zoom(-that.options.zoomFactor); });
+
+            that.cropControlZoomIn = that.cropControlsCrop.find('.cropControlRotateLeft');
+            that.cropControlZoomIn.on('click', function () { that.rotate(-that.options.rotateFactor); });
+
+            that.cropControlZoomOut = that.cropControlsCrop.find('.cropControlRotateRight');
+            that.cropControlZoomOut.on('click', function () { that.rotate(that.options.rotateFactor); });
+
+            that.cropControlCrop = that.cropControlsCrop.find('.cropControlCrop');
+            that.cropControlCrop.on('click', function () { that.crop(); });
+
+            that.cropControlReset = that.cropControlsCrop.find('.cropControlReset');
+            that.cropControlReset.on('click', function () { that.reset(); });
+
+        }
+        initDrag() {
+            var that = this;
+
+            that.img.on("mousedown touchstart", function (e: any) {
+
+                e.preventDefault(); // disable selection
+				
+                var pageX;
+                var pageY;
+                var userAgent = window.navigator.userAgent;
+                if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/android/i) || (e.pageY && e.pageX) == undefined) {
+                    pageX = e.originalEvent.touches[0].pageX;
+                    pageY = e.originalEvent.touches[0].pageY;
+                } else {
+                    pageX = e.pageX;
+                    pageY = e.pageY;
+                }
+
+                var z_idx = that.img.css('z-index'),
+                    drg_h = that.img.outerHeight(),
+                    drg_w = that.img.outerWidth(),
+                    pos_y = that.img.offset().top + drg_h - pageY,
+                    pos_x = that.img.offset().left + drg_w - pageX;
+
+                that.img.css('z-index', 1000).on("mousemove touchmove", (e: any) => {
+
+                    var imgTop;
+                    var imgLeft;
+
+                    if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/android/i) || (e.pageY && e.pageX) == undefined) {
+                        imgTop = e.originalEvent.touches[0].pageY + pos_y - drg_h;
+                        imgLeft = e.originalEvent.touches[0].pageX + pos_x - drg_w;
+                    } else {
+                        imgTop = e.pageY + pos_y - drg_h;
+                        imgLeft = e.pageX + pos_x - drg_w;
+                    }
+
+                    that.img.offset({
+                        top: imgTop,
+                        left: imgLeft
+                    }).on("mouseup", function () {
+                        $(this).removeClass('draggable').css('z-index', z_idx);
+                    });
+
+                    if (that.options.imgEyecandy) { that.imgEyecandy.offset({ top: imgTop, left: imgLeft }); }
+
+                    if (that.objH < that.imgH) {
+                        if (parseInt(that.img.css('top')) > 0) { that.img.css('top', 0); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', 0); } }
+                        var maxTop = -(that.imgH - that.objH); if (parseInt(that.img.css('top')) < maxTop) { that.img.css('top', maxTop); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', maxTop); } }
+                    } else {
+                        if (parseInt(that.img.css('top')) < 0) { that.img.css('top', 0); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', 0); } }
+                        var maxTop = that.objH - that.imgH; if (parseInt(that.img.css('top')) > maxTop) { that.img.css('top', maxTop); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', maxTop); } }
+                    }
+
+                    if (that.objW < that.imgW) {
+                        if (parseInt(that.img.css('left')) > 0) { that.img.css('left', 0); if (that.options.imgEyecandy) { that.imgEyecandy.css('left', 0); } }
+                        var maxLeft = -(that.imgW - that.objW); if (parseInt(that.img.css('left')) < maxLeft) { that.img.css('left', maxLeft); if (that.options.imgEyecandy) { that.imgEyecandy.css('left', maxLeft); } }
+                    } else {
+                        if (parseInt(that.img.css('left')) < 0) { that.img.css('left', 0); if (that.options.imgEyecandy) { that.imgEyecandy.css('left', 0); } }
+                        var maxLeft = (that.objW - that.imgW); if (parseInt(that.img.css('left')) > maxLeft) { that.img.css('left', maxLeft); if (that.options.imgEyecandy) { that.imgEyecandy.css('left', maxLeft); } }
+                    }
+                    if (that.options.onImgDrag) that.options.onImgDrag.call(that);
+
+                });
+
+            }).on("mouseup", () => {
+                this.img.off("mousemove");
+            }).on("mouseout", function () {
+                that.img.off("mousemove");
+            });
+
+        }
+        rotate(x) {
+            var that = this;
+            that.actualRotation += x;
+            that.img.css({
+                '-webkit-transform': 'rotate(' + that.actualRotation + 'deg)',
+                '-moz-transform': 'rotate(' + that.actualRotation + 'deg)',
+                'transform': 'rotate(' + that.actualRotation + 'deg)',
+            });
+            if (that.options.imgEyecandy) {
+                that.imgEyecandy.css({
+                    '-webkit-transform': 'rotate(' + that.actualRotation + 'deg)',
+                    '-moz-transform': 'rotate(' + that.actualRotation + 'deg)',
+                    'transform': 'rotate(' + that.actualRotation + 'deg)',
+                });
+            }
+            if (typeof that.options.onImgRotate == 'function')
+                that.options.onImgRotate.call(that);
+        }
+        zoom(x) {
+            var that = this;
+            var ratio = that.imgW / that.imgH;
+            var newWidth = that.imgW + x;
+            var newHeight = newWidth / ratio;
+            var doPositioning = true;
+
+            if (newWidth < that.objW || newHeight < that.objH) {
+
+                if (newWidth - that.objW < newHeight - that.objH) {
+                    newWidth = that.objW;
+                    newHeight = newWidth / ratio;
+                } else {
+                    newHeight = that.objH;
+                    newWidth = ratio * newHeight;
+                }
+
+                doPositioning = false;
+
+            }
+
+            if (!that.options.scaleToFill && (newWidth > that.imgInitW || newHeight > that.imgInitH)) {
+
+                if (newWidth - that.imgInitW < newHeight - that.imgInitH) {
+                    newWidth = that.imgInitW;
+                    newHeight = newWidth / ratio;
+                } else {
+                    newHeight = that.imgInitH;
+                    newWidth = ratio * newHeight;
+                }
+
+                doPositioning = false;
+
+            }
+
+            that.imgW = newWidth;
+            that.img.width(newWidth);
+
+            that.imgH = newHeight;
+            that.img.height(newHeight);
+
+            var newTop = parseInt(that.img.css('top')) - x / 2;
+            var newLeft = parseInt(that.img.css('left')) - x / 2;
+
+            if (newTop > 0) { newTop = 0; }
+            if (newLeft > 0) { newLeft = 0; }
+
+            var maxTop = -(newHeight - that.objH); if (newTop < maxTop) { newTop = maxTop; }
+            var maxLeft = -(newWidth - that.objW); if (newLeft < maxLeft) { newLeft = maxLeft; }
+
+            if (doPositioning) {
+                that.img.css({ 'top': newTop, 'left': newLeft });
+            }
+
+            if (that.options.imgEyecandy) {
+                that.imgEyecandy.width(newWidth);
+                that.imgEyecandy.height(newHeight);
+                if (doPositioning) {
+                    that.imgEyecandy.css({ 'top': newTop, 'left': newLeft });
+                }
+            }
+
+            if (that.options.onImgZoom) that.options.onImgZoom.call(that);
+
+        }
+        crop() {
+            var that = this;
+
+            if (that.options.onBeforeImgCrop) that.options.onBeforeImgCrop.call(that);
+
+            that.cropControlsCrop.hide();
+            that.showLoader();
+
+            var cropData = {
+                imgUrl: that.imgUrl,
+                imgInitW: that.imgInitW,
+                imgInitH: that.imgInitH,
+                imgW: that.imgW,
+                imgH: that.imgH,
+                imgY1: Math.abs(parseInt(that.img.css('top'))),
+                imgX1: Math.abs(parseInt(that.img.css('left'))),
+                cropH: that.objH,
+                cropW: that.objW,
+                rotation: that.actualRotation
+            };
+
+            var formData = null;
+
+            if (typeof FormData == 'undefined') {
+                var XHR = new XMLHttpRequest();
+
+                var urlEncodedDataPairs = [];
+
+                for (var key in cropData) {
+                    urlEncodedDataPairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(cropData[key]));
+                }
+                for (var key in that.options.cropData) {
+                    urlEncodedDataPairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(that.options.cropData[key]));
+                }
+                var urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
+
+                XHR.addEventListener('error', function (event) {
+                    if (that.options.onError) that.options.onError.call(that, "XHR Request failed");
+                });
+                XHR.onreadystatechange = function () {
+                    if (XHR.readyState == 4 && XHR.status == 200) {
+                        that.afterCrop(XHR.responseText);
+                    }
+                }
+                XHR.open('POST', that.options.cropUrl);
+
+                XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+                XHR.setRequestHeader('Content-Length', String(urlEncodedData.length));
+
+                XHR.send(urlEncodedData);
+
+            } else {
+                formData = new FormData();
+                for (var key in cropData) {
+                    if (cropData.hasOwnProperty(key)) {
+                        formData.append(key, cropData[key]);
+                    }
+                }
+
+                for (var key in that.options.cropData) {
+                    if (that.options.cropData.hasOwnProperty(key)) {
+                        formData.append(key, that.options.cropData[key]);
+                    }
+                }
+
+                $.ajax({
+                    url: that.options.cropUrl,
+                    data: formData,
+                    context: document.body,
+                    cache: false,
+                    contentType: false,
+                    processData: false,
+                    type: 'POST'
+                }).always(function (data) {
+
+                    that.afterCrop(data);
+
+                });
+            }
+						
+            //
+        }
+        afterCrop(data) {
+            var that = this;
+            var response;
+            try {
+                response = jQuery.parseJSON(data);
+            }
+            catch (err) {
+                response = typeof data == 'object' ? data : jQuery.parseJSON(data);
+            }
+
+            if (response.status == 'success') {
+
+                if (that.options.imgEyecandy)
+                    that.imgEyecandy.hide();
+
+                that.destroy();
+
+                that.obj.append('<img class="croppedImg" src="' + response.url + '">');
+                if (that.options.outputUrlId !== '') { $('#' + that.options.outputUrlId).val(response.url); }
+
+                that.croppedImg = that.obj.find('.croppedImg');
+
+                that.init();
+
+                that.hideLoader();
+            }
+            if (response.status == 'error') {
+                if (that.options.onError) that.options.onError.call(that, response.message);
+                that.hideLoader();
+                setTimeout(function () { that.reset(); }, 2000)
+            }
+
+            if (that.options.onAfterImgCrop) that.options.onAfterImgCrop.call(that);
+        }
+        showLoader() {
+            var that = this;
+
+            that.obj.append(that.options.loaderHtml);
+            that.loader = that.obj.find('.loader');
+
+        }
+        hideLoader() {
+            var that = this;
+            that.loader.remove();
+        }
+        reset() {
+            var that = this;
+            that.destroy();
+
+            that.init();
+
+            if (!$.isEmptyObject(that.croppedImg)) {
+                that.obj.append(that.croppedImg);
+                if (that.options.outputUrlId !== '') { $('#' + that.options.outputUrlId).val(that.croppedImg.attr('url')); }
+            }
+            if (typeof that.options.onReset == 'function')
+                that.options.onReset.call(that);
+        }
+        destroy() {
+            var that = this;
+            if (that.options.modal && !$.isEmptyObject(that.modal)) { that.destroyModal(); }
+            if (that.options.imgEyecandy && !$.isEmptyObject(that.imgEyecandy)) { that.destroyEyecandy(); }
+            if (!$.isEmptyObject(that.cropControlsUpload)) { that.cropControlsUpload.remove(); }
+            if (!$.isEmptyObject(that.cropControlsCrop)) { that.cropControlsCrop.remove(); }
+            if (!$.isEmptyObject(that.loader)) { that.loader.remove(); }
+            if (!$.isEmptyObject(that.form)) { that.form.remove(); }
+            that.obj.html('');
+        }
+        isAjaxUploadSupported() {
+            var input = document.createElement("input");
+            input.type = "file";
+
+            return (
+                "multiple" in input &&
+                typeof File != "undefined" &&
+                typeof FormData != "undefined" &&
+                typeof (new XMLHttpRequest()).upload != "undefined");
+        }
+        createFallbackIframe() {
+            var that = this;
+
+            if (!that.isAjaxUploadSupported()) {
+
+                if (jQuery.isEmptyObject(that.iframeobj)) {
+                    var iframe = <any> document.createElement("iframe");
+                    iframe.setAttribute("id", that.id + "_upload_iframe");
+                    iframe.setAttribute("name", that.id + "_upload_iframe");
+                    iframe.setAttribute("width", "0");
+                    iframe.setAttribute("height", "0");
+                    iframe.setAttribute("border", "0");
+                    iframe.setAttribute("src", "javascript:false;");
+                    iframe.style.display = "none";
+                    document.body.appendChild(iframe);
+                } else {
+                    iframe = that.iframeobj[0];
+                }
+
+                var myContent = '<!DOCTYPE html>'
+                    + '<html><head><title>Uploading File</title></head>'
+                    + '<body>'
+                    + '<form '
+                    + 'class="' + that.id + '_upload_iframe_form" '
+                    + 'name="' + that.id + '_upload_iframe_form" '
+                    + 'action="' + that.options.uploadUrl + '" method="post" '
+                    + 'enctype="multipart/form-data" encoding="multipart/form-data" style="display:none;">'
+                    + $("#" + that.id + '_imgUploadField')[0].outerHTML
+                    + '</form></body></html>';
+
+                iframe.contentWindow.document.open('text/htmlreplace');
+                iframe.contentWindow.document.write(myContent);
+                iframe.contentWindow.document.close();
+
+                that.iframeobj = $("#" + that.id + "_upload_iframe");
+                that.iframeform = that.iframeobj.contents().find("html").find("." + that.id + "_upload_iframe_form");
+
+                that.iframeform.on("change", "input", function () {
+                    that.submitFallbackIframe(that);
+                });
+                var elem = <any> that.iframeform.find("input")[0];
+                elem.attachEvent("onchange", () => {
+                    this.submitFallbackIframe(this);
+                });
+
+                var eventHandlermyFile = () => {
+                    if (iframe.detachEvent)
+                        iframe.detachEvent("onload", eventHandlermyFile);
+                    else
+                        iframe.removeEventListener("load", eventHandlermyFile, false);
+
+                    var response = this.getIframeContentJSON(iframe);
+
+                    if (jQuery.isEmptyObject(this.modal)) {
+                        this.afterUpload(response);
+                    }
+                }
+
+                if (iframe.addEventListener)
+                    iframe.addEventListener("load", eventHandlermyFile, true);
+                if (iframe.attachEvent)
+                    iframe.attachEvent("onload", eventHandlermyFile);
+
+                return "#" + that.id + '_imgUploadField';
+
+            } else {
+                return "";
+            }
+
+        }
+        submitFallbackIframe(that) {
+            that.showLoader();
+            if (that.options.processInline && !that.options.uploadUrl) {
+                if (that.options.onError) {
+                    that.options.onError.call(that, "processInline is not supported by your browser ");
+                    that.hideLoader();
+                }
+            } else {
+                if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that);
+                that.iframeform[0].submit();
+            }
+        }
+        getIframeContentJSON(iframe) {
+            try {
+                var doc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document,
+                    response;
+
+                var innerHTML = doc.body.innerHTML;
+                if (innerHTML.slice(0, 5).toLowerCase() === "<pre>" && innerHTML.slice(-6).toLowerCase() == "</pre>") {
+                    innerHTML = doc.body.firstChild.firstChild.nodeValue;
+                }
+                response = jQuery.parseJSON(innerHTML);
+            } catch (err) {
+                response = { success: false };
+            }
+
+            return response;
+        }
+
+    }
+}