var viewerIndex = 0;
var viewerReference;

function ImageViewer(cont, urls, names, descr, sizes) {
    this.container = cont;
    this.imageUrls = urls;
    this.imageName = names;
    this.imageDesc = descr;
    this.imageSize = sizes;

    this.GetWidth = function () {
        var x = 0;
        if (self.clientWidth) {
            x = self.clientWidth;
        }
        else if (document.documentElement && document.documentElement.clientWidth) {
            x = document.documentElement.clientWidth;
        }
        else if (document.body) {
            x = document.body.clientWidth;
        }
        return x;
    }

    this.GetHeight = function () {
        var y = 0;
        if (self.innerHeight) {
            y = self.innerHeight;
        }
        else if (document.documentElement && document.documentElement.clientHeight) {
            y = document.documentElement.clientHeight;
        }
        else if (document.body) {
            y = document.body.clientHeight;
        }
        return y;
    }

    this.modalPanel = document.createElement("div");
    this.modalPanel.setAttribute("id", "modalPanel");
    this.modalPanel.style.position = "fixed";
    this.modalPanel.style.top = "-1400px";
    this.modalPanel.style.left = "0px";
    this.modalPanel.style.backgroundImage = "url(http://image.locallinkup.com/console/trans_back.png)";
    this.modalPanel.style.backgroundrepeat = "repeat";
    this.modalPanel.style.height = this.GetHeight() + "px";
    this.modalPanel.style.width = this.GetWidth() + "px";

    this.mainPanel = document.createElement("div");
    this.mainPanel.setAttribute("id", "mainPanel");
    this.mainPanel.style.backgroundColor = "#f4f4f4";
    this.mainPanel.style.border = "outset 2px #eb008a";
    this.mainPanel.style.position = "absolute";
    this.mainPanel.style.fontFamily = "Arial";
    this.mainPanel.style.fontSize = "14px";
    this.mainPanel.style.lineHeight = "18px";

    this.countPanel = document.createElement("div");
    this.countPanel.setAttribute("id", "countPanel");
    this.countPanel.style.position = "absolute";
    this.countPanel.style.top = "4px";
    this.countPanel.style.left = "30px";
    this.countPanel.innerHTML = "Image 1 of 5";
    this.mainPanel.appendChild(this.countPanel);

    this.closePanel = document.createElement("div");
    this.closePanel.setAttribute("id", "closePanel");
    this.closePanel.setAttribute("onclick", "hideViewer()");
    this.closePanel.style.position = "absolute";
    this.closePanel.style.top = "0px";
    this.closePanel.style.width = "75px";
    this.closePanel.style.height = "29px";
    this.closePanel.style.cursor = "pointer";
    this.closePanel.style.backgroundImage = "url(http://image.locallinkup.com/console/close_black_on.png)";
    this.mainPanel.appendChild(this.closePanel);

    this.imagePanel = document.createElement("img");
    this.imagePanel.setAttribute("id", "imagePanel");
    this.imagePanel.style.position = "absolute";
    this.imagePanel.style.top = "30px";
    this.imagePanel.style.left = "30px";
    this.mainPanel.appendChild(this.imagePanel);

    this.nextPanel = document.createElement("div");
    this.nextPanel.setAttribute("id", "nextPanel");
    this.nextPanel.setAttribute("onclick", "changeImage('up')");
    this.nextPanel.style.position = "absolute";
    this.nextPanel.style.right = "2px";
    this.nextPanel.style.width = "23px";
    this.nextPanel.style.height = "35px";
    this.nextPanel.style.cursor = "pointer";
    this.nextPanel.style.backgroundImage = "url(http://image.locallinkup.com/console/scrollRight_On.png)";
    this.mainPanel.appendChild(this.nextPanel);

    this.prevPanel = document.createElement("div");
    this.prevPanel.setAttribute("id", "prevPanel");
    this.prevPanel.setAttribute("onclick", "changeImage('down')");
    this.prevPanel.style.position = "absolute";
    this.prevPanel.style.left = "2px";
    this.prevPanel.style.width = "23px";
    this.prevPanel.style.height = "35px";
    this.prevPanel.style.cursor = "pointer";
    this.prevPanel.style.backgroundImage = "url(http://image.locallinkup.com/console/scrollLeft_On.png)";
    this.mainPanel.appendChild(this.prevPanel);

    this.namePanel = document.createElement("div");
    this.namePanel.setAttribute("id", "namePanel");
    this.namePanel.style.position = "absolute";
    this.namePanel.style.left = "30px";
    this.namePanel.style.bottom = "64px";
    this.namePanel.style.overflow = "hidden";
    this.namePanel.style.fontSize = "18px";
    this.namePanel.style.lineHeight = "22px";
    this.namePanel.style.height = "22px";
    this.mainPanel.appendChild(this.namePanel);

    this.descPanel = document.createElement("div");
    this.descPanel.setAttribute("id", "descPanel");
    this.descPanel.style.position = "absolute";
    this.descPanel.style.bottom = "2px";
    this.descPanel.style.left = "30px";
    this.descPanel.style.height = "60px";
    this.descPanel.style.overflow = "hidden";
    this.mainPanel.appendChild(this.descPanel);

    this.modalPanel.appendChild(this.mainPanel);
    this.container.parentNode.appendChild(this.modalPanel);

    this.showViewer = function(id) {
        $(this.modalPanel).animate({ top: "0px" }, 1000, "linear");
        viewerIndex = parseInt(id);
        changeImage("");
    }
    viewerReference = this;
}

