/* Scor cropper types */
function Preview(imageUrl, containerID)
{
    this.imageUrl = imageUrl;
    this.containerID = containerID;
    
    this.previewSize = new Size(null, null);
    this.sourceImageSize = new Size(null, null);
}

function ClientIDs()
{
    x1 = null;
    y1 = null;
    x2 = null;
    y2 = null;
    width = null;
    height = null;
}

function Size(width, height)
{
    this.width = width;
    this.height = height;
}

Size.prototype.isEmpty = function()
{
    return this.width == null ||
        this.height == null;
}

function Rectangle(left, top, right, bottom)
{
    this.x1 = left;
    this.y1 = top;
    this.x2 = right;
    this.y2 = bottom;
}

Rectangle.prototype.isEmpty = function()
{
    return this.x1 == null ||
        this.y1 == null ||
        this.x2 == null ||
        this.y2 == null;
}

function ScorCropper(imageID)
{
    this.imageID = imageID;
    
    this.displayOnInit = true;
    this.cropper = null;
    this.preview = null;
    this.clientIDs = null;
    this.onloadRectangle = new Rectangle(null, null, null, null);
    this.selectionSizeRatio = new Size(null, null);
    this.minimumSize = new Size(null, null);
    this.cropper = null;
    this.onClientEndCrop = null;
    
    this.cropRatio = 1;
    this.noRatio = false;
    this.onLoadPreviewInitialized = false;
}

ScorCropper.prototype.displayPreview = function(coords, dimensions)
{
    var div = $(this.preview.containerID);
    div.style.overflow = "hidden";
    div.style.width = this.preview.previewSize.width + "px";
    div.style.height = this.preview.previewSize.height + "px";
            
    if (this.preview.image == null)
    {
        var img = document.createElement("img");
        img.src = this.preview.imageUrl;
        img.className = "Image"
        div.appendChild(img);
        this.preview.image = img;
        
        this.preview.sourceImageSize.width = img.width;
        this.preview.sourceImageSize.height = img.height;
    }
    
    var tempImg = $(this.imageID);
    
    var cropToTempWidthRatio = (dimensions.width / tempImg.width);
    var cropToTempHeightRatio = (dimensions.height / tempImg.height);
    
    var previewPixelWidth = (this.preview.sourceImageSize.width * cropToTempWidthRatio);
    var previewPixelHeight = (this.preview.sourceImageSize.height * cropToTempHeightRatio);
    
    var previewFullWidthRatio = (tempImg.width / dimensions.width);
    var previewFullHeightRatio = (tempImg.height / dimensions.height);
            
    if (this.noRatio)
    {
        var ratio = previewPixelWidth / previewPixelHeight;
        
        // Determine size of the preview image and its container div.
        var width = this.preview.previewSize.width;
        var height = this.preview.previewSize.height;
        
        // Higher than wider.
        if (ratio < 1)
        {
            width *= ratio;
        }
        // Wider than higher.
        else
        {
            height /= ratio;
        }
        
        div.style.width = width + "px";
        div.style.height = height + "px";
        
        this.preview.image.width = previewFullWidthRatio * width;
        this.preview.image.height = previewFullHeightRatio * div.offsetHeight;
        
        var cropToTempXRatio = (coords.x1 / tempImg.width);
        var cropToTempYRatio = (coords.y1 / tempImg.height);
                
        this.preview.image.style.marginLeft = (-(this.preview.image.offsetWidth * cropToTempXRatio)) + "px";
        this.preview.image.style.marginTop = (-(this.preview.image.offsetHeight * cropToTempYRatio)) + "px";
    }
    else
    {
        this.preview.image.width = previewFullWidthRatio * this.preview.previewSize.width;
        this.preview.image.height = previewFullHeightRatio * div.offsetHeight;
        
        var cropToTempXRatio = (coords.x1 / tempImg.width);
        var cropToTempYRatio = (coords.y1 / tempImg.height);
                
        this.preview.image.style.marginLeft = (-(this.preview.image.offsetWidth * cropToTempXRatio)) + "px";
        this.preview.image.style.marginTop = (-(this.preview.image.offsetHeight * cropToTempYRatio)) + "px";
    }
}

