jQuery.easing.def = "easeInOutExpo";

var isIE = ($.browser.msie);

$(function(){
    
    var delay = 850; // default animation duration
    
    // binds a helper function to the onfocus of the .job elements
    $('.job')
        .bind('focus', function(){
            $('html, body').animate({scrollTop: $(this).offset().top - 30}, delay);
            $('.job.focus').removeClass('focus');
            $(this).addClass('focus');
        })
        .css({'position': 'relative'});
    $('.job:first').addClass('focus');
    
    // hides the non-image contents of figure's
    $('.gallery figure').find(':not(img)').hide();
    
    // add CSS styling to the gallery and its elements
    $('.gallery').css({'overflow': 'hidden'});
    $('.gallery figure').css({'float': 'left'});
    
    $('.gallery').each(function(){
        var w = $(this).width();
        var n = $(this).find('figure').length;
        
        // wrapps the figure elements into a helper div
        $(this).find('figure').wrapAll('<div class="wrapper"></div>');

        // sets the .wrapper width appropriatedly so it
        // accomodates all the figures inside of it
        $(this).find('.wrapper').css({
            'width': w * n,
            'position': 'relative',
        });
        
        // builds the image slider if there's more than 1 image in the gallery
        if(n > 1){
            for(i = 1; i <= n; i++){
                link = $('<a href="#" class="circle inset kerning">'+i+'</a>');
                link.attr('title', 'View image ' + i);
                if(i == 1){ 
                    link.addClass('current'); 
                }
                
                $(this).parent().find('.pagination').append(link, " ");
            }
        
            // inserts a hint to the end of the .pagination elements
            var hint = $('<small><kbd>&larr;</kbd> and <kbd>&rarr;</kbd> keyboard keys are fine too. ;)</small>')
            if(!isIE){ $(this).parent().find('.pagination').append(hint); }
        }
        
        // image slider actions
        $(this).parent().find('.pagination a').click(function(){
            $(this).closest('.job').focus();
            if( !$(this).hasClass('current') ){                
                var offset = $(this).index();

                // scrolling in reverse direction
                $(this).closest('.job').find('.wrapper').animate({
                    'left': - w * offset,
                }, delay);

                // toggles the class of current
                $(this)
                    .siblings('.current').removeClass('current').end()
                    .addClass('current');
            }
            return false;
        });
    });
    
    // builds the project slider if there's more than 1 project
    if($('.gallery').length > 1){
        var prev = $('<button value="prev" class="prev arrow" title="Go to the previous project">Previous project</button>');
        var next = $('<button value="next" class="next arrow" title="Go to the next project">Next project</button>');
        
        $('.gallery:not(:first)').parent().append(prev, " ");
        $('.gallery:not(:last)').parent().append(next);
        
        // project slider actions
        $('.job button').click(function(){
            var direction = $(this).attr('value');
            $(this).closest('.job')[direction]().focus();
        });
        
        var tip = $('<small class="projecttip"><kbd>&uarr;</kbd> and <kbd>&darr;</kbd> keyboard keys are cool!</small>')
        if(!isIE){ $('.gallery').parent().find('aside').after(tip); }
    }
    
    // image slider keyboard navigation
    $(window).keyup(function(key){
        if(key.keyCode == 37){          // left
            
            // if the first image is the current, go to the last
            if( $('.job.focus .pagination a.current').is(':first-child') ){
                $('.job.focus .pagination a:last').click();
            } else {
                // otherwise, go to the previous
                $('.job.focus .pagination a.current').prev('a').click();
            }
            
        } else if(key.keyCode == 39){   // right
            
            // if the last image is the current, go to the first
            if( $('.job.focus .pagination a.current').next().is(':not(a)') ){
                $('.job.focus .pagination a:first').click();
            } else {
                // otherwise, go to the next
                $('.job.focus .pagination a.current').next('a').click();
            }
            
        }
    });
    
    // project slider keyboard navigation
    $(window).keydown(function(key){
        
        if(key.keyCode == 40) {         // down
            if( $(window).scrollTop() < $('.job:first').offset().top - 30 ){
                $('.job:first').focus();
            } else {
                if( !$('.job.focus').is(':last-child') ){
                    $('.job.focus button.next').click();
                } else {
                    $('.job:first').focus();
                }
            }
            return false;
        } else if(key.keyCode == 38){   // up
            if( !$('.job.focus').is(':first-child') ){
                $('.job.focus button.prev').click();
            } else {
                $('.job:last').focus();
            }
            return false;
        }
        
    });
});