function RenderFlavorImageComponent(srcImage, eltContainerId, title) {
    try {
        flavorControl = new FlavorControl(eltContainerId, srcImage, title);
        flavorControl.show();
    }
    catch (ex) {
        alert(ex);
    }
}

function FlavorControl(containerId, srcImage, title) {
    this.containerId = containerId;
    this.srcImage = srcImage;
    this.title = title;
    this.flavorImage = new FlavorImage(this.srcImage, this.altText, this.containerId, null);
    this.flavorPanel = new FlavorPanel(this.containerId, this.title);
}

function FlavorControl_show() {
    try {
        this.flavorImage.onclick = this.hide;
        this.flavorPanel.contentElement = this.flavorImage.render();
        this.flavorPanel.show();
    }
    catch (ex) {
        alert(ex);
        throw new Error("Cannot render flavor Control for image : " + this.srcImage);
    }
}

FlavorControl.prototype.show = FlavorControl_show;

function FlavorControl_hide() {
    flavorControl.flavorPanel.hide();
}

FlavorControl.prototype.hide = FlavorControl_hide;


function FlavorImage(srcImage, alt, containerId, onclick) {
    this.srcImage = srcImage;
    this.altText = alt;
    this.containerId = containerId;
    this.onclick = onclick;
}

function FlavorImage_Render() {
    var elImage = document.createElement("img");
    elImage.id = this.containerId + "_image";
    elImage.alt = this.altText;
    
    if (this.srcImage == null || this.srcImage == undefined || this.srcImage.length == 0)
        throw new Error("No src provided to render the image!");
    elImage.src = this.srcImage;
    
    if (this.onclick != null)
        elImage.onclick = this.onclick;
        
    return elImage;
}

FlavorImage.prototype.render = FlavorImage_Render;


function FlavorPanel(containerId, title) {
    this.containerId = containerId;
    this.title = title;
    this.contentElement;
}

function FlavorPanel_Show() {
    var eltContainer = document.getElementById(this.containerId);

    var oldContainer = document.getElementById("FlavorImage_YuiPanel");
    if (oldContainer != null && oldContainer.id == "FlavorImage_YuiPanel")
        eltContainer.removeChild(oldContainer);

    YAHOO.namespace("SGX.container");

    YAHOO.SGX.container = document.createElement("div");
    YAHOO.SGX.container.className = "yui-skin-sam";
    YAHOO.SGX.container.id = "FlavorImage_YuiPanel";
    eltContainer.appendChild(YAHOO.SGX.container);

    panelFlavor = document.createElement("div");
    panelFlavor.id = "FlavorImage_panel1";
    panelFlavor.style.visibility = "hidden";
    document.body.appendChild(panelFlavor);

    panelFlavorbd = document.createElement("div");
    panelFlavorbd.id = "FlavorImage_panel1bd";
    panelFlavorbd.style.backgroundColor = "#303030";

    panelFlavor.appendChild(panelFlavorbd);

    YAHOO.SGX.container.panelFlavor = new YAHOO.widget.Panel(panelFlavor.id, {
        underlay: "matte",
        iframe: true,
        effect: { effect: YAHOO.widget.ContainerEffect.FADE, duration: 0.30 },
        visible: false,
        draggable: true,
        autofillheight: "body",
        zIndex: 10000,
        fixedcenter: true,
        monitorresize: true,
        close: true,
        modal: true
    });

    YAHOO.SGX.container.panelFlavor.setHeader(this.title);
    YAHOO.SGX.container.panelFlavor.render("FlavorImage_YuiPanel");

    var td = document.createElement("td");
    td.style.backgroundColor = "#202020";
    td.style.padding = "20";

    td.appendChild(this.contentElement);

    var tr = document.createElement("tr");
    tr.appendChild(td);
    var tbody = document.createElement("tbody");
    tbody.appendChild(tr);
    var table = document.createElement("table");
    table.appendChild(tbody);

    panelFlavor.appendChild(table);
    YAHOO.SGX.container.panelFlavor.show();
}

FlavorPanel.prototype.show = FlavorPanel_Show;

function FlavorPanel_hide() {
    YAHOO.SGX.container.panelFlavor.hide();
	YAHOO.SGX.container.panelFlavor = null;
}

FlavorPanel.prototype.hide = FlavorPanel_hide;


function RenderMultiViewComponent(title, divContainerId, arrayImageFilenames, nbMaxThumbnails, arrayOfThumbnails, arrayOfLarge, localizedLabel) {

    var eltContainer = document.getElementById(divContainerId);
    if (eltContainer == undefined || eltContainer == null) {
        document.write("MultiViewComponent error : no div " + divContainerId + " container found");
        return;
    }

    if (arrayImageFilenames == undefined) {
        document.write("MultiViewComponent error : no image filenames in list");
        return;
    }

    if (nbMaxThumbnails == undefined || nbMaxThumbnails > 6 || nbMaxThumbnails < 1) {
        document.write("MultiViewComponent error : max thumbnails have to be between 1 and 6");
        return;
    }

    pictures = new Array();
    pictures[0] = new Array();
    pictures[0] = arrayOfThumbnails;

    pictures[1] = new Array();
    pictures[1] = arrayImageFilenames;

    pictures[2] = new Array();
    pictures[2] = arrayOfLarge;

    preloadImagesInBrowserCache();

    viewImage = new MutiViewComponent(arrayImageFilenames, nbMaxThumbnails, false, eltContainer, arrayOfThumbnails, arrayOfLarge, localizedLabel, title);
    viewImage.render();
}

