// fancy menu
var SlideList = new Class({
	Implements:[Options,Events],
	
	options:{
		transition:Fx.Transitions.Sine.easeInOut,
		duration: 500,
		wait: false,
		onClick: $empty
	},

	initialize: function(menu, options) {
		this.setOptions(options);
		
		this.menu = $(menu), this.current = this.menu.getElement('li.current');
		
		$$(this.menu.getElements('li')).addEvents({
			'mouseover':this.moveBg.bind(this),
			'mouseout':this.moveBg.bind(this,false),
			'click':this.clickItem.bind(this)
		});
				
		this.back = new Element('li',{
			'class':'background',
			morph:this.options
		}).adopt(new Element('div',{'class':'left'})).inject(this.menu);
		if(this.current) this.setCurrent(this.current);
	},
	
	setCurrent: function(el, effect){
		this.back.setStyles({left: (el.offsetLeft), width: (el.offsetWidth)});
		(effect) ? this.back.get('morph').start({'opacity':[0,1]}) : this.back.setStyle('opacity',1);
		this.current = el;
	},

	clickItem: function(event) {
		var item = $(event.target);
		this.setCurrent(item, true);
		this.fireEvent('onClick',[new Event(event), item]);
	},

	moveBg: function(to){
		if(!this.current) return;
		if(to){
			to = $(to.target);
		}else{
			to = this.current;
		}
		this.back.get('morph').start({
			left: to.offsetLeft,
			width: to.offsetWidth
		});
	}
});


window.addEvent('domready', function(){

// smooth rollover
/*
	First image class is "baseImage"
	Rollover image class is "overImage"
	Note: baseImage must be on top of overImage
*/	

	$(document.body).getElements('.rolloverlink').addEvents({
	
		mouseenter: function(){
			$(this).getElement('.baseImage').fade('out');
   	},
		mouseleave: function(){
			$(this).getElement('.baseImage').fade('in');
   	}
   	
	});

// toggler

	//list of target elements
	var list = $$('#content div.toggle-content');
	//list elements to be clicked on
	var headings = $$('#content a.toggler');
	//array to store all of the collapsibles
	var collapsibles = new Array();
	
	headings.each( function(heading, i) {
	
			//for each element create a slide effect
			var collapsible = new Fx.Slide(list[i], {
					duration: 500,
					transition: Fx.Transitions.linear
			});
	
			//and store it in the array
			collapsibles[i] = collapsible;
	
			//add event listener
			heading.onclick = function(){
					collapsible.toggle();
					return false;
			}
	
			//collapse all of the list items
			collapsible.hide();
	
	}); 
	});
	
function clearInputText(el) {
  if (el.defaultValue==el.value) el.value = ""
}