Ext.define('ImageClass15', {
    extend:'DisplayableAction',
    constructor:function (cfgXML, o, actionSequence) {
        this.PictureBox = null;
        this.PictureFileName = null;
        this.PictureWidth = 0;
        this.PictureHeight = 0;
        this.AllowFullScreen = false;
        this.callParent([ cfgXML, o, actionSequence]);
        var picFileNameNode = cfgXML.getElementsByTagName("pictureFileName")[0];
        try {
            this.PictureWidth = parseInt(picFileNameNode.getAttribute('width'));
            this.PictureHeight = parseInt(picFileNameNode.getAttribute('height'));
            this.PictureFileName = picFileNameNode.childNodes[0].nodeValue;
            this.AllowFullScreen = XmlHelper.getBoolean(cfgXML, "allowFullScreen");
        }
        catch (err) {
        }
    },
    initializeDC:function (bg) {
        this.initializeDisplayComponent(bg);
        //initialize the pictureBox first

        this.PictureBox = this.ContentContainer.createChild({
            tag:'img',
            id:this.ObjectType + "-" + this.id + "-Picture",
            src:Author.resourcePath + this.PictureFileName,
            width:this.Effect == AuthorEffects.ZoomOut ? 0 : this.ContentContainerWidth,
            height:this.Effect == AuthorEffects.ZoomOut ? 0 : this.ContentContainerHeight
        });
        this.ContentContainer.addListener("mousedown", this.onMouseDown, this);
        this.ContentContainer.addListener("click", this.onClick, this);

    },
    onMouseDown:function (evt, el, o) {
        if(this.AllowFullScreen)
        {
            if (evt)  evt.stopPropagation();//Prevents advance to next page when image clicked
        }
        evt.stopEvent();
    },
    onClick: function (evt, el, o) {
        if(this.AllowFullScreen){
            
            if (evt)  evt.stopPropagation();//Prevents advance to next page when image clicked
    
            var modal = document.getElementById('myModal');

            var lessonWidth = window.innerWidth;
            var lessonHeight = window.innerHeight;
            var modalImg = document.getElementById("img01");
            var captionText = "";
    
            modal.style.display = "block";
            modalImg.src = Author.resourcePath + this.PictureFileName;
            modal.style.height = lessonHeight + "px";
            modal.style.width = lessonWidth + "px";
            captionText.innerHTML = this.alt;
    
            var span = document.getElementsByClassName("close")[0];
    
            //Clicking on the image in full screen image returns to lesson
            modalImg.onclick = function(evt, el, o) { 
                if (evt)  evt.stopPropagation();//Prevents advance to next page when image clicked
                modal.style.display = "none";
                evt.stopEvent();
            }

            //Clicking close in full screen image returns to lesson
            span.onclick = function(evt, el, o) { 
                if (evt)  evt.stopPropagation();//Prevents advance to next page when image clicked
                modal.style.display = "none";
                evt.stopEvent();
            }
        }
        evt.stopEvent();
    },
    processAction:function (bg) {
        if (this.IsChangeAction) {
            Author.DisplayManager.changeAction(this);
        }
        this.initializeDC(bg);
        this.setInitialVisibility();
        this.applyEffect();
        return {MoveOn:true, Interval:0};
    },
    doZoomOutEffect:function () {
        var sx, sy, sw, sh, ex, ey, ew, eh;
        sx = this.Width / 2;
        sy = this.Height / 2;
        sw = 0;
        sh = 0;
        ew = this.Width;
        eh = this.Height;
        Ext.create('Ext.fx.Anim', {
            target:this.DisplayableComponent,
            duration:this.EffectDuration,
            easing: this.EasingName,
            from:{
                left:sx,
                top:sy,
                width:sw,
                height:sh
            }, to:{
                left:0,
                top: 0,
                width:ew,
                height:eh
            }  ,
            callback:this.onEffectCompleted,
            listeners:{
                beforeanimate:{fn:this.onEffectStarted, scope:this}
            },
            scope:this
        });

        Ext.create('Ext.fx.Anim', {
            target:this.PictureBox,
            duration:this.EffectDuration,
            easing: this.EasingName,
            from: {
                left: sx,
                top: sy,
                width:0,
                height:0
            }, to: {
                left: 0,
                top: 0,
             width:this.ContentContainerWidth,
              height:this.ContentContainerHeight

            }
        });
        return this.EffectDuration;
    }
});