function preloadImagesInBrowserCache() {
    // preload navigation buttons
    preloadNavigationsButtons();

    if (pictures == null || pictures == undefined)
        return;

    // preload thumbnails
    preloadImageInCache(0);

    // preload standard
    preloadImageInCache(1);

    // load images large in cache then display the popup
    preloadImageInCache(2);
    
}

function preloadNavigationsButtons() {
    (new Image()).src = _browser.flecheGaucheMultiView;
    (new Image()).src = _browser.flecheGaucheMultiViewPushedDown;
    (new Image()).src = _browser.flecheDroiteMultiView;
    (new Image()).src = _browser.flecheDroiteMultiViewPushedDown;
    (new Image()).src = _browser.flecheHauteMultiView;
    (new Image()).src = _browser.flecheHauteMultiViewPushedDown;
    (new Image()).src = _browser.flecheBasseMultiView;
    (new Image()).src = _browser.flecheBasseMultiViewPushedDown;
}

/*
    imageType : (0 = thumbnails, 1 = standard, 2 = large)
*/
function preloadImageInCache(imageType) {
    if (pictures[imageType].length > 0) {
        for (var i = 0; i < pictures[imageType].length; i++) {
            (new Image()).src = pictures[imageType][i];
        }
    }
}

/* **************************************
* Définition de la classe MV_ViewImage
* ************************************** 
* Cette classe gère l'affichage de la 
* prévisualisation de l'image et de la
* popup associée
* */
// methodes de MV_ViewImage
// function MV_ViewImage_popupView() ouvre une fenetre popup pour l'affichage de l'image
// en réaction à un click sur l'image
function MV_ViewImage_popupView() {
    alert("popup TODO");
}

function MV_ViewImage_clickView() {
    viewImage.clickView();
}

// Constructor de MV_ViewImage
function MV_ViewImage(imageName, imgW, imgH, isPreview, indexInThumbnails) {
    this.imageName = imageName;
    this.indexInThumbnails = indexInThumbnails;
    this.render = function() {
        var elImage = document.createElement("img");
        elImage.id = "idPreviewImage";
        elImage.src = this.imageName;
        elImage.style.verticalAlign = "bottom";
        elImage.style.cursor = "pointer";
        elImage.indexInThumbnails = this.indexInThumbnails;
        elImage.onclick = MutiViewComponent_clickView;
        return elImage;
    };
}

/* **************************************
* Définition de la classe MV_Navigation
* ************************************** 
* Cette classe gere un tableau d'images
* et maintient un index sur l'image active
* dans le tableau.
* */
// methodes de MV_Navigation
function MV_Navigation_moveAtPosition(index) {
    if (index >= 0 && index < this.list.length) {
        this.index = index;
        this.current = this.list[this.index];
    }
}

// Constructor de MV_Navigation
function MV_Navigation(imgArray) {
    this.list = new Array();
    this.list = imgArray;
    this.index = 0;
    this.current = this.list[this.index];
    this.moveAtPosition = MV_Navigation_moveAtPosition;
}

/* **************************************
* Définition de la classe MV_Thumbnail
* ************************************** 
*/
function MV_Thumbnail_onclick(index) {
    viewImage.clickThumbnail(index);

    var eltImage = document.getElementById("idThumbnail_" + index);
    if (eltImage != undefined) {
        eltImage.style.border = "1px inset";
    }

}

function MV_Thumbnail_onmouseover(index) {
}

function MV_Thumbnail_onmouseout(index) {
    var eltImage = document.getElementById("idThumbnail_" + index);
    if (eltImage != undefined) {
        //eltImage.style.border = "none";
    }
}

function MV_Thumbnail_render() {
    var elImage = document.createElement("img");
    elImage.src = this.name;
    elImage.id = "idThumbnail_" + this.index;
    elImage.width = 40;
    elImage.height = 40;
    elImage.style.verticalAlign = "middle";
    elImage.style.cursor = "pointer";
    elImage.style.margin = 2;
    elImage.style.border = "solid 2px transparent";
    var i = this.index;
    elImage.onclick = function() {
        MV_Thumbnail_onclick(i);
    };
    elImage.onmouseover = function() {
        MV_Thumbnail_onmouseover(i)
    };
    elImage.onmouseout = function() {
        MV_Thumbnail_onmouseout(i)
    };
    return elImage;
}

function MV_Thumbnail(container, imgName, index) {
    this.container = container;
    this.index = index;
    this.name = imgName;
    this.render = MV_Thumbnail_render;
}

