// Author: Jordy Boezaard
// Bitterzoet Media http://www.bitterzoetmedia.nl
var cCarouselData = function()
{
    this.title = null;
    this.image = null;
    this.link = null;
    this.offsetLeft = 0;
    this.offsetWidth = 0;
}; 

var cCarousel = {
    // Configuration
    iFps:                   30,     // Frames per second
    iSpeed:                 3,      // Animation speed
    iSlideDuration:         5000,   // Slide duration in miliseconds
    iFadeOutDuration:       500,    // Fade out duration in miliseconds
    iArrowWidth:            12,     // Width of the highlight arrow
    
    // Vars
    sSelectedMenu:          null,
    iAnimationTimer:        null,
    iSlideTimer:            null,
    iReturnDelay:           null,
    oHighlight:             null,
    aMenus:                 new Array(),
    iTargetPos:             null,
    aCarouselData:          new Array(),
    iActiveSlideIndex:      -1,
    
    init:                   function() {
                                // Parse carousel data
                                var aListItems = $('dl#carouselDefinition').children();
                                $.each(aListItems, function ()
                                {
                                    var sTagName = this.tagName.toLowerCase();
                                    
                                    if (sTagName == 'dt')
                                    {
                                        var oCarouselData = new cCarouselData();
                                        oCarouselData.title = $(this).html();
                                        
                                        cCarousel.aCarouselData.push(oCarouselData);
                                    }
                                    else if (sTagName == 'dd')
                                    {
                                        var oCarouselData = cCarousel.aCarouselData[cCarousel.aCarouselData.length - 1];
                                        
                                        var oLink = $(this).find('a')[0];
                                        var oImage = $(oLink).find('img')[0];
                                        
                                        oCarouselData.link = $(oLink).attr('href');
                                        oCarouselData.image = $(oImage).attr('src');
                                    }
                                });
                                
                                // Build new html object
                                var oCarouselDiv =  $('<div/>',
                                                        {
                                                            id:     'carousel'
                                                        }
                                                    )
                                                        .append(
                                                            $('<div/>', {
                                                                id:     'carouselImageContainer'
                                                                }
                                                            )
                                                        )
                                                        .append(
                                                            $('<div/>', {
                                                                'id': 'carouselFooter'
                                                            })
                                                                .append(
                                                                    $('<div/>', {
                                                                        id:     'carouselFooterArrow',
                                                                        html:   '&nbsp;'
                                                                    })
                                                                )
                                                                .append(
                                                                    $('<ul/>', {
                                                                        id:     'carouselList'
                                                                    })
                                                                )
                                                        );
                                                    
                                                        
                                // Replace old with new
                                $('dl#carouselDefinition').replaceWith(oCarouselDiv);
                                
                                // Create slide elements
                                for (var i = 0; i < cCarousel.aCarouselData.length; i++)
                                {
                                    
                                    var oCarouselData = cCarousel.aCarouselData[i];
                                    
                                    $('div#carouselImageContainer') .append(
                                                                        $('<a/>', 
                                                                            {
                                                                                id:         'carouselImage_' + i,
                                                                                href:       oCarouselData.link
                                                                            }
                                                                        )
                                                                        .append(
                                                                            $('<img/>', 
                                                                                {
                                                                                    src:        oCarouselData.image,
                                                                                    title:      oCarouselData.title
                                                                                }
                                                                            )
                                                                        )
                                                                    );
                                                                        
                                    $('ul#carouselList') .append(
                                                                        $('<li/>')
                                                                        .append(
                                                                            $('<a/>', 
                                                                                {
                                                                                    href:       oCarouselData.link,
                                                                                    html:       oCarouselData.title
                                                                                }
                                                                            )
                                                                        )
                                                                    );
                                }
            
            
                                // Carousel items
                                var oMenuList = document.getElementById('carouselList');

                                // Highlight
                                cCarousel.oHighlight = document.getElementById('carouselFooterArrow');
                                
                                // All menubuttons
                                var aMenuButtons = oMenuList.getElementsByTagName('li');
                                
                                // Loop through buttons
                                var i = aMenuButtons.length;                        
                                while (i--) {
                                    // Save carousel data index
                                    aMenuButtons[i].carouselDataIndex = i;
                                    cCarousel.aCarouselData[i].offsetLeft = aMenuButtons[i].offsetLeft;
                                    cCarousel.aCarouselData[i].offsetWidth = aMenuButtons[i].offsetWidth;
                                    
                                    cCarousel.aMenus[i] = aMenuButtons[i].id;
                                    
                                    aMenuButtons[i].onmouseover = cCarousel.onMenuMouseOver;
                                    aMenuButtons[i].onmouseout = cCarousel.onMenuMouseOut;
                                    
                                    if (aMenuButtons[i].className == 'selected') {                                    
                                        // Save name selected item
                                        cCarousel.sSelectedMenu = aMenuButtons[i].id;
                                        
                                        // Set active slide
                                        cCarousel.iActiveSlideIndex = i;
                                        cCarousel.returnHighlight();
                                    }
                                }
                                
                                // Slides
                                var i = cCarousel.aCarouselData.length;
                                while (i--) {
                                    var oImage = document.getElementById('carouselImage_' + i);
                                    
                                    oImage.carouselDataIndex = i;
                                    oImage.onmouseover = function () { cCarousel.pauseSlideShow(); };
                                    oImage.onmouseout = function(){ cCarousel.resumeSlideShow(); };
                                }
                                
                                // Start slideshow
                                cCarousel.nextSlide();
                            },
    
    nextSlide:              function() {
                                // Calculate next slide
                                var index = (cCarousel.iActiveSlideIndex >= cCarousel.aCarouselData.length - 1) ? 0 : cCarousel.iActiveSlideIndex + 1;
                                cCarousel.goToSlide(index);

                                // Reset the timer
                                cCarousel.iSlideTimer = setTimeout("cCarousel.nextSlide()", cCarousel.iSlideDuration);
                            },
                        
    goToSlide:              function(index) {
                                // Fade in new
                                cCarousel.makeImageActive(index);
                                
                                // Fade out current
                                cCarousel.fadeOutImage(cCarousel.iActiveSlideIndex);
                            
                                // Save new active slide
                                cCarousel.iActiveSlideIndex = index;
                            
                                // Return highlight
                                cCarousel.returnHighlight();
                            },
                        
    pauseSlideShow:         function() {
                                clearTimeout(cCarousel.iSlideTimer);
                            },
                        
    resumeSlideShow:        function() {
                                cCarousel.iSlideTimer = setTimeout("cCarousel.nextSlide()", cCarousel.iSlideDuration);
                            },
    
    onMenuMouseOver:        function() {
                                cCarousel.pauseSlideShow();
                                
                                if (this.carouselDataIndex != cCarousel.iActiveSlideIndex)
                                {
                                    cCarousel.goToSlide(this.carouselDataIndex);
                                }
                            },
        
    onMenuMouseOut:         function() {
                                cCarousel.resumeSlideShow();
                            },
                        
    makeImageActive:        function(iIndex) {             
                                var oImage = $('a#carouselImage_' + iIndex)[0];
                                
                                $(oImage)   .css('z-index', 0)
                                            .css('opacity', 1);
                            },
                        
    fadeOutImage:           function(iIndex) {
                                var oImage = $('a#carouselImage_' + iIndex)[0];

                                $(oImage).animate(
                                    {
                                        opacity: 0
                                    }, 
                                    cCarousel.iFadeOutDuration,
                                    'easeOutQuad',
                                    function ()
                                    {
                                        $(this).css('z-index', -1);
                                        cCarousel.activeSlideToFront();
                                    }
                                );
                            },
                        
    activeSlideToFront:     function() {
                                var oImage = $('a#carouselImage_' + cCarousel.iActiveSlideIndex)[0];
                                $(oImage)   .css('z-index', 1).css('opacity', 1);
                            },
    
    returnHighlight:        function() {
                                cCarousel.iTargetPos = cCarousel.aCarouselData[cCarousel.iActiveSlideIndex].offsetLeft + Math.round((cCarousel.aCarouselData[cCarousel.iActiveSlideIndex].offsetWidth - 7) / 2) - (cCarousel.iArrowWidth / 2);
                                
                                cCarousel.startArrowAnimation();
                            },
    
    startArrowAnimation:     function() {
                                cCarousel.stopArrowAnimation();
                                
                                cCarousel.iAnimationTimer = setInterval("cCarousel.animateArrow()", 1000 / cCarousel.iFps);
                            },
                    
    stopArrowAnimation:      function() {
                                clearInterval(cCarousel.iAnimationTimer);
                            },
                    
    animateArrow:            function() {
                                var iDifference = cCarousel.iTargetPos - cCarousel.oHighlight.offsetLeft;

                                if (iDifference >= -2 && iDifference <= 2) {
                                    var iNewPos = cCarousel.iTargetPos;
                                    cCarousel.stopArrowAnimation();
                                } else {
                                    var iDistance = iDifference * (cCarousel.iSpeed / 10);                            
                                    var iNewPos = cCarousel.oHighlight.offsetLeft + iDistance;
                                }
                                
                                cCarousel.oHighlight.style.left = iNewPos + "px";
                            }                  
};