/*
@param left
@param top
@param limit, An object with x and y properties used to limit the resize of the Element.
*/
var ImageCrop = new Class({
    
    Implements: [Options],
    
    options:{
        width: 100,
        height: 100,
        minWidth: 10
    },
    
    initialize: function(el, options){
        this.setOptions(options);
        this.el = $(el);
        if(!this.el) return false;
        this.handle = this.el.getElement('.image-crop-handle');
        this.handleInner = this.el.getElement('.image-crop-handle-inner');
        this.resizers = this.el.getElements('.image-crop-resizer');
        this.width = this.options.width;
        this.ratio = this.options.width / this.options.height;
        this.sizeLimit = this.options.limit || {
            x: [this.options.minWidth, this.el.getSize().x],
            y: [this.options.minWidth / this.ratio, this.el.getSize().y]
        };
        
        this.cropCis = {
            width: this.options.width,
            height: this.options.height,
            left: $chk(this.options.left) ? this.options.left : this.sizeLimit.x[1]/2 - this.options.width/2,
            top: $chk(this.options.top) ? this.options.top: this.sizeLimit.y[1]/2 - this.options.height/2
        };
        this.setCrop(this.cropCis);
        
        var that = this;
        this.crop = new Drag.Move(this.handle, {
            container: this.el,
            handle: this.handleInner,
            onComplete: function(){
                that.update();
            }
        });
        
        this.addResizer(this.resizers);
    },
    
    setCrop: function(cis){
        this.handle.setStyles(cis);
    },
    
    update: function(){
        this.cropCis = this.handle.getCoordinates();
    },
    
    addResizer: function(resizers){
        this.resizeHandles = this.resizeHandles || [];
        resizers.each(function(item){
            var that = this;
            var resizer = new Drag(this.handle, {
                handle: item,
                invert: item.hasClass('image-crop-resizer-nw') || item.hasClass('image-crop-resizer-ne'),
                limit: that.sizeLimit,
                modifiers: {x: 'width', y: 'width'},
                onDrag: function(el){
                    var nowWidth = that.width;

                    var xpos = el.getStyle('left').toInt(),
                        ypos = el.getStyle('top').toInt(),
                        w = el.getStyle('width').toInt(),
                        h = w / that.ratio,
                        withinLimit = w < that.sizeLimit.x[1] && h < that.sizeLimit.y[1];

                    var coords = {
                        left: withinLimit ? (xpos > 0 ? xpos - (w-nowWidth)/2 : 0) : xpos,
                        top: withinLimit ? (ypos > 0 ? ypos - (h-nowWidth/that.ratio)/2 : 0) : ypos
                    };
                    
                    for (var i = 2; i--; i){
                        w = w.limit(that.sizeLimit.x[0], Math.min(that.sizeLimit.x[1] - coords.left, h * that.ratio));
                        h = h.limit(that.sizeLimit.y[0], Math.min(that.sizeLimit.y[1] - coords.top, w / that.ratio));
                    }
                    el.setStyles($extend(coords, {
                        width: w,
                        height: h
                    }));
                    that.width = w;
                },
                onComplete: function(el){
                    that.update();
                }
            });
            this.resizeHandles.push(resizer);
        },this);
    }
});