/* **************************************
* Définition de la classe MV_RangeThumbnails
* ************************************** */
// methodes de MV_Navigation
function MV_RangeThumbnails_createThumbnails(container, arrayOfView) {
    if (arrayOfView == undefined || arrayOfView == null || arrayOfView.length == 0) {
        return;
    }

    var thumbnails = new Array();
    for (var i = 0; i < arrayOfView.length; i++) {
        thumbnails[i] = new MV_Thumbnail(container, arrayOfView[i], i);
    }
    return thumbnails;
}

function MV_RangeThumbnails_setRangeThumbnailsWithView(arrayOfView) {
    if (this.thumbnails != null) {
        if (this.thumbnails.length > 0) {
            this.thumbnails = null;
        }
    }
    this.thumbnails = MV_RangeThumbnails_createThumbnails(this.container, arrayOfView);
}

// Constructor de MV_RangeThumbnails
function MV_RangeThumbnails(container, arrayOfView, isVertical) {
    this.container = container;
    this.thumbnails = new Array();
    this.thumbnails = MV_RangeThumbnails_createThumbnails(this.container, arrayOfView);
    this.setRangeThumbnails = MV_RangeThumbnails_setRangeThumbnailsWithView;
    this.isVertical = isVertical;
    this.render = function() {
        var element = document.createElement("div");
        element.id = "idThumbnails";
        element.zIndex = 9999;
        element.style.display = "inline";
        for (var i = 0; i < this.thumbnails.length; i++) {

            element.appendChild(this.thumbnails[i].render());
            if (this.isVertical)
                element.appendChild(document.createElement("br"));
        }
        return element;
    };
}

/* **************************************
* Définition de la classe MV_navigationThumbnails
* ************************************** 
* Classe de gestion des boutons précedents et suivants
* */
// methodes de MV_NavigationButtons
function MV_NavigationButtons_Enabled(rangeThumbnails) {
    return rangeThumbnails.thumbnails.length < pictures[0].length;
    //return buttonsEnabled;
}

function MV_NavigationButtons_Render() {
    var eltNavigationBar = document.createElement("div");
    eltNavigationBar.id = this.container + "_idNavigationBar";
    if (this.rangeThumbnails.thumbnails.length <= 1) {
        return eltNavigationBar;
    }

    eltNavigationBar.style.position = "relative";
    eltNavigationBar.style.marginLeft = "auto";
    eltNavigationBar.style.marginRight = "auto";
    eltNavigationBar.style.textAlign = "center";
    eltNavigationBar.style.top = "4px";
    eltNavigationBar.style.whiteSpace = "nowrap";
    if (this.buttonsEnabled || this.needScrollButtons(this.rangeThumbnails)) {
        var eltdivButtonPrevious = document.createElement("div");
        eltdivButtonPrevious.id = this.container + "divButtonPrevious";
        eltdivButtonPrevious.style.display = "inline";
        eltdivButtonPrevious.appendChild(this.buttonPrevious.render());
        eltNavigationBar.appendChild(eltdivButtonPrevious);
    }


    eltNavigationBar.appendChild(this.renderRangeThumbnails());

    if (this.buttonsEnabled || this.needScrollButtons(this.rangeThumbnails)) {
        var eltdivButtonNext = document.createElement("div");
        eltdivButtonNext.id = this.container + "_divButtonNext";
        eltdivButtonNext.style.display = "inline";
        eltdivButtonNext.appendChild(this.buttonNext.render());
        eltNavigationBar.appendChild(eltdivButtonNext);
    }

    return eltNavigationBar;
}

function MV_NavigationButtons_RenderRangeThumbnails() {
    var eltRange = document.getElementById(this.container + "_idThumbnails");
    if (eltRange != undefined) {
        var parent = eltRange.parentNode;

        if (eltRange.getElementById != undefined) {
            var eltButtonNext = eltRange.getElementById(this.container + "_idButtonNext");
            if (eltButtonNext != undefined) {
                parent.removeChild(eltRange);

            }
        }
        return eltRange;
    }
    else return this.rangeThumbnails.render();
}

function MV_navigationThumbnails_setRange(newRange) {
    this.rangeThumbnails.setRangeThumbnails(newRange);
}

function MV_navigationThumbnails(owner, container, buttonsEnabled, rangeThumbnails, isVertical) {
    this.owner = owner;
    this.container = container;
    this.rangeThumbnails = new MV_RangeThumbnails(this.container, rangeThumbnails, isVertical);
    this.buttonsEnabled = buttonsEnabled;
    this.needScrollButtons = MV_NavigationButtons_Enabled;
    this.buttonPrevious = new MV_ButtonPrevious();
    this.buttonNext = new MV_ButtonNext();
    this.render = MV_NavigationButtons_Render;
    this.renderRangeThumbnails = MV_NavigationButtons_RenderRangeThumbnails;
    this.setRangeThumbnails = MV_navigationThumbnails_setRange;
}

/* **************************************
* Définition de la classe MV_Buttons
* ************************************** 
* Classe de gestion des boutons précedents et suivants
* */
function MV_ButtonPrevious_onclick() {
    viewImage.clickButtonPrevious();
}

