function initNavigation()
{
    window.addEvent('domready', function(){
        unmask();
        slidingVisuals();
    });
}


function unmask()
{
    $$('.masked').each(function(el)
    {
        var mail = el.get('rel').replace('|', '@').replace('~', '-').replace('#', '.');
        new Element('a', {
            'href': 'mailto:' + mail,
            'html': mail
        }).inject(el);
    });
}


function showOptional(){

	found = false;
	
    $$('.option').each(function(el){
        el.setStyle('display', 'none');
        if (location.href.contains(el.get('rel'))) {
            el.setStyles({
                'display': 'block'                	
            });
           found = true;
        }
    });
    
    if(found == false)    	
	{
    	// fallback for cases, when no sub menu has been choosen 
    	$$('.option').each(function(el){            
            if (el.get('class').contains('default')) {
                el.setStyles({
                    'display': 'block'                	
                });
                return;
            }
        });
	}
}


function highlightNav(){
                   
    $('toc').getElements('a').each(function(el){
        if (location.href.contains(el.href)) {
            el.setStyles({
                'color': '#e3270f'
            });
            if ($chk(el.getParent('dt'))) {
            
                showSubMenu(el.getParent('dt'));
            }
        }
        else {
            el.setStyles({
                'color': '#333'
            });
        }
    }); 
}



function showSubMenu(el){
    if (el.getParent('dl').getChildren('dd').length > 0) {
    
        el.getParent('dl').getChildren('dd').each(function(el){
            el.setStyles({
                'display': 'block'
            });
        });
        el.addClass('open');
        
        /*    else {
         el.getParent('dl').getChildren('dd').each(function(el){
         el.setStyles({
         'display': 'none'
         })
         })
         el.removeClass('open')
         } */
    }
}



function buildVisuals(){

    var container = $$('.container')[0];
    var elements = $$('#toc dl');
    
    var Visuals = new Element('div', {
        'class': 'visuals'
    }).inject(container, 'top');
    
    var elWidth = (Visuals.getStyle('width')).toInt() / elements.length;
    var elWideWidth = 300;
    var elHeight = (Visuals.getStyle('height')).toInt();
    
    
    
    elements.each(function(el, i){
        new Element('div', {
            'rel': el.get('rel'),
            'html': '<br />',
            'styles': {
                'position': 'absolute',
                'top': 0,
                'left': elWidth * i,
                'background': 'no-repeat url(img/' + el.get('rel') + '.jpg)',
                'width': 310,
                'height': elHeight
            }
        }).inject(Visuals);
    });
}


function highlightVisuals(current){


    var container = $$('.container')[0];
    var elements = $$('#toc dl');
    var elWidth = ($$('.visuals')[0].getStyle('width')).toInt() / elements.length;
    var elWideWidth = 305;
    var elPressedWidth = (($$('.visuals')[0].getStyle('width')).toInt() - elWideWidth) / (elements.length - 1);
    var elHeight = ($$('.visuals')[0].getStyle('height')).toInt();
    
    var aid = current.get('rel');
    
    var visuals = $$('.visuals')[0].getElements('div');
    
    visuals.each(function(el, i){
    
        el.removeClass('active');
        
        el.set('id', i);
        
        if (el.get('rel') == aid) {
            el.set('class', 'active');
        }
    });
    
    var actid = ($$('.active')[0].id).toInt();
    
    visuals.each(function(el, i){
    
        if (i <= actid) {
            el.morph({
                'left': i * elPressedWidth
            });
        }
        else 
            if (i > actid) {
                el.morph({
                    'left': (i * elPressedWidth) + (elWideWidth - elPressedWidth)
                });
            }
    });
    
}



function slidingVisuals(){


    showOptional();
    
	

	                     
	
    $('toc').getElements('dd').each(function(el, i){
    
        el.getElements('a')[0].addEvents({
            'click': function(){
                highlightNav.delay(100);
            }
        });
    });
    
    buildVisuals();
    
    $$('.visuals')[0].getElements('div').each(function(el){
        if (location.href.contains(el.get('rel'))) {
            highlightVisuals(el);
        }
    });
    
    highlightNav();
    
    
    // show Submenu
    
    var elements = $$('#toc dl');
    
    elements.getElements('dt').each(function(el){
    
        el.getElements('a')[0].addEvents({
        
            'click': function(e){
            
                if (this.getParent('dl').getChildren('dd').length > 0) {
                
             /*       if (!(this.getParent().hasClass('open'))) {
                        e.stop();
                        showSubMenu(this.getParent('dt'));
                    }
                    else { */
                        e.stop();
                        window.location.href = this.getParent('dt').getNext('dd').getElements('a')[0].get('href');
//                    }
                }
                
                
            }
        });
    });
    
    // subMenuItems click event 
    
    $$('#toc dd').each(function(el){
        el.getElements('a')[0].addEvents({
            'click': function(){
                showOptional.delay(400);
            }
        });
    });
    
    
    // add mouseover events
    
    
    elements.each(function(el, i){
        el.addEvents({
            'mouseenter': function(){
                highlightVisuals(this);
                
            },
            'mouseleave': function(){
            
                $$('.active').each(function(el){
                    el.removeClass('active');
                });
                
                $$('.visuals')[0].getElements('div').each(function(el){
                    if (location.href.contains(el.get('rel'))) {
                        highlightVisuals(el);
                    }
                });
                
            }
        });
    });
   
}