window.addEvent('domready', function(){
    var el = $$('#navigation ul'),
        color = el.getStyle('backgroundColor');

    $$('#navigation ul li').addEvents({
        mouseenter: function(){
            // We set the cursor to pointer so users know they can click this region
            this.setStyle('cursor','pointer');

            // Change background color on mouseover
            this.morph({
                'background-color': '#777',
                'background-image': 'url(../images/navi_pfeil_zu2.gif)', //Background image
                'font' : 'bold 12pt/19pt Dali',
                'letter-spacing' : '1px',
                'word-spacing' : '1px',  
                'color' : '#000',
                'background-position': '208px 8px',
                'background-repeat': 'no-repeat',
                'background-position': [0, 520] //image will move from left to right - Values are in pixels.
                });
        },
        mouseleave: function(){
            // Morphes back to the original style
            this.morph({
                'background-color': '#000',
                'font' : 'bold 12pt/19pt Dali',
                'letter-spacing' : '1px',
                'word-spacing' : '1px',
                'background-image': 'url(../images/navi_pfeil_zu.gif)',
                'color' : '#aaa;'
                });
        }
    });


    //We retrieve the link location (href) and assign it to LI to make the whole region clickable
/*    var link = $$('##navigation ul li a');
    link.each(function(element) {
        element.getParent().addEvent('click', function(){
            window.location = element.get('href');
            // on click, background color and border will turn to a different color
            this.morph({
                'background-image': 'none',
                'background-color': '#000'
            });
        });
    });*/
});
/*
window.addEvent('domready', function() {
   var logindiv =  new Fx.Slide('logindiv',
      {duration: 1500,
        transition: 'elastic:out',
        mode: 'horizontal'}
   );
   $('loginner').addEvent('click', function(e) {
      logindiv.slideOut();
      e.stop();
   });
   $('loginner2').addEvent('click', function(e) {
      logindiv.slideIn();
      e.stop();
   });
});
*/
/*
    Smartslider 1.0
    
    Author:
        Ralf Hortt, 'Horttcore' - http://www.horttcore.de

    License:
        MIT-style license
        
    Class: 
        Slider
        
    Description:
        Sliders for the World
        
    Requirements:
        Mootools 1.2 - Earlier Version should also work as its very simple 
    
    Usage:
        Add css class 'slider' for toggle element
        Target element ID in the 'href' attribute with "#"
        
    Options:
        Add css class 'slideShow' that the Element is opened onload
                
    Example:
        <a href="#lorem" class='slider'>Lorem Ipsum</a>
        <p id="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
*/
window.addEvent('domready', function(){
    var mySlides = [];
    $$(".slider").each(function(slider,i){

        // get element to slide
        link = slider.getProperty('href');
        link = link.replace('#','');
        mySlides[i] = new Fx.Slide(link,{duration: 1250,
        transition: 'elastic:out'})
;
        
        // set state
        state = slider.getProperty('class');
        if  (state.search(/slideShow/) == '-1')
            {mySlides[i].hide();}

        // inject onClick event
        slider.addEvent('click', function(e){
            new Event(e).stop();
            mySlides[i].toggle();
            return false;
        });
    });
 });