var $Y = (function(){
    return {
        'SELECT' : YAHOO.util.Selector.query,
        'EVENT' : YAHOO.util.Event,
        'DOM' : YAHOO.util.Dom
    };
}());


/* ======================================================================
 * = Carousel Teaser                                                    =
 * ======================================================================*/
var carouselTeaser = function(node){
    this.node = document.getElementById(node);

    this.queueNode = $Y.SELECT('.item-queue ul', this.node, true);

    this.displayNode = $Y.SELECT('.item-display', this.node, true);

    this.cache = new Array();

    this.initQueueList();

    this.displayTemplate = this.displayNode.getElementsByTagName('div')[0].cloneNode(true);

// start to cycle   //
 if(!$Y.DOM.hasClass(this.queueNode,'locked')){ this.startQueueCycling(); }
    // Add click handlers
    $Y.EVENT.addListener(
        $Y.SELECT('li p', this.queueNode), 'click',
        function(e){
            var link = $Y.DOM.getPreviousSiblingBy(
                $Y.EVENT.getTarget(e),
                function(el){ return el.tagName.toUpperCase() === 'A'; }
            );
            window.location = link.href;
        },
        this, true
    );

    $Y.EVENT.addListener(
        this.displayNode, 'click',
        function(e){
            var link = $Y.SELECT('li.current a', this.queueNode, true);
            window.location = link.href;
        },
        this, true
    );

};
    carouselTeaser.prototype.initQueueList = function(){
        this.queue = $Y.SELECT('li', this.queueNode);

        this.currentNode = this.queue[0];
    };

    carouselTeaser.prototype.createItem = function(node){

        var item = this.displayTemplate.cloneNode(true),
            img = $Y.DOM.getStyle($Y.SELECT('p', node, true),'background-image'),
            title = $Y.SELECT('a span', node, true).innerHTML,
            desc = $Y.SELECT('p', node, true).innerHTML;

        $Y.DOM.setStyle(item,'background-image',img);
        $Y.SELECT('.item-title', item, true).innerHTML = title;
        $Y.SELECT('.item-description', item, true).innerHTML = desc;

        return item;

    };

    carouselTeaser.prototype.fetchItem = function(node){
        for(var i = (this.cache.length-1); this.cache[i] !== undefined; i--){
            if(this.cache[i].node === node) break;
        }
        if(i == -1){
            this.cache.push({
                'node':node,
                'html':this.createItem(node)
            });
            i = this.cache.length-1;
        }

        return this.cache[i].html;
    };

    /* change to another item in the queue */
    carouselTeaser.prototype.changeTo = function(node){

        var newNode = node;
        if(this.currentNode !== newNode){

            /* skip all of this if we really don't change node */
            $Y.DOM.removeClass(this.currentNode,'current');
            $Y.DOM.addClass(newNode,'current');

            ////////////////////////////////////////////////////////////////////
            // Animation code start ////////////////////////////////////////////
            var oldItems = $Y.DOM.getChildren(this.displayNode);
            var newItem = this.fetchItem(node);

            $Y.DOM.setStyle(newItem,'opacity',0);

            this.displayNode.appendChild(newItem);

            var fadeIn = new YAHOO.util.Anim(newItem, { opacity: { from: 0, to: 1 }}, 1.5);
            var fadeOut = new YAHOO.util.Anim(oldItems, { opacity: { from: 1, to: 0 }}, 0.5);

            // fixes an issue in ie browsers, where the info box will not disappear
            $Y.DOM.setStyle($Y.SELECT('.item-info', newItem, true),'display','block');
            $Y.DOM.setStyle($Y.SELECT('.item-info', oldItems[0], true),'display','none');

            var removeElement = function(){
                /* get the list of elements that has been animated */
                var el = this.getEl(),
                parentnode = el[0].parentNode;

                /* removing every element from the dom, except the last */
                for(var i = 0, len = el.length-1; i <= len; i++){
                    parentnode.removeChild(el[0]);
                }
            };

            fadeOut.onComplete.subscribe(removeElement);

            fadeOut.animate();
            fadeIn.animate();
            // Animation code end //////////////////////////////////////////////
            ////////////////////////////////////////////////////////////////////

            this.currentNode = newNode;
        }

        return this.currentNode;
    };

    carouselTeaser.prototype.changeToNext = function(){
        return this.changeTo(
            $Y.DOM.getNextSibling(this.currentNode)
            || $Y.DOM.getFirstChild(this.queueNode)
        );
    };

    carouselTeaser.prototype.changeToPrevious = function(){
        return this.changeTo(
            $Y.DOM.getPreviousSibling(this.currentNode)
            || $Y.DOM.getLastChild(this.queueNode)
        );
    };

    /* Cycle queue */
    carouselTeaser.prototype.startQueueCycling = function(){
        var timer;
        (function(obj){
            timer = window.setInterval(
                function(){ obj.changeToNext(); },
                obj.timeoutInterval || 7000 //timeout
            );
        })(this);
        return this.timerId = timer;
    };
    carouselTeaser.prototype.stopQueueCycling = function(){
        if(this.timerId){
            window.clearTimeout(this.timerId);
            this.timerId = undefined;
        };
    };


/* ======================================================================
 * = Initializers                                                       =
 * ======================================================================*/
YAHOO.util.Event.onDOMReady(function(){

    if($Y.DOM.inDocument('content-program-teasers')){
        var topteaser = new carouselTeaser('content-program-teasers');
   }

});