$(document).ready(function() {
    
    var loaderpos = 0;
    var loaderactive = true;
    
    function renderSlide(slide) {
        var output = '<div class="slide '+slide.category+'" style="background-image: url('+slide.image[0]+');">'+
            '<h2>'+slide.title+'</h2>'+
            '<h3>'+slide.subtitle+'</h3>'+
            '<p class="'+slide.color+'">'+slide.content+'</p>'+
            '<a href="'+slide.permalink+'" class="readmore">Lue lisää</a>'+
        '</div>';
        
        return output;
    }
    
    var active_slide = 0;
    
    $.get("ajax/dynamic-slide/", { 'num': active_slide },
       function(data){
         var response = jQuery.parseJSON(data);
         
         if (response.status == "OK") {
         
            active_slide = response.active;
                        
            $('#previous').html( renderSlide(response.previous) );
            
            $('#next').html( renderSlide(response.next) );
            
            
         }
         
       }
    );

    var keylock = 0;
    
    var easing = 'easeInOutQuad';
    var duration = 700;

    function nextSlide() {
        
        
        
        if (keylock == 1) return;
        
        keylock = 1;
        
        loaderpos=0;
        loaderactive = false;
        
        $('#loader').fadeOut();
        
        active_slide++;
        
        $.get("ajax/dynamic-slide/", { 'num': active_slide },
           function(data){
             var response = jQuery.parseJSON(data);
             
             if (response.status == "OK") {
                
                active_slide = response.active;
                
                //asetetaan seuraava tokalle layerille
                $('#current').find('.slide').css('z-index', '1000');
                $('#previous').find('.slide').css('z-index', '100');
                $('#next').find('.slide').css('z-index', '500');
                 
                $('#current').find('.slide').animate({
                        left: '-='+($('#dynamicslider').width()+30)
                    }, 
                    {
                        'duration': duration,
                        'easing': easing, // the type of easing
                        'complete': function() {
                    
                            $('#next').find('.slide').css('z-index', '600');
                            
                            $('#current').html( renderSlide(response.current) );
                            
                            $('#current').find('.slide').css('z-index', '1000');
                            
                            $('#current').find('.slide').css('left', '0');
                            
                            $('#previous').find('.slide').css('z-index', '100');
                            $('#next').find('.slide').css('z-index', '100'); 
                            
                            $('#previous').html( renderSlide(response.previous) );
                            $('#next').html( renderSlide(response.next) );
                            
                            $('#loader').fadeIn('fast');
                            loaderactive = true;
                                    
                            keylock = 0;
                        }
                    }
                );
                
             }
             
           }
        );
    
    }

    function previousSlide() {

        if (keylock == 1) return;
        
        keylock = 1;
    
        loaderpos=0;
        loaderactive = false;
    
        active_slide--;
        
        $.get("ajax/dynamic-slide/", { 'num': active_slide },
           function(data){
             var response = jQuery.parseJSON(data);
             
             if (response.status == "OK") {
                
                active_slide = response.active;
                
                //asetetaan seuraava tokalle layerille
                $('#current').find('.slide').css('z-index', '1000');
                $('#previous').find('.slide').css('z-index', '500');
                $('#next').find('.slide').css('z-index', '100');
                 
                $('#current').find('.slide').animate({
                        left: '+='+($('#dynamicslider').width()+30)
                    }, 
                    {
                        'duration': duration,
                        'easing': easing, // the type of easing
                        'complete': function() {
                    
                            $('#previous').find('.slide').css('z-index', '600');
                            
                            $('#current').html( renderSlide(response.current) );
                            
                            $('#current').find('.slide').css('z-index', '1000');
                            
                            $('#current').find('.slide').css('left', '0');
                            
                            $('#previous').find('.slide').css('z-index', '100');
                            $('#next').find('.slide').css('z-index', '100'); 
                            
                            $('#previous').html( renderSlide(response.previous) );
                            $('#next').html( renderSlide(response.next) );
                            
                            keylock = 0;
                        }
                    }
                );
     
             }
             
           }
        );
    
    }
    
    $('#dynamicslider').everyTime(6000/1000, "nextSlide", function(i) {
        if (loaderactive) {
            loaderpos++;
            if (loaderpos < 1000) {
                $('#loader').width(loaderpos/10+'%');
            } else {
                nextSlide();
            }
        }
        
    });
    
    $('#dynamicslider').live('mouseenter mouseleave', function(event) {
       
        if (event.type == 'mouseenter') {
            $('#loader').fadeOut();
            $('#dynamicslider').stopTime("nextSlide");
    
        } else {
            $('#loader').fadeIn();
            $('#dynamicslider').everyTime(6000/1000, "nextSlide", function(i) {
                if (loaderactive) {
                    loaderpos++;
                    if (loaderpos < 1000) {
                        $('#loader').width(loaderpos/10+'%');
                    } else {
                        nextSlide();
                    }
                }
                
            });           
           
        }
    });
    
    $(document).keydown(function(e){
        
        if (e.keyCode == 39){
            
            e.preventDefault();
            
            loaderpos=0;
            $('#loader').width(loaderpos/10+'%');
            nextSlide();
        
        } else if (e.keyCode == 37) {
            
            e.preventDefault();   
            
            loaderpos=0;
            $('#loader').width(loaderpos/10+'%');
            previousSlide();
        
        }
    
                
    }); 



});