var SlideShow = {}
SlideShow.BlendIndex = 0;
SlideShow.Canvas = $('#SlideShowBlend ul').first();
SlideShow.Width = $('#SlideShowBlend').width();
SlideShow.BlendTime = 1500;

SlideShow.AutoSlideTime = 7000;
SlideShow.AutoSlideWaitTime = 10000;
SlideShow.Items = $('#SlideShowBlend li');
SlideShow.Radios = null;
SlideShow.Wait = false;


function goTo(c) {
    $(SlideShow.Radios[SlideShow.BlendIndex]).removeClass('active');
    if (isNaN(c)) {
        //when c is a command
        if (c == 'next') {
            SlideShow.BlendIndex++;
        }
        if (c == 'previous') {
            SlideShow.BlendIndex--;
        }
    } else {
        //when c is an index
        SlideShow.BlendIndex = c;
    }

    //check the new index
    SlideShow.BlendIndex = checkRange(SlideShow.BlendIndex, SlideShow.Items.length, 0);

    //create offset
    var left = SlideShow.BlendIndex * SlideShow.Width * (-1);
    //console.log(SlideShow.BlendIndex + ' * ' + SlideShow.Width+' * -1 = '+ left);
    $(SlideShow.Radios[SlideShow.BlendIndex]).addClass('active');
    
    //animate to offset
    SlideShow.Canvas.animate({
        'left': left
    }, SlideShow.BlendTime, function () {
        
    });
}
function checkRange(i, max, min) {
    if (i < min) {
        i = max;
    }
    if (i >= max) {
        i = min;
    }
    return i;
}
function clickRadio(item) {
    if (item) {
        item = $(item);
        if (item.attr('rel') != '') {
            goTo(parseInt(item.attr('rel')));
            SlideShow.Wait = true;
        }
    }
}
function autoSlide() {
    if (SlideShow.Wait) {
        SlideShow.Wait = false;
        setTimeout('autoSlide()', SlideShow.AutoSlideWaitTime);
    } else {
        goTo('next');
        setTimeout('autoSlide()', SlideShow.AutoSlideTime);
    }
}
$(document).ready(function () {
    SlideShow.Canvas.css('position', 'relative');
    if ($('#SlideShowBlend li').length > 1) {
        //startSlideShowBlend();
        //add buttons
        $('#SlideShowBlend').append('<a id="SlideShowBlendPrev"><span><span>vorheriges</span></span></a><a id="SlideShowBlendNext"><span><span>nächstes</span></span></a>');
        $('#SlideShowBlendPrev').click(function () {
            goTo('previous');
            SlideShow.Wait = true;
        });
        $('#SlideShowBlendNext').click(function () {
            goTo('next');
            SlideShow.Wait = true;
        });
        //add radios
        var html = '<div id="SlideShowBlendRadios">';
        for (var i = 0; i < $('#SlideShowBlend li').length; i++) {
            html += '<a id="SlideShowBlendRadio' + i + '" rel="' + i + '">Banner ' + i + '</a>';
        }
        html += '</div>';
        $('#SlideShowBlend').append(html);
        $('#SlideShowBlendRadios a').first().addClass('active');
        //radio events
        $('#SlideShowBlendRadios a').each(function (key, value) {
            $(value).click(function () {
                clickRadio(value);
            });
        });
        SlideShow.Radios = $('#SlideShowBlendRadios a');

        //startcounter
        setTimeout('autoSlide()', SlideShow.AutoSlideTime);
    }
});