var Sponsor = new Class({
	
	Implements: [Event, Options],
	
	options: {
		onOpen: true,
		onClose: $empty,
		openWidth: 80,
		closedWidth: 50,
		transition: Fx.Transitions.Quad.easeInOut,
		duration: 400,
		open: null,
		border: 0,
		totalOpen: 0,
		startIndex: null
	},

	initialize: function(buttons, elements, options){
		this.setOptions(options);	
		this.buttons = $$(buttons);
		this.elements = $$(elements);
		this.elements.setStyle('cursor','pointer');
		this.widths = {};
		this.widths.closed = this.options.closedWidth;
		this.widths.openSelected = this.options.openWidth;
		this.widths.openOthers = Math.round(((this.widths.closed*this.elements.length) - (this.widths.openSelected+this.options.border)) / (this.elements.length-1))

        /* @History Start*/
        if (this.options.useHistory) {

            this.options.firstCall = true;
            this.history = HistoryManager.register(
                'sponsor', //History key, used as anchor prefix
                ['einleitung'], // default key
                function(values) { // function to call when back button is used
                    this.toggleTo(values[0]); // parameter is the history key
                }.bind(this),
                false,
                false
            );
        }
        /* @History End*/

   		this.initEffects();			 		
		
		this.elements.each(function(el,i){
			el.addEvent('mouseenter', function(e){
				new Event(e).stop();
				if (this.options.totalOpen == 0) {
					this.widths.openSelected = 80;
					this.widths.openOthers = 35;
					this.reset(i);
				}
			}.bind(this));
			
			el.addEvent('mouseleave', function(e){								
				new Event(e).stop();
				if (this.options.totalOpen == 0) {					
					this.reset(this.options.open);	
				}				
			}.bind(this));			
			
			el.addEvent('click', function(e){
				if(this.options.onOpen){					
					this.options.totalOpen = 1;					
					this.widths.openSelected = 491;			
					this.widths.openOthers = 0;
					this.resize(491);
					this.reset(i);	
					this.addScroll.delay(500); 
					this.elements.setStyle('cursor','default');				

                    // @History - add a new key to the history
                    if (this.history) {
                        this.history.setValue(0, i);
                    }
				}
			}.bind(this));			
			
		}.bind(this));
		
		this.buttons.each(function(el,i){
			el.addEvent('click', function(){
				$$('div.text','div.doppeltext').setStyle('overflow-y', 'hidden');
				this.options.totalOpen = 1;					
				this.widths.openSelected = 491;			
				this.widths.openOthers = 0;
				this.resize(491);
				this.reset(i);	
				this.addScroll.delay(500);
				this.elements.setStyle('cursor','default');	

                // @History - add a new key to the history
                if (this.history) {
                    this.history.setValue(0, i);
                }
			}.bind(this));
		}, this);
				
		$$('div.back').each(function(el,i){			
			el.addEvent('click', function(e){
				e.stopPropagation();
				$$('div.text','div.doppeltext').setStyle('overflow-y','hidden');
				this.options.totalOpen = 0;
				this.resize(149);
				this.widths.openSelected = 80;
				this.widths.openOthers = 35;
				this.reset(this.options.open);
				this.elements.setStyle('cursor','pointer');		

                // @History - add a new key to the history
                if (this.history) {
                    this.history.setValue(0, 'einleitung');
                }
			}.bind(this));			
		}.bind(this));

		if (this.options.totalOpen == 0 && this.options.startIndex == '') {				
			$$('div.doppeltext').setStyle('overflow','hidden');
			$('sponsor').setStyle('height',0);
			this.startEffect.delay(1500,this);
		}
		else if (this.options.startIndex.toInt() < this.elements.length.toInt() ) {	
			$('sponsor').setStyle('height',491);
			$$('div.text','div.doppeltext').setStyle('overflow-y', 'hidden');
			this.options.totalOpen = 1;					
			this.widths.openSelected = 491;			
			this.widths.openOthers = 0;
			this.resize(491);
			this.reset(this.options.startIndex.toInt());	
			this.addScroll.delay(500);
			this.elements.setStyle('cursor','default');	
		}
	},
	
	/**
	 * @History Start
	 * Function called when a browser back/forward button is used.
	 * tabIndex is either the sponsor element id (0, 1, 2) or 'einleitung' as default     	
	 */	
    toggleTo: function(tabIndex)
    {
        // don't execute on windowLoad
        if (this.options.firstCall == true)
        {
            this.options.firstCall = false;
            return;
        }

		if(this.options.onOpen && tabIndex >= 0 )
        {
			this.options.totalOpen = 1;					
			this.widths.openSelected = 491;			
			this.widths.openOthers = 0;
			this.resize(491);

            // HistoryManager stores the key as string, reset() won't recognize it
            tabIndex = parseInt(tabIndex);
			this.reset(tabIndex);	

			this.addScroll.delay(500); 
			this.elements.setStyle('cursor','default');
    	}
    	else if(tabIndex == 'einleitung')
    	{
			$$('div.text','div.doppeltext').setStyle('overflow-y','hidden');
			this.options.totalOpen = 0;
			this.resize(149);
			this.widths.openSelected = 80;
			this.widths.openOthers = 35;
			this.reset(this.options.open);
			this.elements.setStyle('cursor','pointer');		
        }
	},
	// @History End

	initEffects: function() {
		this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition});
		this.fxresize = new Fx.Tween($('sponsor'), {wait: true, duration: this.options.duration, transition: this.options.transition});
		this.fxstart = new Fx.Tween($('sponsor'), {wait: false, duration: 1000, transition: this.options.transition});		
	},
	
	startEffect: function() {			
		this.fxstart.start('height',149);
	},
	
	resize: function(to) {		
		this.fxresize.start('height', to);
		//this.elements.removeEvents();
	},
	
	reset: function(num){
		if($type(num) == 'number'){
			var width = this.widths.openOthers;
			if(num+1 == this.elements.length){
				width += this.options.border;
			}
		}else{
			var width = this.widths.closed;
		}
		
		var obj = {};
		this.elements.each(function(el,i){
			var w = width;
			if(i == this.elements.length-1){
				w = width+5
			}
			obj[i] = {'height': w};
		}.bind(this));
		
		if($type(num) == 'number'){
			obj[num] = {'height': this.widths.openSelected};
		}
		this.fx.start(obj);		
	},
	
	addScroll: function() {		
		$$('div.text','div.doppeltext').setStyle('overflow-y', 'auto');
	}
	
});