var carusel;

function play() {
    var count = $(".scrollbox img").length;
    var image_width = $(".scrollbox img").width() + parseFloat($(".scrollbox img").css('marginLeft').replace(/px/, "")) + parseFloat($(".scrollbox img").css('marginRight').replace(/px/, "")) + parseFloat($(".scrollbox img").css('borderRightWidth').replace(/px/, "")) + parseFloat($(".scrollbox img").css('borderRightWidth').replace(/px/, ""));
    var images_width = count * image_width;
    var scroll_width = $(".scrollbox").width();
    var margin = $(".scrollbox_content").css('marginLeft').replace(/px/, "");
    margin = margin - image_width;
    if(-(margin) == images_width) { margin = 0; }
    var nr = (-(margin) / image_width) + 1;
    $(".scrollbox_nav a").removeClass('selected');
    $(".scrollbox_nav a:contains(" + nr + ")").addClass('selected');

    $(".scrollbox_content").stop().animate({
        marginLeft: margin + 'px'
    }, 500);
}

function playCarusel() { carusel = setInterval("play()",5000); }

function stopCarusel() { clearInterval(carusel); }

$(document).ready(function() {

    var count_images = $(".scrollbox img").length;
    
    if(count_images > 1) {

        $(".scrollbox")
            .wrap(
                $("<div />").addClass('scrollbox_wrapper')
            )
            .wrapInner(
                $("<div />")
                    .addClass('scrollbox_inner')
                    .wrapInner(
                        $("<div />")
                            .addClass('scrollbox_content')
                    )
            )
            .append(
                $("<a />")
                    .addClass('play-pause_button')
                    .attr({ 'href': '' })
                    .css({ 'opacity': 0 })
            )
    
        $(".scrollbox_wrapper")
            .append(
                $("<div />")
                    .addClass('scrollbox_nav')
            )
        
        var loaded_images = [];
        var count = $(".scrollbox_content img").length;
        var image_width = $(".scrollbox_content img").width() + parseFloat($(".scrollbox_content img").css('marginLeft').replace(/px/, "")) + parseFloat($(".scrollbox_content img").css('marginRight').replace(/px/, "")) + parseFloat($(".scrollbox_content img").css('borderRightWidth').replace(/px/, "")) + parseFloat($(".scrollbox_content img").css('borderRightWidth').replace(/px/, ""));
        var images_width = count * image_width;
        var scroll_width = $(".scrollbox").width();
        $(".scrollbox_content")
            .css({'width':images_width + 'px'})


//     $(".scrollbox img:first-child").load(function() {
//         $(".scrollbox_wrapper")
//             .addClass('loading')
//         $(".scrollbox_content")
//             .css({'marginTop': '-1000px'})
//             .hide();
// //         loaded_images.push($(this));
// //         if(1 == loaded_images.length) {
//             $(".scrollbox_wrapper")
//                 .removeClass('loading')
//             $(".scrollbox_content")
//                 .css({'marginTop': '0'})
//                 .fadeIn()
//             stopCarusel();
//             playCarusel();
// //         }
//     })
        stopCarusel();
        playCarusel();
        
        for(var i = 1; i <= count; i++) {
            $(".scrollbox_nav")
                .append($("<a />")
                    .attr({'href': ''})
                    .html(i))
                .append(" ");
        }
    
        $(".scrollbox_nav")
            .append($("<a />")
                .attr({'href': ''})
                .addClass('start-stop')
                .addClass('stop')
                .text('stop'))
    
        $(".scrollbox_nav a").click(function() {
            if(($(this).text() != 'start')&&($(this).text() != 'stop')) {
                var margin = -(image_width * ($(this).html() - 1));
                $(".scrollbox_nav a").removeClass('selected');
                $(this).addClass('selected');
                $(".scrollbox_content").stop().animate({
                    marginLeft: margin + 'px'
                }, 500);
                return false;
            }
        });
    
        $(".scrollbox_wrapper .play-pause_button, .scrollbox_nav .start-stop").click(function() {
            if($(".scrollbox_nav .start-stop").text() == 'stop') {
                stopCarusel();
                $(".scrollbox_wrapper .play-pause_button").removeClass('stop').addClass('start');
                $(".scrollbox_nav .start-stop").removeClass('stop').addClass('start').text('start');
            } else {
                playCarusel();
                $(".scrollbox_wrapper .play-pause_button").removeClass('start').addClass('stop');
                $(".scrollbox_nav .start-stop").removeClass('start').addClass('stop').text('stop');
            }
            return false;
        });
    
        $(".scrollbox")
            .mouseover(function() {
                $(".play-pause_button").stop().animate({
                    'opacity': 1
                }, 500);
            })
            .mouseout(function() {
                $(".play-pause_button").stop().animate({
                    'opacity': 0
                }, 500);
                $(".play-pause_button").css({'opacity': ''});
            })
    
        $(".scrollbox_nav a:first-child").addClass('selected');
    
    }

});