var Areal = Class.create();
Areal.prototype = {
	// ******************************************************************************
	// Constants
	// ******************************************************************************
	Version : '0.2',


	// ******************************************************************************
	// vars
	// ******************************************************************************

	areal : {}, // quicknav element
	scroll : {},
	activePosition : 'left',	
	

	//
	//  Initialize the quicknavs
	//
	initialize: function(options) {
		//Object.extend(this.options, options || {});
		
	    this.options = Object.extend({
	    	
			
		    // selectors
			selectors : {
				areal : '#areal',

				overview : '#overview',
				overviewHover : '#overviewHover',
				areas : '.area',
				
				scroll : '#arealScroll',
				buttonLeft : '.buttonLeft',
				buttonRight : '.buttonRight',
				
				dummy : '#dummy'
			},
			classNames : {
//				toggleActive : 'quicknav_toggle_active',
				
				dummy : '#dummy'
			},

			dummy : '#dummy'
		}, options || {});
		
		document.observe('dom:loaded', this.start.bind(this));
	    //this.start();

	},


	start : function(){
        
        // initializing the objects used for the action
		this.areal = $$(this.options.selectors.areal).first();
		this.overview = this.areal.select(this.options.selectors.overview).first();
		this.overviewHover = this.areal.select(this.options.selectors.overviewHover).first();
		this.areas = this.areal.select(this.options.selectors.areas);

        // CAG: we bind the overview hover to the areal element, not the single areas to prevent flickering
        // CAG: besides we use mouseenter and mouseleave now which helps for Mr. IE
		this.areal.observe('mouseenter', function(ev){
			this.overview.hide();
			this.overviewHover.show();
		}.bind(this));
		this.areal.observe('mouseleave', function(ev){
			this.overviewHover.hide();
			this.overview.show();
		}.bind(this));
	
        /*
		this.areas.invoke('observe', 'mouseover', function(ev){
			
			this.overview.hide();
			this.overviewHover.show();
		}.bind(this));
		*/

		this.areas.each(function(elm){
			
			//var content = elm.select('span').first().cloneNode(true);
			//new Tip(elm, content, {delay : 0, className : 'arealPrototip'});
			new Tip(elm, elm.down('span.infoText'), {delay : 0, className : 'arealPrototip'});
		}.bind(this));
		
        /*
		this.areas.invoke('observe', 'mouseout', function(ev){
			this.overviewHover.hide();
			this.overview.show();
		}.bind(this));
        */
		
		
		this.scroll = this.areal.select(this.options.selectors.scroll).first();
		
		if(this.scroll.getWidth() > this.areal.getWidth()){
			
			this.buttonLeft = this.areal.select(this.options.selectors.buttonLeft).first();
			this.buttonRight = this.areal.select(this.options.selectors.buttonRight).first();
			
			this.buttonLeft.show();
			this.buttonRight.show();
		
			this.buttonLeft.observe('click', this.buttonLeftClickHandler.bindAsEventListener(this), false);
			this.buttonRight.observe('click', this.buttonRightClickHandler.bindAsEventListener(this), false);
		}
	},
	
	
	buttonLeftClickHandler : function(ev){
		ev.stop();
		if(this.activePosition == 'left') return;
		
		this.getEffect(-(this.scroll.getWidth() - this.areal.getWidth()), 0);
		this.activePosition = 'left';
	},
	buttonRightClickHandler : function(ev){
		ev.stop();
		if(this.activePosition == 'right') return;
		
		this.getEffect(0, -(this.scroll.getWidth() - this.areal.getWidth()));
		this.activePosition = 'right';
	},

	
	
	// 
	// move the scroll
	//
	getEffect : function(startLeft, endLeft) {

		effect = new Effect.Tween(this.scroll, startLeft, endLeft, {
			transition: Effect.Transitions.sinoidal,
			queue: {
				position: 'end', 
				scope: 'accordionAnimation'
			}
		}, function(p){
				this.scroll.setStyle({left : p + 'px'});
			}.bind(this)
		);


		
		//return effect;
	},
	
	
	
	
	
	
	dummy : function() {
	}
}

new Areal();