SET_DHTML(CURSOR_MOVE, RESIZABLE, NO_ALT, SCROLL, "alligator", "bluelyr"+TRANSPARENT, "button"+VERTICAL+HORIZONTAL+CURSOR_DEFAULT, "cat","crop_001"+TRANSPARENT, "heart", "counter", "greylyr"+TRANSPARENT, "koala", "lips", "low", "muckl", "muck2"+TRANSPARENT+COPY+4, "star_1", "redarrow", "reldiv", "reldivn4", "reldiv2"+TRANSPARENT, "reldiv2n4"+TRANSPARENT, "reltab", "sepline1"+NO_DRAG, "slidercanvas", "ying", "square_blue", "square_red", "triangle_yellow_1","triangle_yellow_2","triangle_yellow_3","triangle_yellow_4", "triangle_red_1","triangle_red_2","triangle_red_3","triangle_red_4", "foot_left", "foot_right", "butterfly_2"+SCALABLE, "thumb"+HORIZONTAL+MAXOFFLEFT+45+MAXOFFRIGHT+45, "track"+NO_DRAG, "tryit", "upleft");

// Kreuzotter-vs-Uplefts Animation, demonstrating how to use the API of the DragDrop-Library
function ANIM()
{
    if (!dd.obj || !dd.op6)
    {
        if (dd.elements.low.z <= dd.elements.upleft.z)
            dd.elements.upleft.setZ(dd.elements.low.z - 1);

        dd.elements.upleft.moveTo(
            dd.elements.upleft.x <= -dd.elements.upleft.w?
                iW - dd.elements.upleft.w - 20 :
                (dd.elements.upleft.x - 3),
            (dd.obj==dd.elements.upleft)?
                dd.elements.upleft.y :
                (dd.elements.low.y - dh)
        );

        dd.elements.low.moveTo(
            dd.elements.low.x <= -dd.elements.low.w?
                iW-dd.elements.low.w-20 :
                (dd.elements.low.x-5),
            dd.elements.upleft.y + dh
        );
    }
    setTimeout("ANIM()", dd.kq? 200 : 100);
}


// override funcs defined within the Lib
function my_PickFunc()
{
    if (dd.obj.name == 'button') dd.obj.swapImage(insetbutton.src);
    if (!dd.obj.name.indexOf('muckl') && dd.obj.x == dd.obj.defx)
    {
        if (dd.elements.muckl.copies.length < 80) dd.elements.muckl.copy();
    }
}

function my_PickFunc()
{
    if (dd.obj.name == 'button') dd.obj.swapImage(insetbutton.src);
    if (!dd.obj.name.indexOf('muck2') && dd.obj.x == dd.obj.defx)
    {
        if (dd.elements.muck2.copies.length < 80) dd.elements.muck2.copy();
    }
}

function my_DragFunc()
{
    if (dd.obj.name == 'thumb')
    {
        var red = parseInt((dd.elements.thumb.x-dd.elements.thumb.defx)*255/45),
        blue = -red,
        green = (255-Math.abs(red)).toString(16);
        red = (red > 0? red : 0).toString(16);
        blue = (blue > 0? blue : 0).toString(16);
        while (red.length < 2) red = '0'+red;
        while (blue.length < 2) blue = '0'+blue;
        while (green.length < 2) green = '0'+green;
        dd.elements.slidercanvas.setBgColor("#"+red+green+blue);
    }
}

function my_DropFunc()
{
    if (dd.obj.name == 'button')
    {
        dd.obj.swapImage(outsetbutton.src);
        var minh = dd.elements.button.h+((dd.elements.button.y-dd.elements.greylyr.y)<<1);
        dd.elements.greylyr.resizeTo(
            dd.elements.greylyr.w,
            (dd.elements.greylyr.h != minh)? minh : 300
        );
    }
}


var outsetbutton = new Image();
outsetbutton.src = '../images/dragdrop/button_outset.gif';
var insetbutton = new Image();
insetbutton.src = '../images/dragdrop/button_inset.gif';



var iW = dd.getWndW(),
dh = dd.elements.upleft.h - dd.elements.low.h;
ANIM();

dd.elements.bluelyr.moveTo(
    (iW-dd.elements.bluelyr.w)>>1,
    dd.elements.counter.defy-dd.elements.bluelyr.h-30
);
dd.elements.greylyr.moveTo(dd.elements.sepline1.x-2, dd.elements.sepline1.y+110);
dd.elements.bluelyr.show();
dd.elements.greylyr.show();

dd.elements.thumb.moveTo(dd.elements.track.x+36, dd.elements.track.y);
dd.elements.thumb.setZ(dd.elements.track.z+1);
dd.elements.track.addChild('thumb');
dd.elements.thumb.defx = dd.elements.track.x+36;