ok2010_ServicesMenu = Class.create({
	/* ServicesMenu
		Smooth transitions from item to item in the services menu,
		without using scriptaculous.
		Tested in ie6, ie7, ie8, opera10.53, safari4.0.5, firefox3.6.3
	*/
	
	currentExpanded: null,	// pointer to the currently expanded item
	lock: null,		// locks further clicks
	expandTimerID: null,	// takes care of smoothness
	collapseTimerID: null,
	toExpand: null,		// element to be expanded smoothly
	toCollapse: null,	// item to be collapsed smoothly
	itemMinimumHeight: null,	// minimum collapsed height (not including padding++)
	itemMaximumHeight: null,	// minimum collapsed height (not including padding++)
	itemExtraHeight: null,		// item's padding + margin + border
	collapseStep: null,			// number of pixels to collapse
	expandStep: null,			// number of pixels to expand
	
	precalcExpand: null,
	precalcCollapse: null,
	
	initialize: function() {
		// the first element is per default expanded
		this.currentExpanded = $$('div.ok2010_servicesmenu').first().down('div.item');
		this.lock = 0;
		this.itemMinimumHeight = 53; //47
		this.itemMaximumHeight = 93;
		this.itemExtraHeight = 14;	// padding-top 2, padding-bottom 2, border-bottom 10
		this.expandStep = 15;
		this.collapseStep = 15;

		// precalculate values to improve smoothness
		this.precalcExpand = this.expandStep - this.itemExtraHeight;
		this.precalcCollapse = this.collapseStep + this.itemExtraHeight;

		$$('div.ok2010_servicesmenu').first().select('div.item').each(function(item){
			
			// create toggle event on each toggle div
			item.down("div.toggle").observe('click', function(event) {
				event.stop();
				this.smoothToggle(event.element());
			}.bindAsEventListener(this));
			
			// show correct toggle image initially
			if (item.hasClassName("collapsed")) {
				item.down("div.toggle").down("img.collapse").addClassName("hidden");
			} else {
				item.down("div.toggle").down("img.expand").addClassName("hidden");
			}
			
			// show the toggle div
			item.down("div.toggle").removeClassName("hidden");
		}.bind(this));
	},

	smoothToggle: function(element) {
		// get item by looking up
		var item = element.up("div.item");

		// check if ok to manipulate items
		if (this.lock == 0) {
			if (this.currentExpanded == null) {
				// all items are collapsed. expand selected
				this.smoothExpand(item);
			} else if (this.currentExpanded.identify() == item.identify()) {
				// collapse the selected item
				this.smoothCollapse(item);
			} else {
				// collapse currentExpanded
				this.smoothCollapse(this.currentExpanded)
				// expand selected
				this.smoothExpand(item);
			}
		}
	},
	
	smoothExpand: function (item) {
		// set up parameters before expanding
		this.lock ++;
		this.toExpand = item;
		this.expandTimerID
			= setInterval("ok2010_servicesMenu.doSmoothExpand();", 50);
	},
	
	doSmoothExpand: function () {
		// do stuff with this.toExpand

		// get total height (including margin/padding/border 14px)
		var h = this.toExpand.getHeight();
		
		if (h - this.itemExtraHeight < this.itemMaximumHeight) {
//		if (this.isOverflowing(this.toExpand)) {
			// keep on increasing height
			this.toExpand.style.height = (h + this.precalcExpand) + "px";
		}
		
		var h = this.toExpand.getHeight();
		if (h - this.itemExtraHeight >= this.itemMaximumHeight) {
//		if (!this.isOverflowing(this.toExpand)) {
			// set final css class
			this.toExpand.removeClassName("collapsed");
			// stop interval and clean up timer
			clearInterval(this.expandTimerID);
			this.expandTimerID = null;
			// show correct toggle images
			this.toExpand.down("div.toggle").down("img.expand").addClassName("hidden");
			this.toExpand.down("div.toggle").down("img.collapse").removeClassName("hidden");
			// clear inline styles added by prototype
 			this.toExpand.style.height = null;
			// point to the current expanded item
			this.currentExpanded = this.toExpand;
			this.toExpand = null;
			// decrease lock counter
			this.lock --;
		}
	},
	
	smoothCollapse: function (item) {
		// set up parameters before collapsing
		this.lock ++;
		this.toCollapse = item;
//		item.style.overflow = "hidden";
		this.collapseTimerID
			= setInterval("ok2010_servicesMenu.doSmoothCollapse();", 50);
	},
	
	doSmoothCollapse: function () {
		// do stuff with this.toCollapse
		
		// get total height (including margin/padding/border 14px)
		var h = this.toCollapse.getHeight();
		
		if (h - this.precalcCollapse > this.itemMinimumHeight) {
			// keep on decreasing height
			this.toCollapse.style.height = (h - this.precalcCollapse) + "px";
		} else {
			// set final css class, and explicitly set height
			this.toCollapse.addClassName("collapsed");
			this.toCollapse.style.height = this.itemMinimumHeight + "px";
			// stop interval and clean up timer
			clearInterval(this.collapseTimerID);
			this.collapseTimerID = null;
			// show correct toggle images
			this.toCollapse.down("div.toggle").down("img.collapse").addClassName("hidden");
			this.toCollapse.down("div.toggle").down("img.expand").removeClassName("hidden");
			// clear inline styles added by prototype
			this.toCollapse.style.height = null;
			// clear currentExpanded pointer if no items are expanded after this
			if (this.currentExpanded && this.toCollapse.identify() == this.currentExpanded.identify()) {
				this.currentExpanded = null;
			}
			this.toCollapse = null;
			this.lock --;
		}
	},
	isOverflowing: function(el) {
		// Determines if the passed element is overflowing its bounds,
		// either vertically or horizontally.
		// Will temporarily modify the "overflow" style to detect this
		// if necessary.
	   var curOverflow = el.style.overflow;
	   if ( !curOverflow || curOverflow === "visible" )
	      el.style.overflow = "hidden";

	   var isOverflowing = el.clientWidth < el.scrollWidth 
	      || el.clientHeight < el.scrollHeight;

	   el.style.overflow = curOverflow;

	   return isOverflowing;		
	}
});
var ok2010_servicesMenu;