function CropEditorEditPanel(icropEditor) {
    this.cropEditor = icropEditor;
}

CropEditorEditPanel.prototype = {
    // Configuration
    resWarnContainerId: 'ResolutionWarning',
    landscapeRadioId: 'rbLandscape',
    portraitRadioId: 'rbPortrait',
    currentCropCartItemId: null,
    cropper: null,
    cropArea: null,
    
    hasMinSize: true, //for low resolution detection
    cropOrientation: 'landscape',
    imageMainDivID: 'baseCropImage',
    rpid: null,
    currentAspectRatio: null,
    mediaID: '',
    cropping: false,
    cropLeft:0,
    cropTop:0,
    cropRight:0,
    cropBottom:0,
    cropOrderItem:null,
    minWidth:0,
    minHeight:0,
    loadOrigCropFlag: true, // a flag to indicate to load the original crop information to the page.
    editCropModeFlag: true, // a flag to indicate which mode it is in.
    currentOrderItem: null,
    isLowRes: false,
    minSizeMet: false,
    
    hideLowResDetection: function()
    {
        $get(this.resWarnContainerId).style.visibility = 'hidden';
    },
    
    loadCropCoords: function(source)
    {
        this.cropTop = source.top;
        this.cropLeft = source.left;
        this.cropRight = source.right;
        this.cropBottom = source.bottom;    
    },
    
    render: function(cropOrderItem)
    {   
        this.currentOrderItem = cropOrderItem;       
        this.rpid = cropOrderItem.getRPId();
        this.mediaID = cropOrderItem.eOrderItemMediaId;
        this.cropOrderItem = cropOrderItem;
        this.currentAspectRatio = cropOrderItem.aspectRatio;      
        this.minSizeMet = false;          
        
        if (this.loadOrigCropFlag)
        {            
            if (this.cropOrderItem.cropIsLandscape)
            {
                this.loadCropCoords(cropOrderItem.originalLandscapeCrop);
                this.setCropOrientation('rbLandscape', 'landscape');               
            }
            else
            {
                this.loadCropCoords(cropOrderItem.originalPortraitCrop);
                this.setCropOrientation('rbPortrait', 'portrait');                
            }
        }
        else if (!this.editCropModeFlag) //Load new coordinate.
        {
            this.loadCropCoords(cropOrderItem.newCrop);
            
            if (cropOrderItem.cropIsLandscape)
            {
                this.setCropOrientationNoReload('rbLandscape', 'landscape');                
            }
            else
            {
                this.setCropOrientationNoReload('rbPortrait', 'portrait');                
            }
        }
        
        this.enableApplyCrop(this.editCropModeFlag);
        this.enableStartOver(true);        
        
        var baseImage = new Image();
        baseImage.src = cropOrderItem.largeImageUrl;
        $get(this.imageMainDivID).src = cropOrderItem.largeImageUrl;
        
        if (this.editCropModeFlag)
        {
            this.startCropper();            
        }
        else
        {
            this.showCroppedArea();   
        }
        this.ShowResolutionWarning(cropOrderItem.isLowRes);
    },
    
    setIsLowRes: function(boolValue)
    {
        this.isLowRes = boolValue;
    },
    
    currentOrientation: function()
    {
        var landRadioBtn = $get(this.landscapeRadioId);
        if (landRadioBtn == null)
        {
            return 'landscape';
        }
        else
        {
            if (landRadioBtn.checked)
                return 'landscape';
            else
                return 'portrait';
        }        
        return null;
    },
    
    renderCropOverlay: function()
    {
        this.startCropper();
    },
    
    clearUI: function()
    {
        $get(this.imageMainDivID).src = '../images/spacer.gif';
        this.resetCropper(this.cropOrientation);
        this.enableOrientation(true);
        this.enableApplyCrop(true);
        this.editCropModeFlag = true;
        this.loadOrigCropFlag = true;
        this.hideCroppedArea();
        this.hideLowResDetection();
    },
    
    updateImage: function(cropOrderItem) {
        this.enableApplyCrop(true);
        this.editCropModeFlag = false;
        this.loadOrigCropFlag = false;
        this.render(cropOrderItem);
        //this.showCroppedArea();
    },
    
    clear:function(){
    },
    
    saveEdit: function()
    {
        this.cropOrderItem.newCrop.top = this.cropTop;
        this.cropOrderItem.newCrop.left = this.cropLeft;
        this.cropOrderItem.newCrop.right = this.cropRight;
        this.cropOrderItem.newCrop.bottom = this.cropBottom;
        this.cropOrderItem.cropSaved = true;
        this.cropOrderItem.renderCropOverlay();
        this.loadOrigCropFlag = false;
        this.editCropModeFlag = false;
        this.enableApplyCrop(false);
        this.enableStartOver(true);
        this.enableOrientation(false);
        this.showCroppedArea();
        this.saveIsLowRes(this.isLowRes);
    },
    
    saveIsLowRes: function (isLowRes)
    {
        if (!isLowRes) 
        {
            this.cropOrderItem.setIsLowRes(isLowRes);
        }
        else if (this.minSizeMet)
        {   
            this.cropOrderItem.setIsLowRes(false);
        }
    },
    
    enableOrientation: function(enable)
    {
        $get(this.landscapeRadioId).disabled = !enable;
        $get(this.portraitRadioId).disabled = !enable;    //imgPortrait
        if (enable)
        {
           $get("imgPortrait").onclick = function () { cropEditor.setCropOrientation('rbPortrait', 'portrait'); };
           $get("imgLandscape").onclick = function () { cropEditor.setCropOrientation('rbLandscape', 'landscape'); };
        }
        else
        {
            $get("imgPortrait").onclick = "";
           $get("imgLandscape").onclick = "";
        }
    },
    
    startOver: function()
    {
        this.loadCropCoords(this.cropOrderItem.startCrop);
        this.cropOrderItem.cropSaved = false;
        this.loadOrigCropFlag = true;
        this.render(this.cropOrderItem);        
        this.enableOrientation(true);
    },    
    
    changeCrop: function()
    {
        this.loadOrigCropFlag = false;
        this.editCropModeFlag = true;
        this.enableOrientation(true);
        this.render(this.cropOrderItem);    
    },    
    
    ImagesRenderCompleted: function() {
         var img = $get(this.imageMainDivID);
         var width = img.width;
         if ((width > 0) && (img.complete)) 
         {
            return true;
         }
         return false;
    },
    
    submitEdit: function() {
        //this.parent.submitEdits(); and parent will gather all edits from cartItemPanel and use the proxy to submit all edits
    },
    
    showCroppedArea: function()
    {        
        if (typeof(this.cropArea) == 'undefined' || this.cropArea == null)
        {
            this.cropArea = new CropArea();
        }
        this.resetCropper(this.cropOrientation);
        
        var imgdiv = $get(this.imageMainDivID);
        
        this.cropArea.show(this.imageMainDivID, this.cropLeft * imgdiv.width, this.cropTop * imgdiv.height, this.cropRight * imgdiv.width, this.cropBottom * imgdiv.height);
    },
    
    hideCroppedArea: function()
    {
        if (typeof(this.cropArea) != 'undefined' && this.cropArea != null)
        {
            this.cropArea.hide();
        }
    },
    
    resetCropper: function(orientation)
    {
        this.hasMinSize = false;
        
        if (typeof(this.cropper) == 'undefined' || this.cropper == null)
        {
            this.cropper = new Cropper();
            this.cropper.editPanelRef = this;   // store pointer back to this
        }
        
        if (this.cropping)
        {
            this.cropper.stopCropping();
        }
        
        this.cropping = false;
        this.cropOrientation = orientation;
        
        if ($get(this.landscapeRadioId) && $get(this.portraitRadioId))
        {
            switch (this.cropOrientation) {
                case 'landscape': {
                    $get(this.landscapeRadioId).checked = true;
                    $get(this.portraitRadioId).checked = false;                
                    break;
                }
                case 'portrait': {
                    $get(this.landscapeRadioId).checked = false;
                    $get(this.portraitRadioId).checked = true;                                
                    break;
                }
            }    
        }
        var e = $get(this.resWarnContainerId);
        e.style.visibility = 'hidden';
    },
    
    startCropper: function()
    {        
        this.hideCroppedArea();
        
        this.resetCropper(this.cropOrientation);
        
        var imgdiv = $get(this.imageMainDivID);
        
        if ((imgdiv.width == 16) && (imgdiv.width == 16))
        {
            this.enableApplyCrop(false);    
        }
        else
        {        
            var width = imgdiv.width;
            var height = width * this.currentAspectRatio;
            
            if (this.cropOrientation == 'portrait')
            {
                height = imgdiv.height;
                width = height * this.currentAspectRatio;
            }
            
            var initialTop = this.cropTop * imgdiv.height;
            var initialLeft = this.cropLeft * imgdiv.width;
            var initialWidth = (this.cropRight - this.cropLeft) * imgdiv.width;
            var initialHeight = (this.cropBottom - this.cropTop) * imgdiv.height;
            var minWidth = initialWidth / 5;
            var minHeight = initialHeight / 5;
            
            window.editPanelRef = this;            
            //this.cropEditor.getMinimumResOrderItemMedia(this.mediaID, this.rpid, this.currentAspectRatio);
            this.cropping = true;
            this.adjustMinWidthHeight(this.currentOrientation());
            this.cropper.startCroppingEx(this.imageMainDivID, initialLeft, initialTop, initialWidth, initialHeight, width, height, minWidth, minHeight, this.onCartCropChanged);
        }
    },    
    
    
    enableApplyCrop: function(enable)
    {
        if ((applyCropBtn != null) && (changeCropBtn != null)) {
            var buttonOn = 'none';
            var buttonOff = 'inline';
            if (enable) {
                buttonOn = 'inline'
                buttonOff = 'none'
            }        
            applyCropBtn.style.display = buttonOn;
            changeCropBtn.style.display = buttonOff;
        }
    },

    enableStartOver: function(enable)
    {
        if ((startoverOnBtn  != null) && (startoverOffBtn != null)) {
            var buttonOn = 'none';
            var buttonOff = 'inline';
            if (enable) {
                buttonOn = 'inline'
                buttonOff = 'none'
            }     
            startoverOnBtn.style.display = buttonOn;
            startoverOffBtn.style.display = buttonOff;
        }
    },
    
    setCropOrientationNoReload: function(sRadioBtn, orientation)
    {
        var radioBtn = $get(sRadioBtn);
        if (radioBtn != null)
            radioBtn.checked = true;
        this.cropOrientation = orientation;
    },
    
    setCropOrientation: function(sRadioBtn, orientation)
    {
        this.setCropOrientationNoReload(sRadioBtn, orientation);
        
        if (orientation == 'landscape')
        {
            this.loadCropCoords(this.cropOrderItem.originalLandscapeCrop);
        }
        else
        {
            this.loadCropCoords(this.cropOrderItem.originalPortraitCrop);
        }
        this.adjustMinWidthHeight(orientation);
    },
    
    adjustMinWidthHeight: function(orientation) 
    {        
        var imgdiv = document.getElementById(this.imageMainDivID)
        if (imgdiv.clientWidth == 1)
        {
            window.editPanelRef = this;
            setTimeout("this.editPanelRef.adjustMinWidthHeight('"+orientation+"');", 1000);
            return;
        }
        if (((orientation == 'landscape') && (this.currentOrderItem.isLandscape)) ||
            ((orientation != 'landscape') && (!this.currentOrderItem.isLandscape)))
        {
            this.cropper.minWidth  = this.minWidth = Math.round((imgdiv.clientWidth  * this.currentOrderItem.minLengthOfWidth) + 0.5);
            this.cropper.minHeight = this.minHeight = Math.round((imgdiv.clientHeight * this.currentOrderItem.minLengthOfHeight) + 0.5);         
        }
        else
        {
            this.cropper.minWidth  = this.minWidth = Math.round((imgdiv.clientHeight * this.currentOrderItem.minLengthOfHeight) + 0.5);
            this.cropper.minHeight = this.minHeight = Math.round((imgdiv.clientWidth  * this.currentOrderItem.minLengthOfWidth) + 0.5);       
        }
    },
    
    onCartCropChanged: function(cropInfo)
    {
        //
        // This function is running in the Cropper scope/frame/context, use this.editPanelRef to access 'this' edit panel...
        //
        
        var imgdiv = $get(this.editPanelRef.imageMainDivID);
        
        var l = eval(cropInfo.left) / imgdiv.clientWidth;
        if (l<0) l = 0;
        var r = eval((cropInfo.left) + cropInfo.width) / imgdiv.clientWidth;
        if (r > 0.99) r = 1.0;
        var t = eval(cropInfo.top) / imgdiv.clientHeight;
        if (t<0) t = 0;
        var b = eval((cropInfo.top) + cropInfo.height) / imgdiv.clientHeight;
        if (b > 0.99) b = 1.0;
        
        this.editPanelRef.cropLeft = l;
        this.editPanelRef.cropTop = t;
        this.editPanelRef.cropRight = r;
        this.editPanelRef.cropBottom = b;
        
//        if (this.editPanelRef.hasMinSize)
//        {
           this.editPanelRef.ShowResolutionWarning((cropInfo.width <= this.editPanelRef.minWidth) || (cropInfo.height <= this.editPanelRef.minHeight), (cropInfo.width == this.editPanelRef.minWidth) || (cropInfo.height == this.editPanelRef.minHeight));
//        }
    },
    
//    resetMinSize: function(cropOrderItem)
//    {
//         this.cropper.minWidth = this.minWidth = cropOrderItem.minLengthOfWidth;
//         this.cropper.minHeight = this.minHeight = cropOrderItem.minLengthOfHeight;
//    },
    
    onCropGotMinSize: function(result)
    {            
        var imgdiv = document.getElementById(this.imageMainDivID);
        this.cropper.minWidth  = this.minWidth  = Math.round((imgdiv.clientWidth  * result[0]) + 0.5);
        this.cropper.minHeight = this.minHeight = Math.round((imgdiv.clientHeight * result[1]) + 0.5);
        this.hasMinSize = true;
    },
    
    ShowResolutionWarning: function(result, minSizeMet)
    {        
        var visibleValue = 'hidden';
        if (result) visibleValue = 'visible';        
        $get('ResolutionWarning').style.visibility = visibleValue;
        this.setIsLowRes(result);
        this.minSizeMet = minSizeMet;
    }
};