function $(s) { return document.getElementById(s); }

function ImageInfo(img, index, blobUUID, blobW, blobH) {

    this.Image = img;
    this.Index = index;
    this.BlobUUID = blobUUID;
    this.BlobW = blobW;
    this.BlobH = blobH;
    this.OriginalWidth = img.width;
    this.OriginalHeight = img.height;
    this.Delta = 0;
    this.Pas = 0;
}

function ImageDictionary() {
    this.Add = function() 
    {
        for (c = 0; c < arguments.length; c += 2) {
            this[arguments[c]] = arguments[c + 1];
        }
    };

    this.Lookup = function(keyName) { return (this[keyName]); }

    this.Delete = function(keyName) 
    {
        for (c = 0; c < arguments.length; c++) {
            this[arguments[c]] = null;
        }
    }
}

var Images;
var currentIndex;

function img2_Init() {

    Images = new ImageDictionary();
    currentIndex = 0;
}

function photo_OnLoad() {

    var container = $("divPhotoContainer");
    var photo = $("imgPhoto");

    var containerRatio = container.offsetWidth / container.offsetHeight;
    var photoRatio = photo.offsetWidth / photo.offsetHeight;

    if (photoRatio > containerRatio) {
        // Paysage
        photo.style.width = container.offsetWidth + 'px';
        photo.style.height = "";
    }
    else {
        // Portrait
        photo.style.width = "";
        photo.style.height = container.offsetHeight + 'px';
    }
}

function img2_OnLoad(img, index, blobUUID, blobW, blobH) {

    var imgId = img.id;
    var imgInfo;

    imgInfo = new ImageInfo(img, index, blobUUID, blobW, blobH);
    
    Images.Add(index, imgInfo);

    img.onmouseover = function() { img2_OnMouseOver(index) };
    img.onmouseout = function() { img2_OnMouseOut(index) };
    img.onclick = function() { img2_OnClick(index) };
}

function img2_OnMouseOver(index) {

    var imgInfo = Images[index];
    imgInfo.Image.style["border"] = "3px solid #1eb4ff";
}

function img2_OnMouseOut(index) {

    var imgInfo = Images[index];
    imgInfo.Image.style["border"] = "3px solid #FFFFFF";    
}

function img2_OnClick(index) {

    var imgInfo = Images[index];
    $("divPhoto").style["display"] = "";

    var photo = $("imgPhoto");
    photo.src = "/images/1x1.gif";

    currentIndex = imgInfo.Index;

    var container = $("divPhotoContainer");

    var containerRatio = container.offsetWidth / container.offsetHeight;
    var photoRatio = imgInfo.BlobW / imgInfo.BlobH;

    if (photoRatio > containerRatio) {
        // Paysage
        photo.style.width = container.offsetWidth + 'px';
        photo.style.height = "";
    }
    else {
        // Portrait
        photo.style.width = "";
        photo.style.height = container.offsetHeight + 'px';
    }
    photo.src = imgInfo.BlobUUID;
}

function prev_OnClick() {

    if (currentIndex > 0) {
        currentIndex = currentIndex - 1;
        img2_OnClick(currentIndex);
    }
}

function next_OnClick() {
    if (Images[currentIndex + 1] != undefined) {
        currentIndex = currentIndex + 1;
        img2_OnClick(currentIndex);
    }
}