function ImagePicker()
{
    this.divMain = null;
    this.divImages = null;
    this.divUpload = null;

    this.aImages = [];
    this.oCurrent = null;

    this.init = function( callbackOk ) {
        this.callback = function() {
            if( this.oCurrent ) {
                callbackOk( this.oCurrent );
            }
            this.hide();
        }.bind(this);
        this.divMain = document.createElement("div");
        this.divMain.className = "imageContainer";

        this.divImages = document.createElement("div");
        this.divImages.className = "images";
        this.divMain.appendChild(this.divImages);

        var div = document.createElement("div");
        div.className = "controls";

        var btn = document.createElement("input");
        btn.onclick = this.toggleUpload.bind(this);
        btn.type = "button";
        btn.value = "Upload...";
        btn.style.width = "75px";
        btn.style.cssFloat = "left";
        btn.style.styleFloat = "left";
        div.appendChild( btn );

        btn = document.createElement("input");
        btn.onclick = this.hide.bind(this);
        btn.type = "button";
        btn.value = "Abbrechen";
        btn.style.width = "75px";
        div.appendChild( btn );

        btn = document.createElement("input");
        btn.onclick = this.callback.bind(this);
        btn.type = "button";
        btn.value = "Ok";
        btn.style.width = "75px";
        div.appendChild( btn );

        this.divMain.appendChild(div);

        this.divUpload = document.createElement("div");
        this.divUpload.className = "upload";

        var form = document.createElement("form");
        form.action = "upload2.php";
        form.enctype = "multipart/form-data";
        form.method = "post";
        form.target = "imageFrame";

        var file = document.createElement("input");
        file.name = "image";
        file.type = "file";
        file.style.width = "300px";
        form.appendChild(file);

        btn = document.createElement("input");
        btn.type = "submit";
        btn.value = "Upload";
        form.appendChild(btn);

        this.divUpload.appendChild(form);

        var iframe = document.createElement("iframe");
        iframe.id = "imageFrame";
        iframe.width = "100";
        iframe.height = "100";
        iframe.style.display = "none";
        this.divUpload.appendChild(iframe);

        this.divMain.appendChild(this.divUpload);

        call( 'images', "", this.imagesLoaded.bind(this) );

        this.divMain.style.position = "absolute";
        this.divMain.style.top = "100px";
        this.divMain.style.left = "150px";

        //enableResize( this.divMain );
        $( this.divMain ).makeDraggable();

        return this.divMain;
    };

    this.imagesLoaded = function( strResponse ) {
        var i, aImg, oImg, elm;
        try {
            aImg = eval( strResponse );
        } catch ( e ) {
            return;
        }

        for( i=0; i<aImg.length; ++i ) {
            this.addImage(  aImg[i].id, aImg[i].path, aImg[i].width, aImg[i].height, aImg[i].name );
        }
    };

    this.setSelected = function( oImg ) {
        if( this.oCurrent ) {
            document.getElementById( "image" + this.oCurrent.id ).className = "image";
        }
        this.oCurrent = oImg;
        document.getElementById( "image" + this.oCurrent.id ).className = "image selected";
    };

    this.toggleUpload = function() {
        if( !this.divUpload || !this.divUpload.style ) {
            return;
        }

        if( this.divUpload.style.display != "block" ) {
            this.divUpload.style.display = "block";
        } else {
            this.divUpload.style.display = "none";
        }
    };

    this.addImage = function( intId, strPath, intWidth, intHeight, strName ) {
        if( !strPath ) {
            return;
        }
        strName = strName || ""; // default: empty name

        if( !intWidth || !intHeight ) {
            // compute it...
        }

        var oImg = new ImageObj( intId, strPath, intWidth, intHeight, strName );

        this.aImages.push( oImg );

        elm = oImg.getElement();
        elm.onclick = this.setSelected.pass( oImg, this );
        elm.ondblclick = this.callback.bind(this);
        this.divImages.appendChild( elm );
    };

    this.uploadError = function( str ) {
        alert("Error uploading image:\n" + str );
    };

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

    this.show = function( intZIndex ) {
        this.divMain.style.display = "block";
        if( intZIndex ) {
            this.divMain.style.zIndex = intZIndex;
        }
    };
}

function ImageObj( intId, strPath, intWidth, intHeight, strName )
{
    this.id     = parseInt( intId, 10 );
    this.path   = strPath;
    this.width  = parseInt( intWidth, 10 );
    this.height = parseInt( intHeight, 10 );
    this.name   = strName;

    this.image = null;

    this.getElement = function() {
        var div = document.createElement("div");
        div.className = "image";
        div.id = "image"+intId;
        div.title = this.name;

        var img = document.createElement("img");
        img.src = this.path;

        if( this.width > 100 && this.width >= this.height) {
            img.width = 100;
        }
        if( this.height > 100 && this.height >= this.width ) {
            img.height = 100;
        }
        img.alt = this.name;
        div.appendChild(img);

        var div2 = document.createElement("span");
        div2.appendChild( document.createTextNode( this.name ) );
        div2.style.cssFloat = "left";
        div2.style.styleFloat = "left";
        div2.style.marginTop = "100px";
        div2.style.width = "90px";
        div2.style.overflow = "hidden";

        div.appendChild(div2);

        return div;
    };

    this.getImage = function() {
        if( !this.image ) {
            this.image = new Image();
            this.image.src = this.path;
        }

        return this.image;
    };
}