// bindings.js

ImageInfo.prototype = {
    get width() {
        if (!this.image)
            return null;
        return this.image.width;
    },
    set width(w) {
        if (!this.image)
            return;
        this.image.width = w;
        if (this.widthBox)
            this.widthBox.value = w;
    },
    get height() {
        if (!this.image)
            return null;
        return this.image.height;
    },
    set height(h) {
        if (!this.image)
            return;
        this.image.height = h;
    },
}

function ImageInfo() {
    this.image = null;
    this.setImage = function(newImage) {
        // remove the outline from the old image
        if (this.image)
            this.image.setAttribute('style', 'outline: none;');
        
        // store the new image value, with KVO notifcations
        JSKVC.willChange(document, 'imageInfo');
        this.image = newImage;
        JSKVC.didChange(document, 'imageInfo');
        
        // add outline around new image
        this.image.setAttribute('style', 'outline: 3px solid red;');
    }
    this.widthBox = null;
    this.setWidthBox = function(newWidthBox) {
        // remove the outline from the old image
        if (this.widthBox)
            this.widthBox.setAttribute('style', 'outline: none;');
        
        // store the new image value, with KVO notifcations
        JSKVC.willChange(document, 'imageInfo');
        this.widthBox = newWidthBox;
        JSKVC.didChange(document, 'imageInfo');
        
        // add outline around new image
        this.widthBox.setAttribute('style', 'outline: 3px solid red;');
    }
}

function installImageInfo() {
    // create an ImageInfo object for the document, using KVO notifications
    JSKVC.willChange(document, 'imageInfo');
    document.imageInfo = new ImageInfo();
    JSKVC.didChange(document, 'imageInfo');
    
    // hijack the onclick action for each image in the document
    var images = document.getElementsByTagName('IMG');
    for (var i=0; i<images.length; i++) {
        images[i].onclick = function() { document.imageInfo.setImage(this); };
    }
    var boxElement = document.getElementById( 'widthBox' );
    document.imageInfo.setWidthBox(boxElement);
    boxElement.setAttribute('style', 'outline: 3px solid red;');
}