var BalloonPosition = { Left: 0, Right: 1, Center: 2 };
var theme = "";

function PhotoSlider(args)
{
    this.Id = args.Id;
    this.DivId = args.DivId;
    this.Size = args.Size;
    this.ThumbImages = null;
    this.BalloonImages = null;
    this.PhotoOffset = 0;
    this.Balloons = args.Balloons;

    this._theme = args.Theme;
    this._prevId = args.PrevId;
    this._nextId = args.NextId;
    this._prevImageId = args.PrevImageId;
    this._nextImageId = args.NextImageId;

    theme = this._theme;
}

PhotoSlider.prototype.Clear = function()
{
    var imageDiv = $get(this.DivId);
    if (imageDiv)
    {
        imageDiv.innerHTML = "";
    }
}

PhotoSlider.prototype.Initialize = function(thumbImages, ballonImages)
{
    if (thumbImages == null)
    {
        return;
    }

    this._prev = $get(this._prevId);
    this._next = $get(this._nextId);
    this._prevImg = $get(this._prevImageId);
    this._nextImg = $get(this._nextImageId);

    this.PhotoOffset = 0;
    this.ThumbImages = thumbImages;
    this.BalloonImages = ballonImages;
    this._prevImg.src = 'App_Themes/' + this._theme + '/images/prev_disabled.png';
    this._prevImg.style.cursor = "default";

    if (this.ThumbImages.length > this.Size)
    {
        this._nextImg.src = 'App_Themes/' + this._theme + '/images/next.png';
        this._nextImg.style.cursor = "auto";
    }
    else
    {
        this._nextImg.src = 'App_Themes/' + this._theme + '/images/next_disabled.png';
        this._nextImg.style.cursor = "default";
    }

    var imageDiv = $get(this.DivId);
    var currentBalloonId = "";
    var currentBalloonArrowDivId = "";
    var currentBalloonArrowImgId = "";
    var currentBalloonPosition = BalloonPosition.Left;
    var positionSize = (this.Size / 3);

    if (imageDiv)
    {
        for (var i = 0; (i < this.Size) && i < this.ThumbImages.length; i++)
        {
            var holderDiv = document.createElement("div");
            holderDiv.className = "picHolder";
            imageDiv.appendChild(holderDiv);

            if (this.Balloons)
            {
                currentBalloonId = this.Id + i + "Balloon";
                currentBalloonArrowDivId = this.Id + i + "BalloonDiv";
                currentBalloonArrowImgId = this.Id + i + "BalloonImg";

                if ((i + 1) > (positionSize * 2))
                {
                    currentBalloonPosition = BalloonPosition.Right;
                }
                else
                {
                    currentBalloonPosition = BalloonPosition.Center;
                }

                var balloonDiv = document.createElement("div");
                balloonDiv.id = currentBalloonId;
                balloonDiv.className = "balloon";
                balloonDiv.style.visibility = "hidden";
                balloonDiv.style.top = "-1200px";
                balloonDiv.style.left = "-1200px";
                holderDiv.appendChild(balloonDiv);

                var balloonImageDiv = document.createElement("div");
                balloonImageDiv.className = "balloonContent";
                balloonDiv.appendChild(balloonImageDiv);

                var balloonImg = document.createElement("img");
                balloonImg.id = this.Id + i + "BalloonImage";
                balloonImg.src = ballonImages[i];
                balloonImageDiv.appendChild(balloonImg);

                var balloonArrow = document.createElement("div");
                balloonArrow.id = currentBalloonArrowDivId;
                balloonDiv.appendChild(balloonArrow);
                balloonArrow.style.position = "relative";
                balloonArrow.style.marginTop = "-2px";

                var balloonArrowImg = document.createElement("img");
                balloonArrowImg.id = currentBalloonArrowImgId;
                balloonArrowImg.style.height = "16px";
                balloonArrow.appendChild(balloonArrowImg);
            }

            var img = document.createElement("img");
            img.id = this.Id + i + "Image";
            img.className = "thumbImage";
            img.src = thumbImages[i];

            if (this.Balloons)
            {
                img.setAttribute("balloon", currentBalloonId);
                img.setAttribute("balloonDiv", currentBalloonArrowDivId);
                img.setAttribute("balloonImg", currentBalloonArrowImgId);
                img.setAttribute("image", this.Id + i + "BalloonImage");
                img.setAttribute("position", currentBalloonPosition);
                img.onmouseover = function() { showBalloon(this.getAttribute("balloon"), this.getAttribute("balloonDiv"), this.getAttribute("balloonImg"), this.getAttribute("image"), this.getAttribute("position")); };
                img.onmouseout = function() { hideBalloon(this.getAttribute("balloon")); };
            }

            holderDiv.appendChild(img);
        }
    }
}