function MV_ButtonPrevious_onmouseUp() {
    this.src = _browser.flecheGaucheMultiView;
}

function MV_ButtonPrevious_onmouseDown() {
    this.src = _browser.flecheGaucheMultiViewPushedDown;
}

function MV_ButtonPrevious_render() {
    var elButton = document.createElement("img");
    elButton.src = this.name;
    elButton.id = "idButtonPrevious";
    elButton.style.verticalAlign = "middle";
    elButton.style.margin = 2;
    elButton.style.border = "solid 2px transparent";
    elButton.style.cursor = "pointer";
    elButton.onclick = MV_ButtonPrevious_onclick;
    elButton.onmouseup = MV_ButtonPrevious_onmouseUp;
    elButton.onmousedown = MV_ButtonPrevious_onmouseDown;
    return elButton;
}

function MV_ButtonPrevious() {
    this.name = _browser.flecheGaucheMultiView;
    this.render = MV_ButtonPrevious_render;
}

function MV_ButtonNext_onclick() {
    viewImage.clickButtonNext();
}

function MV_ButtonNext_onmouseUp() {
    this.src = _browser.flecheDroiteMultiView;
}

function MV_ButtonNext_onmouseDown() {
    this.src = _browser.flecheDroiteMultiViewPushedDown;
}

function MV_ButtonNext_render() {
    var elButton = document.createElement("img");
    elButton.src = this.name;
    elButton.id = "idButtonNext";
    elButton.style.margin = 2;
    elButton.style.verticalAlign = "middle";
    elButton.style.border = "solid 2px transparent";
    elButton.style.cursor = "pointer";
    elButton.onclick = MV_ButtonNext_onclick;
    elButton.onmouseup = MV_ButtonNext_onmouseUp;
    elButton.onmousedown = MV_ButtonNext_onmouseDown;
    return elButton;
}

function MV_ButtonNext() {
    this.name = _browser.flecheDroiteMultiView;
    this.render = MV_ButtonNext_render;
}


/* **************************************
* Définition de la classe MutiViewComponent
* ************************************** 
* pictures = tableau multidimensionnel
* pictures[0] [x] contient la liste des noms des fichiers vignettes (thumbnails)
* pictures[1] [x] contient la liste des noms des fichiers preview (standard)
* pictures[2] [x] contient la liste des noms des fichiers Large (zoom)
* */
// Constructor de MutiViewComponent
function MutiViewComponent(arrayOfPreview, maxThumbnails, buttonsEnabled, container, arrayOfThumbnails, arrayOfLargeImages, localizedLabel, title) {
    this.pictures = new Array();
    this.pictures[0] = new Array();
    this.pictures[0] = arrayOfThumbnails;
    this.pictures[1] = new Array();
    this.pictures[1] = arrayOfPreview;
    this.pictures[2] = new Array();
    this.pictures[2] = arrayOfLargeImages;

    this.maxThumbnails = maxThumbnails;
    this.navigator = new MV_Navigation(this.pictures[0]);
    this.container = container; // Node in which we render the multi-view component
    this.buttonsEnabled = buttonsEnabled;
    this.localizedLabel = localizedLabel;
	this.title = title;

    this.viewImage = new MV_ViewImage(this.pictures[1][this.navigator.index], 150, 150, true, this.navigator.index);
    this.indexOfFirstThumbnail = 0;
    this.getVisibleThumbnails = MultiViewComponent_getVisibleThumbnails;
    this.navigationThumbnails = new MV_navigationThumbnails(this, this.container.id, buttonsEnabled, this.getVisibleThumbnails(0), false);
    this.clickView = MutiViewComponent_clickView;
    this.clickThumbnail = MutiViewComponent_clickThumbnail;
    this.clickButtonPrevious = MutiViewComponent_clickButtonPrevious;
    this.clickButtonNext = MutiViewComponent_clickButtonNext;
    this.clearAllElements = MultiViewComponent_clearElements;
    this.renderLabelClickToEnlarge = MultiViewComponent_renderLabelClickToEnlarge;

    this.render = function() {
        var mvDiv = document.createElement("div");
        mvDiv.id = this.container.id + "_multiView";
        //mvDiv.style.backgroundColor = "#fffff";
        mvDiv.style.position = "relative";

        mvDiv.style.marginLeft = "auto";
        mvDiv.style.marginRight = "auto";
        mvDiv.style.textAlign = "center";

        mvDiv.appendChild(this.viewImage.render());
        mvDiv.appendChild(document.createElement("br"));
        mvDiv.appendChild(this.renderLabelClickToEnlarge());
        mvDiv.appendChild(document.createElement("br"));
        mvDiv.appendChild(this.navigationThumbnails.render())
        container.appendChild(mvDiv);
    };
}

function MultiViewComponent_renderLabelClickToEnlarge() {
    var alink = document.createElement("a");
    alink.href = "#";
    alink.appendChild(document.createTextNode(this.localizedLabel));
    alink.className = "navigateLink";
    alink.onclick = function() { MutiViewComponent_clickView(); };
    return alink;
}

