function old_init()
{
    var bgcolor = "#c0bbb8";
    var body = document.getElementById("body");
    body.style.backgroundColor = bgcolor;

    var origin = document.getElementById("origin");

    var image0 = document.createElement("img");
    image0.src = "image0.png";
    var image1 = document.createElement("img");
    image1.src = "image1.png";

    var box = make_flip_box(image0, image1, 310, 200, bgcolor);
    box.style.top = "10px";
    box.style.left = "10px";
    box.style.position = "absolute";
    origin.appendChild(box);

    box.on_click_event = function(e)
    {
        box.flip(400);
    };
}

function make_flip_box(image0, image1, w, h, background_color)
{
    var box = document.createElement("div");
    box.style.width = w+"px";
    box.style.height = h+"px";
    box.style.position = "absolute";
    box.style.backgroundColor = background_color;

    box.image0 = image0;
    box.image1 = image1;

    image0.style.height = h+"px";
    image1.style.height = h+"px";

    image0.style.visibility = "hidden";
    image1.style.visibility = "hidden";

    image0.style.position = "absolute";
    image1.style.position = "absolute";

    image0.onclick = function(e) { if(box.on_click_event) box.on_click_event(e); };
    image1.onclick = function(e) { if(box.on_click_event) box.on_click_event(e); };

    box.appendChild(image0);
    box.appendChild(image1);

    box.angle = 0;
    box.timer = null;

    box.show_flip = function(alpha)
    {
        box.angle = alpha;

        var radians = alpha*Math.PI/180;

        var w = parseInt(box.style.width);
        var h = parseInt(box.style.height);
        var f = 1*w/1.0000;
        var wp = w*Math.cos(radians);
        var inverted = true;
        if(wp < 0)
        {
            inverted = false;
            wp = -wp;
        }
        var d = w*Math.sin(radians);
        var inverted2 = false;
        if(d < 0)
        {
            inverted2 = true;
            d = -d;
        }
        var we = 0.5*wp*d/(d+f);

        var image;
        if(!inverted)
        {
            image0.style.visibility = "hidden";
            image1.style.visibility = "visible";
            image = image1;
        }
        else
        {
            image0.style.visibility = "visible";
            image1.style.visibility = "hidden";
            image = image0;
        }

        var s = Math.sqrt(0.25*wp*wp + (d+f)*(d+f));
        var t = Math.sqrt(Math.pow(0.5*wp-we, 2) + f*f);

        if(inverted^inverted2)
        {
            image.style.left = ((we+(w-wp)/2.0)|0)+"px";
        }
        else
        {
            image.style.left = (((w-wp)/2.0)|0)+"px";
        }

        image.style.width = ((wp-we)|0)+"px";

        if(box.top_cover !== undefined)
            box.removeChild(box.top_cover);
        if(box.bottom_cover !== undefined)
            box.removeChild(box.bottom_cover);

        var ph = h*(t/s);

        box.top_cover = make_slant((wp-we)|0, ((h-ph)/2)|0, box.style.backgroundColor, (inverted^inverted2)?2:3);
        box.top_cover.style.top = "0px";
        box.top_cover.style.left = image.style.left;
        box.top_cover.style.position = "absolute";
        box.appendChild(box.top_cover);

        box.bottom_cover = make_slant((wp-we)|0, ((h-ph)/2)|0, box.style.backgroundColor, (inverted^inverted2)?1:0);
        box.bottom_cover.style.bottom = "0px";
        box.bottom_cover.style.left = image.style.left;
        box.bottom_cover.style.position = "absolute";
        box.appendChild(box.bottom_cover);
    }

    box.flip = function(total_time)
    {
        if(box.timer)
            return;

        var start_time = new Date().getTime();
        var target_angle = box.angle + 180;
        var start_angle = box.angle;

        function update()
        {
            box.timer = null;

            var elapsed = new Date().getTime() - start_time;
            var angle = start_angle + (target_angle - start_angle) * elapsed / total_time;
            if(angle > target_angle)
            {
                angle = target_angle;
            }
            box.show_flip(angle);

            if(angle < target_angle)
            {
                box.timer = setTimeout(update, 50);
            }
        };

        box.timer = setTimeout(update, 50);
    };

    box.show_flip(0);
    return box;
}

function make_slant(w, h, color, type)
{
    if(w < 0) w = 0;
    if(h < 0) h = 0;

    var box = document.createElement("div");

    if(w == 0 || h == 0)
        return box;

    if(type == 2)
    {
        box.style.borderLeftColor = color;
        box.style.borderBottomColor = "transparent";
        box.style.borderWidth = "0px 0px "+h+"px "+w+"px";
    }
    else if(type == 0)
    {
        box.style.borderLeftColor = "transparent";
        box.style.borderBottomColor = color;
        box.style.borderWidth = "0px 0px "+h+"px "+w+"px";
    }
    else if(type == 3)
    {
        box.style.borderLeftColor = "transparent";
        box.style.borderTopColor = color;
        box.style.borderWidth = h+"px 0px 0px "+w+"px";
    }
    else if(type == 1)
    {
        box.style.borderLeftColor = color;
        box.style.borderTopColor = "transparent";
        box.style.borderWidth = h+"px 0px 0px "+w+"px";
    }

    box.style.borderStyle = "solid";
    box.style.lineHeight = "0px";
    box.style.width = "0px";
    box.style.height = "0px";

    return box;
}