function initStyling() {
    $("li.hover").mouseenter(function() {
        $(this).clearQueue();
        $(this).animate({ backgroundColor: "#b0d1ff" }, 300);
    }).mouseleave(function() {
        $(this).clearQueue();
        $(this).animate({backgroundColor: "#ecf5ff" }, 500);
    });
}

var currentPosition;
var slideWidth;
var slides;
var numberOfSlides;

function initSlider() {
    currentPosition = 0;
    slideWidth = 390;
    slides = $('.slide');
    numberOfSlides = slides.length;
    
    // Remove scrollbar in JS
    $('#slidesContainer').css('overflow', 'hidden');
    //$('.slideTitle').css('display', 'none');
    
    // Wrap all .slides with #slideInner div
    slides.wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
        .css({
            'float' : 'left',
            'width' : slideWidth
            });
        
    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', slideWidth * numberOfSlides);

    $('#slideshow').prepend('<div id="slideIndex"><ul></ul></div>');
    $('#slideshow').prepend('<div id="slideNavigation"><ul></ul></div>');
    
    for( i = 0; i < numberOfSlides; i++ ) {
        $('#slideIndex ul').append('<li><a href="javascript:slideTo(' + i + ')">' + $('.slide:nth-child(' + (i + 1) + ') .slideTitle').text() + '</a></li>');
        $('#slideNavigation > ul').append('<li><a href="javascript:slideTo(' + i + ')">•</a></li>');
    }
    
    $('#slideNavigation ul')
        .prepend('<li class="nav"><a href="javascript:slideBackward()" class="arrowLeft">zurück</a></li>')
        .append('<li class="nav"><a href="javascript:slideForward()" class="arrowRight">vor</a></li>');
    
    slideTo( currentPosition );

/*    manageControls(currentPosition);
    
    // Create event listeners for .controls clicks
    $('.control')
        .bind('click', function(){
        // Determine new position
        currentPosition = ($(this).attr('id')=='rightControl')
        ? currentPosition+1 : currentPosition-1;
        
        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
            'marginLeft' : slideWidth*(-currentPosition)
        });
    });
*/    
    // manageControls: Hides and shows controls depending on currentPosition
};


function slideBackward() {
    if( currentPosition > 0 )
        slideTo( currentPosition - 1 );
}


function slideForward() {
    if( currentPosition < numberOfSlides - 1 )
        slideTo( currentPosition + 1 );
}


function slideTo( index ) {
    $('#slideInner').animate({
        'marginLeft' : slideWidth * (-index)
    });
    
    manageControls( index );
    currentPosition = index;
}

function manageControls( index ) {
        // Hide left arrow if position is first slide
/*        if(position==0){ $('#leftControl').hide() }
        else{ $('#leftControl').show() }
        // Hide right arrow if position is last slide
        if(position==numberOfSlides-1){ $('#rightControl').hide() }
        else{ $('#rightControl').show() }
*/   
    if( index < 1 ) $('#slideNavigation ul li:nth-child(1)').css( 'visibility', 'hidden' );
    else $('#slideNavigation ul li:nth-child(1)').css( 'visibility', 'visible' );

    if( index >= numberOfSlides - 1 ) $('#slideNavigation ul li:last-child').css( 'visibility', 'hidden' );
    else $('#slideNavigation ul li:last-child').css( 'visibility', 'visible' );

    $('#slideIndex ul li:nth-child(' + (currentPosition + 1) + ')').removeClass( 'selected' ); 
    $('#slideIndex ul li:nth-child(' + (index + 1) + ')').addClass( 'selected' );
    
    $('#slideNavigation ul li:nth-child(' + (currentPosition + 2) + ')').removeClass( 'selected' ); 
    $('#slideNavigation ul li:nth-child(' + (index + 2) + ')').addClass( 'selected' );
}