var scatterBox;


Naxos.ScatterBox = function(config) {
    Ext.apply(this, config);
    
    if(this.canvas) {
        var imgW = 300;
        var imgH = 225;
        if(this.images && this.imgages) {
            imgW = this.images[0].width;
            imgH = this.images[0].height;
        }
        this.gx = this.canvas.getGraphics();
        this.center = { x: this.canvas.getSize().width / 2, y: this.canvas.getSize().height / 2 };
        this.rx = this.canvas.getSize().width / 2 - (imgW + 20) / 2;
        this.ry = this.canvas.getSize().height / 2 - (imgH + 70) / 2;
    }
};

Naxos.ScatterBox.prototype = {
    // config parameters
    images: [], // [{ url: 'xxx', title: 'xxx', width: xxx, height: xxx }, ... ]
    canvas: null,
    
    // public properties
    polaroids: [],
    inFront: null,
    gx: null,
    center: { x: 300, y: 200 },
    rx: 150, ry: 100,
    
    scatter: function() {
        var create = this.polaroids.length < this.images.length;
        
        for(var i = 0; i < this.images.length; i++) {
            var image = this.images[i];
            var angle = Math.random() * 60 - 30; // -30 .. 30 degrees
            var w = image.width;
            var h = image.height;
            var x = this.center.x + Math.random() * this.rx * 2 - this.rx - w / 2;
            var y = this.center.y + Math.random() * this.ry * 2 - this.ry - h / 2;
            var polaroid = null;
            
            if(create) {
                polaroid = this._createPolaroid(x, y, w, h, angle, image.url, image.title);
                polaroid.addListener("mousedown", this.onMouseDown, this);
                polaroid.addListener("mouseup", this.onMouseUp, this);
                this.gx.makeMoveable(polaroid).addListener("movestop", function(source, polaroid, matrix) {
                }, this);

                this.polaroids.push(polaroid);
            } else {
                polaroid = this.polaroids[i];
                //polaroid.setTransform(dojox.gfx.matrix.translate(x, y));
                //polaroid.center = this._getCenter(x, y, w, h);
                //polaroid.angle = angle;
                polaroid.setTransform(dojox.gfx.matrix.rotategAt(polaroid.angle, polaroid.center.x, polaroid.center.y));
            }
        }  
        
        this.inFront = null;
    },
    
    _createPolaroid: function(x, y, w, h, angle, url, desc) {
        var polaroid = this.gx.createGroup();        
        var shadow = this.gx
            .createRect({ x: x - 5, y: y - 5, width: w + 20, height: h + 70 })
            .setFill([0,0,0,.1]);
        var frame = this.gx
            .createRect({ x: x - 10, y: y - 10, width: w + 20, height: h + 70 })
            .setStroke({color:"rgba(0,0,0,.2)", width: 1})
            .setFill("white");
        var img = this.gx
            .createImage({x: x, y: y, width: w, height: h, src: url});
        var edge = this.gx
            .createRect({ x: x, y: y, width: w, height: h })
            .setStroke({color:"black", width: 1});
        var title = this.gx
            .createText({x: x + w / 2, y: (y - 10) + (h + 70) - 25,text:desc,align:"middle",kerning:true})
            .setFont({family: "Helvetica", style:"italic", size: "16px"})
            //.setStroke("white")
            .setFill("black");
        // workaround for safari image rendering bug
        setTimeout(function() {
            img.applyTransform({xx: 1, xy: 0, yx: 0, yy: 1, dx: 0, dy: 0});
        }, 150);

        polaroid.add(shadow);
        polaroid.add(frame);
        polaroid.add(img);
        polaroid.add(edge);
        polaroid.add(title);

        polaroid.center = this._getCenter(x, y, w, h);
        polaroid.angle = angle;
        polaroid.setTransform(dojox.gfx.matrix.rotategAt(polaroid.angle, polaroid.center.x, polaroid.center.y));

        return(polaroid);
    },
    
    _getCenter: function(x, y, w, h) {
        return({ x: x - 10 + (w + 20) / 2, y: y - 10 + (h + 70) / 2});
    },
    
    onMouseDown: function(evt, polaroid) {
        polaroid._onDownOffset = { dx: polaroid.matrix.dx, dy: polaroid.matrix.dy };
    },
    
    onMouseUp: function(evt, polaroid) {
        if(polaroid._onDownOffset && polaroid._onDownOffset.dx == polaroid.matrix.dx && polaroid._onDownOffset.dy == polaroid.matrix.dy) {
            this.moveToFront(polaroid);
        }
    },
    
    moveToFront: function(polaroid) {
        if(this.inFront == null || this.inFront != polaroid) {
            polaroid.moveToFront();

            polaroid.applyTransform(dojox.gfx.matrix.rotategAt(-polaroid.angle, polaroid.center.x, polaroid.center.y));
            
            if(this.inFront != null) {
                this.inFront.applyTransform(dojox.gfx.matrix.rotategAt(this.inFront.angle, this.inFront.center.x, this.inFront.center.y));
            }
            
            this.inFront = polaroid;
        }
    }
    
}