﻿	function SimpleCarousel(carouselId, listId, itemWidth) {
	
	    this.carouselItems = YAHOO.util.Dom.getChildren(carouselId);
	    this.listItems = YAHOO.util.Dom.getChildren(listId);
	    this.numVisible = this.carouselItems.length;
	    this.itemWidth = itemWidth;
	    this.firstIndex = 0;
	    this.firstDataIndex = 0;

        // Initialize the carousel by injecting the HTML for each item 
        this.ctor = function() {
		    for (var i = 0; i < this.numVisible; i++) {
		        this.carouselItems[i].innerHTML = this.listItems[i].innerHTML;
    		}
        };
        
        // Calculates the new left value of an item based on its original position on the control
        this.calcItemLeft = function(itemIndex, posIndex) {
            var left = itemIndex * -this.itemWidth;
            left += this.itemWidth * posIndex;
            return left;
        };    		
		
	    this.finishScrollRight = function(itemIndex, nextIndex) {
	        var destX = this.calcItemLeft(itemIndex, 3);
	        
	        YAHOO.util.Dom.setStyle(this.carouselItems[itemIndex], "opacity", 0);
	        YAHOO.util.Dom.setStyle(this.carouselItems[itemIndex], "display", "");
	        YAHOO.util.Dom.setStyle(this.carouselItems[itemIndex], "left", destX + "px");
	        this.carouselItems[itemIndex].innerHTML = this.listItems[nextIndex].innerHTML;

	        var myAnim = new YAHOO.util.Anim(this.carouselItems[itemIndex], {
                opacity: { to: 1 }
                }, 0.2, YAHOO.util.Easing.easeIn);
                
            myAnim.onComplete.subscribe(function(obj) {
					if (this.getEl().style.filter)
						this.getEl().style.filter = "";
				});
				
            myAnim.animate();
	    };
	    
	    this.scrollRight = function() {
	        // Fade out the first item quickly
            var myAnim = new YAHOO.util.Anim(this.carouselItems[this.firstIndex], {
                opacity: { to: 0 }
                }, 0.2, YAHOO.util.Easing.easeIn);
            myAnim.animate();
            
            // Scroll all of the items to the left (skipping the first item)
	        var itemIndex = this.firstIndex;
	        var nextIndex = this.firstDataIndex;
	        for (var i = 1; i < this.numVisible; i++) {
	            itemIndex++;
	            if (itemIndex >= this.numVisible)
	                itemIndex = 0;
	            
	            nextIndex++;
	            if (nextIndex >= this.listItems.length)
	                nextIndex = 0;
	            
	            var destX = this.calcItemLeft(itemIndex, i - 1);
	            myAnim = new YAHOO.util.Anim(this.carouselItems[itemIndex], {
                    left: { to: destX }
                    }, 0.5, YAHOO.util.Easing.easeIn);
                myAnim.animate();
	        }
	        
	        // Calculate the information for the new item
	        itemIndex++;
	        if (itemIndex >= this.numVisible)
	            itemIndex = 0;
	        
	            nextIndex++;
	            if (nextIndex >= this.listItems.length)
	                nextIndex = 0;
	            
	        // Finish the scrolling
	        myAnim.carousel = this;
	        myAnim.itemIndex = itemIndex;
	        myAnim.nextIndex = nextIndex;
	        myAnim.onComplete.subscribe(function() { this.carousel.finishScrollRight(this.itemIndex, this.nextIndex); });
            
            this.firstDataIndex++;
            if (this.firstDataIndex >= this.listItems.length)
                this.firstDataIndex = 0;
            
            // Setup the firstIndex to point to the next item
	        this.firstIndex++;
	        if (this.firstIndex >= this.numVisible)
	            this.firstIndex = 0;
	    };
	    
	    this.finishScrollLeft = function(itemIndex, nextIndex) {
	        var destX = this.calcItemLeft(itemIndex, 0);
	        
	        YAHOO.util.Dom.setStyle(this.carouselItems[itemIndex], "opacity", 0);
	        YAHOO.util.Dom.setStyle(this.carouselItems[itemIndex], "display", "");
	        YAHOO.util.Dom.setStyle(this.carouselItems[itemIndex], "left", destX + "px");
	        this.carouselItems[itemIndex].innerHTML = this.listItems[nextIndex].innerHTML;

	        var myAnim = new YAHOO.util.Anim(this.carouselItems[itemIndex], {
                opacity: { to: 1 }
                }, 0.2, YAHOO.util.Easing.easeIn);
            myAnim.animate();
	    };
	    
	    this.scrollLeft = function() {
	        var lastIndex = this.firstIndex;
	        for (var i = 0; i < this.numVisible - 1; i++) {
	            lastIndex++;
	            if (lastIndex >= this.numVisible)
	                lastIndex = 0;
	        }
            
            var myAnim = new YAHOO.util.Anim(this.carouselItems[lastIndex], {
                opacity: { to: 0 }
                }, 0.2, YAHOO.util.Easing.easeIn);
            myAnim.animate();
            
	        var itemIndex = this.firstIndex;
	        var nextIndex = this.firstDataIndex;
	        for (var i = 0; i < this.numVisible - 1; i++) {
	            
	            var destX = this.calcItemLeft(itemIndex, i + 1);
	            myAnim = new YAHOO.util.Anim(this.carouselItems[itemIndex], {
                    left: { to: destX }
                    }, 0.8, YAHOO.util.Easing.easeIn);
                myAnim.animate();
                
	            itemIndex++;
	            if (itemIndex >= this.numVisible)
	                itemIndex = 0;
	        }
	        
            nextIndex--;
            if (nextIndex < 0)
                nextIndex = this.listItems.length - 1;
                
	        myAnim.carousel = this;
	        myAnim.itemIndex = itemIndex;
	        myAnim.nextIndex = nextIndex;
	        myAnim.onComplete.subscribe(function() { this.carousel.finishScrollLeft(this.itemIndex, this.nextIndex); });
            
	        this.firstIndex--;
	        if (this.firstIndex < 0)
	            this.firstIndex = this.numVisible - 1;
	        
	        this.firstDataIndex--;
	        if (this.firstDataIndex < 0)
	            this.firstDataIndex = this.listItems.length - 1;
	    };
	    
	    this.ctor();
	}
