﻿
// start Carousel
var Carousel = Class.create ({
    initialize: function(content,items,lnkPrev,lnkNext,pagiLinks,options)
    {
		this.content = content;
		this.items = items;
			this.length = this.items.size();
		this.lnkPrev = lnkPrev;
		this.lnkNext = lnkNext;
		this.pagiLinks = pagiLinks;
		this.options = Object.extend(
		{
			initialIndex: 0,
			itemsPerGroup: 5,
			speed: 0.8,
			activeItemClassName: 'active', //used for testing
			disabledLinkClassName: 'disabled',
			autoRotate: false
		}, options || {});
		if (this.options.initialIndex >= this.length)
		{
			this.options.initialIndex = 0;
		}
		this.groups = (this.length / this.options.itemsPerGroup).ceil();
		this.scrollAmt = (this.items[0].getWidth() * this.options.itemsPerGroup) * -1;
		this.groupIndex = (((this.options.initialIndex + 1) / this.options.itemsPerGroup).ceil()) -1;
		this.isAnimating = false;
        this.lnkPrev.observe('click', this.__ClickLnkPrev.bindAsEventListener(this));
        this.lnkNext.observe('click', this.__ClickLnkNext.bindAsEventListener(this));
		var boundLinkClick = this.__ClickPagiLnk.bindAsEventListener(this);
		this.pagiLinks.invoke('observe', 'click', boundLinkClick);

		//set initial position
		this.MoveIt(this.groupIndex);

        // show different item every 5 seconds
        if (this.options.autoRotate) {
            this.interval = setInterval(function() {
                this.RotateItems();
            } .bind(this), 5000);
        }
    },
    __ClickLnkPrev: function(e)
    {
        e.stop();
        clearInterval(this.interval); // clear timer once user interacts with carousel
        if ((this.groupIndex != 0) && !this.isAnimating)
        {
			this.groupIndex = this.groupIndex -1;
			this.MoveIt(this.groupIndex);
        }
    },
    __ClickLnkNext: function(e)
    {
        e.stop();
        clearInterval(this.interval); // clear timer once user interacts with carousel
        if ((this.groupIndex != this.groups -1) && !this.isAnimating)
        {
			this.groupIndex = this.groupIndex +1;
			this.MoveIt(this.groupIndex);
        }
    },
    __ClickPagiLnk: function(e)
    {
        e.stop();
        clearInterval(this.interval); // clear timer once user interacts with carousel
        var el = e.findElement('a'); //works for anchor text and img!
		if (!this.isAnimating)
		{
	        for (var i=0; i<this.length; i++)
	        {
		        if (this.pagiLinks[i] == el)
		        {
			        this.groupIndex = i;
			        this.MoveIt(i);
			        break;
		        }
	        }
		}
    },
    RotateItems: function() {
        this.options.initialIndex ++;
        if (this.options.initialIndex == this.length) {
            this.options.initialIndex = 0;
        }
        this.MoveIt(this.options.initialIndex);
    },
    MoveIt: function(index)
    {
		this.moveEffect = new Effect.Move(this.content, {
			x: this.scrollAmt * index,
			y: 0,
			mode: 'absolute',
			fps: 100,
			duration: this.options.speed,
			transition: Effect.Transitions.easeOutExpo,
            beforeStart: function() {
                this.isAnimating = true;
                this.updateLinks();
            }.bind(this),
            afterFinish: function() {
                this.isAnimating = false;
            }.bind(this)
		});
        for (var i=0; i<this.length; i++)
        {
	        if (i == index)
	        {
		        this.pagiLinks[i].up().addClassName(this.options.activeItemClassName);
	        } else {
	            this.pagiLinks[i].up().removeClassName(this.options.activeItemClassName);
	        }
        }
    },
    updateLinks: function()
    {
		this.lnkPrev.removeClassName(this.options.disabledLinkClassName);
		this.lnkNext.removeClassName(this.options.disabledLinkClassName);
        if (this.groupIndex == 0)
        {
			this.lnkPrev.addClassName(this.options.disabledLinkClassName);
        }
        if (this.groupIndex == this.groups -1)
        {
			this.lnkNext.addClassName(this.options.disabledLinkClassName);
        }
    }
});
// end Carousel

