var currentSlide = 0;

$(document).ready( function( )
{	
	// Huidige CSS properties opslaan
    var slideOneLeft = $( '#slideOne' ).css( 'left' );
    var slideTwoLeft = $( '#slideTwo' ).css( 'left' );
    
    $( '#slideOne' ).hide().fadeOut();
    $( '#slideTwo' ).hide().fadeOut();  
    
    // Breedte van een bepaald stuk tekst bepalen in pixels
    function stringWidth( input )
    {
        var ruler = document.getElementById( 'ruler' );
        ruler.innerHTML = input;
        return ruler.offsetWidth;
    }
    
    // Haal de volgende slide in de stack op en toon deze..
    function nextSlide(slide)
    {
        info = slide.split( "|" );
        
        $( '#slideOne' ).text( info[0] );
        $( '#slideTwoA' ).text( 'Lees verder' );
        $( '#slideTwoA' ).attr( 'href', info[1] );
        
        $( '#slideTwo' ).css( 'margin-left', stringWidth($( '#slideOne' ).text())-45 + 'px' );      
        
        fadeIn(); 
        setTimeout( function() { fadeOut(); }, (slideDisplay * 1000) );
    }
    
    function start()
    {
        nextSlide(slideTeksten[0]);
        currentSlide++;
        
        setInterval(function()
        {   
            if( ( currentSlide + 1 ) > slideTeksten.length )
                currentSlide = 0;
            
            nextSlide(slideTeksten[currentSlide]);
            currentSlide++;    
        }, 
        5500);     
    }
    
    // Fade in effect
	function fadeIn(  )
	{
        $( '#slideOne' ).animate({opacity : ['show', 'swing'] }, 800);
		$( '#slideTwo' ).animate({opacity: ['show', 'swing' ] }, 800);
	}
	
    // Fade out effect
	function fadeOut()
	{
		$( '#slideOne' ).animate( {opacity : 'hide'}, 800);
		$( '#slideTwo' ).animate( {opacity : 'hide'}, 800 );
	}
    
    // Start de slider
    start();
});