Event.observe(window, 'load', function() {

	// number of category naviItems (on left in grey / orange)
	var naviItems = 5;
	
	// number of products per naviItem
	var categoryProducts = 5;
	
	// which CategoryNavi is selected
	var selectedCategoryNavi = 1;

	// hide layers
	$$('.categoryLayer').each(function(elem) {
		elem.hide();

		// set category layers' size
		elem.setStyle({
			'width': '180px',
			'height': '75px'
		});
	});

	$$('.categoryLayerSpan').each(function(elem) {
		// set category layers' font size & visibility
		elem.setStyle({
			'fontSize': '9pt',
			'visibility': 'visible'
		});
	});

	// hides all categories not having ids beginning with selectedCategoryNavi
	function hideCategories()
	{
		$$('.categoriesRightCategory').each(function(elem) {

			// set categories' size
			elem.setStyle({
				'width': '152px',
				'height': '152px'
			});
			
			if(!elem.identify().match('^catScroller_' + selectedCategoryNavi)){
				elem.hide();
			}
		});
	};


	// hide categories
	hideCategories();

	// categories event listeners
	function initCategories()
	{
		for(i=1;i<=naviItems;i++) {
			// add mouseover / mouseout event listeners
	    	for(count=1;count<=categoryProducts;count++) {
	    		var elem = 'catScroller_'+i+'_category'+count;
	    		
	    		var mouseOver = document.getElementById(elem);
	    		
	    		if(mouseOver != null) {
	    			
		    		//mouseover
		    		document.getElementById(elem).observe('mouseover', function(event) {
		    			document.getElementById(this.identify()+'_layer').show();
		    		});
		    		
		    		//mouseout
		    		$(elem).observe('mouseout', function(event) {
		    			document.getElementById(this.identify()+'_layer').hide();
		    		});
	    		
	    		}
	    	}
	    }
		
		// set alle anzeigen link to default
		if($('categoriesRightAlleAnzeigen') != undefined)
		{
			$('categoriesRightAlleAnzeigen').firstDescendant().writeAttribute('href', categoryUrlsArray[0]);
		}
	}
	
	initCategories();

    function updateCategoriesNavi(elemId)
    {
    	// deselect selectedCategoryNavi
    	var oldSelected = 'categoriesNavi'+selectedCategoryNavi;
    	document.getElementById(oldSelected).removeClassName('selected');

    	// determine which element is selected
    	selectedCategoryNavi = elemId.identify().substr(14);

    	// select selectedCategoryNavi 
    	var newSelected = 'categoriesNavi'+selectedCategoryNavi;
    	document.getElementById(newSelected).addClassName('selected');
    	
    	// update Alle Anzeigen link
    	$('categoriesRightAlleAnzeigen').firstDescendant().writeAttribute('href', categoryUrlsArray[selectedCategoryNavi-1]);
    }

    function updateCategories(elemId)
    {
    	// hide shownCategories
    	hideCategories();
    	
    	// determine which element is selected
    	var selectedCatNavi = elemId.identify().substr(14);
    	
    	// show categories
    	for(q=1;q<=categoryProducts;q++) {
    		var elem = 'catScroller_'+selectedCatNavi+'_category'+q;
    		currentElement = document.getElementById(elem);;
    		if(currentElement != null)
    			document.getElementById(elem).show();
    	}
    }
    
    // CATEGORIES NAVI
	for(count=1;count<=naviItems;count++) {
		// add click event listeners
		naviElement = $('categoriesNavi'+count);
		if(naviElement!=null){
	    	naviElement.observe('click', function(event) {
	    		// update categoriesNavi
	    		updateCategoriesNavi(this);
	
	    		// update categories
	    		updateCategories(this);
	    		
	    		//send to e-tracker
	    		var clickId = $(this).readAttribute('click_tracker');
	    		clickTracker(clickId);
	    	});
		}
    };
});