// function to rotate through the images in an div.
// =============================================================================
function RotateImages(sImagePanel, iImageNumber, iPause) {

    // get object from name of id
    var objImagePanel = document.getElementById(sImagePanel);

    // set all images of div in an array
    var aImages = objImagePanel.getElementsByTagName("img");

    var sTitle;
    var oTitle;
    var oBackgroundTitle;

    if (document.getElementById(sImagePanel + "title") == null) {

        // create title
        oTitle = document.createElement("span");
        oTitle.id = sImagePanel + "title";
        oTitle.className = "title";
        objImagePanel.appendChild(oTitle);

        //create background title
        oBackgroundTitle = document.createElement("span");
        oBackgroundTitle.id = sImagePanel + "backgroundtitle";
        oBackgroundTitle.className = "backgroundtitle";
        objImagePanel.appendChild(oBackgroundTitle);

    }

    // set random image if -1
    if (iImageNumber == -1) {
        iImageNumber = Math.floor(Math.random() * aImages.length);
    }

    // loop through all images
    for (i = 0; i < aImages.length; i++) {


        oTitle = document.getElementById(sImagePanel + "title");
        oBackgroundTitle = document.getElementById(sImagePanel + "backgroundtitle");

        // if image is current
        if (i == iImageNumber) {

            // set images visible, 
            // fade from blank to no transparancy, 
            // set on top
            aImages[i].style.display = 'block';
            FadeOpacity(aImages[i].id, 0, 100, 1000, 15);
            aImages[i].style.zIndex = 3;


            sTitle = aImages[i].alt;
            setTimeout(function() { SetAltTitle(oTitle, oBackgroundTitle, sTitle) }, 1500);

            Resize(aImages[i], objImagePanel.offsetWidth, objImagePanel.offsetHeight)

        }
        else {
            // if image is before current set just below top
            if (i < iImageNumber) {
                aImages[i].style.zIndex = 2;
                oTitle.style.display = "none";
                oBackgroundTitle.style.display = "none";
            }
            // if image is after current set below
            if (i >= iImageNumber) {
                aImages[i].style.zIndex = 1;
                oTitle.style.display = "none";
                oBackgroundTitle.style.display = "none";
            }
        }
    }

    // set current image to the next
    iImageNumber++

    // check if there are stille images in the array. If not, start again
    if (iImageNumber < aImages.length) {
        setTimeout(function() { RotateImages(sImagePanel, iImageNumber, iPause) }, iPause);
    }
    else {
        setTimeout(function() { RotateImages(sImagePanel, 0, iPause) }, iPause);
    }
}

// function to set alt text as title over photo.
// ===============================================================================
function SetAltTitle(oTitle, oBackgroundTitle, sTitle) {
    //    oTitle.innerHTML = "";
    oTitle.innerHTML = sTitle;
    oTitle.style.display = "block";
    oBackgroundTitle.style.display = "block";
    FadeOpacity(oTitle.id, 0, 100, 1000, 15);
    FadeOpacity(oBackgroundTitle.id, 0, 60, 1000, 15);
}


// Proportional resize Image
// =============================================================================
function Resize(img, maxw, maxh) {
    var ratio = maxh / maxw;
    if (img.height / img.width > ratio) {
        img.width = Math.round(img.width * (maxh / img.height));
        img.height = maxh;
        img.style.left = (maxw - img.width) / 2 + "px";
    }
    else {
        img.height = Math.round(img.height * (maxw / img.width));
        img.width = maxw;
        img.style.top = (maxh - img.height) / 2 + "px";
    }
}



// =================================================================================
// 3d Party thanks to 
// Functions for fading images
// =================================================================================

// function to start the fading of an image
// =================================================================================
function FadeOpacity(elemId, fromOpacity, toOpacity, time, fps) {
    var iSteps = Math.ceil(fps * (time / 1000));
    var iDelta = (toOpacity - fromOpacity) / iSteps;
    var iTimeStep = time / iSteps

    FadeOpacityStep(elemId, 0, iSteps, fromOpacity, iDelta, iTimeStep);
}


// function to cycle through the fading steps.
// =================================================================================
function FadeOpacityStep(elemId, stepNum, steps, fromOpacity, delta, timePerStep) {
    var eElement = document.getElementById(elemId)
    var iOpacity = Math.round(parseInt(fromOpacity) + (delta * stepNum));

    SetOpacity(eElement, iOpacity);

    if (stepNum < steps)
        setTimeout("FadeOpacityStep('" + elemId + "', " + (stepNum + 1)
                 + ", " + steps + ", " + fromOpacity + ", "
                 + delta + ", " + timePerStep + ");", timePerStep);
}

// function to set the opacity (transparancy)
// =================================================================================
function SetOpacity(elem, opacityAsInt) {
    var opacityAsDecimal = opacityAsInt;

    if (opacityAsInt > 100)
        opacityAsInt = opacityAsDecimal = 100;
    else if (opacityAsInt < 0)
        opacityAsInt = opacityAsDecimal = 0;

    opacityAsDecimal /= 100;
    if (opacityAsInt < 1)
        opacityAsInt = 1; // IE7 bug, text smoothing cuts out if 0

    elem.style.opacity = (opacityAsDecimal);
    elem.style.filter = "alpha(opacity=" + opacityAsInt + ")";
}