PhotoSlider.prototype.moveNext = function()
{
    if (this.PhotoOffset < (this.ThumbImages.length - this.Size))
    {
        this._prevImg.src = 'App_Themes/' + this._theme + '/images/prev.png';
        this._prevImg.style.cursor = "auto";

        this.PhotoOffset++;

        var eleIndex = 0;

        for (var i = this.PhotoOffset; i < this.ThumbImages.length; i++)
        {
            var img = $get(this.Id + eleIndex + "Image");
            if (img)
            {
                img.src = this.ThumbImages[i];
            }
            else
            {
                break;
            }

            if (this.Balloons)
            {
                var balloonImg = $get(this.Id + eleIndex + "BalloonImage");
                if (balloonImg)
                {
                    balloonImg.src = this.BalloonImages[i];
                }
            }

            eleIndex++;
        }
    }


    if (this.PhotoOffset >= (this.ThumbImages.length - this.Size))
    {
        this._nextImg.src = 'App_Themes/' + this._theme + '/images/next_disabled.png';
        this._nextImg.style.cursor = "default";
    }
}

PhotoSlider.prototype.movePrevious = function()
{
    if (this.PhotoOffset > 0)
    {
        this._nextImg.src = 'App_Themes/' + this._theme + '/images/next.png';
        this._nextImg.style.cursor = "auto";

        this.PhotoOffset--;

        var eleIndex = 0;

        for (var i = this.PhotoOffset; i < this.ThumbImages.length; i++)
        {
            var img = $get(this.Id + eleIndex + "Image");
            if (img)
            {
                img.src = this.ThumbImages[i];
            }
            else
            {
                break;
            }

            if (this.Balloons)
            {
                var balloonImg = $get(this.Id + eleIndex + "BalloonImage");
                if (balloonImg)
                {
                    balloonImg.src = this.BalloonImages[i];
                }
            }

            eleIndex++;
        }
    }

    if (this.PhotoOffset == 0)
    {
        this._prevImg.src = 'App_Themes/' + this._theme + '/images/prev_disabled.png';
        this._prevImg.style.cursor = "default";
    }
}

function hideBalloon(balloonId)
{
    var balloon = $get(balloonId);

    if (balloon)
    {
        balloon.style.visibility = "hidden";
        balloon.style.top = "-1200px";
        balloon.style.left = "-1200px";
    }
}

function showBalloon(balloonId, balloonDivId, balloonImgId, imageId, position)
{
    try
    {
        var balloon = $get(balloonId);
        var balloonDiv = $get(balloonDivId);
        var balloonImg = $get(balloonImgId);
        var image = $get(imageId);

        if (balloon && balloonDiv && image)
        {
            if (position == BalloonPosition.Right && document.body.clientWidth > 1430)
            {
                position = BalloonPosition.Center;
            }

            balloon.style.width = (image.clientWidth + 18) + "px";
            balloon.style.marginTop = "-" + (image.clientHeight + 37) + "px";

            if (position == BalloonPosition.Left)
            {
                balloon.style.marginLeft = "0px";
            }
            if (position == BalloonPosition.Center)
            {
                balloon.style.marginLeft = "-" + ((image.clientWidth / 2) - 32) + "px";
                balloonDiv.style.textAlign = "center";
                balloonDiv.style.marginRight = "auto";
                balloonImg.src = "/App_Themes/" + theme + "/Images/arrowcenter.png";
            }
            else if (position == BalloonPosition.Right)
            {
                balloon.style.marginLeft = "-" + (image.clientWidth - 64) + "px";
                balloonDiv.style.textAlign = "right";
                balloonDiv.style.marginRight = "38px";
                balloonImg.src = "/App_Themes/" + theme + "/Images/arrowright.png";
            }

            balloon.style.top = "auto";
            balloon.style.left = "auto";
            balloon.style.visibility = "visible";
        }
    }
    catch (e)
    {
    }
}