lacemi/sapi/web/croppic/js/croppic.js

/*
 * CROPPIC
 * dependancy: jQuery
 * author: Ognjen "Zmaj Džedaj" Božičković and Mat Steinlin
 */

(function (window, document) {

    Croppic = function (id, options) {

        var that = this;
        that.id = id;
        that.obj = $('#' + id);
        that.outputDiv = that.obj;
        that.imgUrl="";
        that.saveImgUrl="";
        that.imgBackground="";
        // DEFAULT OPTIONS
        that.options = {
            uploadUrl:'',
            uploadData:{},
            cropUrl:'',
            cropData:{},
            outputUrlId:'',
            //styles
            imgEyecandy:true,
            imgEyecandyOpacity:0.2,
            initialZoom:40,
            zoomFactor:10,
            rotateFactor:5,
            doubleZoomControls:true,
            rotateControls: true,
            modal:false,
            customUploadButtonId:'',
            customSaveButtonId:'',
            loaderHtml:'',
            scaleToFill: true,
            processInline: false,
            loadPicture:'',
            onReset: null,
            enableMousescroll: false,
            colorAbsorption: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 (i in options) that.options[i] = options[i];

        // INIT THE WHOLE DAMN THING!!!
        that.init();

    };

    Croppic.prototype = {
        id:'',
        imgInitW:0,
        imgInitH:0,
        imgW:0,
        imgH:0,
        actualRotationImgW:0,
        actualRotationImgH:0,
        objW:0,
        objH:0,
        actualRotation: 0,
        windowW:0,
        windowH:$(window).height(),
        obj:{},
        outputDiv:{},
        outputUrlObj:{},
        img:{},
        defaultImg:{},
        croppedImg:{},
        imgEyecandy:{},
        form:{},
        iframeform: {},
        iframeobj: {},
        cropControlsUpload:{},
        cropControlsCrop:{},
        cropControlZoomMuchIn:{},
        cropControlZoomMuchOut:{},
        cropControlZoomIn:{},
        cropControlZoomOut:{},
        cropControlCrop:{},
        cropControlReset:{},
        cropControlRemoveCroppedImage:{},
        cropControlOriginal:{},
        modal:{},
        loader:{},
        cropSaveControl:{},

        init: function () {
            var that = this;

            that.objW = that.obj.width();
            that.objH = that.obj.height();

            // reset rotation
            that.actualRotation = 0;
            that.actualRotationImgH=0;
            that.actualRotationImgW=0;
            that.colorAbsorption=false;
            that.imgBackground="";
            if( $.isEmptyObject(that.defaultImg)){ that.defaultImg = that.obj.find('img'); }

            that.createImgUploadControls();

            if( $.isEmptyObject(that.options.loadPicture)){
                that.bindImgUploadControl();
            }else{
                that.loadExistingImage();
            }

        },
        createImgUploadControls: function(){
            var that = this;

            var cropControlUpload = '';
            if(that.options.customUploadButtonId ===''){ cropControlUpload = '<i class="cropControlUpload"></i>'; }

            var cropControlRemoveCroppedImage = '<i class="cropControlRemoveCroppedImage"></i>';

            var cropControlOriginal = '<i class="cropControlOriginal"></i>';


            if( $.isEmptyObject(that.croppedImg))
            {
                cropControlRemoveCroppedImage='';
                cropControlOriginal='';
            }
            if( !$.isEmptyObject(that.options.loadPicture)){ cropControlUpload='';}

            var html =    '<div class="cropControls cropControlsUpload"> ' + cropControlUpload + cropControlOriginal + 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(that.options.customSaveButtonId !==''){
                that.cropSaveControl= $('#'+that.options.customSaveButtonId); that.cropSaveControl.hide();
            }

            if( !$.isEmptyObject(that.croppedImg)){
                that.cropControlRemoveCroppedImage = that.outputDiv.find('.cropControlRemoveCroppedImage');
                that.cropControlOriginal = that.outputDiv.find('.cropControlOriginal');
            }

        },
        bindImgUploadControl: function(){

            var that = this;

            // CREATE UPLOAD IMG FORM
            var formHtml = '<form class="' + that.id + '_imgUploadForm" style="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');
                }
            });

            that.cropSaveControl.off('click');
            that.cropSaveControl.on('click',function(){
                // var res = confirm('您确定要使用编辑好的图片吗？\n\r' +
                //     '[确认]使用图片\n\r' +
                //     '[取消]继续编辑');
                // if (res) {
                //     that.destroy();
                //     window.location.href="https://wwww.croppic.com?"+that.saveImgUrl;
                // }
                that.destroy();
                window.location.href="https://wwww.croppic.com?"+that.saveImgUrl;
            });

            if( !$.isEmptyObject(that.croppedImg)){

                that.cropControlRemoveCroppedImage.on('click',function(){
                    if (typeof (that.options.onBeforeRemoveCroppedImg) === typeof(Function)) {
                        that.options.onBeforeRemoveCroppedImg.call(that);
                    }
                    var res = confirm('您是要使用当前图片还是重新选择图片？\n\r' +
                        '[确认]使用当前图片\n\r' +
                        '[取消]重新选择图片');
                    var width= that.imgInitW;
                    var height= that.imgInitH;

                    that.croppedImg.remove();
                    that.croppedImg = {};
                    $(this).hide();
                    that.cropSaveControl.hide();
                    that.cropControlOriginal.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.imgUploadControl.show();
                    if (res) {
                        that.showLoader();
                        that.imgUploadControl.hide();
                        if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); }
                        that.imgInitW = that.imgW = width;
                        that.imgInitH = that.imgH = height;
                        that.saveImgUrl="";
                        that.obj.append('<img src="'+that.imgUrl+'">');
                        that.initCropper();
                        that.hideLoader();
                    }


                });

                that.cropControlOriginal.on('click',function(){
                    if (that.imgUrl=='')
                    {
                        alert('请选择图片' );
                        return;
                    }
                    var res = confirm('您确定要使用原图吗？\n\r' +
                        '[确认]使用原图\n\r' +
                        '[取消]继续编辑');
                    if (res) {
                        that.destroy();
                        window.location.href="https://wwww.croppic.com?"+that.imgUrl;
                    }

                });
            }

            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){
                    // Checking Browser Support for FileReader API
                    if (typeof FileReader == "undefined"){
                        if (that.options.onError) that.options.onError.call(that,"processInline is not supported by your Browser");
                        that.reset();
                    }else{
                        var  filePath=that.form.find('input[type="file"]')[0].files[0];
                        if( !$.isEmptyObject(that.croppedImg)){
                            that.destroy();
                        }
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            var image = new Image();
                            image.src = e.target.result;
                            image.onload = function(){
                                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.saveImgUrl="";

                                that.obj.append('<img src="'+image.src+'">');

                                that.initCropper();
                                that.hideLoader();

                                if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);

                            }
                        };
                        reader.readAsDataURL(filePath);
                    }
                } else {

                    try {
                        // other modern browsers
                        formData = new FormData(that.form[0]);
                    } catch(e) {
                        // IE10 MUST have all form items appended as individual form key / value pairs
                        formData = new FormData();
                        formData.append('img', that.form.find("input[type=file]")[0].files[0]);

                    }

                    for (var key in that.options.uploadData) {
                        if( that.options.uploadData.hasOwnProperty(key) ) {
                            formData.append( key , that.options.uploadData[key] );
                        }
                    }

                    $.ajax({
                        url: that.options.uploadUrl,
                        data: formData,
                        context: document.body,
                        cache: false,
                        contentType: false,
                        processData: false,
                        type: 'POST'
                    }).always(function (data) {
                        that.afterUpload(data);
                    });
                }
            });

        },
        loadExistingImage: function(){
            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(){

                    var res = confirm('您是要使用当前图片还是重新选择图片？\n\r' +
                        '[确认]使用当前图片\n\r' +
                        '[取消]重新选择图片');
                    var width= that.imgInitW;
                    var height= that.imgInitH;

                    that.croppedImg.remove();
                    $(this).hide();
                    that.cropSaveControl.hide();
                    that.cropControlOriginal.hide();

                    if( !$.isEmptyObject(that.defaultImg)){
                        that.obj.append(that.defaultImg);
                    }
                    if(that.options.outputUrlId !== ''){	$('#'+that.options.outputUrlId).val('');	}
                    that.croppedImg = '';
                    that.reset();
                    if (res) {
                        that.showLoader();
                        that.imgUploadControl.hide();
                        if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); }
                        that.imgInitW = that.imgW = width;
                        that.imgInitH = that.imgH = height;
                        that.saveImgUrl="";
                        that.obj.append('<img src="'+that.imgUrl+'">');
                        that.initCropper();
                        that.hideLoader();
                    }


                });
            }

        },
        afterUpload: function(data){
            var that = this;

            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(function(){
                    that.initCropper();
                    that.hideLoader();
                    if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);
                });

                if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);

            }

            if (response.status == 'error') {
                alert(response.message);
                if (that.options.onError) that.options.onError.call(that,response.message);
                that.hideLoader();
                // setTimeout( function(){ that.reset(); },2000)
            }
        },

        createModal: function(){
            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: function(){
            var that = this;

            that.obj = that.outputDiv;
            that.modal.remove();
            that.modal = {};
        },
        initCropper: function(){
            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: function(){
            var that = this;

            that.imgEyecandy = that.img.clone();
            that.imgEyecandy.css({'z-index':'0','opacity':that.options.imgEyecandyOpacity}).appendTo(that.obj);
        },
        destroyEyecandy: function(){
            var that = this;
            that.imgEyecandy.remove();
        },
        initialScaleImg:function(){
            var that = this;
            that.zoom(0);
            that.zoom(that.options.initialZoom);

            // Adding mousewheel zoom capabilities
            if (that.options.enableMousescroll){
                that.img.on('mousewheel', function(event) {
                    event.preventDefault();
                    if (that.colorAbsorption)
                    {
                        return;
                    }
                    that.zoom(that.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: function(){
            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 cropControlRotateMuchLeft =      '';
            var cropControlRotateMuchRight =     '';
            var cropControlCrop =            '<i class="cropControlCrop"></i>';
            var cropControlReset =           '<i class="cropControlReset"></i>';
            var cropControlOriginal =        '<i class="cropControlOriginal"></i>';
            var cropControlXiColor =        '<i class="cropControlXiColor"></i>';
            var cropControlXiColor2 =        '<i class="cropControlXiColor2"></i>';
            var cropControlSetColor =        '<i class="cropControlSetColor"></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>';

                cropControlRotateMuchLeft = '<i class="cropControlRotateMuchLeft"></i>';
                cropControlRotateMuchRight = '<i class="cropControlRotateMuchRight"></i>';
            }

            html =  '<div class="cropControls cropControlsCrop">'+ cropControlZoomMuchIn + cropControlZoomIn + cropControlZoomOut + cropControlZoomMuchOut
                + cropControlRotateMuchLeft+ cropControlRotateLeft + cropControlRotateRight + cropControlRotateMuchRight + cropControlCrop + '</div>';

            that.obj.append(html);


            html =  '<div class="cropControls cropControlsCrop cropControlsUpload">' + cropControlXiColor2 + cropControlXiColor+ cropControlSetColor + cropControlOriginal + 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',function(){ that.zoom( that.options.zoomFactor*10 ); });

                that.cropControlZoomMuchOut = that.cropControlsCrop.find('.cropControlZoomMuchOut');
                that.cropControlZoomMuchOut.on('click',function(){ that.zoom(-that.options.zoomFactor*10); });
            }

            that.cropControlZoomIn = that.cropControlsCrop.find('.cropControlZoomIn');
            that.cropControlZoomIn.on('click',function(){ that.zoom(that.options.zoomFactor); });

            that.cropControlZoomOut = that.cropControlsCrop.find('.cropControlZoomOut');
            that.cropControlZoomOut.on('click',function(){ that.zoom(-that.options.zoomFactor); });

            that.cropControlRotateLeft = that.cropControlsCrop.find('.cropControlRotateLeft');
            that.cropControlRotateLeft.on('click', function() {  that.rotate(-1);});

            that.cropControlRotateMuchLeft = that.cropControlsCrop.find('.cropControlRotateMuchLeft');
            that.cropControlRotateMuchLeft.on('click', function() {  that.rotate(-10);});

            that.cropControlRotateRight = that.cropControlsCrop.find('.cropControlRotateRight');
            that.cropControlRotateRight.on('click', function() {that.rotate(1);});

            that.cropControlRotateMuchRight = that.cropControlsCrop.find('.cropControlRotateMuchRight');
            that.cropControlRotateMuchRight.on('click', function() {that.rotate(10);});

            that.cropControlCrop = that.cropControlsCrop.find('.cropControlCrop');
            that.cropControlCrop.on('click',function(){ that.crop(); });

            that.cropControlReset = that.cropControlsCrop.find('.cropControlReset');
            that.cropControlReset.on('click',function(){
                var res = confirm('您是要使用当前图片还是重新选择图片？\n\r' +
                    '[确认]使用当前图片\n\r' +
                    '[取消]重新选择图片');
                var width= that.imgInitW;
                var height= that.imgInitH;
                that.reset();
                if (res) {
                    that.showLoader();
                    that.imgUploadControl.hide();
                    if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); }
                    that.imgInitW = that.imgW = width;
                    that.imgInitH = that.imgH = height;
                    that.saveImgUrl="";
                    that.obj.append('<img src="'+that.imgUrl+'">');
                    that.initCropper();
                    that.hideLoader();
                }
            });

            that.cropControlOriginal = that.cropControlsCrop.find('.cropControlOriginal');
            that.cropControlOriginal.on('click',function(){
                if (that.imgUrl=='')
                {
                    alert('请选择图片' );
                    return;
                }
                var res = confirm('您确定要使用原图吗？\n\r' +
                    '[确认]使用原图\n\r' +
                    '[取消]继续编辑');
                if (res) {
                    that.destroy();
                    window.location.href="https://wwww.croppic.com?"+that.imgUrl;
                }
            });

            that.cropControlXiColor = that.cropControlsCrop.find('.cropControlXiColor');
            that.cropControlXiColor.on('click',function(){that.colorOnClick(false);});
            that.cropControlXiColor2 = that.cropControlsCrop.find('.cropControlXiColor2');
            that.cropControlXiColor2.on('click',function(){that.colorOnClick(false);});
            that.cropControlSetColor= that.cropControlsCrop.find('.cropControlSetColor');
            that.cropControlSetColor.on('click',function(){that.colorOnClick(true);});
            that.colpick=that.cropControlSetColor.colpick({
                onSubmit:function(hsb,hex,rgb,el) {
                    var background="rgb("+rgb.r+","+rgb.g+","+rgb.b+")";
                    that.obj.find('.cropImgWrapper').css('background',background);
                    $(el).colpickHide();
                    that.imgBackground=background;
                }
            });
        },
        colorOnClick:function(input)
        {
            var that = this;
            if (that.colorAbsorption||input)
            {
                that.cropControlsCrop.find('.cropControlXiColor').css("display","block");
                that.cropControlsCrop.find('.cropControlXiColor2').css("display","none");
                that.colorAbsorption=false;
            }else {
                that.cropControlsCrop.find('.cropControlXiColor').css("display","none");
                that.cropControlsCrop.find('.cropControlXiColor2').css("display","block");
                that.colorAbsorption=true;
            }

        },
        initDrag:function(){
            var that = this;

            that.img.on("mousedown touchstart", function(e) {

                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;

                if (that.colorAbsorption)
                {

                    var imgWidth = that.img.width();
                    var imhHeight = that.img.height();
                    var x = that.imgInitW * parseInt(imgWidth-pos_x-that.actualRotationImgW) / imgWidth;
                    var y = that.imgInitH * parseInt(imhHeight-pos_y-that.actualRotationImgH) / imhHeight;
                    if (!(x<0||x>that.imgInitW||y<0||y>that.imgInitH))
                    {
                        var canvas = document.createElement("canvas");
                        if (!canvas.getContext) {
                            alert("很遗憾，您浏览器版本太老了，无法使用我们的小工具 ！");
                            return;
                        }
                        var ctx = canvas.getContext("2d");
                        var newImg = new Image();
                        newImg.onload = function(){
                            canvas.width = newImg.width;
                            canvas.height = newImg.height;
                            ctx.drawImage(newImg, 0, 0);
                            var imgData = ctx.getImageData(x, y, 1, 1);
                            var rgb = {r:imgData.data[0],g:imgData.data[1],b:imgData.data[2]};
                            var background="rgb("+rgb.r+","+rgb.g+","+rgb.b+")";
                            that.obj.find('.cropImgWrapper').css("background",background);
                            that.imgBackground=background;
                            that.cropControlSetColor.colpickSetColor(rgb);
                        }
                        newImg.src = that.imgUrl;
                        return;
                    }
                }

                that.img.css('z-index', 1000).on("mousemove touchmove", function(e) {

                    if (that.colorAbsorption)
                    {
                        return;
                    }

                    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 }); }

                    var top=that.actualRotationImgH;
                    var left=that.actualRotationImgW;
                    // var top=0;
                    // var left=0;
                    if (that.objH < that.imgH+top*2) {
                        if (parseInt(that.img.css('top')) > top) { that.img.css('top', top); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', top);}}
                        var maxTop = -( that.imgH - that.objH+top); 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')) < -top) { that.img.css('top', -top); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', top); }}
                        var maxTop =  that.objH - that.imgH+top; 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+2*left) {
                        if( parseInt( that.img.css('left')) > left ){ that.img.css('left',left); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', left); }}
                        var maxLeft = -( that.imgW-that.objW+left); 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')) < -left ){ that.img.css('left',-left); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', 0); }}
                        var maxLeft = ( that.objW - that.imgW+left); 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", function() {
                that.img.off("mousemove");
            }).on("mouseout", function() {
                that.img.off("mousemove");
            });

        },
        rotate: function(x) {
            var that = this;
            that.colorOnClick(true);
            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)',
                });
            }

            that.actualRotationImgH=0;
            that.actualRotationImgW=0;
            if (that.actualRotation!=0)
            {
                var actualRotation=that.actualRotation;

                if (actualRotation<0)
                {
                    actualRotation=0-actualRotation;
                }

                if (actualRotation==90||actualRotation==270)
                {
                    if(that.imgH>that.imgW)
                    {
                        that.actualRotationImgW=parseInt((that.imgH-that.imgW)/2);

                    }else if(that.imgH<that.imgW)
                    {
                        that.actualRotationImgH=parseInt((that.imgW-that.imgH)/2);
                    }
                }else if (actualRotation!=180&&actualRotation!=360) {

                    if (actualRotation>180)
                    {
                        actualRotation=actualRotation-180;
                    }
                    if (actualRotation>90)
                    {
                        actualRotation=180-actualRotation;
                    }
                    var radian = Math.sin(actualRotation * Math.PI / 180);
                    that.actualRotationImgW=parseInt(radian*(that.imgH)/2);
                    that.actualRotationImgH=parseInt(radian*(that.imgW)/2);
                }
            }


            if (typeof that.options.onImgRotate == 'function')
                that.options.onImgRotate.call(that);
        },
        zoom :function(x){
            var that = this;
            that.colorOnClick(true);
            var ratio = that.imgW / that.imgH;
            var newWidth = that.imgW+x;
            var newHeight = newWidth/ratio;
            var doPositioning = true;
            if (x==0)
            {
                if( newWidth - that.objW < newHeight - that.objH ){
                    newWidth = that.objW;
                    newHeight = newWidth/ratio;
                }else{
                    newHeight = that.objH;
                    newWidth = ratio * newHeight;
                }
            }
            if( newWidth < that.objW || newHeight < that.objH){
                doPositioning = false;
            }
            if(!that.options.scaleToFill && (newWidth > that.imgInitW || newHeight > that.imgInitH)){
                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;



            that.actualRotationImgH=0;
            that.actualRotationImgW=0;
            if (that.actualRotation!=0)
            {
                var actualRotation=that.actualRotation;

                if (actualRotation<0)
                {
                    actualRotation=0-actualRotation;
                }

                if (actualRotation==90||actualRotation==270)
                {
                    if(that.imgH>that.imgW)
                    {
                        that.actualRotationImgW=parseInt((that.imgH-that.imgW)/2);

                    }else if(that.imgH<that.imgW)
                    {
                        that.actualRotationImgH=parseInt((that.imgW-that.imgH)/2);
                    }
                }else if (actualRotation!=180&&actualRotation!=360) {

                    if (actualRotation>180)
                    {
                        actualRotation=actualRotation-180;
                    }
                    if (actualRotation>90)
                    {
                        actualRotation=180-actualRotation;
                    }
                    var radian = Math.sin(actualRotation * Math.PI / 180);
                    that.actualRotationImgW=parseInt(radian*(that.imgH)/2);
                    that.actualRotationImgH=parseInt(radian*(that.imgW)/2);
                }
            }



            if( newTop>-that.actualRotationImgH ){ newTop=-that.actualRotationImgH;}
            if( newLeft>-that.actualRotationImgW ){ newLeft=-that.actualRotationImgW;}



            var maxTop = -( newHeight-that.objH+that.actualRotationImgH); if( newTop < maxTop){	newTop = maxTop;	}
            var maxLeft = -( newWidth-that.objW+that.actualRotationImgW); 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:function(){
            var that = this;
            that.colorOnClick(true);
            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:parseInt( that.img.css('top') ),
                imgX1: parseInt( that.img.css('left')),
                cropH:that.objH,
                cropW:that.objW,
                rotation:that.actualRotation,
                imgBackground:that.imgBackground
            };

            var formData;

            if(typeof FormData == 'undefined'){
                var XHR = new XMLHttpRequest();
                var urlEncodedData = "";
                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]));
                }
                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', 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: function (data) {
            var that = this;
            that.colorOnClick(true);
            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.saveImgUrl='product_image_crop_md5,'+response.md5+','+response.url;

                var croppedImg='<img class="croppedImg" src="' + response.url + '">';
                that.obj.append(croppedImg);
                if (that.options.outputUrlId !== '') { $('#' + that.options.outputUrlId).val(response.url); }
                that.croppedImg = that.obj.find('.croppedImg');
                that.croppedImg .width(that.objW+"px").height(that.objH+"px");
                that.init();

                that.hideLoader();

                that.imgUploadControl.hide();
                that.cropSaveControl.show();
            }
            if (response.status == 'error') {
                if (that.options.onError) that.options.onError.call(that,response.message);
                that.hideLoader();
                that.cropControlsCrop.show();
            }

            if (that.options.onAfterImgCrop) that.options.onAfterImgCrop.call(that, response);
        },
        showLoader:function(){
            var that = this;

            that.obj.append(that.options.loaderHtml);
            that.loader = that.obj.find('.loader');

        },
        hideLoader:function(){
            var that = this;
            that.loader.remove();
        },
        reset:function(){
            var that = this;
            that.destroy();

            that.init();

            that.imgUploadControl.show();

            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:function(){
            var that = this;
            that.colorOnClick(true);
            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: function () {
            var input = document.createElement("input");
            input.type = "file";

            return (
                "multiple" in input &&
                typeof File != "undefined" &&
                typeof FormData != "undefined" &&
                typeof (new XMLHttpRequest()).upload != "undefined");
        },
        CreateFallbackIframe: function () {
            var that = this;

            if (!that.isAjaxUploadSupported()) {

                if (jQuery.isEmptyObject(that.iframeobj)) {
                    var iframe = 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);
                });
                that.iframeform.find("input")[0].attachEvent("onchange", function () {
                    that.SubmitFallbackIframe(that);
                });

                var eventHandlermyFile = function () {
                    if (iframe.detachEvent)
                        iframe.detachEvent("onload", eventHandlermyFile);
                    else
                        iframe.removeEventListener("load", eventHandlermyFile, false);

                    var response = that.getIframeContentJSON(iframe);

                    if (jQuery.isEmptyObject(that.modal)) {
                        that.afterUpload(response);
                    }
                }

                if (iframe.addEventListener)
                    iframe.addEventListener("load", eventHandlermyFile, true);
                if (iframe.attachEvent)
                    iframe.attachEvent("onload", eventHandlermyFile);

                return "#" + that.id + '_imgUploadField';

            } else {
                return "";
            }

        },
        SubmitFallbackIframe: function (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: function (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;
        },
        hexadecimal:function(num) {
            var r = parseInt(num).toString(16);
            if (r.length == 1) {
                return '0' + r;
            }
            return r.toUpperCase();
        }
    };
})(window, document);