/* Requires lutil-mod */

lclass("AvenlaSlideshow", {
    cons: function(el, params) {
        this.el = $(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", visibility: "hidden"});
            image.img = $S("img", image);
            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);

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

        this.imageLoadTimer.start();
    },

    checkLoaded: function() {
        var i;
        for (i = 0; i < this.images.length; i++) {
            if (!this.images[i].img.node().complete) {
                //window.status += i;
                this.imageLoadTimer.start();
                return;
            }
        }
        
        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", display: "block"});
        }

        //$S(".AvenlaSlideshowImages", this.el).style().height = this.height + "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();
            }
        }
    },

    setVisible: function(v) {
        var i, image;

        for (i = 0; i < this.images.length; i++) {
            image = this.images[i];
            if (i == v) {
                image.style({visibility: "visible", zIndex: "1"});
            } else {
                image.style({visibility: "hidden", zIndex: "1"});
            }
            new LCSSOpacity(1.0).apply(image);
        }
    },

    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();
        }
 
        this.setVisible(this.current);
        
        if (initial) {
            if (this.fadeInFirst) {
                this.anim = new LAnimation([
                    [this.images[this.current],
                        [0, "opacity: 0.0; visibility: visible; z-index: 2;"],
                        [this.autoShowFade, "opacity> 1.0"]
                    ]
                ]);
            } else {
                this.delayTimer.start();
            }
        } else {
            if (this.last != this.current) {
                var animTime = this.autoshow ? this.autoShowFade : this.manualFade;
                
                this.anim = new LAnimation([
                    [this.images[this.last],
                        [0, "opacity: 1.0; visibility: visible; z-index: 2;"],
                        [animTime, "opacity> 0.0; z-index: 1;"]
                    ],
                    [this.images[this.current],
                        [animTime, "z-index: 2;"]
                    ]
                ]);

            }
        }
        
        if (this.anim) {             
            this.anim.attachEvent("finish", this, this.animationOver);
            this.anim.start();
        }
    },

    animationOver: function() {
        this.anim = null;
        
        if (this.autoshow) {
            this.delayTimer.start();
        }
        this.setNavi(this.current);
    },

    setCurrent: function(i) {
        if (!this.autoshow && i == this.current) {
            return;
        }
        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.

*/