var ToggleBox = new Class({Implements:Options,options:{selector:".toggle_box"},
			   initialize:function(op) {
	    this.setOptions(op);
	    $(document.body).getElements(this.options.selector).each(function(item) {
		    var animated = item.getLast();
		    if (animated.match('.open_box')) {
			// Be sure to set the height to auto and overflow to hidden in the stylesheet
			// I was setting it here but it was resizing before the content was completely loaded.
		    } else {
			// Removing the height and overflow settings here, we'll let the stylesheet take care of this
			// this should allow ajax reloads to keep open boxes open
			//animated.setStyles({height: '0px',
			//	    overflow: 'hidden'});
		    }
		    //alert(animated.getScrollSize().y);
		    var activator = item.getFirst();
		    var clickFn = function() {
			var height;
			if (animated.getStyle('height') == '0px') {
			    height = animated.getScrollSize().y;
			} else {
			    height = 0;
			}
			var myFx = new Fx.Tween(animated);
			if (height == 0) {
			    animated.setStyle('overflow','hidden');
			    animated.setStyle('height',animated.getScrollSize().y);
			} else {
			    myFx.addEvent('complete',function(){
				    animated.setStyle('overflow','visible');
				    if (!Browser.Engine.trident) {
					animated.setStyle('height','auto');
				    }
				});
			}
			myFx.start('height',height);
		    };
		    activator.addEvent('click',clickFn);
		});
	}
    });

var current_open_gear = null;
var GearBox = new Class({Implements:Options,options:{selector:".gear"},
			 initialize:function(op) {
	    this.setOptions(op);
	    $(document.body).getElements(this.options.selector).each(function(item) {
		    var animated = item.getLast();
		    animated.setStyles({height: '0px',
				overflow: 'hidden'});
		    var activator = item.getFirst();
		    var y_pos = activator.getPosition().y;
		    var x_pos = activator.getPosition().x;
		    x_pos = -20;
		    y_pos = -20;
		    /*
		    var y_height = animated.getScrollSize().y;
		    var container_height = activator.getParent().getParent().getParent().getScrollSize().y;
		    var box_position = animated.getPosition().y - activator.getParent().getParent().getParent().getParent().getPosition().y;
		    if (box_position + y_height > container_height) {
			y_pos = container_height - y_height - box_position - 10;
		    }
		    */
		    animated.setStyles({'top':y_pos,'left':x_pos});

		    var clickFn = function() {
			var height;
			height = animated.getScrollSize().y;
			animated.tween('height',height);
			if (current_open_gear && current_open_gear != animated) {
			    current_open_gear.tween('height','0');
			}
			current_open_gear = animated;
		    }
		    activator.addEvent('click',clickFn);
		    animated.getElement('.tiny_x').addEvent('click',function() {
			    animated.tween('height',0);
			});
		});
	}
    });