Ext.ns('Hdv.lot.detail');

/**
 * Objet representant le panel de la grande image
 *
 * Les methodes en lien avec le redimensionnement sont :
 * this.setPhoto()
 * this.getPhotoDimension()
 */
Hdv.lot.detail.Photo = Ext.extend(Ext.Panel, {

    current: null,

    tplBody: new Ext.XTemplate(
        '<img src="{src}" width="{width}" height="{height}" title="{name}" alt="{name}" />'
    ),

    getPhotoDimension: function(record, node, fetchDefautlDimensions, visited) {
        var width, height, canevas_width, canevas_height, blank_width, blank_height;
        var canevas_current_width, canevas_current_height;

        canevas_width = this.getWidth(true);
        canevas_height = this.getHeight(true);
        canevas_current_width = canevas_width;
        canevas_current_height = canevas_height;

        if (fetchDefautlDimensions) {
            canevas_width = 600;
            canevas_height = 450;
        }

        var thumb_width = node.getWidth();
        var thumb_height = node.getHeight();

        var ratio = thumb_width / thumb_height;

        width = canevas_width;
        height = width / ratio;
        if (height > canevas_height) {
            height = canevas_height;
            width = height * ratio;
        }

        width = Math.round(width);
        height = Math.round(height);

        blank_width = canevas_current_width - width;
        blank_height = canevas_current_height - height;

        if (typeof console !== 'undefined') {
            console.log('--- // debut de log // ---')
            console.log('Largeur Panel Photo : ' + canevas_width);
            console.log('Hauteur Panel Photo : ' + canevas_height);
            console.log('Largeur Panel Photo courant : ' + canevas_current_width);
            console.log('Hauteur Panel Photo courant : ' + canevas_current_height);
            console.log('Largeur du thumb : ' + thumb_width);
            console.log('Hauteur du thumb : ' + thumb_height);
            console.log('Ratio largeur/hauteur du thumb : ' + ratio);
            console.log('Nouvelle largeur (en tenant compte du ratio) : ' + width);
            console.log('Nouvelle hauteur (en tenant compte du ratio) : ' + height);
            console.log('Largeur a enlever a la Window globale : ' + blank_width);
            console.log('Hauteur a enlever a la Window globale : ' + blank_height);

            console.log('--- node ---')
            console.log(node);
            console.log(' --- // fin de log // ---')
        }

        var dims = {
            width: width,
            height: height,
            blankWidth: blank_width,
            blankHeight: blank_height
        };
        return dims;
    },

    setPhoto: function(record, node, visited) {
        node = Ext.get(node);

        var fetchDefautlDimensions = false;
        if (this.current != record.get('name')) {
            fetchDefautlDimensions = true;
        }
        this.current = record.get('name');

        var dims = this.getPhotoDimension(record, node, fetchDefautlDimensions, visited);
        this.fireEvent('afterresize', dims);

        this.tplBody.overwrite(this.body, {
            src    : record.get('image_web') + record.get('name'),
            name   : record.get('name'),
            width  : dims.width,
            height : dims.height
        });
        this.body.slideIn('r', {stopFx:true,duration:.2});
    },

    initComponent: function() {
        this.addEvents(
            'afterresize',
            'widowresize'
        );

        this.tplBody.compile();
        this.lastDimensions = {};

        Ext.applyIf(this, {
            title  : this.config.wording.lot_detail_photo_title,
            html   : ''
        })

        Hdv.lot.detail.Photo.superclass.initComponent.call(this);
    }

});

Ext.reg('hdvlotdetailphoto', Hdv.lot.detail.Photo);