/* Cufon text replacement */
Cufon.replace('.page-greeting', {fontFamily: 'Museo', textShadow: '#b9adbd 2px 2px'});
Cufon.replace('.page-slogan', {fontFamily: 'Museo', textShadow: '#b9adbd 1px 1px'});
Cufon.replace('.page-description', {fontFamily: 'Museo Sans 500'});
Cufon.replace('#primary-nav a', {fontFamily: 'Museo 500', hover: true});
Cufon.replace('#primary h3, #secondary h3, .site-reminder a strong', {fontFamily: 'Museo 500'});
Cufon.replace('#primary h2, #secondary h2, .site-reminder a', {fontFamily: 'Museo'});
Cufon.replace('#primary h4, #secondary h4', {fontFamily: 'Museo Sans 500'});
Cufon.replace('#contact-form-errors', {fontFamily: 'Museo Sans 500'});
Cufon.replace('#footer h2', {fontFamily: 'Museo 500', textShadow: '#222222 1px 1px'});

/* Feature slider */
$(function () {
    $.fn.slider = function(speed) {
        return this.each(function(){
            // Set up variables.
            var container = $(this);
            var panels = container.children();
            var panel_height = panels.eq(0).outerHeight();
            var panel_width = panels.eq(0).outerWidth();
            var panel_inner_width = panels.eq(0).width();
            
            // Create the slider.
            panels.wrapAll('<div class="slider"></div>');
            var slider = container.children('.slider');
            
            // Position the container, slider and the panels.
            container.css({
               position: 'relative',
               overflow: 'hidden',
               height: panel_height
            });
            slider.css({
                position: 'absolute',
                left: 0,
                top: 0,
                width: panel_width*panels.length,
                height: panel_height
            });
            panels.css({
                'float': 'left',
                width: panel_inner_width
            });
            
            var current_panel = 0;
            var last_panel = panels.length - 1;
            
            // Set up the buttons.
            var left_button = $('<a href="#" class="slider-button slider-left"></a>');
            var right_button = $('<a href="#" class="slider-button slider-right"></a>');
            var buttons = $(left_button).add(right_button);
            container.after(buttons);
            
            // Position the buttons.
            var button_height = left_button.outerHeight();
            var button_width = left_button.outerWidth();
            left_button.css({
                'float': 'left',
                'margin-left': -button_width - 5,
                'margin-top': -parseInt(slider.outerHeight()/2 + button_height/2)
            });
            right_button.css({
                'float': 'right',
                'margin-right': -button_width - 5,
                'margin-top': -parseInt(slider.outerHeight()/2 + button_height/2)
            });
            
            // Set up the animation.
            function animateToPanel(next_panel) {
               slider.animate({
                   'left': -next_panel*panel_width
               }, speed, 'swing', function () {
                   current_panel = next_panel;
               });
            };
            
            left_button.click(function () {
                if (current_panel > 0) {
                    animateToPanel(current_panel - 1);
                } else {
                    animateToPanel(last_panel);
                }
                return false;
            });
            
            right_button.click(function () {
                if (current_panel < last_panel) {
                    animateToPanel(current_panel + 1);
                } else {
                    animateToPanel(0);
                }
                return false;
            });

        });
    };
    $('#primary .feature').slider(300);
});

/* Grid overlay */
$(function () {
    if ($('body').hasClass('section-home')) {
        var gridOverlay = $('<div id="grid-overlay" class="container_12"></div>');
        $('body').append(gridOverlay);
        for (i=1;i<=12;i++) {
            gridOverlay.append('<div class="grid_1"></div>');
        }
        $('#show-grid').click(function () {
            gridOverlay.height($('body').height()).fadeTo(0, 0.2).show();
            return false;
        });
        gridOverlay.click(function () {
            $(this).hide();
        });
    }
});