/*
 * Slideshow gallery M&P CMS
 * Autor: Michał Szwed
 * Wszystkie prawa zastrzeżone
 */
var Slideshow = new Class({
    options : {
        class_el : '.gp',
        auto : false,    //auto-slide i.e. 2 = 2s,
        active_photo : false, //kliknięcie w zdjęcie przewija
        padding : 0,          //wcięcie
        arrows : true,        //strzalki
        buttons : true,        //przyciski numeryczne
        effect : 'slide'        //slide || diffuse
    },
    zindex : 0,  
    width : 0,
    pause : false,
    current : false,
    direction : false,
    in_move : false,
    buttons : false,
    active : 1,
    Implements : Options,
    initialize : function(gallery, options) {
        this.gallery = gallery;
        this.container = gallery.getElement('.gallery_container');
        this.setOptions(options);

        if(!this.container)
            return;
        
        
        if(this.container.getElements(this.options.class_el).length < 2)
            return;

        this.initPhotos();


        if(this.options.buttons)
            this.initButtons();

        if(this.options.arrows)
            this.initArrows();

        if(this.options.auto)
            this.auto();
        

    },
    initPhotos : function() {
        
        this.width = this.container.getComputedSize().width;

        var i = 1;
        this.container.getElements(this.options.class_el).each(function(el){
            el.setStyles({
                'position' : 'absolute'
            });
            
            el.addClass('slideshow_element_' + i);
            ++i;
            
            if(this.options.active_photo)
                el.getElement('img').addEvent('click', function(){
                    this.next(true);
                }.bind(this));            
        }.bind(this));

        this.current = this.container.getFirst(this.options.class_el);

        this.jumpTo(this.current, 1, false);
    },
    initArrows : function() {
        
        new Element('div', {
            'class' : 'arrow prev'
        }).inject(this.gallery).addEvent('click', function(e){
            this.prev();
            e.preventDefault();
        }.bind(this));

        new Element('div', {
            'class' : 'arrow next'
        }).inject(this.gallery).addEvent('click', function(e){
            this.next(true);
            e.preventDefault();
        }.bind(this));


    },
    initButtons : function()
    {
        var buttonsContainer = new Element('div', {
            'class' : 'buttons'
        });
        
        var ul = new Element('ul').inject(buttonsContainer);

        var i = 1;
        this.container.getElements(this.options.class_el).each(function(el){
            var li = new Element('li', {
                'html' : '<span>' + i + '</span>',
                'class' : (i == 1 ? 'active ' : '') + 'slideshow_button_' + i
            });
            li.addEvent('click', function(){
                if(el != this.current)
                {
                    this.jumpTo(el, li.get('class').substr(17).toInt() <= this.active ? -1 : 1);
                }
            }.bind(this));
            li.inject(ul);

            ++i;
        }.bind(this));

        buttonsContainer.inject(this.gallery);
        this.buttons = buttonsContainer;

    },
    jumpTo : function(el, direction, useEffect) {

        if(this.in_move)
            return;


        this.current = el;      
        
        el.setStyle('z-index', (++this.zindex)%99999);
        var start;
        var fx;
        
        if(useEffect != false)
        {
            this.in_move = true;              
            switch(this.options.effect)
            {                
                case "diffuse":
                    el.setStyle("opacity", 0);
                    fx = new Fx.Tween(el, {
                        duration: 'long'
                    }).start('opacity', 0, 1);           
                    break;
                    
                default: //slide
                    if(direction == 1)
                        start = -this.width;
                    else
                        start = this.width;

                    el.setStyle('margin-left', start);

                    fx = new Fx.Tween(el, {
                        duration: 'long'
                    }).start('margin-left', start, 0);                
                    break;
            }
            
           
            fx.addEvent('complete', function() {
                this.in_move = false;
            }.bind(this));
            
        }
        


        //przyciski - aktywacja odpowiedniego
        if(this.options.buttons)
        {
            var classess = el.get('class').split(' ');
            for(var j=0;j<classess.length;++j)
            {
                if(classess[j].substr(0,17) == 'slideshow_element' && this.buttons)
                {
                    this.buttons.getElements('li').each(function(el){
                        el.removeClass('active');
                    });
                    this.active = classess[j].substr(18);
                    this.buttons.getElement('.slideshow_button_' + this.active).addClass('active');
                }
            }
                
        }


    },
    prev : function() {
        this.direction = -1;

        var prev = this.current.getPrevious(this.options.class_el);
        if(prev)
            this.jumpTo(prev, -1);
        else
            this.jumpTo(this.container.getLast(this.options.class_el), -1);
    },
    next : function(force) {
        this.direction = 1;

        if(this.pause && !force)
            return;

        var next = this.current.getNext(this.options.class_el);
        if(next)
            this.jumpTo(next, 1);
        else
            this.jumpTo(this.container.getFirst(this.options.class_el), 1);
        
    },
    auto : function() {
        this.next.periodical(this.options.auto*1000,this);
        var events = {
            'mouseover': function(){
                this.pause=true;
            }.bind(this),
            'mouseout': function(){
                this.pause=false;
            }.bind(this)
        };
        this.gallery.addEvents(events);
        
    }
});