function StylishScroledPage(containerID, arrPages, width, height, bgColor)
{
    this.containerObj = document.getElementById(containerID);
    this.arrPages = arrPages;
    this.width = width;
    this.height = height;
    this.pageContainerID;
    this.pageIndex = 0;
    this.pageIndicatorContainerID;
    this.bgColor = bgColor;

    this.Initialize = function()
    {
        this.pageContainerID = 'ssp_main_' + containerID;

        var page1 = document.getElementById(this.arrPages[0].GetContainerID()).innerHTML;

        var htmlCode = '<div style="width:' + this.width + 'px; z-index: 100; display: table; margin:auto; table-layout: fixed; position: relative;overflow:hidden;">';
        htmlCode += '<div style="width:' + this.width * 2 + 'px;overflow:hidden; height:' + this.height + 'px; position: relative;display:table;left: 0px;background-color:' + this.bgColor + ';" id="' + this.pageContainerID + '">';
        htmlCode += '</div>';
        htmlCode += this.GeneratePaging();
        htmlCode += '</div>';

        this.containerObj.innerHTML = htmlCode;

        var pageContainer = this.GetPageContainerObject();
        var firstPage = document.getElementById(this.arrPages[this.pageIndex].GetContainerID()).cloneNode(true);
        pageContainer.appendChild(firstPage);
    };


    this.GetPageContainerID = function()
    {
        return this.pageContainerID;
    };

    this.SetArrPages = function(arrPages)
    {
        this.arrPages = arrPages;
        this.pageIndex = 0;
    };

    this.GeneratePaging = function()
    {
        this.pageIndicatorContainerID = 'ssp_paging' + containerID;
        var htmlCode = '';
        if (this.arrPages.length > 1)
        {
            htmlCode += '<div class="ssp_paging">';
            htmlCode += '<ul id="' + this.pageIndicatorContainerID + '">';
            for (var i = 0; i < this.arrPages.length; i++)
            {
                htmlCode += '<li>';
                if (i == 0)
                    htmlCode += '<img src="/WebResources/Images/pageIndicator_active.png" ';
                else
                    htmlCode += '<img src="/WebResources/Images/pageIndicator.png" ';

                htmlCode += 'onclick="OpenPage(' + i + ')" alt="' + this.arrPages[i].GetTitle() + '" title="' + this.arrPages[i].GetTitle() + '" />';
                htmlCode += '</li>';
            }
            htmlCode += '</ul>';
            htmlCode += '</div>';
        }
        else
        {
            htmlCode += '<div class="ssp_paging">&nbsp;</div>';
        }
        return htmlCode;
    }

    this.PrepareNextPage = function(index)
    {
        this.PreparePageContainer("next");

        var recentPageId = this.arrPages[this.pageIndex].GetContainerID();
        var nextPageId = this.arrPages[index].GetContainerID();
        var recentPage = document.getElementById(recentPageId).cloneNode(true);
        var nextPage = document.getElementById(nextPageId).cloneNode(true);

        var pageContainer = this.GetPageContainerObject();
        pageContainer.innerHTML = "";
        pageContainer.appendChild(recentPage);
        pageContainer.appendChild(nextPage);

        if (IS.moz)
        {
            pageContainer.children[1].setAttribute("style", "float: none;");
            window.setTimeout(function()
            {
                pageContainer.children[1].setAttribute("style", "float: left;");
            }, 10);
        }
        recentPage = null;
        nextPage = null;
    };

    this.GetRecentPageIndex = function()
    {
        return this.pageIndex;
    }

    this.PreparePreviousPage = function(index)
    {
        this.PreparePageContainer("previous");


        var recentPageId = this.arrPages[this.pageIndex].GetContainerID();
        var prevPageId = this.arrPages[index].GetContainerID();
        var recentPage = document.getElementById(recentPageId).cloneNode(true);
        var prevPage = document.getElementById(prevPageId).cloneNode(true);

        var pageContainer = this.GetPageContainerObject();
        pageContainer.innerHTML = "";
        pageContainer.appendChild(prevPage);
        pageContainer.appendChild(recentPage);

        if (IS.moz)
        {
            pageContainer.children[1].setAttribute("style", "float: none;");
            window.setTimeout(function()
            {
                pageContainer.children[1].setAttribute("style", "float: left;");
            }, 10);
        }
        recentPage = null;
        prevPage = null;

    };

    this.MoveToIndex = function(index)
    {
        this.SetPageIndicator(index);
        
        if (this.pageIndex > index)
            this.MoveToPreviousPage(index);
        else if (this.pageIndex < index)
            this.MoveToNextPage(index)
    }

    this.SetPageIndicator = function(index)
    {
        var pageCol = document.getElementById(this.pageIndicatorContainerID);
        var recentPage = this.GetRecentPageIndex();
        var imgIndicator = pageCol.children[recentPage].children[0];
        imgIndicator.src = "/WebResources/Images/pageIndicator.png";
        
        pageCol.children[index].children[0].src = "/WebResources/Images/pageIndicator_active.png";
    }

    this.GetPageContainerObject = function()
    {
        return document.getElementById(this.pageContainerID);
    }

    this.PreparePageContainer = function(state)
    {
        if (state == "next")
        {
            document.getElementById(this.pageContainerID).style.left = "0px";
        }
        else if (state == "previous")
        {
            document.getElementById(this.pageContainerID).style.left = (this.width * -1) + "px";
        }
    }

    this.MoveToPreviousPage = function(index)
    {
        this.PreparePreviousPage(index);

        var frames = 0;
        var objPageContainer = document.getElementById(this.pageContainerID);
        var targetPos = 0;

        var timer = window.setInterval(function()
        {
            var recentPos = parseInt(objPageContainer.style.left);

            if (recentPos < targetPos)
            {
                objPageContainer.style.left = EaseInOutQuint(frames, recentPos, targetPos - recentPos, 35) + "px";
                frames += 1.2;
            }
            else
            {
                objPageContainer.style.left = targetPos + "px";
                clearInterval(timer);
            }
        }, 5);

        this.pageIndex = index;
    };

    this.MoveToNextPage = function(index)
    {
        this.PrepareNextPage(index);

        var frames = 0;
        var objPageContainer = document.getElementById(this.pageContainerID);
        var targetPos = this.width;

        var containerPage = this.GetPageContainerObject();

        var nextPage = document.getElementById(this.arrPages[index]);
        var timer = window.setInterval(function()
        {
            var recentPos = parseInt(objPageContainer.style.left);

            if (recentPos > -(targetPos - 1))
            {
                objPageContainer.style.left = (EaseInOutQuint(frames, recentPos, targetPos - recentPos, 35) * -1) + "px";
                frames += 1.2;
            }
            else
            {
                objPageContainer.style.left = -targetPos + "px";
                clearInterval(timer);
            }
        }, 5);

        this.pageIndex = index;

    };


}

function PageItem(containerID, title)
{
    this.ContainerID = containerID;
    this.Title = title;

    this.GetTitle = function()
    {
        return this.Title;
    }

    this.GetContainerID = function()
    {
        return this.ContainerID;
    }
}

function EaseInOutQuint(currTime, recentValue, diffValue, duration)
{
    if ((currTime /= duration / 2) < 1)
        return diffValue / 2 * currTime * currTime * currTime * currTime * currTime + recentValue;
    else
        return diffValue / 2 * ((currTime -= 2) * currTime * currTime * currTime * currTime + 2) + recentValue;
}