function hideViewer() {
    $(viewerReference.modalPanel).animate({ top: "-1400px" }, 1000, "linear");
}



function changeImage(dir) {
    if (dir == "up") {
        if (viewerIndex != viewerReference.imageUrls.length - 1) {
            viewerIndex++;
        }
    }
    if (dir == "down") {
        if (viewerIndex != 0) {
            viewerIndex--;
        }
    }
    viewerReference.modalPanel.style.height = viewerReference.GetHeight();
    viewerReference.modalPanel.style.width = viewerReference.GetWidth();
    var imgWidth = parseInt(viewerReference.imageSize[viewerIndex].split("~~")[0]);
    var imgHeight = parseInt(viewerReference.imageSize[viewerIndex].split("~~")[1]);
    if ((imgHeight + 130) < viewerReference.GetHeight()) {
        $(viewerReference.mainPanel).animate({ top: ((viewerReference.GetHeight() - (imgHeight + 120)) / 2) + "px",
            width: (imgWidth + 60) + "px", height: (imgHeight + 120) + "px",
            left: ((viewerReference.GetWidth() - (imgWidth + 60)) / 2) + "px"
        }, 500, "linear");
    }
    else {
        $(viewerReference.mainPanel).animate({ top: "10px",
            width: (imgWidth + 60) + "px", height: (imgHeight + 120) + "px",
            left: ((viewerReference.GetWidth() - (imgWidth + 60)) / 2) + "px"
        }, 500, "linear");
    }
    $(viewerReference.closePanel).animate({ left: (((imgWidth + 60) / 2) - 37) + "px" }, 500, "linear");
    viewerReference.imagePanel.src = viewerReference.imageUrls[viewerIndex];
    $(viewerReference.imagePanel).animate({ width: imgWidth + "px", height: imgHeight + "px" }, 500, "linear");
    $(viewerReference.nextPanel).animate({ top: (((imgHeight - 35) / 2) + 30) + "px" }, 500, "linear");
    $(viewerReference.prevPanel).animate({ top: (((imgHeight - 35) / 2) + 30) + "px" }, 500, "linear");
    viewerReference.countPanel.innerHTML = "Image " + parseInt(viewerIndex + 1) + " of " + viewerReference.imageUrls.length;
    viewerReference.namePanel.innerHTML = viewerReference.imageName[viewerIndex];
    $(viewerReference.namePanel).animate({ width: imgWidth + "px" }, 500, "linear");
    viewerReference.descPanel.innerHTML = viewerReference.imageDesc[viewerIndex];
    $(viewerReference.descPanel).animate({ width: imgWidth + "px" }, 500, "linear");
}