var NumberOfProducts = 8;
var requestUrlGetProduct = "GetProduct.aspx";
var Products = new Array(NumberOfProducts);
var firstProductId = 1;
var LoadedProductId = -1;

function GetProducts() {
    var found = false;
    for (var i = 1; i <= NumberOfProducts; i++) {
        if (!Products[i]) {
            found = true;
            GetProduct(i);
        }

    }
    var product6 = Products[5];
    var product7 = Products[6];
    var product8 = Products[7];
//    Products[5] = product8;
//    Products[6] = product6;
//    Products[7] = product7;
    if (!found) {
        LoadedProductId = -1;
        FillProductPlaces();
    }
}


function GetProduct(idProduct) {
    var propId = new property();
    propId.Name = "idProduct";
    propId.Value = idProduct;


    AjaxRequest(requestUrlGetProduct, "POST", true, new Array(ResponseGetProduct), propId);
}

function ResponseGetProduct(xmlResponse) {
    var prod = new Product();
    var ProductNode = xmlResponse.getElementsByTagName("Product")[0];
    var ProductNameNode = ProductNode.getElementsByTagName("Name")[0];
    var ProductIdNode = ProductNode.getElementsByTagName("Id")[0];
    var ProductTextNode = ProductNode.getElementsByTagName("Text")[0];
    var ProductImagesNode = ProductNode.getElementsByTagName("Images")[0];
    if (ProductNameNode != null) {
        prod.Text = ProductTextNode.text;
        prod.Id = ProductIdNode.text;
        prod.Name = ProductNameNode.text;
        var i = 0
        while (ProductImagesNode.childNodes[i] != null) {
            temp = ProductImagesNode.childNodes[i].text;
            prod.Images[i] = temp;
            i++;
        }

        Products[prod.Id] = prod;
    }
    //Products[prod.Id].Alert();
    FillProductPlaces();

}

function FillProductPlaces() {
    if (LoadedProductId < 0) {
        FillProductPlace(1, firstProductId);
    }
}


function ProductImagePrevious() {
    var index = Products[LoadedProductId].SelectedImageIndex - 1;
    Products[LoadedProductId].SelectImage(index);
    ChangeSelectedImage(LoadedProductId);
}

function ProductImageNext() {
    var index = Products[LoadedProductId].SelectedImageIndex + 1;
    Products[LoadedProductId].SelectImage(index);
    ChangeSelectedImage(LoadedProductId);
}

function SwapProduct(productNumber) {
    FillProductPlace(1, productNumber);
}

function FillProductPlace(placeNumber, productNumber) {
  
    
    var dTitle = "spanTitleBarMiddle";  //"divNameProduct"+placeNumber;
    var dText = "spanTextMiddleContent";      //"divTextProduct"+placeNumber;
    var dImage = "spanImageMiddle";     //"divImageProduct"+placeNumber;
    if (LoadedProductId != productNumber && Products[productNumber] != null) {
        LoadedProductId = productNumber;
        $(dText).innerHTML = Products[productNumber].Text;
        if (Products[productNumber].SelectedImage == "") {
            Products[productNumber].SelectImage(0);
        }

        var imageLinks = "";
        if (Products[productNumber].Images[0] != null && Products[productNumber].Images[1] != null) {
            imageLinks = "<table top='0px' cellpadding='0px' cellspacing='0px' border='0px' style='width:100%;height:20px; '>" +
                          "<tr>" +
                         "<td style='width:50%; text-align:left;height:20px;vertical-align:middle;'>" +
                          "&nbsp;" + (Products[productNumber].SelectedImageIndex + 1).toString() + "/" + Products[productNumber].Images.length.toString() +
                          "</td>" +
                         "<td style='width:50%; text-align:right;height:20px;'>" +
                         "<span onclick='ProductImagePrevious()' class='spanPictureArrow'><img src='/images/pijl_back.jpg' border='none' align='absmiddle'  /></span>&nbsp;" +
                         "<span onclick='ProductImageNext()' class='spanPictureArrow'><img src='/images/pijl_forward.jpg' border='none' align='absmiddle'  /></span>" +
                          "</td>" +
                          "</tr>" +
                         "</table>";
        }
        $("spanImageMiddleImage").innerHTML = "<img src='" + Products[productNumber].SelectedImage + "' border='none'  />";
        $("spanUnderImage").innerHTML = imageLinks;
    }
}

function ChangeSelectedImage(productNumber) {
    LoadedProductId = 0;
    FillProductPlace(1, productNumber);
}