Ext.ns('OXX.Zoom');


OXX.Zoom = Ext.extend(Object, {

    imgPath: '',
    scrWH: [1600, 1600],
    paper: null,
    fadeRect: null,
    imageRect: null,
    factor: null,
    imageSet: null,
    inFinnished: false,
    imgXY: [0, 0],
    imgWH: [0, 0],

    // Width, Height, Scale
    Dimensions: [0, 0, 0.0],

    ZoomWH: [0, 0],

    constructor: function(config) {
        Ext.apply(this, config);


    },
    
    fullImagePath: function(src) {   
        var pathSplit = src.split('/');   
        return (pathSplit.length > 0) ? 'arch/_img/' + pathSplit[pathSplit.length - 1] : pathSplit;    
    },

    setDimensions: function(el) {
        this.targetEl = el;
        //var body = Ext.getBody();
        var scale = (el.getWidth() / el.getHeight());
        this.Dimensions = [el.getWidth(), el.getHeight(), scale];
        this.imgXY = el.getXY();
        this.imgWH[0] = el.getWidth();
        this.imgWH[1] = el.getHeight();

        this.scrWH = [screen.width, screen.height];

        //  alert(this.scrWH + ":" + screen.height);
        //  W > H etc...

        this.ZoomWH[scale > 1.0 ? 0 : 1] = this.scrWH[scale > 1.0 ? 0 : 1] * this.factor;
        this.ZoomWH[scale > 1.0 ? 1 : 0] = this.ZoomWH[scale > 1.0 ? 0 : 1] * ((scale > 1.0) ? (1.0 / scale) : scale);

        var XY = [200, 100];

        this.imageRect = this.paper.image(this.fullImagePath(el.dom.src), XY[0], XY[1], this.ZoomWH[0], this.ZoomWH[1]);
        this.imageSet.push(this.imageRect);

        var borderRect = this.paper.rect(XY[0] - 5, XY[1] - 5, this.ZoomWH[0] + 8, this.ZoomWH[1] + 8, 10);
        this.imageSet.push(borderRect);
        var me = this;

        borderRect.attr({
            'stroke': '#000000',
            'stroke-width': 10,
            'stroke-linecap': 'round',
            opacity: 1,
            'fill': '#ffffff',
            'fill-opacity': 1
        });

        this.imageSet.animate({
            'fill-opacity': 0.1
        }, 500, function() {

            var t = this.paper.text(300, 120, "Klikk for å lukke bildet");
            me.imageSet.push(t);
            Ext.fly(document.body).on('click', function(e, t) {
                me.fadeOut();
            });
        })

    },


    fadeIn: function(el) {
        var me = this;
        this.paper = Raphael(0, 0, 1600, 1600);
        this.imageSet = this.paper.set();

        //        this.fadeRect = this.paper.rect(0, 0, this.scrWH[0], this.scrWH[1]);


        //      var XY = el.getXY();
        //    

        //        this.fadeRect.attr({
        //            'fill': '#000000',
        //            'fill-opacity': 0.0
        //        });

        //        this.fadeRect.animate({
        //            'fill': '#000000',
        //            'fill-opacity': 0.9

        //        }, 1500, function() {



        //        


        //        Ext.fly(document.body).on('click', function(e, t) {
        //                me.fadeOut();
        //        }, this);


        this.setDimensions(el);
    },


    fadeOut: function() {
        var me = this;

        this.imageSet.animate({
            opacity: 0,
            'fill-opacity': 1.0,
            width: 1,
            height: 1,
            rotation: 360,
            x: this.imgXY[0] + (this.imgWH[0] / 2),
            y: this.imgXY[1] + (this.imgWH[1] / 4)
        }, 1500, function() {
            var redir = document.location;
            document.location = redir;
        });


    },

    getRectangleEl: function(elId, border) {

        var rect = [0, 0, 0, 0];
        var xy = Ext.fly(elId).getXY();
        var w = Ext.fly(elId).getWidth() + border * 2;
        var h = Ext.fly(elId).getHeight() + border * 2;
        var x = xy[0] - border;
        var y = xy[1] - border;

        return [x, y, w, h];
    },


    getZoomTemplate: function() {
        return ['<div class="zoom"><img src="im/ns/image_zoom.gif"/></div>'];

    }
});


Ext.onReady(function() {


//    var z = new OXX.Zoom({ factor: 0.5 });

//    Ext.select('.zoomable').each(function(el, ths, idx) {
//        var t = new Ext.Template(z.getZoomTemplate());
//        t.insertAfter(el, {});
//    });

//    Ext.select('.zoomable').on('click', function(evt, targetEl) {
//        var el = Ext.get(targetEl);
//        el.hasClass('finito') ? z.fadeOut() : z.fadeIn(el);



//    });
});