$(function() {

    var MESSAGE_URL = 'http://app.ppworks.net/service/image_text/convert/font:ohisama_bold/';
    var TITLE_IMAGE_1 = '/images/title_1.png';
    var TITLE_IMAGE_2 = '/images/title_2.png';

    $('html').mousemove(function(e) {
        var body = $('body');
        body.animate({'background-color': rgb_color(), 'queue': false}, 5000);
    }).click(function(e) {
        var url = MESSAGE_URL
            + '/angle:' + Math.floor(Math.random() * 30 - 15)
            + '/text:' + location.hostname
            + '/size:' + Math.floor(Math.random() * 20 + 20)
            + '/-trans.png'
        ;
        
        var x = e.clientX;
        var y = e.clientY;
        var image = new Image();
        image.onload = function(e) {
            if ($.browser.msie && $.browser.version < 7.0) {
                $(this).addClass('fixPNG');
                DD_belatedPNG.fix('.fixPNG');
            }
            $(this)
            .appendTo('body')
            .css('position', 'absolute')
            .css('left', x - $(image).width()/2)
            .css('top', y - $(image).height()/2)
            .animate({rotate: '+=30deg'}, 100)
            .animate({rotate: '-=30deg'}, 100)
            .animate({rotate: '+=15deg'}, 100)
            .animate({rotate: '-=15deg'}, 100)
            .animate({rotate: '+=7deg'}, 100)
            .animate({rotate: '-=7deg'}, 100)
            ;
        };
        image.src = url;
        title_animation(); 
    });

    function rgb_color() {
        return 'rgb(' + [gen_color(), gen_color(), gen_color()].join(',') + ')';
    }

    function gen_color() {
        return Math.floor(Math.random() * 255);
    }

    function title_animation_1() {
        $('img#title_image')
            .attr('src', TITLE_IMAGE_1);
        if ($.browser.msie && $.browser.version < 7.0) {
            DD_belatedPNG.fix('.fixPNG');
        }
    }

    function title_animation_2() {
        $('img#title_image')
            .attr('src', TITLE_IMAGE_2);
        if ($.browser.msie && $.browser.version < 7.0) {
            DD_belatedPNG.fix('.fixPNG');
        }
    }

    function title_animation() {
        $('img#title_image')
            .animate({fontSize: 1}, 80, 'linear', title_animation_2)
            .animate({fontSize: 1}, 80, 'linear', title_animation_1)
            .animate({fontSize: 1}, 80, 'linear', title_animation_2)
            .animate({fontSize: 1}, 80, 'linear', title_animation_1)
        ;
    }

    function init() {
        var img = new Image();
        img.onload = function(e) {
            title_animation();
        };
        img.src = TITLE_IMAGE_2;
        $('img#title_image').addClass('fixPNG');
    }
    init();
});