var user_tools = {
    container: null,
    items: [],
    last_section: null,
    /* eff props */
    delta: null,
    prev_section: null,
    next_section: null,
    step: null,
    target_section_height: null,
    prev_step: null,
    animating: null,
    default_active_section: null,


    init: function(container_id, headings_identificator) {

        if(!document.getElementById || !document.getElementsByClassName) return;

        this.container = document.getElementById(container_id);
        if(!this.container) return;
        this.container.className += ' collapsed';

        var bd = document.getElementsByTagName('body')[0];
        if(bd.className.indexOf('has_JS') == -1) { bd.className += ' has_JS';}

        this.items = document.getElementsByClassName('section', this.container);

        var il = this.items.length;
        this.tab_navigation = document.createElement('ul');
        this.tab_navigation.className = 'tabs_navigation';

        var first_parent = this.items[0].parentNode;

        for( var i = 0; i < il; i++ ){
            var current_section = this.items[i];

            var section_is_active = elementHasClassName(current_section, 'active')
            if(section_is_active) {
                this.default_active_section = i;
            }

            current_section.style.display = 'none';

            var section_last_classname = this.getLastString(current_section.className);

            // var current_heading = document.getElementsByTagName(headings_identificator)[0];
            var current_heading = current_section.getElementsByTagName(headings_identificator)[0];
            if(!current_heading) continue;
            //var current_heading = document.getElementsByClassName('heading', current_section)[0];
            
            
            var li = document.createElement('li');
                if(i == 0) {
                    li.className += ' first-child';
                }
                if(section_is_active) {
                    li.className += ' active';
                }

                li.className += ' ' + section_last_classname;
            var a = document.createElement('a');


            var is_print_section = elementHasClassName(current_section, 'print');
            var is_pdf_section = elementHasClassName(current_section, 'pdf');
            
            if(is_print_section || is_pdf_section) {
                var print_link = current_section.getElementsByTagName('a')[0];
                var href_attribute = print_link.getAttribute('href');
            } else {
                Event.observe(a, 'click', this.onClickListener.bind(this));
                var href_attribute = '#';
            }

            a.setAttribute('href', href_attribute);
            var text = current_heading.firstChild;

            a.appendChild(text);
            li.appendChild(a);
            this.tab_navigation.appendChild(li);
            if(is_pdf_section){
                this.tab_navigation.className += ' has_pdf';
            }
            current_heading.parentNode.removeChild(current_heading);

        }
        var new_heading = document.createElement('h3');
        new_heading.appendChild(document.createTextNode('User tools'));
        new_heading.setAttribute('lang', 'en');

        first_parent.insertBefore(new_heading, this.items[0]);
        first_parent.insertBefore(this.tab_navigation, this.items[0]);


        //flicker issue
        var o = this;
        setTimeout(function() {o.container.className = o.container.className.replace(/loading/, '') }, 50);

        if(this.default_active_section != null) {
            this.toggleSection(this.default_active_section);
        }



    },

    getLastString: function(str) {
        var last_str = null;
        var all_str = str.split(' ');
        last_str = all_str[all_str.length-1];
        return last_str;
    },

    onClickListener: function(e) {

        if(window.event) {
            window.event.returnValue = false;
        } else {
            e.preventDefault();
        }

        var event_target =  window.event ? window.event.srcElement : e.target;
        if(event_target.nodeName.toLowerCase() == 'img') {
            event_target = event_target.parentNode;
        }

        var target_parent = event_target.parentNode;
        //if(target_parent.hasClassName('active')) return;

        if(this.animating) {
            return;
        }
        this.animating = true;


        this.tabsClean();
        target_parent.className += ' active';

        var position = this.getItemPosition(event_target);
        this.toggleSection(position);

    },


    tabsClean: function(){
        var tab_nav_lis = this.tab_navigation.getElementsByTagName('li');
        var il = tab_nav_lis.length;
        for(var i = 0; i < il; i++) {
            var current_li = tab_nav_lis[i];
            current_li.className = current_li.className.replace(/active/, '');
        }
    },

    getItemPosition: function(event_target) {
        var parent_ul = this.getParentUL(event_target);;
        var all_a = parent_ul.getElementsByTagName('a');
        var il = all_a.length;
        for(var i = 0; i < il; i++) {
            var current_item = all_a[i];
            if(current_item == event_target) {
                var position = i;
            }
        }
        return position;
    },

    getParentUL: function(target) {
        return target.parentNode.parentNode;
    },


    toggleSection: function(nr) {

        var section_to_show = this.items[nr];

        if(!this.last_section)  {
            /*
            section_to_show.style.height = 'auto';
            section_to_show.style.overflow = 'visible';
            section_to_show.style.visibility = 'visible';
            section_to_show.style.opacity = 1;
           */

            new Effect.toggle(section_to_show, 'blind', {duration: 0.7})//o: 1
            this.container.className = this.container.className.replace(/collapsed/, '');
            var o = this;
            setTimeout(function() {o.animating = false; }, 700);//0:1000


        } else if(this.last_section == section_to_show) {

            new Effect.toggle(section_to_show, 'blind', {duration: 0.7})//o: 1
            var o = this;
            setTimeout(function() { o.animating = false; o.container.className = o.container.className += ' collapsed'; o.tabsClean()}, 700);//0:1000

        } else {

            this.animate(this.last_section, section_to_show);

        }

        if(this.last_section == section_to_show) {
            this.last_section = null;
        } else {
            this.last_section = section_to_show;
        }
    },

    prepareNext: function() {
            this.prev_section.style.overflow = 'hidden';
            this.prev_section.style.display = 'block';
            this.prev_section.style.visibility = 'hidden';
    },


    animate: function(prev_section, next_section) {
        
        this.prev_section = prev_section;
        this.next_section = next_section;

        var prev_section_height = this.prev_section.offsetHeight;

        this.next_section.style.display = 'block';
        this.next_section.style.visibility = 'hidden';
        this.next_section.style.position = 'absolute';

        var next_section_height = this.next_section.offsetHeight;

        this.next_section.style.display = 'none';
        this.next_section.style.visibility = 'visible';
        this.next_section.style.position = 'static';


        this.delta = next_section_height-prev_section_height;
        this.target_section_height = next_section_height;

        this.container.className +=' animating';

        Effect.Fade(this.prev_section, {to: 0.01, from: 0.5, duration: 0.4, fps: 40});//o: duration: 0.5, fps: 30

        /*var outer = document.createElement('div');
        outer.className='outer'
        var inner = document.createElement('div');
        inner.className='inner'
        outer.appendChild(inner)
        var first_parent = this.items[0].parentNode;
        first_parent.insertBefore(outer, this.items[0]);
        */

        var o = this;
        setTimeout(function(){o.prepareNext()}, 450);//o:800
        setTimeout(function(){o.resize_section()}, 500);//o:900

    },

    resize_section: function() {

        this.step = Math.round(Math.abs(this.delta)/2);//o:2

        /*
        if(this.delta>0) {
            this.delta -= this.step
        } else {
            this.step *= -1;
            this.delta += this.step
        }
        */
        if(this.delta>0) {
        } else {
            this.step *= -1;
        }
        this.delta -= this.step

        //console.log(this.step +':'+this.prev_section.offsetHeight +':'+ this.target_section_height)

        var new_section_height = this.prev_section.offsetHeight+this.step + 'px';
        this.prev_section.style.height = new_section_height;

        var o = this;
        if(this.step > 0 && this.prev_section.offsetHeight<this.target_section_height) {
            setTimeout(function(){o.resize_section()}, 50)
            //console.log('1 '+new Date().getTime())
        } else if(this.step < 0 && this.prev_section.offsetHeight > this.target_section_height) {
            //console.log('2 '+new Date().getTime() + ' : '+this.prev_section.offsetHeight+ ' : '+this.target_section_height)
            setTimeout(function(){o.resize_section()}, 50)
        } else {

            this.prev_section.style.overflow = 'hidden';
            this.prev_section.style.display = 'none';
            this.prev_section.style.height = 'auto';

            this.prev_section.style.visibility = 'visible';//new
            //this.prev_section.style.opacity = 1;//new
            this.prev_section.setStyle({ opacity: 1 });

            var is_ie = typeof(document.all) != 'undefined';
            var opacity = (is_ie) ? "filter" : "opacity";
            
            function changeOpacity(node, percent){
                percent = (is_ie) ? "alpha(opacity=" + percent + ")" : percent/100;
                node.style[opacity] = percent;
            }

            if(isIE){
                changeOpacity(this.prev_section, '100%');
            }

            if(this.next_section.style.visibility == 'hidden') {
                this.next_section.style.visibility = 'visible';
            }
            
                        
            this.next_section.style.display = 'block';
            this.next_section.style.opacity = 0.5;
            Effect.Appear(this.next_section, {duration: 0.4, from: 0.5, to: 0.9999, fps: 40});//o: duration: 0.5, fps: 30
            //Effect.Appear(this.next_section);
            this.container.className = this.container.className.replace(/animating/, '');

            setTimeout(function() {o.animating = false; }, 400);

        }

        this.prev_step = this.step;

    }

}