// Carga el efecto de esquina que se expande
// Ver 1.0 en JQuery, hay que pasarlo a ExtJs
// img_width: Anchura de la imagen real
// img_height: Altura de la imagen real
// thumb_width: Ancho de la esquina visible del efecto page Flip
// thum_height: Alto de la esquina visible del efecto page Flip
function createPageFlip(img_width, img_height, thumb_width, thum_height) {
    $("#pageflip").hover(function() { //On hover...
        $("#pageflip img").stop()
		    .animate({ //Animate and expand the image and the msg_block (Width + height)
		        right: img_width - 50 + 'px',
		        top: img_height - 50 + 'px'
		    }, 400);
        $("#pageflip .msg_block").stop()
		    .animate({ //Animate and expand the image and the msg_block (Width + height)
		        width: img_width + 'px',
		        height: img_height + 'px'
		    }, 400);
    }, function() {
        $("#pageflip img").stop() //On hover out, go back to original size 50x52
		    .animate({
		        right: '-3px',
		        top: '-3px'
		    }, 220);
        $(".msg_block").stop() //On hover out, go back to original size 50x50
		    .animate({
		        width: thumb_width + 'px',
		        height: thum_height + 'px'
		    }, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
    });
}

// Muestra la imagen del pageFlip
function showPageFlipImage(imgPath) {

    Ext.Window(
    {
        id: 'pepe',
        items: [{
            xtype: 'box',
            id: 'box_content',
            autoHeight: true,
            autoEl: {
                tag: 'img',
                src: imgPath
            }
            }]
        }
    ).show();
}