function StoryImg(src, alt, href, width, height, caption, credit) 
{
    this.src = src;
    this.alt = alt;
    this.href = href;
    this.width = width;
    this.height = height;
    this.caption = caption;
    this.credit = credit;

    this.displayImg = function () {
        var outputHTML = "";

        if (this.width > 240) {
            outputHTML += "<div class=\"hImgHolder\">";
        } else {
            outputHTML += "<div class=\"vImgHolder\">";
        }

        if ((this.href != undefined) && (this.href != ""))
            outputHTML += "<a href=\"" + this.href + "\">";

        outputHTML += "<img src=\"" + this.src + "\" alt=\"" + this.alt + "\" title=\"" + this.alt + "\" />";

        if (this.href != undefined)
            outputHTML += "</a>";

        if ((this.caption != undefined) && (this.caption != "")) {
            if (this.width > 240)
                outputHTML += "<div class=\"image_captions_horiz\">";
            else
                outputHTML += "<div class=\"image_captions_vert\">";

            outputHTML += this.caption;

            if ((this.credit != undefined) && (this.credit != "")) {
                outputHTML += "<br /><br />";
                outputHTML += "<i>" + this.credit + "</i>";
            }

            outputHTML += "</div>";
        }

        outputHTML += "</div>";

        return outputHTML;
    }
}

var imageFunctions = new function () {
    // Vars
    this.imgArr;
    this.sImg;
    this.lText;
    this.rText;

    // Methods
    this.generateCounter = function (pos) {
        this.lText.innerHTML = "Image " + pos + " of " + this.imgArr.length;
    }

    this.generateLinks = function (pos) {
        if (pos == 1)
            this.rText.innerHTML = "<div class=\"imgNextBtn\" onclick=\"imageFunctions.nextImg(" + (pos + 1) + ");\">Next &raquo;</div>";
        else if (pos == this.imgArr.length)
            this.rText.innerHTML = "<div class=\"imgPrevBtn\" onclick=\"imageFunctions.prevImg(" + (pos - 1) + ");\">&laquo; Prev</div>";
        else
            this.rText.innerHTML = "<div class=\"imgNextBtn\" onclick=\"imageFunctions.nextImg(" + (pos + 1) + ");\">Next &raquo;</div>" +
            "<div class=\"imgPrevBtn\" onclick=\"imageFunctions.prevImg(" + (pos - 1) + ");\">&laquo; Prev</div>";
        
    }

    this.nextImg = function (pos) {
        if (this.imgArr[pos - 1] != undefined) {
            this.sImg.innerHTML = this.imgArr[pos - 1].displayImg();
        }
        this.generateCounter(pos);
        this.generateLinks(pos);
    }

    this.prevImg = function (pos) {
        if (this.imgArr[pos - 1] != undefined) {
            this.sImg.innerHTML = this.imgArr[pos - 1].displayImg();
        }
        this.generateCounter(pos);
        this.generateLinks(pos);
    }
}