/**
 * Homepage Carousels
 *
 * @param int width
 * @param int height
 * @param int page // Start page
 * @param int interval // Animation interval in milliseconds
 */
function Carousel(width, height, page, interval) 
{
    this.width = width;
    this.height = height;
    this.page = page;
    this.pages = null;
    this.loop = null;
    this.interval = interval;
    
    /**
     *  Generates controls and sets initial styles
     */
    this.init = function() 
    {
        this.pages = jQuery('#Carousel > div').size();
        
        jQuery('#SearchOpen').attr('href', 'javascript://');
        jQuery('#SearchOpen').click(function() {
            jQuery('#SearchOpen').animate({
                top: -34
            },'fast', function() {
                jQuery('#Search input:first-child').focus();
                jQuery('#Search').animate({
                    top: 0
                });
            });
        });
        
        jQuery('#Search a').click(function() {
            jQuery('#Search').animate({
                top: -34
            },'fast', function() {
                jQuery('#SearchOpen').animate({
                    top: 0
                });
            });
        });
        
        jQuery('#Carousel > div').css({
            width: this.width,
            height: this.height,
            display: 'block'
        }); 
        
        jQuery('#Progress').append('<div></div>');
        
        jQuery('#Carousel').css('width', this.pages * this.width);
        
        // Builds carousel navigation links
        for (var i = 1; i <= this.pages; i++) {
            link = jQuery('<a href="javascript://">'+i+'</a>')
            // The object reference is stored on the link so that it can be 
            // used from within binded events
            jQuery(link).data('carouselObj', this);
            jQuery(link).data('page', i);
            jQuery(link).click(function() {
                var obj = jQuery(this).data('carouselObj');
                obj.gotoPage(jQuery(this).data('page'), true);
            });
            jQuery('#Overlay .Right').append(link);
        }
        // Set the first one to active initialy
        jQuery('#Overlay .Right a:first-child').addClass('active');
        
        // Kick the tires / light the fires
        this.start();
        this.animateProgress();
    }
    
    /**
     * Starts the main loop that fires at the defined interval
     */
    this.start = function() 
    {
        // Stores the loop to a parameter so that it can be accessed and 
        // stopped/restarted
        this.loop = window.setInterval(function () {
            var nextPage = this.page + 1;
            this.gotoPage(nextPage, false);
        }.bind(this), this.interval);
    }
    
    /**
     * Animates the #Carousel div to the correct position for this page
     * and sets the active page in the navigation
     *
     * @param int page
     * @param bool restart
     */
    this.gotoPage = function(page, restart) 
    {
        if (page > this.pages) {
            page = 1;
        }
        this.page = page;
        
        var offset = this.width * (page - 1);
        jQuery('#Carousel').animate({
            left: -offset
        });
        
        jQuery('#Overlay .Right a').removeClass('active');
        jQuery('#Overlay .Right a:nth-child('+page+')').addClass('active');
        
        // If the page is changed manually the main loop gets reset so the timer
        // is in the correct place
        if (restart) {
            clearInterval(this.loop);
            this.start();
        }
        
        this.animateProgress();
    }
    
    /**
     * Animates the page progress bar
     */
    this.animateProgress = function() 
    {
        // Move the div under the page in the nav
        var offset = jQuery('#Overlay .Right a:nth-child('+this.page+')').position();
        jQuery('#Progress').css({
            top: -117,
            left: offset.left + 6
        });
        // Remove the progress bar so that any animation was already playing
        // is stopped and rebuild it
        jQuery('#Progress div').remove();
        jQuery('#Progress').append('<div style="width:1px;"></div>');
        jQuery('#Progress div').animate({
            width: 27
        }, this.interval - 500, 'linear');
    }
}