/* ScrollBoxen */
	/* KONFIGURATION */
	var no_scroller = new Array();
	var scroll_area_width = 544; // Breite des Anzeigenbereichs
	var content_height = 243; // 243 Höhe für den scrollbaren Inhalt
	var content_width = (document.all) ? 616 : 1344; // IE6/7-BugFix-Breite (visuell erprobt) / Generische Breite für den scrollbaren Inhalt
	    // Formel zur Errechnung der Breite: <Anzahl ProduktBoxen> * 192px
	
	/* Container-Klasse der Elemente */
	var scrollAreaName = '.scrollArea';
	var scrollBarName = '.scrollBar';
	var scrollBackName = '.buttonBackward';
	var scrollForwardName = '.buttonForward';
	var scrollButtonName = '.scrollKnob';
	var scrollButtonLeftName = '.left';
	var scrollButtonCenterName = '.center';
	var scrollButtonRightName = '.right';
	var contentBoxName = '.productOverview';
	var scrollContainer = '.productRange';
	var moo_scroller = '.productSlider';

	var toggleViewName = '.toggleView';
	var toggleViewSlideInTxt = 'Show all';
	var toggleViewSlideInClass = 'show';
	var toggleViewSlideOutTxt = 'Hide all';
	var toggleViewSlideOutClass = 'hide';

	/*
	Event-Handler für die Ein- und Ausklappen-Links
	*/
	window.addEvent('domready', function(){
		scroller = $$(moo_scroller);
		
		// bugfix nvb 20080521: fehlermeldung, wenn toggleView vorhanden, .scrollArea aber ungesetzt ist
		if ($$(scrollAreaName).length > 0){
			$ES(toggleViewName, scroller).each(function(item, index)
			{
				item.addEvent('click', function(e)
				{
					e = new Event(e).stop();
					
					toggle_scroller( scroller[index] );
					
					no_scroller[index] = true;
				});
			});
		}
	});
	
	function toggle_scroller(item)
	{
		scrollarea = $E(scrollAreaName, item);
		scroll_button = $E(scrollButtonName, scrollarea);
		content = $E(contentBoxName, item);
		container = $E(scrollContainer, item);
		link = $E(toggleViewName, item);
		
		//left_margin = container.getStyle('left').toInt() + scroll_button.getStyle('left').toInt();
		
		// hide scroller
		if (scrollarea.getStyle('visibility') != 'hidden')
		{
			scrollarea.setStyles({
			   visibility: 'hidden'
			});
			
			content.setStyles({
			   overflow: 'auto',
			   width: content_width,
			   height: 'auto'
			});
			
			container.setStyles({
			   overflow: 'hidden',
			   width: scroll_area_width + 50,
			   height: 'auto'
			});
			
			link.setText(toggleViewSlideOutTxt);
			link.addClass(toggleViewSlideOutClass);
			link.removeClass(toggleViewSlideInClass);
		}
		// show scroller
		else
		{
			width = $E('.slider_width', item).getValue().toInt();
			scroll_button.setStyle('left', 0);

			scrollarea.setStyles({
			   visibility: 'visible'
			});
			
			content.setStyles({
			   overflow: 'hidden',
			   width: 576,
			   height: content_height
			});
			
			container.setStyles({
			   overflow: 'hidden',
			   width: width,
			   height: content_height
			});
			
			link.setText(toggleViewSlideInTxt);
			link.addClass(toggleViewSlideInClass);
			link.removeClass(toggleViewSlideOutClass);
		}
	}
	
	/*
		Größe des Scrollbuttons je nach Inhalt ermitteln
	*/
	function setScollbuttonWidth(item)
	{
		var adjust = item.getStyle('width').toInt();

		item.setStyle('width', adjust);
    };
    
    window.addEvent('load', function() {
    	var scroll_buttons = $ES(scrollButtonName, moo_scroller);
    	var scroll_left = $ES(scrollBackName, moo_scroller);
    	var scroll_right = $ES(scrollForwardName, moo_scroller);
    	var container = $ES(scrollContainer, moo_scroller);
    	var scroll_box = $ES(contentBoxName, moo_scroller);
    	
    	var content_widths = $ES('.slider_width', moo_scroller);
    	
		if ($ES(moo_scroller).length > 0)
		{
			scroll_box.each(function(item, index)
			{
			    if (!no_scroller[index])
			    {
					new MooScroller(item, scroll_buttons[index], {
										mode: 'horizontal',
										scrollSteps: 10,
										width: content_widths[index].getValue().toInt(),
										scrollContainer: container[index],
										scrollLinks: {
											forward: scroll_right[index],
											back: scroll_left[index]
										}
									});
			        setScollbuttonWidth(item);
				}
			});
		}
	});