document.documentElement.className = 'js-enabled';
window.addEvent('domready', function(){
    $$('div.detalle-caso div.antes ul').each(function(el){
       new Cambra.Carrusel(el);
    });    
});

(function(){
    // Mootools sin conflicto
    var $ = document.id;
    
    // empaquetamos...
    this.Cambra = this.Cambra || {};
    
    Cambra.Carrusel = new Class({
        Implements: Options,
        options: {
            strings: {
                ES: {
                    pagerPreviousText: 'Anterior',
                    pagerNextText: 'Siguiente'
                },
                EN: {
                    pagerPreviousText: 'Previous',
                    pagerNextText: 'Next'
                }
            },
            defaultLanguage: 'es',
            
            divControlsClass: 'pager',
            pagerPreviousClass: 'prev',
            pagerNextClass: 'next',
            hideItemClass: 'oculto-js',
            disabledClass: 'disabled'
        },
        initialize: function(element, options){
            this.element = element;
            this.setOptions(options);
            this.getDocumentLang();
            this.lang == 'es' ? this.strings = this.options.strings.ES : this.strings = this.options.strings.EN;
            this.addControls();
        },
        getDocumentLang: function(){
            this.lang = $$('html')[0].get('xml:lang') || $$('html')[0].get('lang');
            if(!this.lang) this.lang = this.options.defaultLanguage;
            return this.lang;
        },
        addControls: function(){
            if(this.isMultiple(this.element)){
                var divControls = new Element('div',{
                    'class': this.options.divControlsClass
                });
                var pagerPrevious = new Element('a',{
                    'class': this.options.pagerPreviousClass,
                    'href': '#',
                    'text': this.strings.pagerPreviousText,
                    'title': this.strings.pagerPreviousText
                }).addClass(this.options.disabledClass);
                var pagerNext = new Element('a',{
                    'class': this.options.pagerNextClass,
                    'href': '#',
                    'text': this.strings.pagerNextText,
                    'title': this.strings.pagerNextText
                });
                divControls.adopt(pagerPrevious, pagerNext);
                this.element.getParent().grab(divControls, 'bottom');
                this.initPager(pagerPrevious, pagerNext);
            }
        },
        initPager: function(prev, next){
            var oculto = this.options.hideItemClass;
            var disabled = this.options.disabledClass;
            var ul = this.element;
            

            next.addEvent('click', function(ev){
                ev.stop();                    
                if(next.hasClass(disabled)) return;            
                var current = ul.getElement('li:not(.'+oculto+')');
                
                if(prev.hasClass(disabled)) prev.removeClass(disabled);                
                if(!current.getNext().getNext()){
                    next.addClass(disabled);
                }
                current.getNext().removeClass(oculto);
                current.addClass(oculto);                                
            });    


            prev.addEvent('click', function(ev){
                ev.stop();
                if(prev.hasClass(disabled)) return;
                var current = ul.getElement('li:not(.'+oculto+')');
                
                if(next.hasClass(disabled)) next.removeClass(disabled);
                if(!current.getPrevious().getPrevious()){
                    prev.addClass(disabled);
                }
                current.getPrevious().removeClass(oculto);
                current.addClass(oculto);
            });    

        },
        isMultiple: function(element){
            return (element.getChildren().length > 1);            
        }
    });        
})();