function roll(ctl) {
    if (firstLoad==false)
        loadBGs();
        
    ctl.children[1].children[0].className = "ThumbRoll";
}
function rollOut(ctl) {
    ctl.children[1].children[0].className = "";
}
function loadBGs() {
    firstLoad = true;
    var x;
    var portrait;
    var landscape;
    for (x = 0; x <= imgArr.length - 1; x++) {
        portrait = document.getElementById('Portrait' + x);
        landscape = document.getElementById('Landscape' + x);
        
        if (portrait != null)
            portrait.style.backgroundColor = '#000000';

        if (landscape != null)
            landscape.style.backgroundColor = '#000000';
    }
}

function loadImage(x) {
    img.src = '/Uploads/Products/' + imgArr[x];
    img.style.width = imgWidth[x];
    img.style.height = imgHeight[x];
    currentIndex = x;
    setHeight('ProductMenu', 'Products');
}

function loadLargeImage(x) {
    if (currentIndex == x) {

    }
    else {
        $(img).hide();
    }

    $(function () {
        $(img).load(function () {
            $('#LargImage')
                .append(this);
            $(this).fadeIn();
        })
            .error(function () {
                //alert("error!!");
            })
        .attr('src', '/Uploads/Products/' + imgArr[x]).height(imgHeight[x]).width(imgWidth[x]);
    });
    currentIndex = x;
    setHeight('ProductMenu', 'Products');
}

function nextImage() {
    if ((currentIndex < (imgArr.length - 1)) && (imgArr.length > 1)) {
        loadLargeImage(currentIndex + 1);
    }
    else
        loadLargeImage(0);
}
function prevImage() {
    if (currentIndex > 0) {
        loadLargeImage(currentIndex - 1);
    }
    else {
        if (imgArr.length > 1)
            loadLargeImage(imgArr.length - 1);
    }
}
loadLargeImage(0);