$(window).load( function(){ $('#frontview_preloader').toggle(); $('#frontview').toggle(); after_preload(); });

$(document).ready(function() {
    disable = 0;
    $("#images").find(".image:first").addClass("active");
    $("#thumblist").find(".thumb_image:first").addClass("active");
    $('#frontview_preloader').toggle(); $('#frontview').toggle();    
});

function after_preload(){
    $("#thumblist").find(".thumb_image").click(function(){
        mouseover = 1;
        $("#image .active").removeClass("active");
        $("#thumb_image .active").removeClass("active");
        var this_id = $(this).attr("id");
        var active_now = $("#thumblist .active").attr("id");
        
        if(disable == 0){
            if(this_id == active_now){
                
            }else{
                clearInterval(showtime);
                changeImage(this_id, 300);
                showtime = setInterval( "slideshow(" + $speed + ")", $interval);
            }
        }else{
        }
    });
    
    
    /* Basic configuration            */
    /* Styles are generated from this */
    
    var image_con_w = 400;                          /* Image container width (same as image width) */
    var image_con_h = 300;                          /* Image container height (same as image height) */
    
    var slide_con_w = 560;                          /* Whole slideshow width */ 
    var slide_con_h = 300;                          /* Whole slideshow height (probably the same as image height)*/
        
    var button_w = 156;                             /* Button width, default is slideshow width - imagewidth - 1 */ 
    var button_h = 60;                              /* Button height, could be dynamic but it's not' */
    
    $interval = 8000;
    $speed = 1250;
    
    mouseover = 0;
    
    var number_images = $('#images .image').length;
    $("#images").find(".image:first").find(".descr").slideToggle($speed);
    
    /* Applying CSS Styles */
    $('#frontview').css('width', slide_con_w).css('height', slide_con_h);
    $('#frontview #images').css('width', image_con_w).css('height', image_con_h);
    
    
    showtime = setInterval( "slideshow(" + $speed + ")", $interval);    
}

function slideshow(speed){
    if(mouseover == 0){
        var $active = $('#images div.active');
        $next = $active.next();
        
        var $active_thumb = $('#thumblist div.active');
        $next_thumb = $active_thumb.next();
        
        var speed_slide = speed;
        
        if ( $active.length == 0 ) $active = $('#images div.active:last');
        if ( $next.length == 0) $next = $('#images div:first');
        
        if ( $active_thumb.length == 0 ) $active_thumb = $('#thumblist div.active:last');
        if ( $next_thumb.length == 0) $next_thumb = $('#thumblist div:first');
        
        $active.addClass('last-active');
        $active_thumb.addClass('last-active');
        $active.find(".descr").slideToggle(speed - 500);
        
        $next_thumb.addClass("active");
        
        $active_thumb.removeClass('active');
        
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, speed_slide, function(){
                $active.removeClass('active last-active'); 
                $active_thumb.removeClass('last-active');
            });
        $next.find(".descr").fadeIn(speed - 500, function(){
        });
    }else{
    }
}

function changeImage(id, speed){
        disable = 1;
    
        var $active = $('#images div.active');
        $next = $("#images #" + id + "_img");
        
        var $active_thumb = $('#thumblist div.active');
        $next_thumb = $("#thumblist #" + id); 
    
        $active.addClass('last-active');
        $active.removeClass("active");
        $active.find(".descr").hide();
        $active_thumb.removeClass("active");
        
        $next_thumb.addClass("active");
        
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, speed, function(){
                $active.removeClass('active last-active'); 
                $active_thumb.removeClass('last-active');
                $next.addClass("active");
                disable = 0;
            });
            
        $next.find(".descr").fadeIn(speed - 500, function(){
            mouseover = 0;
        });
}