function MutiViewComponent_clickView() {

    YAHOO.namespace("SGX.container");

    YAHOO.SGX.container = document.createElement("div");
    YAHOO.SGX.container.className = "yui-skin-sam";
    YAHOO.SGX.container.id = viewImage.container.id + "_YuiPanel";
    viewImage.container.appendChild(YAHOO.SGX.container);

    panel1 = document.createElement("div");
    panel1.id = viewImage.container.id + "_panel1";
    panel1.style.visibility = "hidden";
    document.body.appendChild(panel1);


    panel1bd = document.createElement("div");
    panel1bd.id = viewImage.container.id + "_panel1bd";
    panel1bd.style.backgroundColor = "#303030";

    panel1.appendChild(panel1bd);

    YAHOO.SGX.container.panel1 = new YAHOO.widget.Panel(panel1.id, {
        underlay: "matte",
        iframe: true,
        effect: { effect: YAHOO.widget.ContainerEffect.FADE, duration: 0.30 },
        visible: false,
        draggable: true,
        autofillheight: "body",
        zIndex: 10000,
        fixedcenter: true,
        monitorresize: true,
        close: true,
        modal: true
    });

    YAHOO.SGX.container.panel1.setHeader(viewImage.title);

    YAHOO.SGX.container.panel1.render(viewImage.container.id + "_YuiPanel");


    if (panel1bd.firstChild != undefined) {
        panel1bd.removeChild(panel1bd.firstChild);
    }

    popupView = new MV_PopupView(panel1bd.id, viewImage.navigator.index, new MV_Disposition(MV_Disposition.right, MV_Disposition.vertical), viewImage.pictures);
    popupView.popupViewBand.setActiveThumb(viewImage.navigator.index);
    panel1bd.appendChild(popupView.render());

    YAHOO.SGX.container.panel1.show();
}

function MutiViewComponent_clickThumbnail(index) {
    this.navigator.moveAtPosition(this.indexOfFirstThumbnail + index);
    this.viewImage.imageName = this.pictures[1][this.navigator.index];
    this.viewImage.indexInThumbnails = index;
    this.clearAllElements();
    this.render();
}

function MutiViewComponent_clickButtonPrevious() {
    this.navigationThumbnails.setRangeThumbnails(this.getVisibleThumbnails(this.indexOfFirstThumbnail - 1));
    this.clearAllElements();
    this.render();
}

function MutiViewComponent_clickButtonNext() {
    this.navigationThumbnails.setRangeThumbnails(this.getVisibleThumbnails(this.indexOfFirstThumbnail + 1));
    this.clearAllElements();
    this.render();
}


function MultiViewComponent_clearElements() {
    var elt = document.getElementById(this.container.id + "_YuiPanel");
    var containerElement = document.getElementById(this.container.id + "_multiView");
    var elt = containerElement.parentNode;
    elt.removeChild(containerElement);
}

/*
* Retourne la plage d'images à afficher dans 
* la liste des vignettes
*/
function MultiViewComponent_getVisibleThumbnails(startIndex) {
    var index = 0;
    if (startIndex != undefined && startIndex > 0 && startIndex < this.pictures[0].length) {
        index = startIndex;
    }

    var effectiveLength = this.maxThumbnails;
    if (effectiveLength > this.pictures[0].length) {
        effectiveLength = this.pictures[0].length;
        index = 0;
    }
    else {
        if (index + effectiveLength > this.pictures[0].length) {
            index = this.pictures[0].length - effectiveLength;
        }
        else {
            if (index < 0) {
                index = 0;
            }
        }
    }

    this.indexOfFirstThumbnail = index;

    var result = new Array();
    if (effectiveLength > 1) {
        for (var i = 0; i < effectiveLength; i++) {
            result[i] = this.pictures[0][i + index];
        }
    }
    else result[0] = this.pictures[0][index];

    return result;
}

/* Classe MV_Disposition
description des paramètres :
position : 1 = top; 2 = bottom; 3 = left; 4 = right;
orientation : 1 = vertical; 2 = horizontal;
*/
function MV_Disposition(position, orientation) {
    this.position = position;
    this.orientation = orientation;
}

MV_Disposition.top = 1;
MV_Disposition.bottom = 2;
MV_Disposition.left = 3;
MV_Disposition.right = 4;
MV_Disposition.vertical = 1;
MV_Disposition.horizontal = 2;

function MV_Disposition_isVertical(){
    return this.orientation == MV_Disposition.vertical;
}

function MV_Disposition_isHorizontal(){
    return this.orientation == MV_Disposition.horizontal;
}

function MV_Disposition_isVerticalLeft(){
    return this.position == MV_Disposition.left && this.isVertical();
}

function MV_Disposition_isVerticalRight(){
    return this.position == MV_Disposition.right && this.isVertical();
}

function MV_Disposition_isHorizontalTop(){
    return this.position == MV_Disposition.top && this.isHorizontal();
}

function MV_Disposition_isHorizontalBottom(){
    return this.position == MV_Disposition.bottom && this.isHorizontal();
}

