var ISVSMainmenu = new Class({
	actElement: null,
	actElementC: null,
	actElementM: null,
	
	getOptions: function(){
		return {
			name_start: '#999999',
			name_end: '#640031',
			arrow_top_start: 460,
			arrow_top_end: 486,
			transition: Fx.Transitions.Quad.easeInOut,			
			duration: 500
		};
	},
	
	initialize: function() {
		this.setOptions(this.getOptions(), {});
		
		this.buildColorHover();
		this.setActiveItem();
	},
	
	buildColorHover: function() {
		$('mainmenu').getElements('li').each(function(el) {
												if(!el.hasClass('active')) {
													el.getElement('span').setStyle('color', this.options.name_start);
													
													el.addEvent('click', function(e) { 
																				  	//get element
																				  	var elem = this.getBaseElement(new Event(e).target);
																					this.setActiveItem(elem);
																				  }.bind(this));
													
													el.addEvent('mouseenter', function(e) {
														//get element
														var elem = this.getBaseElement(new Event(e).target);
														
														//trigger Arrow-Slide
														this.handleArrowSlide(elem);
														
														//get the name-element
														var name = elem.getElement('span');
														//check for namefade
														if(name.fx) {
															name.fx.stop();
															name.fx = null;
														}
														//fade name
														name.fx = new Fx.Style(name, 
																		 'color', 
																		 {duration: this.options.duration, 
																			transition: this.options.transition,
																			onComplete: function(){ name.fx = null; }
																		 }
																	 ).start(this.options.name_end);
													}.bind(this));
													
													el.addEvent('mouseleave', function(e) {
														//get element
														var elem = this.getBaseElement(new Event(e).target);
														
														//get the name-element
														var name = elem.getElement('span');
														
														//check for namefade
														if(name.fx) {
															name.fx.stop();
															name.fx = null;
														}
														//fade name
														name.fx = new Fx.Style(name, 
																		 'color', 
																		 {duration: this.options.duration, 
																			transition: this.options.transition,
																			onComplete: function(){ name.fx = null; }
																		 }
																	 ).start(this.options.name_start);
														//reset Arrow-Slide
														this.handleArrowSlide();
														
													}.bind(this));
												}													 
											}.bind(this));
	},
	
	setActiveItem: function(ela) {
		if(!ela) {
			var ela = null;
			$('mainmenu').getElements('li').each(function(el) {
													if(el.hasClass('active')) {
														ela = el;
													}
												 });
		}
		if(!ela) return;
		this.actElement = ela;
		this.actElementC = this.getElementCenterX(ela);
		this.actElementM = this.getElementMeasurements(ela);
		
		if(!$('mmActivityArrow')) {
			this.buildActivityArrow();
		}
	},
	
	buildActivityArrow: function() {
		var aArrow = new Element('div', {'id':'mmActivityArrow'});
		//aArrow.setStyles({'top':(elm_meas.top-10)+'px', 'left':arrowC+'px'});
		aArrow.setStyles({'top':(this.options.arrow_top_start)+'px', 'left':this.actElementC+'px'});
		//fade name
		aArrow.fxIn = new Fx.Style(aArrow, 
						 'top', 
						 {duration: this.options.duration, 
							transition: this.options.transition,
							onComplete: function(){ aArrow.fxIn = null; }
						 }
					 ).start(this.options.arrow_top_end);
		
		
		aArrow.injectInside($('iswrapper'));
	},
	
	handleArrowSlide: function(el) {
		if(!$('mmActivityArrow')) return;
		
		//get instance
		var arrowI = $('mmActivityArrow');
		
		//do directions
		if(el) {
			var newC = this.getElementCenterX(el);
		} else {
			var newC = this.actElementC;
		}
		
		//check for namefade
		if(arrowI.fx) {
			arrowI.fx.stop();
			arrowI.fx = null;
		}
		
		//fade name
		arrowI.fx = new Fx.Style(arrowI, 
						 'left', 
						 {duration: this.options.duration, 
							transition: this.options.transition,
							onComplete: function(){ arrowI.fx = null; }
						 }
					 ).start(newC);
	},
	
	getElementCenterX: function(el) {
		var wrp_meas = this.getElementMeasurements($('iswrapper'));
		var elm_meas = this.getElementMeasurements(el);
		
		//positions
		var elC = (elm_meas.left-wrp_meas.left)+(elm_meas.width/4)+10;
		
		return elC;
	},
	
	getElementMeasurements: function(el) {
		if(!el) return false; 
		var sizes = el.getSize();
		var position = el.getPosition();
		var sizeObj = new Object();
			sizeObj.width = sizes.size.x;
			sizeObj.height = sizes.size.y;
			sizeObj.top = position.y;
			sizeObj.left = position.x;
		
		return sizeObj;
	},
	
	getBaseElement: function(elem) {
		if(window.ie) {
			while(elem.tagName != 'LI') {
				elem = elem.parentElement;	
			}
		} else {
			while(elem.getTag() != 'li') {
				elem = elem.getParent();	
			}
		}
		return elem;
	}
});	
ISVSMainmenu.implement(new Events);
ISVSMainmenu.implement(new Options);