var highlightclass = 'highlight';



/****** HauptMenu ******/
function initMenu (){
	var elements = $$('.mainmenu li');

	$each(elements, function (item){

	//alert (item);	
		item.addEvents({
			'mouseenter':function(){
				this.addClass(highlightclass);
				var link = this.getElement('a');
				link.addClass(highlightclass);
			},
			'mouseleave':function(){
				this.removeClass(highlightclass);
				var link = this.getElement('a');
				link.removeClass(highlightclass);
			}
		});
	
	});
}

/****** TabMenu *******/
var expand_height = 90;
var fold_height = 21;

var infoboxes;
var fx;

function initTabMenu (){
	
	infoboxes = $$('#tabmenu li div.horseinfo');
	li_elements = $$('#tabmenu li');
	
	
	fx = new Fx.Elements(infoboxes, {wait: false, duration: 700, transition: Fx.Transitions.Back.easeOut});
	li_elements.each(function(li_elem, i) {
		li_elem.addEvent("mouseenter", function(event) {
			//alert ('mouseenter id: '+i);
			var o = {};
			var infobox = li_elem.getElement('div');
			o[i] = {height: [infobox.getStyle("height").toInt(), expand_height]}
			infoboxes.each(function(other, j) {
				if(i != j) {
					var w = other.getStyle("height").toInt();
					if(w != fold_height) o[j] = {height: [w, fold_height]};
				}
			});
			fx.start(o);
		});
		li_elem.addEvent("click", function(event){
			
			//zum richtigen Tab sliden
			contentSlider.slideTo (i);		
			
			return false; // Damit link nicht aufgerufen wird
		});
	});
	 
	$('tabmenu').addEvent("mouseleave", function(event) {
		//alert('mousleave tabmenu');
		var o = {};
		infoboxes.each(function(infobox, i) {
			o[i] = {height: [infobox.getStyle("height").toInt(), fold_height]}
		});
		fx.start(o);
	});
}

/****** Slider ******/
var mySlider = new Class({
 
 //var contentWrapper;
 //var numberOfElements
 
  initialize: function (wrapper, noofelements){
  	if (!noofelements)
  		var noofelements = $$('#tabmenu li').length;
  
    this.contentWrapper = wrapper;
    this.numberOfElements = noofelements;
    this.currentPos = 0;
    this.tabWidth = 866; // der Contentbereich ist 866px breit
    
    
    //ScrollFX
    this.Fx = new Fx.Scroll(wrapper, {
    	duration: 400,
    	transition: Fx.Transitions.Expo.easeInOut
 	});
    
  },
  
  slideTo: function(index){
  	if (index != this.currentPos){//wenn nicht aktuelles Element
  		/**** ŸberprŸfen der Ober und Untergrenzen ***/
  		if (index>=this.numberOfElements){
  			index = index % this.numberOfElements;
  		}
  		else if (index<0){
  			index = this.numberOfElements + index;
  		}
  		
  		//Sliden
   		this.Fx.start(index*this.tabWidth, 0);
  		//this.contentWrapper.scrollTo(index*this.tabWidth, 0);
  		
  		this.currentPos = index;
  		
  		//allen li elementen die current-id entziehen und dem selektieren zuweisen
  		li_elements.each (function (li_other){
				li_other.erase('id');
		});
		li_elements[index].set('id','current');
  	}
  }, 
  
  
  slideSteps: function (number){
  	if (!number)
  		var number = 1;
  		
  	var nextPos = this.currentPos + number;
  	
  	return this.slideTo(nextPos);
  	
  	//
  	
  
  }
});

/****** MainMenu ******/
var naviSlider = new Class({

	initialize: function (wrapper){
  	    this.contentWrapper = wrapper;
  	    this.naviHeight = 33; // Navibereich ist 33 px hoch
  	    this.currentPos = 0;
  	    
  	    this.numberOfElements = wrapper.getChildren().length;

		
		
		//ScrollFX
		this.Fx = new Fx.Scroll(wrapper, {
			duration: 400,
			transition: Fx.Transitions.Expo.easeInOut
 		});
	},

	slideUp: function (number){
		if (!number)
			var number = -1;
			
		//Sliden
		this.currentPos += number;
		if (this.currentPos < 0)
			this.currentPos = 0;
		else if (this.currentPos >= this.numberOfElements)
			this.currentPos = this.numberOfElements-1;
   		this.Fx.start(0, this.naviHeight*this.currentPos);		
	},
	
	slideDown: function (number){
		if (!number)
			var number = 1;
			
		this.slideUp(number);
	}

});




var contentSlider;
var mainNaviSlider;

/***** Dom ready ****/
window.addEvent('domready', function() {
	initMenu ();
	mainNaviSlider = new naviSlider ($('mainnavi'));
	
	//slide down to the current menu
	var menuDepth = ($$('.mainmenu')).length;
	mainNaviSlider.slideDown(menuDepth-1);	
	
	if ($('tabmenu')){
	 	initTabMenu ();
	 	contentSlider = new mySlider ($('content'));
		
	}
	 
	
	 //navi.slideUp();
	 
	 //Slimbox
	 //Slimbox.scanPage();
	 
	 //Videobox
	 //Videobox.init.bind(Videobox);
	 
});