var $j = jQuery.noConflict();
var pause = true;
var width = 0;
$j(document).ready(function() {

    var slideShow = $j('.slideShow');
    if (slideShow.length > 0 && slideShow.find('img').size() > 1) {
        var timerval = setInterval("slideSwitch()", 3000);
        $j(function() {
            timerval;
        });
    } else {
        $j('.slideNavi').hide();
    }

    width = slideShow.find('img.active').width();
    slideShow.width(width);
    $j('.pause').click(function() {
        if (pause) {
            clearInterval(timerval);
            $j(this).attr({ 'src': 'templates/images/btnStart.png', 'alt': 'Slideshow starten' });
            pause = false;
        } else {
            timerval = setInterval("slideSwitch()", 4000);
            $j(this).attr({ 'src': 'templates/images/btnStop.png', 'alt': 'Slideshow stoppen' });
            pause = true;
        }
    });

    $j('.pause').hover(function() {
        if (pause) {
            $j(this).attr('src', 'templates/images/btnStopi.png');
        } else {
            $j(this).attr('src', 'templates/images/btnStarti.png');
        }
    }, function() {
        if (pause) {
            $j(this).attr('src', 'templates/images/btnStop.png');
        } else {
            $j(this).attr('src', 'templates/images/btnStart.png');
        }
    });

    $j('.btnBack').click(function() {
        clearInterval(timerval);
        slideBack();
        $j('.pause').attr({ 'src': 'templates/images/btnStart.png', 'alt': 'Slideshow starten' });
        pause = false;
    });

    $j('.btnBack').hover(function() {
        $j(this).attr('src', 'templates/images/previ.png');
    }, function() {
        $j(this).attr('src', 'templates/images/prev.png');
    });

    $j('.btnNext').click(function() {
        clearInterval(timerval);
        $j('.pause').attr({ 'src': 'templates/images/btnStart.png', 'alt': 'Slideshow starten' });
        slideSwitch();
        pause = false;
    });

    $j('.btnNext').hover(function() {
        $j(this).attr('src', 'templates/images/nexti.png');
    }, function() {
        $j(this).attr('src', 'templates/images/next.png');
    });

    $j('.imageHover').find('img').hover(function() {
        $j('.textHover').html($j(this).next().html());
    }, function() {
        $j('.textHover').html('');
    });
});

function slideSwitch() {
    var active = $j('.slideShow .active');
    if (active.length == 0) active = $j('.slideShow img:last');
    var next = active.next().length ? active.next() : $j('.slideShow img:first');
    active.addClass('last-active');
    next.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 1000, function() {
            active.removeClass('active last-active');
        });
        $j('.slideShow').animate({ width: '+=' + (next.width() - width) + 'px' }, 1000);
        width = next.width();
}

function slideBack() {
    var active = $j('.slideShow .active');
    if (active.length == 0) active = $j('.slideShow img:first');
    var next = active.prev().length ? active.prev() : $j('.slideShow img:last');
    active.addClass('last-active');
    next.css({ opacity: 0.0 })
    .addClass('active')
    .animate({ opacity: 1.0 }, 1000, function() {
        active.removeClass('active last-active'); 
    });
    $j('.slideShow').animate({ width: '+=' + (next.width() - width) + 'px' }, 1000);
    width = next.width();
}