/**
 * İçeriği kaydırmaya yarayan MooTools plugini.
 * Örnek kullanım için ana sayfadaki kayan içeriğe bakınız.
 *
 * @author Fatih Tolga Ata
 * @version 1.0
 */

var ContentSlider = new Class({
    Implements: [Events, Options],
    options: {
        itemSelector: '.item',
        thumbSelector: '.thumb',
        duration: 8000,
        width: 625,
        height: 300,
        thumbWidth: 100,
        thumbHeight: 50,
        slideTransition: Fx.Transitions.Expo.easeOut,
        slideDuration: 500
    },
    mouseOvered: false,
    initialize: function(container, thumbContainer, options){
        this.setOptions(options);
        this.container = $(container);
        this.container
            .setStyles({
                width: this.options.width,
                height: this.options.height,
                overflow: 'hidden'
            })
            .addEvent('mouseenter', function(e) {
                this.mouseOvered = true;
            }.bind(this))
            .addEvent('mouseleave', function(e) {
                this.mouseOvered = false;
            }.bind(this));

        //itemleri alıp sliderContainer içine enjecte edelim.
        this.items = this.container.getElements(this.options.itemSelector);
        //En sona ulaştığında tekrar başa pürüzsüz geçebilmesi için en başa en son itemin kopyasını atayacaz.
        this.items.unshift(this.items[this.items.length-1].clone());

        //Kayacak olan içerik taşıyıcısı
        //left'i width olarak atadık çünkü ileride en başa en sondaki itemin kopyasını atayacağız.
        this.slideContainer = new Element("div", {
            'styles': {
                position: 'relative',
                left: -this.options.width,
                top: 0,
                margin: 0,
                padding: 0,
                overflow: 'hidden',
                width: this.items.length * this.options.width
            }
        })
        .inject(this.container);

        this.items.each(function(item){
            item.setStyles({
                position: 'relative',
                width: this.options.width,
                height: this.options.height,
                overflow: 'hidden',
                display: 'block',
                visibility: 'visible',
                //opacity: 0.3,
                'float': 'left'
            });
            item.inject(this.slideContainer);
        }, this);

        //en sona thumbnailleri alacaz.
        if ($chk(thumbContainer))
        {
            this.thumbContainer = $(thumbContainer);
            this.thumbs = [];
            this.thumbsInner = this.thumbContainer.getElements(this.options.thumbSelector);
            var index = 0;
            var self = this;
            this.thumbsInner.each(function(thumb){
                var thumbBox = new Element('div', {
                    'class': 'thumb-container',
                    'styles': {
                        position: 'relative',
                        overflow: 'hidden',
                        display: 'block',
                        visibility: 'visible',
                        'float': 'left',
                        'opacity': 0.5
                    }
                })
                .addEvent('click', function(e) {
                    self.moveTo(this.index+1);
                })
                .inject(this.thumbContainer);
                thumbBox.index = index;
                this.thumbs.push(thumbBox);

                index++;

                thumb.setStyles({
                    width: this.options.thumbWidth,
                    height: this.options.thumbHeight
                }).inject(thumbBox);
            }, this);

            if (this.thumbs.length > 0)
                this.thumbs[0].setStyle('opacity', 1);
        }

        //Timer'ı ayarlayalım'
        this.onTimer.periodical(this.options.duration, this);

        this.slideFx = new Fx.Tween(this.slideContainer, {
            duration: this.options.slideDuration,
            transition: this.options.slideTransitions
        });
    },
    onTimer: function(){
        if (this.mouseOvered)
            return;
        this.slideTo(this.activeItem+1);
    },
    activeItem: 1, //0'ncı sırada en sondaki itemin kopyası var.
    slideTo: function(itemId){
        this.activeItem = itemId;
        var left = this.slideContainer.getStyle('left').toInt();
        this.slideFx.start('left', left-this.options.width).chain(function(){
            //En son eleman ise çaktırmadan başa geçecez.
            if (this.activeItem >= this.items.length-1)
            {
                this.activeItem = 0;
                this.slideFx.cancel();
                this.slideFx.set('left', 0);
            }
        }.bind(this));
        this.thumbs.each(function(thumb){
            thumb.setStyle('opacity', 0.5);
        });
        this.thumbs[itemId-1].setStyle('opacity', 1);
    },
    moveTo: function(itemId){
        this.activeItem = itemId;
        var left = 0;
        if (this.activeItem < this.items.length-1)
        {
            left = -(this.activeItem*this.options.width);
        }
        else
            this.activeItem=0;
        this.slideFx.cancel();
        this.slideFx.set('left', left);
        this.thumbs.each(function(thumb){
            thumb.setStyle('opacity', 0.5);
        });
        this.thumbs[itemId-1].setStyle('opacity', 1);
    }
});