/* Simple Accordion Script 
 * Requires Prototype and Script.aculo.us Libraries
 * By: Brian Crescimanno <brian.crescimanno@gmail.com>
 * http://briancrescimanno.com
 * This work is licensed under the Creative Commons Attribution-Share Alike 3.0
 * http://creativecommons.org/licenses/by-sa/3.0/us/
 */

if (typeof Effect == 'undefined')
  throw("You must have the script.aculo.us library to use this accordion");

var Accordion = Class.create({

    initialize: function(id, defaultExpandedCount) {
        if(!$(id)) throw("Attempted to initalize accordion with id: "+ id + " which was not found.");
        this.accordion = $(id);
        this.options = {
            toggleClass: "accordion-toggle",
            toggleActive: "accordion-toggle-active",
            contentClass: "accordion-content"
        }

        this.contents = this.accordion.select('div.'+this.options.contentClass);

        this.isAnimating = false;
        this.maxHeight = 0;
        this.current = defaultExpandedCount ? this.contents[defaultExpandedCount-1] : this.contents[0];
        this.toExpand = null;

        // this.checkMaxHeight();
        this.initialHide();
        this.attachInitialMaxHeight();

        var clickHandler =  this.clickHandler.bindAsEventListener(this);
        this.accordion.observe('click', clickHandler);

        // this.accordion.observe('mouseover', function(e) {
        //     el = null;
        //     if(e.element().hasClassName('accordion-content')) {
        //         el = e.element().previous('div');
        //         if(el.hasClassName('accordion-toggle-active')) {
        //             el = null;
        //         }
        //         if(el != null) {
        //            el.addClassName('hover');
        //         }
        //     } else if(e.element().hasClassName('accordion-toggle-active')) {
        //         el = null;
        //     } else if(e.element().hasClassName('accordion-toggle')) {
        //         el = e.element();
        //         el.addClassName('hover');
        //     } else {
        //         el = e.element().parentNode.parentNode;
        //         if(el.down('div')) {
        //             if(el.down('div').hasClassName('accordion-toggle-active')) {
        //                 el = null;
        //             }
        //             if(el != null) {
        //                el.addClassName('hover');
        //             }
        //         }
        //     }
        //  });
        //  this.accordion.observe('mouseout', function(e) {
        //     if(e.element()) {
        //         if(e.element().hasClassName('hover')) {
        //             e.element().removeClassName('hover');
        //         }
        //     }
        //     if(e.element().parentNode) {
        //         if(e.element().parentNode.hasClassName('hover')) {
        //             e.element().parentNode.removeClassName('hover');
        //         }
        //     }
        //     if(e.element().previous('div')) {
        //         if(e.element().previous('div').hasClassName('hover')) {
        //             e.element().previous('div').removeClassName('hover');
        //         }
        //     }
        //  });
    },

    expand: function(el) {
        if(el != undefined) {
            this.toExpand = el.next('div.'+this.options.contentClass);
            if(this.current != this.toExpand){
                // Stop Slider from sliderGallery
                if(sliderGallery != null) {
                    window.clearInterval(sliderGallery.sliderVal);
                    window.clearTimeout(sliderGallery.sliderTimeout)
                    sliderGallery.stopSlideshow();
                }

                this.animate();
                this.toggleSymbol(el);
                this.tvLoad(el.down(1).value);
            } else {
                for(var i=0; i<this.contents.length; i++){
                    if(this.contents[i] == this.current) {
                        this.expand(this.contents[0].previous('a'));
                        this.toggleSymbol(this.current);
                    }
                }
            }
        }
    },

    checkMaxHeight: function() {
        for(var i=0; i<this.contents.length; i++) {
            if(this.contents[i].getHeight() > this.maxHeight) {
                this.maxHeight = this.contents[i].getHeight();
                
            }
        }
    },

    attachInitialMaxHeight: function() {
		this.current.previous('a.'+this.options.toggleClass).addClassName(this.options.toggleActive);
        if(this.current.style.height != 'auto') this.current.style.height = 'auto';
    },

    clickHandler: function(e) {
        var el = e.element().parentNode;
        if(Element.hasClassName(el, this.options.toggleClass) && !this.isAnimating) {
            this.expand(el);
            if(el.parentNode.hasClassName('hover')) {
                el.parentNode.removeClassName('hover');
            }
        }
        if(Element.hasClassName(el, this.options.contentClass)) {
            this.expand(el.previous('div'));
            if(el.previous('a').parentNode.hasClassName('hover')) {
                el.previous('a').parentNode.removeClassName('hover');
            }
        }
    },

    initialHide: function() {
        for(var i=0; i<this.contents.length; i++){
            if(this.contents[i] != this.current) {
                this.contents[i].hide();
                // this.contents[i].setStyle({height: 0+"px"});
            }
            else {
                this.contents[i].up(0).addClassName("active");
                this.tvLoad(this.contents[i].up(0).down(2).value);
            }
        }
    },

    toggleSymbol: function(el) {
        el.up(0).addClassName("active");
        this.current.up().removeClassName("active");
    },

    tvLoad: function(action) {
        new Ajax.Request(action, {
            asynchronous: true,
            onSuccess: function(response) {
                $('tvcontent').innerHTML = '';
                $('tvcontent').insert(response.responseText);
            }
        });
    },

    animate: function() {
        var height = this.toExpand.getHeight();
        var effects = new Array();
        var minHeight = 0;
        var options = {
            sync: true,
            scaleFrom: minHeight,
            scaleContent: false,
            transition: Effect.Transitions.sinoidal,
            scaleMode: {
                originalHeight: this.toExpand.getHeight(),
                originalWidth: this.accordion.getWidth()
            },
            scaleX: false,
            scaleY: true
        };
        
        this.toExpand.setStyle({height:0});
        this.toExpand.show();
        effects.push(new Effect.Scale(this.toExpand, 100, options));

        options = {
            sync: true,
            scaleContent: false,
            transition: Effect.Transitions.sinoidal,
            scaleX: false,
            scaleY: true
        };
        
        //this.current.setStyle({height:'auto'});
        
        effects.push(new Effect.Scale(this.current, minHeight, options));

        var myDuration = 0.35;

        new Effect.Parallel(effects, {
            duration: myDuration,
            fps: 50,
            queue: {
                position: 'end',
                scope: 'accordion'
            },
            beforeStart: function() {
                this.isAnimating = true;
                this.current.previous('a.'+this.options.toggleClass).removeClassName(this.options.toggleActive);
                this.toExpand.previous('a.'+this.options.toggleClass).addClassName(this.options.toggleActive);
            }.bind(this),
            afterFinish: function() {
                this.current.hide();
                this.current.setStyle({height: "auto"});
                this.current = this.toExpand;
                this.isAnimating = false;
            }.bind(this)
        });
    }
});