function dragMemberImage() {
    $("imageArea").removeClass("hide");
    var img = $('demo-portrait').getElement("img");
    
    // resize new upload image
    var oldImgWidth = img.getWidth();
    var oldImgHeight = img.getHeight();
    var newImgHeight = 337;
    var newImgWidth = (337*oldImgWidth)/oldImgHeight;

    $("demo-portrait").setStyle("cursor","pointer");
    var currL = 0;
    var currImgL = 0;
    var currT = 0;
    var currImgT = 0;
    var imgLeft;
    var imgTop;
    var middleX = 168;
    var middleY = 168;
    
    $("demo-portrait").addEvent("mousedown",function(e) {
        currL = e.page.x;
        currT = e.page.y;
        currImgL = parseInt(img.getStyle("left").substring(0,img.getStyle("left").indexOf("px")));
        currImgT = parseInt(img.getStyle("top").substring(0,img.getStyle("top").indexOf("px")));;
        $("demo-portrait").addEvent("mousemove",show);
        $("demo-portrait").addEvent("mouseup",function() {
            e.stopPropagation();                                                                   
            $("demo-portrait").removeEvent("mousemove",show);
        });
    });
    var show = function(e) {
        e.preventDefault();
        var nowL = e.page.x;
        var nowT = e.page.y;
        var realL = nowL - currL;
        var realT = nowT - currT;
        var nowLeft = currImgL + realL;
        var nowTop = currImgT + realT;
        img.setStyles({
            left:nowLeft,
            top:nowTop
        });
        imgLeft = img.getLeft();
        imgTop = img.getTop();
        middleX = img.getStyle("left").toInt() + img.getWidth().toInt()/2;
        middleY = img.getStyle("top").toInt() + img.getHeight().toInt()/2;
    }
    var flag = 0;
    $("scrollBar").setStyle("display","block");
    var scaleX = newImgWidth/70;
    var scaleY = newImgHeight/70;
    var mySlider = new Slider($('scroll-bar'), $('block-img'),{
        steps:283,
        wheel:1,
        onChange:function(step) {
            flag++;
            if(step<5) {
                step = 5;
            }
            var currW = step*scaleX;
            var currH = step*scaleY;
            // get position from the image's middle point                    
            img.setStyles({
                width:currW,
                height:currH
            });
            var posX = middleX - img.getWidth()/2;
            var posY = middleY - currH/2;
            if(flag<2) {
                posX = 0;
                posY = 0;    
            }
            img.setStyles({
                left:posX,
                top:posY
            });
        }
    }).set(100);

    $("resize-s").addEvent("click",function() {
        var currH;
        var block_img_left = parseInt($("block-img").getStyle("left").substring(0,$("block-img").getStyle("left"