var napkinSlider = {
    div: null,
    img: null,
    width: '23.438em',
    animator: null,
    onload: null,
    initialized: false,
    init: function() {
        napkinSlider.div = $('div.slidingNapkin');
        napkinSlider.img = napkinSlider.div.find('img');
        napkinSlider.animator = new GrandRating.UI.Animator();
        napkinSlider.initialized = true;

        napkinSlider.img.load(function() {
            napkinSlider.setLoaded();
            if (napkinSlider.onload)
                napkinSlider.onload();
        });
        
        napkinSlider.slideIn();
    },
    isLoaded: function() {
        return napkinSlider.initialized && !!napkinSlider.img.attr('isLoaded');
    },
    setLoaded: function() {
        napkinSlider.img.attr('isLoaded', '1');
    },
    slideIn: function(complete) {
        if (!napkinSlider.isLoaded()) {
            napkinSlider.onload = function() {
                napkinSlider.slideIn(complete);
            };
            return;
        }

        napkinSlider.div.css({visibility: 'visible'});
        napkinSlider.animator.animate({
            duration: 500,
            targets: [{
                element: napkinSlider.div.get(0),
                props: {marginRight: {from: '-'+napkinSlider.width, to: 0}}
            }],
            complete: complete
        });
    },
    slideOut: function(complete) {
        napkinSlider.onload = null;
        if (!napkinSlider.isLoaded()) {
            if (complete)
                complete();
            return;
        }

        napkinSlider.div.css({visibility: 'visible'});
        napkinSlider.animator.animate({
            duration: 250,
            targets: [{
                element: napkinSlider.div.get(0),
                props: {marginRight: {from: 0, to: '-'+napkinSlider.width}}
            }],
            complete: complete
        });
    }
};

Sys.Application.add_load(function() {
    napkinSlider.init();
});