/* SLIDING CONTENT PANELS */

$(document).ready(function() {
    $('body').addClass('fx');
    
    if ($('#content div.section').length) {
        
        // Wrap the whole content in two containers
        $('#content > *').wrapAll('<div class="scroll"><div class="scrollContainer" /></div>');
        
        // Move each section's elements into the section element itself
        $('#content div.section').each(function() {
            while ($(this).next().length) {
                var elem = $(this).next();
                if ($(elem).is('.section')) break;
                $(this).append(elem);
            }
        });
        
        // Create section navigation
        var nav = $('<ul class="navigation" />');
        var maxHeight = 0;
        $('#subnav').append(nav);
        $('#content div.section').each(function() {
            var title = $(this).find('h2').text();
            var slug = $(this).attr('id');
            var li = $('<li/>');
            var a = $('<a/>');
            a.attr('href', '#' + slug);
            a.text(title);
            li.append(a);
            $('#subnav ul.navigation').append(li);
            maxHeight = Math.max(maxHeight, $(this).height());
        });
        $('div.scroll').height(maxHeight);
        $(this).find('h2').remove();
        
        
        // the following code is from http://jqueryfordesigners.com/coda-slider-effect/
            
        var $panels = $('#content .scrollContainer > div.section');
        var $container = $('#content .scrollContainer');
            
        // if false, we'll float all the panels left and fix the width 
        // of the container
        var horizontal = true;
            
        // float the panels left if we're going horizontal
        if (horizontal) {
          $panels.css({
            'float' : 'left',
            'position' : 'relative' // IE fix to ensure overflow is hidden
          });
            
          // calculate a new width for the container (so it holds all panels)
          $container.css('width', $panels[0].offsetWidth * $panels.length);
        }
            
        // collect the scroll object, at the same time apply the hidden overflow
        // to remove the default scrollbars that will appear
        var $scroll = $('#content .scroll').css('overflow', 'hidden');
            
        // apply our left + right buttons
        // $scroll
        //   .before('<img class="scrollButtons left" src="images/scroll_left.png" />')
        //   .after('<img class="scrollButtons right" src="images/scroll_right.png" />');
            
        // handle nav selection
        function selectNav() {
          $(this)
            .parents('ul:first')
              .find('a')
                .removeClass('selected')
              .end()
            .end()
            .addClass('selected');
        }
            
        $('#subnav .navigation').find('a').click(selectNav);
            
        // go find the navigation link that has this target and select the nav
        function trigger(data) {
          var el = $('#content .navigation').find('a[href$="' + data.id + '"]').get(0);
          selectNav.call(el);
        }
            
        if (window.location.hash) {
          trigger({ id : window.location.hash.substr(1) });
        } else {
          $('ul.navigation a:first').click();
        }
            
        // offset is used to move to *exactly* the right place, since I'm using
        // padding on my example, I need to subtract the amount of padding to
        // the offset.  Try removing this to get a good idea of the effect
        var offset = parseInt((horizontal ? 
          $container.css('paddingTop') : 
          $container.css('paddingLeft')) 
          || 0,10) * -1;
            
            
        var scrollOptions = {
          target: $scroll, // the element that has the overflow
            
          // can be a selector which will be relative to the target
          items: $panels,
            
          navigation: '.navigation a',
            
          // selectors are NOT relative to document, i.e. make sure they're unique
          prev: 'img.left', 
          next: 'img.right',
            
          // allow the scroll effect to run both directions
          axis: 'xy',
            
          onAfter: trigger, // our final callback
            
          offset: offset,
            
          // duration of the sliding effect
          duration: 500,
            
          // easing - can be used with the easing plugin: 
          // http://gsgd.co.uk/sandbox/jquery/easing/
          easing: 'swing'
        };
            
        // apply serialScroll to the slider - we chose this plugin because it 
        // supports// the indexed next and previous scroll along with hooking 
        // in to our navigation.
        $('#content').serialScroll(scrollOptions);
            
        // now apply localScroll to hook any other arbitrary links to trigger 
        // the effect
        $.localScroll(scrollOptions);
            
        // finally, if the URL has a hash, move the slider in to position, 
        // setting the duration to 1 because I don't want it to scroll in the
        // very first page load.  We don't always need this, but it ensures
        // the positioning is absolutely spot on when the pages loads.
        scrollOptions.duration = 1;
        $.localScroll.hash(scrollOptions);
        
        
    }
});



/* PHOTOSTRIPS */

var preventSliderAnimation = false;
var photostripWasJustDragged = false;

