// this module creates the dynamic image rotator on the main page of the website
// the rotator is built up of four parts:
// a. an image
// b. a link wrapping the image that, if clicked, takes the surfer to the category corresponding
//    to the current image
// c. a textual link with the name of the category to which this image belongs
// I shall refer to them as 'elements' below
// d. a script with arrays that is present in the containing page.
//    these arrays contain the image urls, and the text that accompanies the images.
//    these arrays are queried by the functions below to get the image url and text of the current image.

// 1. an initial hardcoded image is faded out
// 2. then the rotator is set to work perpetually with a time interval of 4500 milliseconds

function startImageRotator()
{
    //1
    fadeOutInitialImage();
    //2
    setInterval(function() { rotateImages() }, 4500);
}

// the image and text are faded out together

function fadeOutInitialImage()
{
    var idx;
    var reImg = new RegExp("rotatedImageHolder");
    var reText = new RegExp("rotatedTextCell");

    var rotatedImageHolder = getSingleDomObj("img", reImg);
    var rotatedTextCell = getSingleDomObj("td", reText);

    fade2(rotatedImageHolder, "out");
    fade2(rotatedTextCell, "out");
}

//one cycle of the rotator is made up of three steps:
//
//0. the element object references are found on the page using regular expression
//   i am not using global variables on the page because this is bad form.
//   anyway the browser has all the time in the world to find them because of the long time interval
//
//1. all elements are faded out (hidden)
//2. the index of the next image to be shown is computed
//3. the elements are set to be completely hidden just to make sure.
//4. the elements are set with the new values from the global arrays based on the new index
//5. the elements with the new image and text are faded in (displayed)

function rotateImages()
{
    var idx;
    var reImg = new RegExp("rotatedImageHolder");
    var reText = new RegExp("rotatedTextCell");
    var reAnchor = new RegExp("linkImageToCategory");

    //0
    var rotatedImageHolder = getSingleDomObj("img", reImg);
    var rotatedTextCell = getSingleDomObj("td", reText);
    var linkToCategory = getSingleDomObj("a", reAnchor);
    
    //1
    fade2(rotatedImageHolder, "out");
    fade2(rotatedTextCell, "out");

    //2
    idx = computeNextIndex();

    //3
    OpacAnyObj(rotatedImageHolder, 0);
    OpacAnyObj(rotatedTextCell, 0);

    //4
    rotatedImageHolder.src = serverFolder + imagesURLs[idx];
    rotatedTextCell.innerHTML = "<br/><a class='lcategory' href='pages/gallery/" + pageArr[idx] + ".aspx' onfocus='blur()' class='lcategory'>" + categoryArr[idx] + "</a>";
    linkToCategory.href = "pages/gallery/" + pageArr[idx] + ".aspx";

    //5
    fade2(rotatedImageHolder, "in");
    fade2(rotatedTextCell, "in");
}

// the next index is computed to be the next index out of the imagesURL's array

function computeNextIndex()
{
    var index;

    index = previousIdx % imagesURLs.length;
    previousIdx++;

    return index;
}

//this function fades the elements in or out of view according to the opacity values in the arrays
//unfortunately it is not possible to use a for loop here because experiments have shown that the
//browsers cannot handle a loop
//the wait parameter takes into account the time it takes to fade in an image, then give the user
//1.2 seconds to look at it, and then start fading out again

function fade2(htmlElement, direction)
{
    var i, wait;
    var opacVal = [0, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100];
    var t = [75, 150, 225, 300, 375, 450, 525, 600, 675, 750, 825, 900, 975, 1050, 1125, 1200, 1275, 1350, 1425, 1500];
    wait = 2700;

    if (direction == "in")
    {
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[0]) }, t[0]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[1]) }, t[1]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[2]) }, t[2]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[3]) }, t[3]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[4]) }, t[4]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[5]) }, t[5]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[6]) }, t[6]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[7]) }, t[7]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[8]) }, t[8]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[9]) }, t[9]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[10]) }, t[10]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[11]) }, t[11]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[12]) }, t[12]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[13]) }, t[13]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[14]) }, t[14]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[15]) }, t[15]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[16]) }, t[16]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[17]) }, t[17]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[18]) }, t[18]);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[19]) }, t[19]);
    }
    else
    {
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[19]) }, t[0] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[18]) }, t[1] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[17]) }, t[2] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[16]) }, t[3] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[15]) }, t[4] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[14]) }, t[5] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[13]) }, t[6] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[12]) }, t[7] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[11]) }, t[8] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[10]) }, t[9] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[9]) }, t[10] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[8]) }, t[11] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[7]) }, t[12] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[6]) }, t[13] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[5]) }, t[14] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[4]) }, t[15] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[3]) }, t[16] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[2]) }, t[17] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[1]) }, t[18] + wait);
        setTimeout(function() { OpacAnyObj(htmlElement, opacVal[0]) }, t[19] + wait);
    }
}