// JavaScript Document

/*	*****************************************************************************************
	ms Selectbox
	*****************************************************************************************
*/
var msSelectbox = new Class({

	selectbox: null,
		selectbox_selector: null,
			selectbox_titlevalue: null,
		selectbox_container: null,
			selectbox_overflow: null,
				selectbox_scroller: null,
					selectbox_elements: Array,
			selectbox_bar: null,
				selectbox_handle: null,
	selectboxSlider: null,

	close_delay: 500,
	close_timeout_id: 0,

	b_is_open: false,
	Implements: Options,
	options: {
		width: 200,
		height: 300,
		barwidth: 16,
		slidersteps: 100,
		wheelsteps: 12,
		handle_element_clicks: false,
		update_element: false
/*		par1: {
			par2: 1,
			par3: 2
		}
*/	},
    
    /*	*************************************
		Konstruktor
	*/
    initialize: function(element_id, options){

		/*	Gesamte Selectbox	*/
		this.selectbox = $(element_id);
		this.setOptions(options);

		/*	Unter-Elemente ermitteln	*/
		var children = this.selectbox.getChildren('div');
		children.each (function (child) {
			if (child.hasClass('msSelectboxSelector'))		this.selectbox_selector = $(child);
			if (child.hasClass('msSelectboxContainer'))		this.selectbox_container = $(child);
		}.bind(this));

		/*	Unter-Elemente des Scroll-Containers ermitteln	*/
		var children = this.selectbox_container.getChildren('div');
		children.each (function (child) {
			if (child.hasClass('msSelectboxOverflow'))		this.selectbox_overflow = $(child);
			if (child.hasClass('msSelectboxBar'))			this.selectbox_bar = $(child);
		}.bind(this));

		this.selectbox_titlevalue = this.selectbox_selector.getElement('.msSelectboxTitleValue');

		/*	Unter-Elemente des Overflow-Containers ermitteln	*/
		var children = this.selectbox_overflow.getChildren('div');
		children.each (function (child) {
			if (child.hasClass('msSelectboxScroller'))		this.selectbox_scroller = $(child);
		}.bind(this));

		/*	Unter-Elemente des Scrollers ermitteln	*/
		this.selectbox_elements = $$(this.selectbox_scroller.getChildren('a'));

		/*	Unter-Elemente des Scrollbar-Elements ermitteln	*/
		var children = this.selectbox_bar.getChildren('div');
		children.each (function (child) {
			if (child.hasClass('msSelectboxHandle'))		this.selectbox_handle = $(child);
		}.bind(this));

		/*	Elemente einstellen	*/
		this.selectbox.setStyle('width', this.options.width);
		this.selectbox_container.setStyle('width', this.options.width);
		this.selectbox_container.setStyle('height', this.options.height);
		this.selectbox_overflow.setStyle('width', this.options.width-this.options.barwidth);
		this.selectbox_overflow.setStyle('height', this.options.height);
		this.selectbox_bar.setStyle('width', this.options.barwidth);
		this.selectbox_bar.setStyle('height', this.options.height);
		this.selectbox_handle.setStyle('width', this.options.barwidth);

		var content_height = this.selectbox_scroller.scrollHeight;
		if (content_height < this.options.height)
		{
			this.selectbox_container.setStyle ('height', content_height);
			this.selectbox_overflow.setStyle('height', content_height);
			this.selectbox_bar.setStyle('height', content_height);
		}

		/*	Die Höhe des Handles ist abhängig vom Verhältnis selectbox_overflow / selectbox_scroller	*/
		var handle_height = this.options.height * (this.options.height / this.selectbox_scroller.scrollHeight);
		if (handle_height > content_height)
			handle_height = content_height;
		this.selectbox_handle.setStyle('height', handle_height);

		/*	Slider	*/
		this.selectboxSlider = new Slider(this.selectbox_bar, this.selectbox_handle, {	
			steps: this.options.slidersteps,
			mode: 'vertical',
			wheel: true,	
			onChange:  this.barchange.bind(this)
		}).set(0);

		/*	Events	*/
		this.selectbox_selector.addEvent('click', this.toggle.bind(this,0));
		this.selectbox_container.addEvent('mousewheel', this.wheel.bind(this));
		this.selectbox_container.addEvent('mouseleave', this.mleave.bind(this));
		this.selectbox_selector.addEvent('mouseleave', this.mleave.bind(this));
		this.selectbox_container.addEvent('mouseenter', this.menter.bind(this));
		this.selectbox_selector.addEvent('mouseenter', this.menter.bind(this));

		/*	Jedem Link das Clickevent geben	*/
		if (this.options.handle_element_clicks)
			this.selectbox_elements.each(function(item,index){
				item.addEvent('click', this.clickelement.bind(this,new Array(item.getElement('.key').get('html'),item.get('html'))));
			},this);
	},

	/*	*************************************
	*/
	clickelement: function (key, val){

		this.selectbox_titlevalue.set('html', val);
		this.toggle (false);
		if (this.options.update_element)
			$(this.options.update_element).set('value', key);
	},

	/*	*************************************
		Klappt die Box auf oder zu
	*/
	toggle: function (set_state){
		this.b_is_open = ! this.b_is_open;
		if (! (set_state === 0))
			this.b_is_open = set_state;

		this.selectbox_container.setStyle('visibility', this.b_is_open ? 'visible' : 'hidden');
	},

	/*	*************************************
		Wenn die Maus aus der Scrollbox rausläuft
	*/
	mleave: function (event){
		this.close_timeout_id = this.toggle.delay(this.close_delay, this, false);
	},

	/*	*************************************
		Wenn die Maus in die Scrollbox reinläuft
	*/
	menter: function (event){
		$clear(this.close_timeout_id);
		this.close_timeout_id = 0;
	},

	/*	*************************************
		Reagiert auf das Scrollen der Scrollbar
	*/
	wheel: function (event){
		new Event(event).stop();	//	Verhindert, dass das Mousescroll-Event an den Browser weitergereicht wird
		this.selectboxSlider.set(this.selectboxSlider.step-(event.wheel*this.options.wheelsteps));
	},

	/*	*************************************
		Reagiert auf das Scrollen der Scrollbar
	*/
	barchange: function (step){
		if (! (step == undefined))
		{
			var h1 = this.selectbox_scroller.scrollHeight - this.options.height;
			var h2 = this.options.height - this.selectbox_handle.scrollHeight;
			var pos = step * (h1 / this.options.slidersteps);
			if (pos >= 0)
				this.selectbox_scroller.setStyle('marginTop', (-pos.toFixed()));
		}
	}
});

