
function AImage(path, file, ref, onclickCB, callback) {

    this.onclickCB = onclickCB;
    this.file = file;
    this.ref = ref;
    this.path = path;
    this.id = "img" + ref;
    this.visibleWidth = undefined;
    this.visibleHeight = undefined;
    this.width = 0;
    this.height = 0;
    this.x = 0;
    this.y = 0;

    var newImg = new Image();
    var self = this;
    
    $(newImg).attr("src", this.path + this.file).load(function(){
        self.width = newImg.width;
        self.height = newImg.height;

        if (callback)
            callback(self);
    });

    this.drawInto = function(container, target) {
        var offset = container.offset();
        this.x = offset.left;
        this.y = offset.top;

        var width = 832;
        var height = 550;

        var drawnHeight = this.height;
        var drawnWidth = this.width;

        if (drawnHeight > height) {
            drawnWidth = drawnWidth * height / this.height;
            drawnHeight = height;
        }

        if (drawnWidth > width) {
            drawnHeight = drawnHeight * width / this.width;
            drawnWidth = width;
        }


        var html = '<div id="full'+ this.id
            + '" style="'
            + 'position: absolute; '
            + 'left: '+ (this.x) + "px; "
            + 'top: '+ (this.y) + 'px; '
            + 'width:' + width + 'px; '
            + 'height:' +  height + 'px; '
            + 'background-color: rgba(0, 0, 0, 0.7); '
            + 'z-index: 10; '
            + '"><table width="100%" height="100%" cellspacing=\"0\" cellpadding=\"0\"><tr>'
            + '<td style="text-align: center; vertical-align: middle;"><center>'
            + '<div style="width: ' + drawnWidth + 'px; height: ' + drawnHeight + 'px;'
            + ' background-image: url(' + this.path + this.file + '); background-size: 100%; text-align: right; vertical-align: top;\">'
            + '<img src=\"images/mini_croix.png\" style=\"margin-right: 10px; margin-top: 10px;\"/></div>'
            + '</center></td></tr></table></div>'
        ;

        target.append(html);

        var onclickCB = this.onclickCB;

        $("#full"+ this.id).click( function() { onclickCB(self); } );
        $("#full"+ this.id).bind('touchend', function(event) {
            onclickCB(self);
            // event.preventDefault();
        });
    }

    this.draw = function(target, x, y, xOffset, yOffset, aWidth, aHeight) {

        this.x = x;
        this.y = y;

        this.visibleWidth = aWidth;
        this.visibleHeight = aHeight;

        if (xOffset==undefined) {
            xOffset = 0;
        }

        if (yOffset==undefined) {
            yOffset = 0;
        }

        if (this.visibleWidth==undefined) {
            this.visibleWidth = (this.width-xOffset);
        }

        if (this.visibleHeight==undefined) {
            this.visibleHeight = (this.height-yOffset);
        }

        var html = '<div id="'+ this.id
        + '" style="'
        + 'position: absolute; '
        + 'left: '+ (x) + "px; "
        + 'top: '+ (y) + 'px; '
        + 'width:' + this.visibleWidth + 'px; '
        + 'height:' +  this.visibleHeight + 'px; '
        + 'background-image: url(' + this.path + this.file + '); '
        + 'background-repeat: no-repeat; '
        + 'background-position: '+ (-xOffset) + 'px ' + (-yOffset) + 'px; '
        //+ 'border: solid 1px white;'
        + '">'
        + '</div>'
        ;

        target.append(html);
    }

    this.pointed = false;
    this.onmousemove = function(event) {

        if (
            event.pageX > self.x && event.pageX < self.x + self.width
            && event.pageY > self.y && event.pageY < self.y + self.height
        ) {
           if (!this.pointed) {
                $("#" + self.id).fadeTo('fast', 0.80);
                self.pointed = true;
           }
        } else {
            if (this.pointed) {
                $("#" + self.id).fadeTo('fast', 1.00);
                self.pointed = false;
                //alert(this.id);
            }
        }
    }

    this.onclick = function(event) {
        if (
            event.pageX > self.x && event.pageX < self.x + self.width
            && event.pageY > self.y && event.pageY < self.y + self.height
        ) {
            onclickCB(self);
        }
    }

}



