// homepage slider
var homeSlideshow = {
    context: false,
    slides: false,
    nav: false,
    buttons: false,
    timeout: 10000,
    slideSpeed: 1000,
    buttonSpeed: 300,

    init: function() {
        this.context = $('#home-slideshow');
        this.slides = $('div.slides > ul', this.context);
        this.nav = $('ul.slides-nav', this.context);
        this.buttons = this.nav.children();

        // add rounded corners to slideshow
        this.context.append('<div class="corners"></div>');

        // remove hard coded navigation items from DOM
        // because they aren't hooked up to jQuery cycle
        this.buttons.remove();

        // prepare slideshow and jQuery cycle buttons
        this.prepareSlideshow();

        // append span to new jQuery cycle buttons for arrow styling
        this.buttons.append('<span class="arrow"></span>');

        this.prepareSignupButton();
    },

    prepareSlideshow: function() {
        this.slides.cycle({
            fx: 'scrollHorz',
            fit: 1,
            timeout: homeSlideshow.timeout,
            speed: homeSlideshow.slideSpeed,
            fastOnEvent: homeSlideshow.buttonSpeed,
            pager: homeSlideshow.nav,
            pagerAnchorBuilder: homeSlideshow.prepareButtons,
            before: homeSlideshow.activateButton,
            pauseOnPagerHover: true,
            pause: true
        });

        // make sure slideshow pauses if user
        // is filling in the demo forms
        this.slides.find('input').bind('focus', function(e) {
            homeSlideshow.slides.trigger('mouseover');
        });

        // make sure slideshow resumes if user
        // stops filling in the demo forms
        this.slides.find('input').bind('blur', function(e) {
            homeSlideshow.slides.trigger('mouseout');
        });
    },

    prepareButtons: function(i, slide) {
        // return markup from hardcoded buttons for use as jQuery cycle buttons
        // (attaches necessary jQuery cycle events to buttons)
        return homeSlideshow.buttons.eq(i);
    },

    prepareSignupButton: function() {
        var signUpButton = this.buttons.eq(this.buttons.length-1);

        this.nav.append(signUpButton);

        signUpButton.bind('click', function(e) {
            window.location = $(this).children('a').attr('href');
            e.preventDefault();
        });
    },

    activateButton: function(currentSlide, nextSlide) {
        // get the next button we'd like to make active
        var nextButton = homeSlideshow.buttons.children('a[href="#' + nextSlide.id + '"]');

        // if there is a next button        
        
        if(nextButton.length > 0) {
            // remove active styling from all other buttons
            homeSlideshow.buttons.removeClass('on');

            // add active styling to next button
            nextButton.parent().addClass('on');
        }
    }
};