function MV_Disposition_isValid(){
    return (this.isVerticalLeft() || this.isVerticalRight() || this.isHorizontalBottom() || this.isHorizontalTop());
}

MV_Disposition.prototype.isVertical = MV_Disposition_isVertical;
MV_Disposition.prototype.isHorizontal = MV_Disposition_isHorizontal;
MV_Disposition.prototype.isVerticalLeft = MV_Disposition_isVerticalLeft;
MV_Disposition.prototype.isVerticalRight = MV_Disposition_isVerticalRight;
MV_Disposition.prototype.isHorizontalTop = MV_Disposition_isHorizontalTop;
MV_Disposition.prototype.isHorizontalBottom = MV_Disposition_isHorizontalBottom;
MV_Disposition.prototype.isValid = MV_Disposition_isValid;


function MV_RenderPopupView() {
    if (!this.disposition.isValid()) {
        return;
    }

    var table = document.createElement("table");
    table.border = 0;
    var tbody = document.createElement("tbody");

    // 2 colonnes verticales
    if (this.disposition.isVerticalRight() || this.disposition.isVerticalLeft()) {
        var tableRawBand = document.createElement("tr");
        var tableCellNavBand = document.createElement("td");

        var elImage = this.renderImage(viewImage.navigator.index);
        this.popupLength = elImage.height;

        tableCellNavBand.style.backgroundColor = "#202020";
        tableCellNavBand.style.padding = "10";
        tableCellNavBand.appendChild(this.popupViewBand.render());
        // horizontal preview image

        var tableCellImageView = document.createElement("td");
        tableCellImageView.style.textAlign = "center";
        tableCellImageView.style.padding = "30";
        tableCellImageView.style.backgroundColor = "#303030";
        tableCellImageView.id = this.container + "_cellViewImage";

        tableCellImageView.appendChild(elImage);

        // Bandeau navigation à droite
        if (this.disposition.isVerticalRight()) {
            tableRawBand.appendChild(tableCellImageView);
			if (pictures[0].length > 1)
            	tableRawBand.appendChild(tableCellNavBand);
        }
        else if (this.disposition.isVerticalLeft()) {
			if (pictures[0].length > 1)
            	tableRawBand.appendChild(tableCellNavBand);
				
            tableRawBand.appendChild(tableCellImageView);
        }
        tbody.appendChild(tableRawBand);
    }

    // 2 lignes horizontales
    if (this.disposition.isHorizontalTop() || this.disposition.isHorizontalBottom()) {
        // horizontal navigation
        var tableRawNavBand = document.createElement("tr");
        var tableCellNavBand = document.createElement("td");

        var elImage = this.renderImage(viewImage.navigator.index);
        this.popupLength = elImage.width;

        tableCellNavBand.style.backgroundColor = "#202020";
        tableCellNavBand.style.padding = "10";
        tableCellNavBand.appendChild(this.popupViewBand.render());
        tableRawNavBand.appendChild(tableCellNavBand);


        // horizontal preview image
        var tableRawImageView = document.createElement("tr");
        var tableCellImageView = document.createElement("td");
        tableCellImageView.style.textAlign = "center";
        tableCellImageView.style.padding = "30";
        tableCellImageView.style.backgroundColor = "#303030";
        tableCellImageView.id = this.container + "_cellViewImage";
        tableCellImageView.appendChild(elImage);
        tableRawImageView.appendChild(tableCellImageView);

        // Bandeau navigation en haut
        if (this.disposition.isHorizontalTop()) {
			if (pictures[0].length > 1)
            	tbody.appendChild(tableRawNavBand);
            tbody.appendChild(tableRawImageView);
        }
        else if (this.disposition.isHorizontalBottom()) {
            tbody.appendChild(tableRawImageView);
			if (pictures[0].length > 1)
            	tbody.appendChild(tableRawNavBand);
        }
    }
    table.appendChild(tbody);
    return table;
}

function MV_PopupViewImage_OnClick() {
    YAHOO.SGX.container.panel1.hide();
}

function MV_PopupViewRenderImage(imgIndex) {
    var elImage = document.createElement("img");
    elImage.id = this.container + "idPreviewImage";
    elImage.src = pictures[2][imgIndex];
    elImage.style.verticalAlign = "bottom";
    elImage.onclick = function() { MV_PopupViewImage_OnClick() };
    return elImage;
}

function MV_PopupView(container, indexInPictures, disposition, pictures) {
    this.indexInPictures = indexInPictures;
    this.disposition = disposition;
    this.popupHeight = -1;
    this.container = container;
    this.popupViewBand = new MV_PopupViewBand(this, this.container, this.disposition.orientation);
    this.render = MV_RenderPopupView;
    this.renderImage = MV_PopupViewRenderImage;
}


function MV_PopupViewBandClickThumbnail(id) {
    // Clear the image
    var cellImage = document.getElementById(popupView.container + "_cellViewImage");
    if (cellImage == undefined) {
        return;
    }

    if (cellImage.hasChildNodes()) {
        var elImage = cellImage.childNodes[0];
        if (elImage == undefined) {
            return;
        }
        var imgIndex = id;
        cellImage.replaceChild(popupView.renderImage(imgIndex), elImage);
    }

    // switch to active thunbmail
    popupView.popupViewBand.setActiveThumb(id);
}