/*	*****************************************************************************************
	ms Scroller
	*****************************************************************************************
*/
var msScroller = new Class({

	scroller: null,
	scroller_content: null,
	mouse_inside: false,
	akt_pos: 0,
	new_pos: 0,
	sc_width: 0,
	new_pos_relative: 0,
	pic_preloads: false,

	Implements: Options,
	options: {
		img_path: '',
		height: 130,
		scrollmethod: 'absolute'
	},
    
    /*	*************************************
		Konstruktor
	*/
    initialize: function(element_id, options){

		/*	Gesamte Scrollbox	*/
		this.scroller = $(element_id);
		this.setOptions(options);

		/*	Unter-Elemente ermitteln	*/
		var children = this.scroller.getChildren('div');
		children.each (function (child) {
			if (child.hasClass('msScrollerContent'))		this.scroller_content = $(child);
		}.bind(this));

		/*	Styles setzen
			Falls Javascript ausgeschaltet ist, fehlen diese
			Styles und der Scroller wird einfach als Bilderliste
			angezeigt	*/
		this.scroller.setStyle('height', ''+this.options.height+'px');
		this.scroller.setStyle('overflow', 'hidden');
		this.scroller.setStyle('position', 'relative');

		/*	Scroller-Content-Attribute	*/
		this.scroller_content.setStyle('position', 'absolute');
		this.scroller_content.setStyle('white-space', 'nowrap');

		/*	Bilder ermitteln und Events reinhängen;
			außerdem Bilder preloaden	*/
		this.pic_preloads = new Array ();
		children = this.scroller_content.getChildren('a');
		children.each (function (child) {
			{
				var el_img = child.getElement('img');
				if (el_img.hasClass('hover'))
				{
					//	Mouseevents hinzufügen
					el_img.addEvent('mouseover', this.hover_img_over.bind (this, el_img));
					el_img.addEvent('mouseout', this.hover_img_out.bind (this, el_img));
					//	Over- und Out-Bilder aus dem Attribut 'onmouseover' ermitteln
//					el_img_bilder = el_img.get('name').split(':');
					var tmp = ""+el_img.get('onmouseover');
					el_img_bilder = tmp.substr(tmp.indexOf ('[[')+2, tmp.indexOf (']]')-tmp.indexOf ('[[')-2).split('|');
					//	Pfade auf die Over- und Out-Bilder im Bild-Objekt merken
					el_img.img_out = this.options.img_path + el_img_bilder[0];
					el_img.img_over = this.options.img_path + el_img_bilder[1];
					//	Over-Bild preloaden
					this.pic_preloads[this.pic_preloads.length] = new Image ();
					this.pic_preloads[this.pic_preloads.length - 1].src = el_img.img_over;
				}
			}
		}.bind(this));

		/*	Events	*/
		this.scroller.addEvent('mouseover', this.hover.bind(this,true));
		this.scroller.addEvent('mouseout', this.hover.bind(this,false));
		this.scroller.addEvent('mousemove', this.move.bind(this));
		this.tick.periodical(25, this);
//		this.resize_scroller.periodical(200, this);
	},

	/*	*************************************
		Maus über dem Container
	*/
	hover: function (inside){
		this.mouse_inside = inside;
	},

	/*	*************************************
		Maus über dem Bild
	*/
	hover_img_over: function (el) {
		el.src = el.img_over;
	},

	/*	*************************************
		Maus über dem Bild
	*/
	hover_img_out: function (el) {
		el.src = el.img_out;
	},

	/*	*************************************
		Mausbewegung
	*/
	move: function (event){
		var coord = this.scroller.getPosition();
		mouseX = event.page.x - coord.x;

		if (this.mouse_inside && (this.scroller_content.clientWidth > this.scroller.clientWidth))
		{
			//	Aktuelle Position
			var sc_coordinates = this.scroller_content.getPosition(this.scroller_content);

			//	Scrollbereich
			this.sc_width = this.scroller_content.clientWidth - this.scroller.clientWidth;
			//	Der Scroller soll das Ende schon erreichen, bevor die Maus am Rand
			//	angekommen ist.
			mouseOffsetX = mouseX*1.2-(this.scroller.clientWidth*0.1);
			
			sc_off = this.sc_width * mouseOffsetX / this.scroller.clientWidth;
			if (sc_off < 0)	sc_off = 0;
			if (sc_off > this.sc_width)	sc_off = this.sc_width;

			this.new_pos = -sc_off.toFixed();

			this.new_pos_relative = (mouseX - (this.scroller.clientWidth / 2)) / 20;	// 20
		}
	},

	/*	*************************************
		Mausbewegung
	*/
	tick: function (event){
		this.reposition_scroller();
	},
	
	reposition_scroller: function(){
		switch (this.options.scrollmethod)
		{
		case 'absolute':
			this.akt_pos = this.akt_pos + (this.new_pos - this.akt_pos) / 15;
			this.scroller_content.setStyle('left', this.akt_pos.toFixed()+"px");
			break;
		case 'relative':
			if (this.mouse_inside)
			{
				if (Math.abs (this.new_pos_relative) > 2)
				{
					this.akt_pos = this.akt_pos - this.new_pos_relative;
					if (this.akt_pos > 0)	this.akt_pos = 0;
					if (this.akt_pos < -this.sc_width)	this.akt_pos = -this.sc_width;
					this.scroller_content.setStyle('left', this.akt_pos.toFixed()+"px");
				}
			}
			break;
		}
	},

	resize_scroller: function(){
		/*
			TODO:
			Experimentell: Scrollerhöhe an den Inhalt anpassen
			
			nicht mehr nötig, da der Scoller jetzt immer 130 px hoch ist
			(ohne Ränder)
		*/
//		this.scroller.setStyle('height', this.scroller_content.clientHeight);
	}

});

function initGoogleMap(div_id)
{
	if (GBrowserIsCompatible())
	{
		map = new GMap2(document.getElementById(div_id));
		map.addControl(new GSmallMapControl());
	
		map.setCenter(new GLatLng (51.11042, 8.622894, 13));
		map.setZoom (10);

		//  Firefox Maus-Scroll-Rad
		GEvent.addDomListener(document.getElementById(div_id), "DOMMouseScroll", function(event) {
			if (event.detail < 0) {
				map.zoomIn();
			}
			else if (event.detail > 0) {
				map.zoomOut();
			}
			new Event(event).stop();	//	Verhindert, dass das Mousescroll-Event an den Browser weitergereicht wird
		});
	
		// IE Maus-Scroll-Rad
		GEvent.addDomListener(document.getElementById(div_id), "mousewheel", function(event) {
			if (event.wheelDelta > 0) {
				map.zoomIn();
			}
			else if (event.wheelDelta < 0) {
				map.zoomOut();
			}
			new Event(event).stop();	//	Verhindert, dass das Mousescroll-Event an den Browser weitergereicht wird
		});
	}
}