// <![CDATA[
function setupAva(aw,ah) {
    if ($("avatar")) {
        var handle = $("ava_handle");
        var avatar = $("avatar");
        var drager = $("ava_drager");
        var slider = $("ava_slider");
        var ava_width = $("ava_width");
        var ava_x = $("ava_x");
        var ava_y = $("ava_y");
        // four numbers are minx, maxx, miny, maxy
        Drag.init(handle, null, 0, 234, 0, 0);
        Drag.init(drager, avatar, -100, 350, -100, 350);

        var start_w = parseInt(avatar.style.width);
        var start_h = parseInt(avatar.style.height);
        var ratio = (start_h / start_w);
        var new_h;
        var new_w;
        if (ratio > 1) {
            new_w = 150;
            new_h = (150*start_h)/start_w;
        } else {
            new_h = 150;
            new_w = (150*start_w)/start_h;
        }
        // these need to be set after we init
        avatar.style.top = '150px';
        avatar.style.left = '150px';
        avatar.style.width = new_w + 'px';
        avatar.style.height = new_h + 'px';
        avatar.style.margin = '-' + (new_h / 2) + 'px 0 0 -' + (new_w / 2) + 'px';
        handle.style.margin = '3px 0 0 20px';
        avatar.onDrag = function(x, y) {
            ava_x.value = x;
            ava_y.value = y;
        }
        handle.onDrag = function(x, y) {
            var n_width = (new_w + (x * 2));
            var n_height = (new_h + ((x * 2) * ratio));
            avatar.style.width = n_width + 'px';
            avatar.style.height = n_height+ 'px';
            ava_width.value = n_width;
            avatar.style.margin = '-' + (n_height / 2) + 'px 0 0 -' + (n_width / 2) + 'px';
        }
    }
}
Event.observe(window,'load',setupAva, false);
// ]]>