﻿function slideThumbnail(pPrefix, pImageArray, pControlWidth, pThumbnailWidth, pThumbnailHeight, pTextHeight)
{
    var stnObject = new Object();

    stnObject.PreFix = "stn_" + pPrefix + "_";            // PreFix which is added to all the elements.
    stnObject.ImageObjectArray = pImageArray; // Array of objects containing the data for images

    stnObject.firstThumbnailPic;  //the counter for the thumbnail image array
    stnObject.elSlideShowContainer = null;
    stnObject.elImageDots = new Array();
    stnObject.showDots = 3;

    thumbnailWidth = parseInt(pThumbnailWidth);
    stnObject.constThumbnailWidth = (thumbnailWidth - 4) + "px";
    stnObject.constThumbnailHeight = (parseInt(pThumbnailHeight) - 4) + "px";
    stnObject.countThumbnail = Math.floor((parseInt(pControlWidth) - 6) / thumbnailWidth);
    stnObject.textHeight = pTextHeight;

    stnObject.images = {};
    stnObject.images.dot = new Array();
    stnObject.images.dot[0] = "/news/images/gray_status.gif";
    stnObject.images.dot[1] = "/news/images/gray_active_status.gif";
    stnObject.images.navButton = new Array();
    stnObject.images.navButton[0] = "/news/images/left_gray_btn.gif";
    stnObject.images.navButton[1] = "/news/images/right_gray_btn.gif";


    stnObject.loadSTN = function()
    {
        if ("undefined" == typeof stnObject.ImageObjectArray || null == stnObject.ImageObjectArray)
        {
            alert("No data!");
            return false;
        }

        stnObject.firstThumbnailPic = 0;

        stnObject.buildHTML();        // Adds HTML Element to the document
        stnObject.displayThumbnail();
    }

    stnObject.buildHTML = function()
    {
        document.write("<div id=\"" + stnObject.PreFix + "slideShowContainer\"></div>");
        stnObject.elSlideShowContainer = document.getElementById(stnObject.PreFix + "slideShowContainer");
        stnObject.elSlideShowContainer.className = "slideShowContainer";

        stnObject.addHeading();
        stnObject.addThumbnailBar();
    }

    stnObject.addHeading = function()
    {
        el_p = document.createElement("div");
        stnObject.elSlideShowContainer.appendChild(el_p);
        el_p.className = "divHeading";

        el_p1 = document.createElement("a");
        el_p.appendChild(el_p1);
        el_p1.className = "divHeading1";
        el_p1.innerHTML = "Multimedia » ";
        el_p1.href = "/news/multimedia.aspx";


        if (0 != stnObject.ImageObjectArray.length)
        {
            el_p2 = document.createElement("span");
            el_p.appendChild(el_p2);
            el_p2.className = "divHeading2";

            elThumbnailSpanPrevious = document.createElement("span");
            el_p2.appendChild(elThumbnailSpanPrevious);

            elThumbnailLinkPrevious = document.createElement("a");
            elThumbnailSpanPrevious.appendChild(elThumbnailLinkPrevious);
            elThumbnailLinkPrevious.className = "navButton";
            elThumbnailLinkPrevious.href = "javascript:void(0);";
            elThumbnailLinkPrevious.alt = elThumbnailLinkPrevious.title = "Previous";
            elThumbnailLinkPrevious.onclick = stnObject.processThumbnailPrevious;

            elThumbnailLinkPreviousImg = document.createElement("img");
            elThumbnailLinkPrevious.appendChild(elThumbnailLinkPreviousImg);
            elThumbnailLinkPreviousImg.alt = elThumbnailLinkPreviousImg.title = "Previous";
            elThumbnailLinkPreviousImg.src = stnObject.images.navButton[0];
            elThumbnailLinkPreviousImg.onclick = stnObject.processThumbnailPrevious;

            stnObject.showDots = (stnObject.countThumbnail < stnObject.showDots) ? stnObject.countThumbnail : stnObject.showDots;
            for (dot = 0; dot < stnObject.showDots; ++dot)
            {
                elThumbnailSpanDot = document.createElement("span");
                el_p2.appendChild(elThumbnailSpanDot);

                elThumbnailLinkDot = document.createElement("a");
                elThumbnailSpanDot.appendChild(elThumbnailLinkDot);
                elThumbnailLinkDot.className = "navDots";
                elThumbnailLinkDot.href = "javascript:void(0);";
                elThumbnailLinkDot.title = elThumbnailLinkDot.alt = "Page " + (dot + 1);
                elThumbnailLinkDot.setAttribute("PageNumber", dot);
                elThumbnailLinkDot.onclick = stnObject.processThumbnailDot;

                elThumbnailLinkDotImg = document.createElement("img");
                elThumbnailLinkDot.appendChild(elThumbnailLinkDotImg);
                stnObject.elImageDots[dot] = elThumbnailLinkDotImg;
                
                // GJB - Fixed problem with no dots showing up at first when by default the first page shows.
                elThumbnailLinkDotImg.src = dot == 0 ? stnObject.images.dot[1] : stnObject.images.dot[0];
                
                elThumbnailLinkDotImg.title = elThumbnailLinkDotImg.alt = "Page " + (dot + 1);
                elThumbnailLinkDotImg.onclick = stnObject.processThumbnailDot;
            }

            elThumbnailSpanNext = document.createElement("span");
            el_p2.appendChild(elThumbnailSpanNext);

            elThumbnailLinkNext = document.createElement("a");
            elThumbnailSpanNext.appendChild(elThumbnailLinkNext);
            elThumbnailLinkNext.className = "navButton";

            elThumbnailLinkNext.href = "javascript:void(0);";
            elThumbnailLinkNext.alt = elThumbnailLinkNext.title = "Next";
            elThumbnailLinkNext.onclick = stnObject.processThumbnailNext;

            elThumbnailLinkNextImg = document.createElement("img");
            elThumbnailLinkNext.appendChild(elThumbnailLinkNextImg);
            elThumbnailLinkNextImg.alt = elThumbnailLinkNextImg.title = "Next";
            elThumbnailLinkNextImg.src = stnObject.images.navButton[1];
            elThumbnailLinkNextImg.onclick = stnObject.processThumbnailNext;
        }
    }

    stnObject.addThumbnailBar = function()
    {
        if (0 != stnObject.ImageObjectArray.length)
        {
            elThumbnailDivBuild = document.createElement("div");
            stnObject.elSlideShowContainer.appendChild(elThumbnailDivBuild);
            elThumbnailDivBuild.id = stnObject.PreFix + "displayThumbnailDiv";
            elThumbnailDivBuild.className = "ClassThumbnailDivBuild";
            // Commented coz we dont require the background color
            //            if (navigator.userAgent.indexOf("MSIE") != -1) {
            //                elThumbnailDivBuild.style.display = "block";
            //                elThumbnailDivBuild.style.height = (parseInt(stnObject.textHeight) + parseInt(stnObject.constThumbnailHeight)) + "px";
            //            }
            //            else elThumbnailDivBuild.style.display = "inline-table";

            var newCount;
            for (count = 0; count < stnObject.countThumbnail; ++count)
            {
                newCount = (stnObject.firstThumbnailPic + count) % stnObject.ImageObjectArray.length;

                elThumbnailSpan = document.createElement("div");
                elThumbnailDivBuild.appendChild(elThumbnailSpan);
                elThumbnailSpan.className = "navBarSpan";

                elThumbnailImageA = document.createElement("a");
                elThumbnailSpan.appendChild(elThumbnailImageA);
                elThumbnailImageA.className = "imgLink";
                elThumbnailImageA.href = "javascript:void(0);";
                elThumbnailImageA.onclick = stnObject.processThumbnailImage;

                elThumbnailImage = document.createElement("img");
                elThumbnailImageA.appendChild(elThumbnailImage);
                elThumbnailImage.id = stnObject.PreFix + "displayThumbnailImage" + count;
                elThumbnailImage.style.width = stnObject.constThumbnailWidth;
                elThumbnailImage.style.height = stnObject.constThumbnailHeight;
                elThumbnailImage.alt = "";

                elThumbnailDescription = document.createElement("div");
                elThumbnailSpan.appendChild(elThumbnailDescription);
                elThumbnailDescription.id = stnObject.PreFix + "displayThumbnailDescription" + count;
                elThumbnailDescription.style.width = stnObject.constThumbnailWidth;
                elThumbnailDescription.style.height = stnObject.textHeight;
                elThumbnailDescription.className = "description";
            }
        }
    }

    stnObject.displayThumbnail = function()
    {
        var elThumbnailImageFind;
        var elThumbnailDescriptionFind;
        var newCount;
        for (count = 0; count < stnObject.countThumbnail; ++count)
        {
            elThumbnailImageFind = document.getElementById(stnObject.PreFix + "displayThumbnailImage" + count);
            elThumbnailDescriptionFind = document.getElementById(stnObject.PreFix + "displayThumbnailDescription" + count);
            if (null != elThumbnailImageFind)
            {
                newCount = (stnObject.firstThumbnailPic + count) % stnObject.ImageObjectArray.length;
                elThumbnailImageFind.setAttribute("FileID", "/news/multimedia/multimedia_file.aspx?file_id=" + stnObject.ImageObjectArray[newCount].FileID);
                elThumbnailImageFind.src = "/news/" + stnObject.ImageObjectArray[newCount].Location;
                if (null != elThumbnailDescriptionFind)
                {
                    elThumbnailDescriptionFind.innerHTML = stnObject.ImageObjectArray[newCount].Caption.replace("\r\n", "<br>").replace("\r", "<br>").replace("\n", "<br>");
                } // end if
            }
        }
    }

    stnObject.processThumbnailImage = function(e)
    {
        el = (null != e) ? e.target : window.event.srcElement;
        if (el != null)
        {
            els = el.getAttribute("FileID");
            if (els != null)
                win = window.open(els, "Multimedia");
        }
    }

    stnObject.processThumbnailNext = function()
    {
        stnObject.firstThumbnailPic = (stnObject.firstThumbnailPic - stnObject.countThumbnail) % stnObject.ImageObjectArray.length;
        if (stnObject.firstThumbnailPic < 0)
            stnObject.firstThumbnailPic += stnObject.ImageObjectArray.length;

        stnObject.displayThumbnail();
        stnObject.resetDots();
        if (stnObject.firstThumbnailPic % stnObject.countThumbnail == 0)
        {
            stnObject.elImageDots[stnObject.firstThumbnailPic / stnObject.countThumbnail].src = stnObject.images.dot[1];
        }
    }

    stnObject.processThumbnailPrevious = function()
    {
        stnObject.firstThumbnailPic = (stnObject.firstThumbnailPic + stnObject.countThumbnail) % stnObject.ImageObjectArray.length;

        stnObject.displayThumbnail();
        stnObject.resetDots();
        if (stnObject.firstThumbnailPic % stnObject.countThumbnail == 0)
        {
            stnObject.elImageDots[stnObject.firstThumbnailPic / stnObject.countThumbnail].src = stnObject.images.dot[1];
        }
    }

    stnObject.processThumbnailDot = function(e)
    {
        el = (null != e) ? e.target : window.event.srcElement;

        if (el.nodeName == "IMG")
            el = el.parentNode;

        stnObject.resetDots();
        pPage = el.getAttribute("PageNumber");
        if ("undefined" != typeof pPage && null != pPage)
        {
            stnObject.firstThumbnailPic = stnObject.countThumbnail * pPage;
            stnObject.elImageDots[pPage].src = stnObject.images.dot[1];
            stnObject.displayThumbnail();
        }
    }

    stnObject.resetDots = function()
    {
        for (index = 0; index < stnObject.elImageDots.length; ++index)
            stnObject.elImageDots[index].src = stnObject.images.dot[0];
    }

    // Actual Call
    stnObject.loadSTN();
}
