function DynElem(window, id, left, top, width, height, z, body) {
    this.window = window;
    this.id = id;
    this.left = left;
    this.top = top;
    this.width = width;
    this.height = height;
    this.zIndex = z;
    this.body = body;
}

DynElem.prototype.output = function() {

    var d = this.window.document;
    
    var elem = d.createElement("div");
    
    elem.id = this.id;
    
    elem.style.position = "absolute";
    elem.style.top = this.top + "px";
    elem.style.left = this.left + "px";
    
    if (this.width != '') {
        try {
            elem.style.width = this.width + 'px';
        } 
        catch (e) {
            alert(this.width);
        }
    }
    
    if (this.height != '') {
        elem.style.height = this.height + 'px';
    }
    
    elem.style.zIndex = this.zIndex;
    
    if (this.clip) {
        elem.style.clip = "rect(" + this.clip + ");";
    }
    
    elem.style.display = "none";
    
    if (this.body != null) {
        elem.innerHTML = this.body;
    }
    
    d.body.appendChild(elem);
    
    this.element = d.getElementById(this.id);
    this.style = this.element.style;
}

DynElem.prototype.destroy = function() {
    this.window.document.removeChild(this.elem);
}

DynElem.prototype.center = function(xCenter, yCenter) {
    var x = xCenter - Math.round(this.width / 2);
    var y = yCenter - Math.round(this.height / 2);
    this.moveTo(x, y);
}

DynElem.prototype.moveTo = function(x, y) {
    this.left = x;
    this.top = y;
    this._setStyle();
}

DynElem.prototype.moveBy = function(x, y) {
    this.left += x;
    this.top += y;
    this._setStyle();
}

DynElem.prototype._setStyle = function() {
    this.style.left = this.left + "px";
    this.style.top = this.top + "px";
}

DynElem.prototype.setWidth = function(x) {
    this.style.width = x;
}

DynElem.prototype.setHeight = function(y) {
    this.style.height = y;
}

DynElem.prototype.getX = function() {
    return parseInt(this.style.left.substring(0, this.style.left.length - 2));
}

DynElem.prototype.getY = function() {
    return parseInt(this.style.top.substring(0, this.style.top.length - 2));
}

DynElem.prototype.getWidth = function() {
    return parseInt(this.style.width.substring(0, this.style.width.length - 2));
}

DynElem.prototype.getHeight = function() {
    return parseInt(this.style.height.substring(0, this.style.height.length - 2));
}

DynElem.prototype.setBgColor = function(color) {
    this.style.backgroundColor = color;
}

DynElem.prototype.setBgImage = function(image) {
    this.style.backgroundImage = 'url(' + image + ')';
}

DynElem.prototype.setImage = function(imageSrc) {

    var content = this.element.firstChild;
    if (content != null && content.tagName.toLowerCase() == "img") {
        content.src = imageSrc;
    }
    else {
        var d = this.window.document;
        var img = d.createElement("img");
        img.src = imageSrc;
        this.element.replaceChild(img, content);
    }
}

DynElem.prototype.show = function() {
    this.style.display = "block";
}

DynElem.prototype.hide = function() {
    this.style.display = "none";
}

DynElem.prototype.setClip = function(top, right, down, left) {
    this.style.clip = 'rect(' + top + ',' + right + ',' + down + ',' + left + ')';
}

DynElem.prototype.setBody = function() {
    var body = "";
    for (var i = 0; i < arguments.length; i++) {
        body += arguments[i] + "\n";
    }
    this.element.innerHTML = body;
}

function copyPrototype(descendant, parent) {

    var sConstructor = parent.toString();
    var aMatch = sConstructor.match(/\s*function (.*)\(/);
    if (aMatch != null) {
        descendant.prototype[aMatch[1]] = parent;
    }
    for (var m in parent.prototype) {
        descendant.prototype[m] = parent.prototype[m];
    }
}

function MovingDynElem(window, id, left, top, width, height, z, body) {
    this.DynElem(window, id, left, top, width, height, z, body);
}

copyPrototype(MovingDynElem, DynElem);

MovingDynElem.prototype.constructor = DynElem;

MovingDynElem.prototype.setMovement = function(movement) {
    this.movement = movement;
    this.movement.setElement(this);
}

MovingDynElem.prototype.getMovement = function() {
    return this.movement;
}

MovingDynElem.prototype.move = function() {
    var offsetX = this.movement.getOffsetX();
    var offsetY = this.movement.getOffsetY();
    var timeout = this.movement.getTimeout();
    this.moveBy(offsetX, offsetY);
    if (this.movement.isDone()) {
        var movement = this.movement.next();
        if (movement != null) {
            this.movement = movement;
            this.move();
        }
    }
    else {
        this.movement.advance(this.window.setTimeout(this.id + ".move()", timeout));
    }
}


function DynElemManager(window) {
    this.window = window;
    this.images = {};
}

DynElemManager.prototype.newDynElem = function(id, width, height, zIndex, body) {
    var imageBody = "<img src='/images/" + id + ".gif' />";
    var de = new DynElem(this.window, id, 0, 0, width, height, zIndex, imageBody);
    this.images[id] = de;
    de.output();
    return de;
}

DynElemManager.prototype.show = function(id) {
    this.images[id].show();
}

DynElemManager.prototype.hide = function(id) {
    this.images[id].hide();
}

DynElemManager.prototype.fadeIn = function(id, duration) {
    Effect.Appear(id, {
        duration: duration
    });
}

DynElemManager.prototype.fadeOut = function(id, duration) {
    Effect.Fade(id, {
        duration: duration
    })
}

DynElemManager.prototype.center = function(id, x, y) {
    this.images[id].center(x, y);
}