function wallpaper() {
    var $img = $('#wallpaper img');
    var wh = $(window).height();
    var ww = $(window).width();
    var ratio = $img.width() / $img.height();
    var wratio = ww / wh;
    if (ww / ratio < wh) {
        $img.height(wh).width(wh * ratio);
        $img.css({'margin-left':'-'+($img.width()-ww)/2+'px', 'margin-top':0});
    } else {
        $img.width(ww).height(ww / ratio);
        $img.css({'margin-top':'-'+($img.height()-wh)/2+'px', 'margin-left':0});
    }
}

var Circle = function(options) {this.init(options);};
Circle.prototype = {
    id: undefined,
    $obj: undefined,
    top: undefined,
    left: undefined,
    right: undefined,
    $container: undefined,
    init: function(options) {
        if ($.isPlainObject(options)) {
            $.each(options, $.proxy(function(key, val){
                this[key] = val;
            }, this));
        }
        this.id = 'circle-' + Math.round(Math.random() * 10000);
        this.$container = (this.$container === undefined) ? $('body') : this.$container;
        this.$container.append('<div id="' + this.id + '" class="circle"><\/div>');
        this.$obj = $('#' + this.id);
        if (undefined !== this.left) {
            this.$obj.css({
                'top': this.top + 'px',
                'left': this.left + 'px'
            });
        } else if (undefined !== this.right) {
            if (this.right >= 0) {
                this.$obj.css({
                    'top': this.top + 'px',
                    'right': this.right + 'px'
                });
            } else {
                this.$obj.css({
                    'top': this.top + 'px',
                    'right': 0,
                    'background-position': -this.right + 'px 0'
                });
            }
        }
    },
    down: function() {
        this.$obj.animate({
            'top' : this.top + $(window).height() + 'px'
        }, $.proxy(function() {this.$obj.hide()}, this));
    },
    up: function() {
        this.$obj.show().animate({
            'top' : this.top + 'px'
        });
    }
};

$(function(){
    $(window).resize(function() {
        wallpaper();
    });
    
    wallpaper();
    
    //tooltip
    $("#wallpaper-info a.wallpaper[title]").tooltip({
        // place tooltip on the right edge
        position: "bottom left",
        // a little tweaking of the position
        offset: [-2, 10],
        // use the built-in fadeIn/fadeOut effect
        effect: "fade",
        // custom opacity setting
        opacity: 0.7
    });
    
    /*/circles
    var h = $(window).height();
    var circles = new Array();
    for (var i = 0; i <= 2; i++) {
        circles.push(new Circle({
            left: Math.round(Math.random() * 100 - 50),
            top: Math.round(h / 3 * i + Math.random() * 100 - 50)
        }));
    }
    for (var i = 0; i <= 2; i++) {
        circles.push(new Circle({
            right: Math.round(Math.random() * 100 - 50),
            top: Math.round(h / 3 * i + Math.random() * 100 - 50)
        }));
    }*/
    
    //hide/show content
    $('#wallpaper-info a.wallpaper').click(function(){
        $('#wallpaper-info a.back').show();
        $(this).hide();
        $('#header, #wrap').animate({
            'top' : $(window).height() + 'px'
        }, function(){
            $('#header, #wrap, #footer').hide();
        });
        $(circles).each(function(id, circle){
            circle.down();
        });
        setTimeout(wallpaper, 500);
        return false;
    });
    $('#wallpaper-info a.back').click(function(){
        $('#wallpaper-info a.wallpaper').show();
        $(this).hide();
        $('#header, #wrap, #footer').show();
        $('#header, #wrap').animate({
            'top' : '0px'
        });
        $(circles).each(function(id, circle){
            circle.up();
        });
        setTimeout(wallpaper, 500);
        return false;
    });    
});