function extractPxNum(str)
{
    str = str.replace("px", "");
    return (str * 1);
}



function Album(count, selected, directory, titles)
{
    var rightBound = 4;
    var leftBound = -((count * 80) - 502);
    var preview;
    var time;
    var lastThumb;

    this.hover = function(id)
    {
        var obj = document.getElementById(id);
        if(obj)
        {
            if(obj.className != "albumthumbnail albumcurrent")
            {
                obj.style.margin = "0px";
                obj.style.marginRight = "10px";
                obj.style.padding = "0px";
                obj.style.borderWidth = "3px";
                obj.style.borderStyle = "double";
            }
        }
    };

    this.unhover = function(id)
    {
        var obj = document.getElementById(id);
        if(obj)
        {
            if(obj.className != "albumthumbnail albumcurrent")
            {
                obj.style.margin = "2px";
                obj.style.marginRight = "12px";
                obj.style.padding = "0px";
                obj.style.borderWidth = "1px";
                obj.style.borderStyle = "solid";
            }
        }
    };

    this.thumbClick = function(id)
    {
        var image = document.getElementById(id).src;
        image = image.slice(image.lastIndexOf("/") + 1);
    // change the main image
        var img = document.getElementById("albummain");
        img.src = directory + image;

    // unstyle the previously selected thumbnail
        var thumb = document.getElementById(lastThumb);
        if(thumb)
        {
            thumb.className = "albumthumbnail";
            thumb.style.margin = "2px";
            thumb.style.marginRight = "12px";
            thumb.style.borderWidth = "1px";
            thumb.style.borderStyle = "solid";
        }

    // style the newly selected thumbnail
        thumb = document.getElementById(id);
        thumb.className = "albumthumbnail albumcurrent";
        thumb.style.margin = "0px";
        thumb.style.marginRight = "10px";
        thumb.style.borderWidth = "3px";
        thumb.style.borderStyle = "double";
        thumb.style.padding = "0px";
        lastThumb = id;

    // show the caption
        var obj = document.getElementById("albumcaption");
        if(obj)
        {
            obj.innerHTML = titles[id].replace("From", "<span class=\"albumcaptionplain\">From</span>")
                .replace("Concept Illustration", "<span class=\"albumcaptionplain\">Concept Illustration</span>");
        }
    };

    this.filmstripRight = function()
    {
        var i = extractPxNum(preview.style.left);

        if(--i >= leftBound)
        {
            preview.style.left = i + "px";
        }
        else
        {
            clearInterval(time);
        }

        if(--i >= leftBound)
        {
            preview.style.left = i + "px";
        }
        else
        {
            clearInterval(time);
        }

        if(--i >= leftBound)
        {
            preview.style.left = i + "px";
        }
        else
        {
            clearInterval(time);
        }

        if(--i >= leftBound)
        {
            preview.style.left = i + "px";
        }
        else
        {
            clearInterval(time);
        }

        if(--i >= leftBound)
        {
            preview.style.left = i + "px";
        }
        else
        {
            clearInterval(time);
        }

        if(--i >= leftBound)
        {
            preview.style.left = i + "px";
        }
        else
        {
            clearInterval(time);
        }
    };

    this.filmstripLeft = function()
    {
        var i = extractPxNum(preview.style.left);

        if(++i <= rightBound)
        {
            preview.style.left = i + "px";
        }
        else
        {
            clearInterval(time);
        }

        if(++i <= rightBound)
        {
            preview.style.left = i + "px";
        }
        else
        {
            clearInterval(time);
        }

        if(++i <= rightBound)
        {
            preview.style.left = i + "px";
        }
        else
        {
            clearInterval(time);
        }

        if(++i <= rightBound)
        {
            preview.style.left = i + "px";
        }
        else
        {
            clearInterval(time);
        }

        if(++i <= rightBound)
        {
            preview.style.left = i + "px";
        }
        else
        {
            clearInterval(time);
        }

        if(++i <= rightBound)
        {
            preview.style.left = i + "px";
        }
        else
        {
            clearInterval(time);
        }
    };

    this.mainClick = function()
    {

    };

    this.arrowHover = function(dir)
    {
        var left = document.getElementById("albumscanleft");
        var right = document.getElementById("albumscanright");
    // restyle
        left.style.width = "25px";
        left.style.border = "1px solid #002652";
        left.style.backgroundColor = "#cbd946";
        right.style.width = "25px";
        right.style.border = "1px solid #002652";
        right.style.backgroundColor = "#cbd946";
    // move the filmstrip
        preview = document.getElementById("albumpreview");
        if(dir == "l")
        {
            time = setInterval(this.filmstripLeft, 37);
        }
        else
        {
            time = setInterval(this.filmstripRight, 37);
        }
    };

    this.arrowUnhover = function()
    {
        var left = document.getElementById("albumscanleft");
        var right = document.getElementById("albumscanright");
    // restyle
        left.style.width = "27px";
        left.style.borderWidth = "1px 0px";
        left.style.backgroundColor = "#ffffff";
        left.style.borderColor = "#ffffff";
        right.style.width = "27px";
        right.style.borderWidth = "1px 0px";
        right.style.backgroundColor = "#ffffff";
        right.style.borderColor = "#ffffff";
    // stop the filmstrip
        clearInterval(time);
    };

    this.arrowClick = function(dir)
    {
        clearInterval(time);
        if(dir == "l")
        {
            preview.style.left = rightBound + "px";
        }
        else
        {
            preview.style.left = leftBound + "px";
        }
    };
}