var Toggler = Class.create({
	initialize: function(el) {
	    this.toggler = null;           /* Stores a pointer to the the accordion element */  
	    this.contents = null;            /* Array of pointers to the headings and content panes of the toggler */  
	    this.options = null;             /* Allows user to define the names of the css classes */  
	    this.height = 0;              /* Stores the height of the tallest content pane */  
	    this.isAnimating = false;        /* Keeps track of whether or not animation is currently running */  

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

	    this.contents = this.toggler.select('div.'+this.options.contentClass);
	    this.isAnimating = false;
	    this.height = 0;
	
	    this.checkHeight();
	    this.initialHide();
	
	    var clickHandler =  this.clickHandler.bindAsEventListener(this);
	    this.toggler.observe('click', clickHandler);
	},

	/* Determines the height of the tallest content pane */  
	checkHeight: function() {
	    for(var i=0; i<this.contents.length; i++) {
	        if(this.contents[i].getHeight() > this.height) {
	            this.height = this.contents[i].getHeight();
	        }
	    }
	},
	
    /* Hides the panes which are not displayed by default */
	initialHide: function(){
	    for(var i=0; i<this.contents.length; i++){
	            this.contents[i].hide();
	            this.contents[i].setStyle({height: 0});
	    }
	},
	
    /* Tells the animation function which elements to expand */
    expand: function(el){
	    var toExpand = el.next('div.'+this.options.contentClass);
	    toExpand.show();
	    
	    var options = {
	    		duration: 0.5,

	    		scaleFrom: 0,
	    		scaleContent: false,
	    		transition: Effect.Transitions.sinoidal,
	    		scaleMode: {
	            	originalHeight: this.height,
	            	originalWidth: this.toggler.getWidth()
	        	},
	        	scaleX: false,
	        	scaleY: true,

	        	beforeStart: function() {
	        		this.isAnimating = true;
	        		toExpand.previous('div.'+this.options.toggleClass).addClassName(this.options.toggleActive);
	        	}.bind(this),
	        	afterFinish: function() {
	        		toExpand.setStyle({ height: this.height+"px" });
	        		this.isAnimating = false;
	        	}.bind(this)
	    };

	    new Effect.Scale($(toExpand), 100, options);
  
	},
	
    /* Tells the animation function which elements to collapse */
    collapse: function(el){
	    var toCollapse = el.next('div.'+this.options.contentClass);

	    var options = {
		        duration: 0.5,

		        scaleContent: false,
		        transition: Effect.Transitions.sinoidal,
		        scaleX: false,
		        scaleY: true,
		        
		        beforeStart: function() {
            		this.isAnimating = true;
            		toCollapse.previous('div.'+this.options.toggleClass).removeClassName(this.options.toggleActive);
        		}.bind(this),
        		afterFinish: function() {
        			toCollapse.hide();
        			this.isAnimating = false;
        		}.bind(this)
	    };

		new Effect.Scale(toCollapse, 0, options);

	},
	
    /* Determine where a user has clicked and act based on that click */
	clickHandler: function(e){
	    var el = e.element();
	    if(el.hasClassName(this.options.toggleClass) && !el.hasClassName(this.options.toggleActive) && !this.isAnimating) {
	        this.expand(el);
	    }  else if (el.hasClassName(this.options.toggleActive) && !this.isAnimating) {
			this.collapse(el);
		}
    }

});

document.observe("dom:loaded", function(){
	
	toggler = []
	$$('.toggler').each(function(el) {
		toggler.push(new Toggler(el));
	});
});