function MV_RenderVerticalPopupViewBand() {

    eltVerticalBand = document.createElement("div");
    eltVerticalBand.id = this.container + "_divBand";

    if (this.needScrollButtons()) {
        var prevButton = new MV_PopupViewPreviousButton(this.container, this.orientation);
        eltVerticalBand.appendChild(prevButton.render());
    }

    var table = document.createElement("table");
    //table.border=1;
    var tbody = document.createElement("tbody");
    tbody.style.vAlign = "center";
    var lastThumbnail = this.startIndex + this.nbThumbnails;
    for (var i = this.startIndex; i < lastThumbnail; i++) {
        var row = document.createElement("tr");
        row.id = this.container + "_popupBand_" + i.toString();
        var cell = document.createElement("td");
        var popViewThumb = new MV_PopupViewThumbnail(this.container, i, i == this.activeThumb);
        cell.appendChild(popViewThumb.render());
        row.appendChild(cell);
        tbody.appendChild(row);
    }
    table.appendChild(tbody);

    eltVerticalBand.appendChild(table);

    if (this.needScrollButtons()) {
        var nextButton = new MV_PopupViewNextButton(this.container, this.orientation);
        eltVerticalBand.appendChild(nextButton.render());
    }
    return eltVerticalBand;
}

function MV_RenderHorizontalPopupViewBand() {
    eltHorizontalBand = document.createElement("div");
    eltHorizontalBand.id = this.container + "_divBand";
    if (this.needScrollButtons()) {
        var prevButton = new MV_PopupViewPreviousButton(this.container, this.orientation);
        eltHorizontalBand.appendChild(prevButton.render());
    }

    var table = document.createElement("table");
    var tbody = document.createElement("tbody");
    var row = document.createElement("tr");
    row.id = this.container + "popupBand";
    for (var i = this.startIndex; i < this.nbThumbnails; i++) {
        var popViewThumb = new MV_PopupViewThumbnail(this.container, i, i == this.activeThumb);

        var cell = document.createElement("td");
        cell.appendChild(popViewThumb.render());
        row.appendChild(cell);
    }
    tbody.appendChild(row);
    table.appendChild(tbody);

    eltHorizontalBand.appendChild(table);

    if (this.needScrollButtons()) {
        var nextButton = new MV_PopupViewNextButton(this.container, this.orientation);
        eltHorizontalBand.appendChild(nextButton.render());
    }
    return eltHorizontalBand;
}

function MV_RenderPopupViewBand() {
    this.nbThumbnails = MV_PopupViewBandGetNbThumbnails(this.container, this.orientation);
	if (this.nbThumbnails == -1)
		this.nbThumbnails = 6;

    if (this.orientation == MV_Disposition.vertical) {
        return this.renderVertical();
    }
    else {
        return this.renderHorizontal();
    }
}

function MV_PopupViewBandSetActiveThumb(i) {
    if (this.activeThumb != undefined) {
        var previousActiveThumb = this.activeThumb;
        var previousEltImage = document.getElementById(this.container + "_thumb_" + previousActiveThumb.toString());
        if (previousEltImage != undefined) {
            previousEltImage.style.border = '3px solid black';
        }
    }

    this.activeThumb = i;   //+ this.startIndex;
    var eltImage = document.getElementById(this.container + "_thumb_" + i.toString());
    if (eltImage != undefined) {
        eltImage.style.border = '3px ridge  red';
    }
}

function MV_PopupViewNeedScrollButtons() {
    return this.nbThumbnails < pictures[0].length;
}

// retourne le nombre maximum de vignettes visibles dans la popup en fonction de l'orientation
// horizontale ou verticale.
function MV_PopupViewBandMaxVisibleThumbnails(container, orientation) {
    if (container == undefined)
        return;

    var length = this.popupView.popupLength;
    var base = (length - 10);
    var reste = base % 50;
    var nb = ((base - reste) / 50);
    return nb;
}

function MV_PopupViewBandGetNbThumbnails(container, orientation){
	var maxThumbnails = MV_PopupViewBandMaxVisibleThumbnails(container, orientation);
	if (maxThumbnails == 0)
		maxThumbnails = 6;
		
	var nbThumbs = pictures[0].length;
	
	if (nbThumbs > maxThumbnails) {
		return maxThumbnails - 1;
	}
	return nbThumbs;
}

function MV_PopupViewBandNeedsScroll() {
    var need = pictures[0].length > this.nbThumbnails;
    return pictures[0].length > this.nbThumbnails;
    //return pictures[0].length > this.maxVisibleThumbnails;

}

function MV_PopupViewBandScrollNext() {
    var nbThumbs = MV_PopupViewBandGetNbThumbnails(this.container, this.orientation);
    if (this.startIndex + nbThumbs < pictures[0].length) {

        this.startIndex++;

        var eltBand = document.getElementById(this.container + "_divBand");
        //var parent = document.getElementById(this.container);
        var parent = eltBand.parentNode;

        parent.replaceChild(this.render(), eltBand);

    }
}

