$(function() {
    $('#cover').cycle({
       fx:        'fade',
       cssBefore: { opacity: 1 },
       animOut:   { opacity: 0 }
    });
    // right align the first image
    $('#cover img:eq(0)').css({'left':'auto','right':0});
});

// define new transition called 'juro'
$.fn.cycle.transitions.juro = function($cont, $slides, opts) {
    var d = opts.direction || 'left';
    var w = $cont.css('overflow','hidden').width();
    var h = $cont.height();
    opts.before.push(function(curr, next, opts) {
        opts.cssBefore = opts.cssBefore || {};
        opts.cssBefore.zIndex = 2;
        opts.cssBefore.display = 'block';

        if (d == 'right')
            opts.cssBefore.left = -(w - $(next).outerWidth());
        else if (d == 'up')
            opts.cssBefore.top = (w - $(next).outerHeight());
        else if (d == 'down')
            opts.cssBefore.top = -(w - $(next).outerHeight());
        else {
            opts.cssBefore.left = w;
            opts.animIn.left = (w - $(next).outerWidth());
        }
        $(curr).css('zIndex',1);
    });
    if (!opts.animIn)  opts.animIn = { left: 0, top: 0 };
    if (!opts.animOut) opts.animOut = { left: 0, top: 0 };
    opts.cssAfter = opts.cssAfter || {};
    opts.cssAfter.zIndex = 2;
    opts.cssAfter.display = 'none';
};