/* js/carousel.js */
YUI.add('uwc-carousel', function(Y) {
    Y.namespace('uwc');
    function Carousel(config){
        Carousel.superclass.constructor.apply(this, arguments);
    }
    Y.extend(Carousel, Y.Base, {
        initializer: function(cfg) {
            var nodeListSlides,
                nodeCarousel,
                nodeContainer = this.get("nodeContainer"),
                carouselClassName = this.get("carouselClassName");
            this.interval = null;
            this.curSlide = 0;
            nodeListSlides = this.getCarouselNodeList();
            this.nodeCarousel = nodeContainer.one("."+ carouselClassName);
            // Ensure Carousel is position: relative
            this.nodeCarousel.setStyle("position", "relative");
            this.numSlides = nodeListSlides.size();
            // init animation
            this.caroAnim = new Y.Anim({
                node: this.nodeCarousel
            });
            this.caroAnim.set("duration", this.get("slideAnimDuration"));
            this.caroAnim.set("easing", this.get("slideEasing"));
            this.caroAnim.on("end", function(){
                this.updatePagination();
            }, this);

            // Create next/prev
            this.generateControls();
            // Create Paging
            this.generatePagination();
            this.updatePagination();
            // We are ready display everything.
            this.nodeCarousel.removeClass("hidden");
            if (this.get("autoPlay")) {
                this.autoPlay();
            }
        },
        getCarouselNodeList: function() {
            var nodeContainer = this.get("nodeContainer"),
                carouselClassName = this.get("carouselClassName");
            return nodeContainer.all("." + carouselClassName + " li");
        },
        updatePagination: function() {
            var nodeContainer = this.get("nodeContainer"),
                paginationListItems;
            paginationListItems = nodeContainer.all(".pagination li a");
            paginationListItems.each(function(a){
                var nodeClassName = a.get("className");
                if (parseInt(nodeClassName.replace("p-", ""), 10) === this.curSlide) {
                    a.addClass("active");
                } else {
                    a.removeClass("active");
                }
            }, this);
        },
        generatePagination: function() {
            var pageText = 'Page',
                nodeContainer = this.get("nodeContainer"),
                ol = document.createElement('ol'),
                li, a, sp, txt;

            ol.className = "pagination";
            for (var i=0, j=this.numSlides; i < j; i++){
                li = document.createElement('li');
                a = document.createElement('a');
                sp = document.createElement('span');
                a.href = '#';
                txt = document.createTextNode(pageText+(i+1));
                sp.appendChild(txt);
                a.appendChild(sp);
                a.className = 'p-'+i;
                li.appendChild(a);
                ol.appendChild(li);
            }
            nodeContainer.append(ol);
            olNode = Y.one(ol);
            olNode.on("click", function(e){
                var targetClass;
                e.preventDefault();
                if (this.caroAnim.get("running") === false) {
                    if (e && this.autoPlayTimer) {
                        clearInterval(this.autoPlayTimer);
                    }
                    targetClass = e.target.get("className");
                    this.gotoSlide(parseInt(targetClass.replace("p-", ""), 10));
                }
            }, this);
            // Center pagination
            olNode.setStyle('left', parseInt((
                parseInt(olNode.get('parentNode').getComputedStyle('width')) -
                parseInt(olNode.getComputedStyle('width'))) / 2) + 'px');
        },
        generateControls: function() {
            var controlsContainer = this.get("controlsContainer");
            if (controlsContainer) {
                var prev = Y.Node.create('<a href="#" class="prev"><span>Previous Slide</span></a>'),
                    next = Y.Node.create('<a href="#" class="next"><span>Next Slide</span></a>');
                next.on("click", this.next, this);
                prev.on("click", this.prev, this);
                controlsContainer.appendChild(prev);
                controlsContainer.appendChild(next);
            }
        },
        advance: function(e, val){
            if (e) {
                e.preventDefault();
            }
            if (e && this.autoPlayTimer) {
                clearInterval(this.autoPlayTimer);
            }
            if (this.caroAnim.get("running") === true) {
                return;
            }
            this.gotoSlide(val);
        },
        next: function(e){
            this.advance(e, this.curSlide + 1);
        },
        prev: function(e){
            this.advance(e, this.curSlide - 1);
        },
        gotoSlide: function(nSlideIndex, duration) {
            var xOffSet, slideWidth;
            slideWidth = parseInt(this.nodeCarousel.one("li").getStyle("width"), 10);
            duration = (duration === 0) ? duration : (duration || this.get("slideAnimDuration"));
            this.nSlideIndex = nSlideIndex;
            if (nSlideIndex < 0) {
                this.animateTo(-(slideWidth * (this.numSlides-1)), duration);
                this.curSlide = this.numSlides - 1;
            } else if (nSlideIndex >= (this.numSlides)) {
                this.animateTo(0, duration);
                this.curSlide = 0;
            } else {
                xOffSet = -slideWidth * nSlideIndex;
                this.animateTo(xOffSet, duration);
                this.curSlide = nSlideIndex;
            }

        },
        autoPlay: function() {
            var that = this;
            this.autoPlayTimer = setInterval(function(){
               that.next();
            }, that.get("slideAnimInterval"));
        },
        animateTo: function(value, duration) {
            var origDuration;
            if (duration === 0) {
                this.nodeCarousel.setStyle("left", value);
            } else {
                if (duration) {
                    origDuration = this.caroAnim.get("duration");
                    this.caroAnim.set("duration", duration);
                }
                this.caroAnim.set("to", { "left": value });
                this.caroAnim.run();
                this.caroAnim.set("duration", origDuration);
            }
        }
    }, {
        NAME: "carousel",
        ATTRS: {
            carouselClassName: { value: "carouselol"},
            containerHeight: { value: null },
            containerWidth: { value: null },
            nodeContainer: {
                setter: function(sel) {
                    var n = Y.one(sel);
                    if (!n) {
                        Y.log('UWC:Carousel - invalid selector provided: ' + sel);
                    }
                    return n;
                }
            },
            controlsContainer: {
                setter: function(sel) {
                    return Y.one(sel);
                }
            },
            slideAnimDuration: { value: 1 },
            slideAnimInterval: { value: 5000 },
            slideEasing: { value: Y.Easing.easeBoth },
            autoPlay: { value: true }
        }
    });
    Y.uwc.Carousel = Carousel;
}, '0.0.1', {
    requires: ['base', 'node', 'anim', 'event','panel', 'transition']
});