var activeCategory = "";
var activeElement = -1;
var traversalTimer;
$(function(){
    var sidebars = $("#carusel > .caruselMaincontent > .caruselScroller");
    var categories = [];
    $('#carusel > .caruselMaincontent > .caruselFocusContent').each(function(){
        var container = $("<div />");
        container.addClass("teaserContainer");
        container.data('relation',$(this).parent());
        var thumbImage = $(".caruselThumbimage",this).remove();
        thumbImage.css('display','block');
        container.append(thumbImage);
        container.append($("<h2 class='teaserSub' />").text($("h1",this).eq(0).text()));
        container.append($("<h3 class='teaserSubSub' />").text($("h2",this).eq(0).text()));
        container.css('display','none');
        var category = $(this).parent().attr('rel');
        $('#carusel > .caruselMaincontent[rel="'+category+'"] > .caruselScroller').append(container);
        var found = false;
        for(var i in categories)
        {
            if(categories.hasOwnProperty(i))
            {
                if(categories[i] == category)
                {
                    found = true;
                }
            }
        }
        if(!found)
        {
            categories.push(category);
        }
    });
    categorycontainer = $('<div id="categoryContainer" />');
    for(i in categories)
    {
        if(categories.hasOwnProperty(i))
        {
            var link = $('<a class="" href="javascript:;" />');
            $(link).click(function(){
                var category = $(this).data('category');
                clearTimeout(traversalTimer);
                var a = $('#carusel > .caruselMaincontent[rel="'+category+'"] .teaserContainer').eq(0).click();
                
                return false;
                });
            link.text(categories[i]).data('category',categories[i]);
            categorycontainer.append(link);
        }
    }
    $('#carusel').append(categorycontainer);
    $('#carusel > .caruselMaincontent').eq(0).fadeIn();
    $("#carusel > .caruselMaincontent .teaserContainer").each(function(i){
        (function(self,k){
            //If we cant see the item anyways, we might aswell fade it in right away
            if(k > 5)
            {
                k = 5
            }
            setTimeout(function(){
                $(self).fadeIn();
            },k*200);
        })(this,i);
    });
    $("#carusel .teaserContainer").click(function(evt){
        var rel = $(this).data('relation');
        var curOffset = $('#carusel > .caruselMaincontent > .caruselScroller > .scrollerMask:visible').scrollTop();
        if(typeof evt.altKey != "undefined")
        {
            clearTimeout(traversalTimer);
        }
        $('#carusel > .caruselMaincontent').not(rel).fadeOut('slow');
        rel.fadeIn('slow');
        rel.find('.scrollerMask').scrollTop(curOffset);
        $('#carusel .teaserContainer').removeClass('active');
        var category = rel.attr('rel');
        $('#categoryContainer a').removeClass('active');
        $('#categoryContainer a:contains(' + category + ')').addClass('active');
        
        $('#carusel .caruselScroller .teaserContainer:nth-child(' + ($(this).index()+1) + ')').addClass('active');
        var item = $('.caruselScroller .teaserContainer:nth-child(' + ($(this).index()+1) + ')',rel);
        var cmon = (parseInt($(item).eq(0).position().top,10))+curOffset;
        
        $('#carusel .scrollerMask').animate({"scrollTop":cmon},'normal');
        
    });
    var cachedSelect = $('#carusel > .caruselMaincontent > .caruselScroller');
    cachedSelect.wrapInner("<div class='scrollerMask' />");
    cachedSelect.prepend("<div class='upBtn' />");
    cachedSelect.append("<div class='downBtn' />");
    
    function scrollMask(element,value){
        var offset = $(element).scrollTop();
        var cachedTeaserSelect = $('#carusel .teaserContainer');
        offset = (offset + value) - ((value)%(parseInt(cachedTeaserSelect.height(),10)+
                      parseInt(cachedTeaserSelect.css('paddingTop'),10)+
                      parseInt(cachedTeaserSelect.css('paddingBottom'),10))*2);
        $(element).animate({scrollTop:offset},'normal');
        
    }
    
    $('#carusel .downBtn').click(function(){
        var cachedTeaserSelect = $('#carusel .teaserContainer');
        var offset = (parseInt(cachedTeaserSelect.height(),10)+
                      parseInt(cachedTeaserSelect.css('paddingTop'),10)+
                      parseInt(cachedTeaserSelect.css('paddingBottom'),10))*2;
        scrollMask($(this).prev(),offset);
        });
    $('#carusel .upBtn').click(function(){
        var cachedTeaserSelect = $('#carusel .teaserContainer');
        var offset = -(parseInt(cachedTeaserSelect.height(),10)+
                      parseInt(cachedTeaserSelect.css('paddingTop'),10)+
                      parseInt(cachedTeaserSelect.css('paddingBottom'),10))*2;
        scrollMask($(this).next(),offset);
        });
    
    activeCategory = $('#carusel .caruselMaincontent').eq(0).attr('rel');
    
    goNext();
});

function goNext(){
    var eh = $('#carusel > .caruselMaincontent[rel="' + activeCategory + '"]:eq(0) .teaserContainer').eq(activeElement+1).click();
    
    activeElement++;
    if(eh.is(':last-child'))
    {
        var c = $('#categoryContainer a:contains(' + activeCategory + ')');
        if(c.is(':last-child'))
        {
            activeCategory = $('#categoryContainer a').eq(0).text();
        }
        else
        {
            activeCategory = c.next().text();
        }
        activeElement = -1;
    }
    traversalTimer = setTimeout(function(){goNext()},10000);
};