ScorCropper.prototype.onEndCrop = function(coords, dimensions)
{
    if (this.cropper == null && coords != null && dimensions != null && this.preview != null && !this.onLoadPreviewInitialized)
    {
        this.onLoadPreviewInitialized = true;
        this.displayPreview(coords, dimensions);
    }

    if (this.cropper == null)
        return;
        
    var areaSelected = this.cropper.areaSelected();

    if (this.onClientEndCrop != null && coords != null && dimensions != null)
    {
        var parameters = { areaSelected: areaSelected, scorScropper: this, coordinates: coords, dimensions: dimensions };
        this.onClientEndCrop(parameters);
    }
    
    // Save crop coordinates in the hidden input field.
    if (areaSelected)
    {
        $( this.clientIDs.x1 ).value = coords.x1;
        $( this.clientIDs.y1 ).value = coords.y1;
        $( this.clientIDs.x2 ).value = coords.x2;
        $( this.clientIDs.y2 ).value = coords.y2;
        $( this.clientIDs.width ).value = dimensions.width;
        $( this.clientIDs.height ).value = dimensions.height;
        
        // Preview
        if (this.preview != null)
        {
            this.displayPreview(coords, dimensions);
            /*var div = $(this.preview.containerID);
            div.style.overflow = "hidden";
            div.style.width = this.preview.previewSize.width + "px";
            div.style.height = this.preview.previewSize.height + "px";
                    
            if (this.preview.image == null)
            {
                var img = document.createElement("img");
                img.src = this.preview.imageUrl;
                img.className = "Image"
                div.appendChild(img);
                this.preview.image = img;
                
                this.preview.sourceImageSize.width = img.width;
                this.preview.sourceImageSize.height = img.height;
            }
            
            var tempImg = $(this.imageID);
            
            var cropToTempWidthRatio = (dimensions.width / tempImg.width);
            var cropToTempHeightRatio = (dimensions.height / tempImg.height);
            
            var previewPixelWidth = (this.preview.sourceImageSize.width * cropToTempWidthRatio);
            var previewPixelHeight = (this.preview.sourceImageSize.height * cropToTempHeightRatio);
            
            var previewFullWidthRatio = (tempImg.width / dimensions.width);
            var previewFullHeightRatio = (tempImg.height / dimensions.height);
                    
            if (this.noRatio)
            {
                var ratio = previewPixelWidth / previewPixelHeight;
                
                // Determine size of the preview image and its container div.
                var width = this.preview.previewSize.width;
                var height = this.preview.previewSize.height;
                
                // Higher than wider.
                if (ratio < 1)
                {
                    width *= ratio;
                }
                // Wider than higher.
                else
                {
                    height /= ratio;
                }
                
                div.style.width = width + "px";
                div.style.height = height + "px";
                
                this.preview.image.width = previewFullWidthRatio * width;
                this.preview.image.height = previewFullHeightRatio * div.offsetHeight;
                
                var cropToTempXRatio = (coords.x1 / tempImg.width);
                var cropToTempYRatio = (coords.y1 / tempImg.height);
                        
                this.preview.image.style.marginLeft = (-(this.preview.image.offsetWidth * cropToTempXRatio)) + "px";
                this.preview.image.style.marginTop = (-(this.preview.image.offsetHeight * cropToTempYRatio)) + "px";
            }
            else
            {
                this.preview.image.width = previewFullWidthRatio * this.preview.previewSize.width;
                this.preview.image.height = previewFullHeightRatio * div.offsetHeight;
                
                var cropToTempXRatio = (coords.x1 / tempImg.width);
                var cropToTempYRatio = (coords.y1 / tempImg.height);
                        
                this.preview.image.style.marginLeft = (-(this.preview.image.offsetWidth * cropToTempXRatio)) + "px";
                this.preview.image.style.marginTop = (-(this.preview.image.offsetHeight * cropToTempYRatio)) + "px";
            }*/
        }
    }
    else
    {
        $( this.clientIDs.x1 ).value = -1;
        $( this.clientIDs.y1 ).value = -1;
        $( this.clientIDs.x2 ).value = -1;
        $( this.clientIDs.y2 ).value = -1;
        $( this.clientIDs.width ).value = -1;
        $( this.clientIDs.height ).value = -1;
    }
}

ScorCropper.prototype.attachCropper = function()
{
    // Generate options structure.    
    var options = {};
    options.onEndCrop = this.onEndCrop.bind(this);
    options.displayOnInit = true;
        
    if (!this.selectionSizeRatio.isEmpty())
    {
        options.ratioDim = { x: this.selectionSizeRatio.width, y: this.selectionSizeRatio.height };
    }
    
    if (!this.minimumSize.isEmpty())
    {
        options.minWidth = this.minimumSize.width;
        options.minHeight = this.minimumSize.height;
    }
    
    if (this.cropRatio != 1 && !this.minimumSize.isEmpty()/* && !this.selectionSizeRatio.isEmpty()*/)
    {
        options.minWidth = Math.floor(options.minWidth / this.cropRatio);
        options.minHeight = Math.floor(options.minHeight / this.cropRatio);
    }
    
    if (!this.onloadRectangle.isEmpty())
    {
        options.onloadCoords =
        {
            x1: this.onloadRectangle.x1,
            y1: this.onloadRectangle.y1,
            x2: this.onloadRectangle.x2,
            y2: this.onloadRectangle.y2
        };
    }

    this.cropper = new Cropper.Img( this.imageID, options );
}