
function AVideo(path, file, ref, onclickCB, callback) {

    this.onclickCB = onclickCB;
    this.file = file;
    this.ref = ref;
    this.path = path;
    this.id = "vid" + ref;
    this.width = 500;
    this.height = 300;

    var self = this;
    
    this.drawInto = function(container, target) {
        var offset = container.offset();
        var x = offset.left;
        var y = offset.top;
        var width = 832;
        var height = 550;

        var fileName = this.file.substring(this.file.lastIndexOf("/") + 1);
        fileName = fileName.substring(0, fileName.lastIndexOf("."));
        fileName = path + fileName;

        var html = '<div id="full'+ this.id
        + '" style="'
        + 'position: absolute; '
        + 'left: '+ (x) + "px; "
        + 'top: '+ (y) + 'px; '
        + 'width:' + width + 'px; '
        + 'height:' +  height + 'px; '
        + 'background-color: rgba(0, 0, 0, 0.7); '
        + 'z-index: 10; '
        + '"><table width="100%" height="100%" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">'
        + '<tr><td style="text-align: center; vertical-align: middle;">';

        if (isIphone || isPad) {
            html += '<video width="768" height="432" controls="controls"> '
            + '<source src="/' + fileName + '.mp4" type="video/mp4" /> '
            + ' Vous n\'avez pas de navigateur moderne, donc pas de balise vidéo de <abbr lang="en" title="HyperText Markup Language" xml:lang="en">HTML</abbr>5 pour vous ! '
            + '</video> ';
        } else {
            html += '<object type=\"application/x-shockwave-flash\" data=\"flash/player_flv_maxi.swf\" width=\"768\" height=\"432\">'
            + '<param name=\"movie\" value=\"flash/player_flv_maxi.swf\" />'
            + '<param name=\"allowFullScreen\" value=\"true\" />'
            + '<param name=\"FlashVars\"'
            + ' value=\"flv='+BASE_URL+fileName+ ".flv"+'&amp;width=768&amp;height=432'
            + '&amp;startimage=/yannick-dis/images/lien-video.jpg&amp;loadingcolor=93bbf3'
            + '&amp;buttonovercolor=93bbf3&amp;sliderovercolor=93bbf3&amp;autoplay=1'
            + '&amp;showvolume=1&amp;showfullscreen=1&amp;margin=0\" />'
            + '</object>';
        }

        html += '</td></tr></table></div>'
            + '<div id="croix'+ this.id
            + '" style="'
            + 'z-index: 12; position: absolute; '
            + 'left: '+ (x + width/2 + 768/2 - 25) + "px; "
            + 'top: '+ (y + (height-432)/2 - 25) + 'px; '
            + 'width: 17px; '
            + 'height: 17px; background-image: url(images/mini_croix.png);"></div>';

        target.append(html);


        var onclickCB = this.onclickCB;
        var self = this;

        $("#croix"+ this.id).click( function() { onclickCB(self); } );
        $("#croix"+ this.id).bind('touchend', function(event) {
            onclickCB(self);
            videoMode = true;
        });

        //$("#full"+ this.id).click( function() { onclickCB(self); } );
        //$("#full"+ this.id).bind('touchstart', function(event) { onclickCB(self); });

    }

    if (callback)
        callback(self);

}