$(window).load(function() {
    $('.photostrip').each(function(i) {
        var sliderArea = $('ul', this);
        var sliderMaxValue = sliderArea.innerWidth()-$(this).innerWidth();
        var sliderAnimationTimeout;
        var mouseOverPhotostrip = false;
        
        $(this).addClass('fx').append('<div class="slider-container"><div class="slider" /></div>');
        
        $(this).mouseover(function() {
            mouseOverPhotostrip = true;
        }).mouseout(function() {
            mouseOverPhotostrip = false;
        });
        
        var slider = $('.slider', this);
        $(slider).slider({
            min: 0, 
            max: sliderMaxValue,
            animate: true,
            slide: function (ev, ui) {
                $(sliderArea).stop();
                $(slider).stop();
                sliderArea.css('left', '-' + ui.value + 'px');
            }, 
            change: function (ev, ui) {
                $(sliderArea).stop();
                $(slider).stop();
                sliderArea.css('left', '-' + ui.value + 'px');
            }
        });
        var animationDuration = sliderMaxValue*5;
        var animationInterval = 60;
        
        animateSlider = function(direction) {
            if ((direction == 1 && $(slider).slider('value') >= sliderMaxValue) || (direction == -1 && $(slider).slider('value') <= 0)) {
                window.clearInterval(sliderAnimationTimeout);
                sliderAnimationTimeout = window.setInterval(function() { animateSlider(direction*-1); }, animationInterval);
                return;
            }
            if (!preventSliderAnimation && !mouseOverPhotostrip) $(slider).slider('value', $(slider).slider('value')+1*direction);
        };
        
        sliderAnimationTimeout = window.setInterval(function() { animateSlider(+1); }, animationInterval);
        
    });
});


$(document).ready(function() {
    $('a.zoom').fancybox({
        overlayShow: true,
        overlayOpacity: 1,
        padding: 0,
        zoomSpeedIn: 500,
        zoomSpeedOut: 0,
        hideOnContentClick: true,
        callbackOnAfterInit: function() {
            if (photostripWasJustDragged) {
                return false;
            }
            var li = $('.photostrip li:nth-child(' + (this.itemCurrent+1) + ')');
            var ul = li.parent();
            var div = ul.parent('.photostrip');
            
            // If the clicked element is not fully visible, move the photostrip so that it is fully visible before the zooming will start.
            // Otherwise horizontal scrollbars might appear.
            var pos;
            if (((li.position().left + li.width()) - (ul.position().left*-1)) > div.width()) {
                pos = ((li.position().left + li.width()) - div.width());
                ul.css('left', '-' + pos +'px');
                $('.slider').slider('value', pos);
            } else if (((li.position().left) - (ul.position().left*-1)) < 0) {
                pos = (li.position().left);
                ul.css('left', '-' + pos +'px');
                $('.slider').slider('value', pos);
            }
            preventSliderAnimation = true;
            return true;
        },
        callbackOnStart: function() {
            $('body').scrollTo(0,0);
            $.fn.fancybox.scrollBox();
        },
        callbackOnClose: function() {
            preventSliderAnimation = false;
        }
    });
});


$(document).ready(function() {
    /* PROJECT CATEGORIES NAVIGATION – when hovering over the submenu items, highlight the corresponding category image below, and vice versa */
    if ($('ul.categories').length) {
        $('ul.categories a').mouseover(function() {
            $('#subnav a[href="' + $(this).attr('href') + '"]').addClass('hover');
        }).mouseout(function() {
            $('#subnav a[href="' + $(this).attr('href') + '"]').removeClass('hover');
        });
        $('#subnav a').mouseover(function() {
            $('ul.categories a[href="' + $(this).attr('href') + '"]').addClass('hover');
        }).mouseout(function() {
            $('ul.categories a[href="' + $(this).attr('href') + '"]').removeClass('hover');
        });
    }
    
    /* PROJECT DETAILS */
    if ($('#project-details').length) {
        $('#projects-nav').append('<a href="#details" class="project-details-link">' + gettext("Project Details") + '</a>');
        $('.project-details-link').click(function(e) {
            link = this;
            e.preventDefault();
            $('#project-details:visible').fadeOut(function() {
                $(this).removeClass('visible');
                $(link).text(gettext('Project Details'));
                $(link).blur();
                preventSliderAnimation = false;
            });
            $('#project-details:hidden').fadeIn(function() {
                $(this).addClass('visible');
                $(link).text(gettext('Hide Project Details'));
                $(link).blur();
                preventSliderAnimation = true;
            });
        });
    }
    
    $('#project-title').data('original-title', $('#project-title').text());
    $('#projects-nav li a').mouseover(function() {
        $('#project-title').text($(this).attr('title'));
    }).mouseout(function() {
        $('#project-title').text($('#project-title').data('original-title'));
    });
    
});



/* PRESS CLIPPINGS */

$(document).ready(function() {
    $('dl.clippings dd a.details').click(function(e) {
        var detailsDiv = $(this).parent().find('div.details');
        if (detailsDiv.is(':hidden')) {
            $('dl.clippings div.details').fadeOut();
            $(detailsDiv).fadeIn();
        }
        e.preventDefault();
    });
});



/* EXTERNAL LINKS */

$(document).ready(function() {
    $('a.external').attr('target', '_blank');
});