/* Requires lutil-mod */

lclass("AvenlaSlideshow", {
    cons: function(el, params) {
        this.el = lutil(el);
        this.el.obj = this;

        $PM(this, params, {
            autoShowFade: 2000,
            manualFade: 200,
            delay: 8000,
            naviAddSpaces: false,
            fadeInFirst: true
        });

        this.images = $C(".AvenlaSlideshowImages li", el);

        if (this.images.length <= 1) {
            return;
        }
        
        this.navi = $S(".AvenlaSlideshowNavi", el);
        if (this.navi) {
            this.navi.empty();
        }
        this.imagesLoading = 0;

        this.el.addClass(".AvenlaSlideshowJS");

        var imageNaviItems = $C(".AvenlaSlideshowImageNavi li", el);

        var i, image;
        for (i = 0; i < this.images.length; i++) {
            image = this.images[i];
            image.style({position: "absolute", display: "block", visibility: "hidden"});
            
            var img = $S("img", image);
            if (img) {
                image.img = img;
            } else {
                var swf = $S("object", image);
                if (swf) {
                    image.swf = swf;
                }
            }
            
            if (this.navi) {
                if (this.naviAddSpaces && i > 0) {
                    this.navi.append(" ");
                }
                var naviItem;
                naviItem = new LElementNode("li");
                naviItem.index = i;
                naviItem.attachEvent("click", this, this.gotoClick);
                this.navi.append(naviItem);
            }
            if (imageNaviItems.length > i) {
                imageNaviItems[i].index = i;
                imageNaviItems[i].attachEvent("click", this, this.gotoClick);
            }
        }

        var elt;

        if (elt = $S(".AvenlaSlideshowPrev", el)) {
            elt.attachEvent("click", this, this.prevClick);
            elt.style.display = "block";
        }
        if (elt = $S(".AvenlaSlideshowNext", el)) {
            elt.attachEvent("click", this, this.nextClick);
            elt.style.display = "block";
        }
        
        this.elCurSlide = $S(".AvenlaSlideshowCurSlide", el);
        this.elNumSlides = $S(".AvenlaSlideshowNumSlides", el);
        
        this.anim = null;
        this.last = this.images.length - 1;
        this.current = 0;
        this.autoshow = true;
        this.delayTimer = new LTimer(this.delay, this, this.showNext);
        this.imageLoadTimer = new LTimer(100, this, this.checkLoaded);
        this.flashStartTimer = new LTimer(100, this, this.startFlash);
        this.flashEndTimer = new LTimer(100, this, this.checkFlashOver);

        if (window.dnnxhr) {
            window.dnnxhr.add_onload(new LDelegate(this, this.destroy), true);
        }

        this.imageLoadTimer.start();
    },

    checkLoaded: function() {
        var i, image;
        for (i = 0; i < this.images.length; i++) {
            image = this.images[i];
            try {
                if ((image.img && !image.img.node().complete)
                    || (image.swf && (typeof image.swf.node() == "undefined" || image.swf.node().PercentLoaded() != 100))) {
                    this.imageLoadTimer.start();
                    return;
                }
            } catch (ex) { /* ignore errors */ }
        }
        
        this.start();
    },

    start: function() {
        var height = 0, i, image;

        for (i = 0; i < this.images.length; i++) {
            image = this.images[i];
            //height = Math.max(height, image.offsetHeight());
            image.style({marginLeft: Math.floor(-image.offsetWidth() / 2) + "px"});
        }
        
        this.last = this.images.length - 1;
        this.current = 0;
        this.animateChange(true);
        this.setNavi(0);

        if (AvenlaSlideshow.globalOnloads.length > 0) {
            for (i = 0; i < AvenlaSlideshow.globalOnloads.length; i++) {
                AvenlaSlideshow.globalOnloads[i].call();
            }
        }
    },

    showNext: function(e) {
        this.last = this.current;
        this.current = (this.current + 1) % this.images.length;
        this.animateChange();
    },

    animateChange: function(initial) {
        if (this.anim) {
            this.anim.stop();
        }
        
        var currentImage = this.images[this.current];
        
        if (initial) {
            if (this.fadeInFirst) {
                this.anim = new LAnimation([
                    [currentImage,
                        [0, "opacity: 0.0; visibility: visible; z-index: 3;"],
                        [this.autoShowFade, "opacity> 1.0"]
                    ]
                ]);
            } else {
                this.images[this.current].style({visibility: "visible"});
            }
        } else {
            if (this.last != this.current) {
                var endTime = this.autoshow ? this.autoShowFade : this.manualFade;
                
                this.anim = new LAnimation([
                    [currentImage,
                        [0, "opacity: 1.0; visibility: visible;"]
                    ],
                    [this.images[this.last],
                        [0, "opacity: 1.0; visibility: visible; z-index: 3;"],
                        [endTime, "opacity> 0.0; z-index: 1; visibility: hidden;"]
                    ]
                ]);
            }
        }
        
        var i;
        for (i = 0; i < this.images.length; i++) {
            if (i != this.last) {
                this.images[i].style({zIndex: (i == this.current) ? "2" : "1"});
            }
        }
        
        if (this.anim) {
            this.anim.attachEvent("finish", this, this.animationOver);
            this.anim.start();
        }
        
        if (currentImage.swf) {
            currentImage.swf.node().Rewind();
            currentImage.swf.node().Play();
        }
        
        if (initial && !this.fadeInFirst) {         
            if (currentImage.img) {
                this.delayTimer.start();
            }
            
            if (currentImage.swf) {
                this.checkFlashOver();
            }
        }
    },
    
    startFlash: function() {
        this.images[this.current].swf.node().Play();
    },

    animationOver: function() {
        this.anim = null;
        
        var currentImage = this.images[this.current];
        
        this.setNavi(this.current);
        
        if (this.autoshow && currentImage.img) {
            this.delayTimer.start();
        }
        
        if (currentImage.swf) {
            this.checkFlashOver();
        }
    },
    
    checkFlashOver: function() {
        try {
            var swf = this.images[this.current].swf;
            var swfn = swf.node();
            
            if (swfn.IsPlaying() || swfn.TCurrentLabel("/") != "movieend")
                this.flashEndTimer.start();
            else {
                if (this.autoshow) {
                    this.showNext();
                } else {
                    swfn.Rewind();
                    swfn.Play();
                    this.flashEndTimer.start();
                }
            }
        } catch (e) {
            this.flashEndTimer.start();
        }
    },

    setCurrent: function(i) {
        if (!this.autoshow && i == this.current) {
            return;
        }
        
        this.flashEndTimer.stop();
        this.delayTimer.stop();
        
        if (this.anim) {
            this.anim.stop();
        }
        this.autoshow = false;
        this.last = this.current % this.images.length;
        this.current = i % this.images.length;
        this.animateChange();
    },

    setNavi: function(sel) {
        if (this.navi) {
            var i, navi = $C("li", this.navi);
            if (navi.length > 0) {
                for (i = 0; i < navi.length; i++) {
                    navi[i].removeClass("current");
                }
                navi[sel].addClass("current");
            }
        }
        if (this.elCurSlide) {
            this.elCurSlide.setText(this.current + 1);
        }
        if (this.elNumSlides) {
            this.elNumSlides.setText(this.images.length);
        }
    },

    prevClick: function() {
        if (this.current < 0) {
            return false;
        }
        this.setCurrent((this.current + this.images.length - 1) % this.images.length);
        return false;
    },

    nextClick: function() {
        if (this.current < 0) {
            return false;
        }
        this.setCurrent((this.current + this.images.length + 1) % this.images.length);
        return false;
    },

    gotoClick: function(e) {
        if (this.current < 0) {
            return false;
        }
        this.setCurrent(e.thisElement().index);
        return false;
    },

    destroy: function() {
        this.imageLoadTimer.stop();
        if (this.anim) {
            this.anim.stop();
        }
        this.delayTimer.stop();
        this.el.obj = null;
    }
}, {
    globalOnloads: [],
    addGlobalOnload: function(d) {
        AvenlaSlideshow.globalOnloads.push(d);
    }
});

/* Example HTML and related class names:

<div id="myslideshow">
    <ul class="AvenlaSlideshowImages">
        <li><img src="..." /></li>
    </ul>
    <ul class="AvenlaSlideshowNavi"></ul>
    <a class="AvenlaSlideshowNext">Next</a>
    <a class="AvenlaSlideshowPrev">Previous</a>
</div>
<script type="text/javascript">
    new AvenlaSlideshow("myslideshow");
</script>

Elements are discovered based on class names, so the HTML is quite free form.

*/