function MV_PopupViewBandScrollPrevious() {
    if (this.startIndex > 0) {

        this.startIndex--;

        var eltBand = document.getElementById(this.container + "_divBand");
        var parent = eltBand.parentNode;

        parent.replaceChild(this.render(), eltBand);
    }
}

function MV_PopupViewBand(popupView, container, orientation) {
    this.popupView = popupView;
    this.container = container;
    this.orientation = orientation;
    this.startIndex = 0;
    this.activeThumb = 0;
    this.maxVisibleThumbnails = MV_PopupViewBandMaxVisibleThumbnails;
    this.needScrollButtons = MV_PopupViewBandNeedsScroll;
    this.render = MV_RenderPopupViewBand;
    this.renderVertical = MV_RenderVerticalPopupViewBand;
    this.renderHorizontal = MV_RenderHorizontalPopupViewBand;
    this.setActiveThumb = MV_PopupViewBandSetActiveThumb;
    this.scrollNext = MV_PopupViewBandScrollNext;
    this.scrollPrevious = MV_PopupViewBandScrollPrevious;
}

function MV_PopupViewThumbnail(container, index, isActive) {
    this.index = index;
    this.isActive = isActive;
    this.container = container;
    this.render = function() {
        var elImage = document.createElement("img");
        elImage.src = pictures[0][this.index];
        elImage.id = this.container + "_thumb_" + this.index.toString();
        elImage.style.cursor = "pointer";
        elImage.index = this.index;
        elImage.onclick = function() { MV_PopupViewBandClickThumbnail(this.index); };
        elImage.width = 50;
        elImage.height = 50;
        elImage.style.border = '3px solid black';
        if (this.isActive) {
            MV_PopupViewBandSetActiveThumb(index);
        }
        return elImage;
    }
}

function MV_PopupViewPreviousButton_onClick() {
    popupView.popupViewBand.scrollPrevious();
}

function MV_PopupViewPreviousButton_onmouseUp() {
    if (this.orientation == MV_Disposition.horizontal) {
        this.src = _browser.flecheGaucheMultiView;
    }
    else {
        this.src = _browser.flecheHauteMultiView;
    }
}

function MV_PopupViewPreviousButton_onmouseDown() {
    if (this.orientation == MV_Disposition.horizontal) {
        this.src = _browser.flecheGaucheMultiViewPushedDown;
    }
    else {
        this.src = _browser.flecheHauteMultiViewPushedDown;
    }
}

function MV_PopupViewPreviousButton_render() {
    var elButton = document.createElement("img");
    elButton.src = this.orientation == MV_Disposition.horizontal ? _browser.flecheGaucheMultiView : _browser.flecheHauteMultiView;
    elButton.id = this.container + "_idButtonPrevious";
    elButton.style.margin = 2;
    elButton.style.border = "solid 2px transparent";
    elButton.style.cursor = "pointer";
    elButton.onclick = MV_PopupViewPreviousButton_onClick;
    elButton.onmouseup = MV_PopupViewPreviousButton_onmouseUp;
    elButton.onmousedown = MV_PopupViewPreviousButton_onmouseDown;
    return elButton;
}

function MV_PopupViewPreviousButton(container, orientation) {
    this.container = container;
    this.orientation = orientation;
    this.render = MV_PopupViewPreviousButton_render;
}


function MV_PopupViewNextButton_onClick() {
    popupView.popupViewBand.scrollNext();
}

function MV_PopupViewNextButton_onmouseUp() {
    if (this.orientation == MV_Disposition.horizontal) {
        this.src = _browser.flecheDroiteMultiView;
    }
    else {
        this.src = _browser.flecheBasseMultiView;
    }
}

function MV_PopupViewNextButton_onmouseDown() {
    if (this.orientation == MV_Disposition.horizontal) {
        this.src = _browser.flecheDroiteMultiViewPushedDown;
    }
    else {
        this.src = _browser.flecheBasseMultiViewPushedDown;
    }
}

function MV_PopupViewNextButton_render() {
    var elButton = document.createElement("img");
    elButton.src = this.orientation == MV_Disposition.horizontal ? _browser.flecheDroiteMultiView : _browser.flecheBasseMultiView;
    elButton.id = this.container + "_idButtonPrevious";
    elButton.style.margin = 2;
    elButton.style.border = "solid 2px transparent";
    elButton.style.cursor = "pointer";
    elButton.onclick = MV_PopupViewNextButton_onClick;
    elButton.onmouseup = MV_PopupViewNextButton_onmouseUp;
    elButton.onmousedown = MV_PopupViewNextButton_onmouseDown;
    return elButton;
}

function MV_PopupViewNextButton(container, orientation) {
    this.container = container;
    this.orientation = orientation;
    this.render = MV_PopupViewNextButton_render;
}

var viewImage;
var popupView;
var pictures;
var flavorControl;