$(document).ready(function() {

    $('.sb').click(function(event){
        // which was clicked?
        var clicked = $(this).index('.sb');
            
        // create smoothbox
       $('body').append('<div class="smoothbox sb-load"><div class="smoothbox-table"><div class="smoothbox-centering"><div class="smoothbox-sizing"><div class="sb-nav"><a href="#" class="sb-prev" alt="previous">←</a><a href="#" class="sb-cancel" alt="close">×</a><a href="#" class="sb-next" alt="next">→</a></div><ul class="sb-items"></ul></div></div></div></div>');
          
        $.fn.reverse = [].reverse;
        // get each picture, put them in the box
        $('.sb').reverse().each(function() {
           var href = $(this).attr('href');
            if ($(this).attr('title')) {
                var caption = $(this).attr('title');
                $('.sb-items').append('<div class="sb-item"><div class="sb-caption">'+ caption +'</div><img src="'+ href + '"/></div>');
            }   
            else {
                  $('.sb-items').append('<div class="sb-item"><img src="'+ href + '"/></div>');
                
           }
        });
        
        $('.sb-item').slice(0,-(clicked)).appendto('.sb-items');
        $('.sb-item').not(':last').hide();
        $('.sb-item img:last').load(function() { 
            $('.smoothbox-sizing').fadein('slow', function() {
                $('.sb-nav').fadein();
                $('.sb-load').removeclass('sb-load');
            });
        });
        event.preventdefault();
    });

    $('.sb-cancel').live('click', function(event) {
        $('.smoothbox').fadeout('slow', function() {
            $('.smoothbox').remove();
        });
        event.preventdefault();
    });

    $('.sb-next').live('click', function(event) {
        
        if(jquery.browser.version.substring(0, 2) == "8.") {
            $('.sb-item').eq(-2).fadein('fast');
            $('.sb-item:last').fadeout().removeclass('sb-item-ani').prependto('.sb-items');
        } else {
            $('.sb-item:last').addclass('sb-item-ani');
        // after animation, move order & remove class
        
            $(".sb-item:last").bind("transitionend webkittransitionend otransitionend mstransitionend", function(){
                $('.sb-item').eq(-2).addclass('no-trans').fadein('fast');
                $(this).removeclass('sb-item-ani').prependto('.sb-items').hide();
                $('.sb-item:last').removeclass('no-trans');
                $('.sb-item').unbind();
            }); 
        }
        event.preventdefault();
    });

    $('.sb-prev').live('click', function(event) {   
        if(jquery.browser.version.substring(0, 2) == "8.") {
            $('.sb-item:first').appendto('.sb-items').fadein();
        } else {
            $('.sb-item:last').hide(); 
            $(".sb-item:first").addclass('sb-item-ani2 no-trans').appendto('.sb-items');
            $('.sb-item:last').show().removeclass('no-trans').delay(1).queue(function(next){
                $('.sb-item:last').removeclass('sb-item-ani2');
                next();
            });    
        }
        event.preventdefault();
    });
});