function CropArea()
{
}

CropArea.prototype = {

    image:null,
    layersContainer:null,
    backLayer:null,
    frontLayer:null,
    cropLeft:0,
    cropTop:0,
    cropRight:0,
    cropBottom:0,
    cropWidth:0,
    cropHeight:0,
    visible:false,
    grayLayerColor: '#b4e6ff',
    grayLayerOpacity: 0.7,
    borderWidth:2,

    show: function(imageID, left, top, right, bottom)
    {
        if (this.visible)
        {
            this.hide();
        }
        
        this.image = $get(imageID);
        
        this.cropTop = parseInt(top);
        this.cropLeft = parseInt(left);
        this.cropRight = parseInt(right);
        this.cropBottom = parseInt(bottom);
        this.cropWidth = this.cropRight - this.cropLeft;
        this.cropHeight = this.cropBottom - this.cropTop;
        
        this.addContainer();
        this.addBackLayer();
        this.addFrontLayer();
        this.visible = true;
    },

    setBorderWidth: function(width)
    {
        this.borderWidth = width;
    },

    hide: function()
    {
        if (this.backLayer != null)
        {
            this.backLayer.parentNode.removeChild(this.backLayer);
            this.backLayer = null;
        }
        
        if (this.frontLayer != null)
        {
            this.frontLayer.parentNode.removeChild(this.frontLayer);
            this.frontLayer = null;
        }
        
        if (this.layerContainer != null)
        {
            this.layersContainer.parentNode.removeChild(this.layersContainer);
            this.layersContainer = null;
        }
        
        this.visible = false;
    },

    addContainer: function() {
        this.layersContainer = document.createElement('div');
        this.layersContainer.style.position = 'absolute';
        this.image.parentNode.insertBefore(this.layersContainer, this.image);
    },

    addBackLayer: function() {
        this.backLayer = document.createElement('div');
        this.backLayer.style.position = 'absolute';
        this.backLayer.style.width = this.image.offsetWidth + 'px';
        this.backLayer.style.height = this.image.offsetHeight + 'px';
        this.backLayer.style.backgroundColor = this.grayLayerColor;
        this.backLayer.style.opacity = this.grayLayerOpacity;
        this.backLayer.style.filter = 'alpha(opacity=' + (this.grayLayerOpacity * 100)  + ')';
        this.layersContainer.appendChild(this.backLayer);
    },

    addFrontLayer: function()
    {
        this.frontLayer = document.createElement('div');
        this.frontLayer.style.position = 'absolute';
        this.frontLayer.style.left = (this.cropLeft - this.borderWidth) + 'px';
        this.frontLayer.style.top = (this.cropTop - this.borderWidth) + 'px';
        this.frontLayer.style.width = this.cropWidth + 'px';
        this.frontLayer.style.height = this.cropHeight + 'px';
        this.frontLayer.style.border = this.borderWidth + 'px solid black';
        this.frontLayer.style.backgroundImage = 'url(' + this.image.src + ')';
        this.frontLayer.style.backgroundPosition = String.format('-{0}px -{1}px', this.cropLeft, this.cropTop);
        this.layersContainer.appendChild(this.frontLayer);
    }


};