var viewerIndex = 0;
var viewerReference;

function ImageViewer(cont) {
    this.container = cont;
    this.imageUrls;
    this.imageName;
    this.imageDesc;
    this.imageSize;
    this.top = 0;

    if (document.body.offsetHeight > GetHeight()) {
        this.top = document.body.offsetHeight;
    }
    else {
        this.top = GetHeight();
    }

    this.modalPanel = document.createElement("div");
    this.modalPanel.setAttribute("id", "modalPanel");
    this.modalPanel.style.position = "absolute";
    this.modalPanel.style.top = "-" + (this.top + 20) + "px";
    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.top + "px";
    this.modalPanel.style.width = "100%";

    this.mainPanel = document.createElement("div");
    this.mainPanel.setAttribute("id", "mainPanel");
    this.mainPanel.style.backgroundColor = "#929396";
    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.bottom = "64px";
    this.countPanel.style.right = "30px";
    this.countPanel.style.color = "#4c4c4d";
    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.setAttribute("onmouseover", "closeViewerRollOver('on')");
    this.closePanel.setAttribute("onmouseout", "closeViewerRollOver('off')");
    this.closePanel.style.position = "absolute";
    this.closePanel.style.top = "6px";
    this.closePanel.style.right = "6px";
    this.closePanel.style.width = "72px";
    this.closePanel.style.height = "18px";
    this.closePanel.style.cursor = "pointer";
    this.closePanel.style.backgroundImage = "url(http://image.locallinkup.com/console/close_viewer_off.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.imagePanel.style.border = "1px solid #717172";
    this.mainPanel.appendChild(this.imagePanel);

    this.nextPanelOff = document.createElement("div");
    this.nextPanelOff.style.position = "absolute";
    this.nextPanelOff.style.right = "5px";
    this.nextPanelOff.style.width = "17px";
    this.nextPanelOff.style.height = "45px";
    this.nextPanelOff.style.backgroundImage = "url(http://image.locallinkup.com/console/next_off.png)";
    this.mainPanel.appendChild(this.nextPanelOff);

    this.nextHoverPanel = document.createElement("div");
    this.nextHoverPanel.setAttribute("onmouseout", "fixViewerMouseOut(this, event, 'next')");
    this.nextHoverPanel.setAttribute("onmouseover", "showViewerButton('next')");
    this.nextHoverPanel.style.position = "absolute";
    this.nextHoverPanel.style.right = "30px";
    this.nextHoverPanel.style.top = "30px";
    this.nextHoverPanel.style.width = "75px";
    this.nextHoverPanel.style.backgroundImage = "url(http://image.locallinkup.com/console/trans_back.gif)";
    this.nextHoverPanel.style.backgroundRepeat = "repeat";
    this.mainPanel.appendChild(this.nextHoverPanel);

    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 = "-24px";
    this.nextPanel.style.width = "97px";
    this.nextPanel.style.height = "45px";
    this.nextPanel.style.cursor = "pointer";
    this.nextPanel.style.backgroundImage = "url(http://image.locallinkup.com/console/next_on.png)";
    this.nextPanel.style.display = "none"
    this.nextHoverPanel.appendChild(this.nextPanel);

    this.prevPanelOff = document.createElement("div");
    this.prevPanelOff.style.position = "absolute";
    this.prevPanelOff.style.left = "7px";
    this.prevPanelOff.style.width = "17px";
    this.prevPanelOff.style.height = "45px";
    this.prevPanelOff.style.backgroundImage = "url(http://image.locallinkup.com/console/previous_off.png)";
    this.mainPanel.appendChild(this.prevPanelOff);

    this.prevHoverPanel = document.createElement("div");
    this.prevHoverPanel.setAttribute("onmouseout", "fixViewerMouseOut(this, event, 'prev')");
    this.prevHoverPanel.setAttribute("onmouseover", "showViewerButton('prev')");
    this.prevHoverPanel.style.position = "absolute";
    this.prevHoverPanel.style.left = "30px";
    this.prevHoverPanel.style.top = "30px";
    this.prevHoverPanel.style.width = "75px";
    this.prevHoverPanel.style.backgroundImage = "url(http://image.locallinkup.com/console/trans_back.gif)";
    this.prevHoverPanel.style.backgroundRepeat = "repeat";
    this.mainPanel.appendChild(this.prevHoverPanel);

    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 = "-24px";
    this.prevPanel.style.width = "97px";
    this.prevPanel.style.height = "45px";
    this.prevPanel.style.cursor = "pointer";
    this.prevPanel.style.backgroundImage = "url(http://image.locallinkup.com/console/previous_on.png)";
    this.prevPanel.style.display = "none"
    this.prevHoverPanel.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.namePanel.style.color = "#ffffff";
    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.descPanel.style.color = "#ffffff";
    this.mainPanel.appendChild(this.descPanel);

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

    this.showViewer = function (id, urls, names, descr, sizes) {
        $('html, body').animate({ scrollTop: 0 }, 'slow');
        this.imageUrls = urls;
        this.imageName = names;
        this.imageDesc = descr;
        this.imageSize = sizes;
        $(this.modalPanel).animate({ top: "0px" }, 1000, "linear");
        viewerIndex = parseInt(id);
        changeImage("");
    }
    viewerReference = this;
}

function hideViewer() {
    var viewerHidePos = "-" + (viewerReference.top + 20) + "px";
    $(viewerReference.modalPanel).animate({ top: viewerHidePos }, 1000, "linear");
}

function isChildOf(parent, child) {
    if (child != null) {
        while (child.parentNode) {
            if ((child = child.parentNode) == parent) {
                return true;
            }
        }
    }
    return false;
}

function fixViewerMouseOut(element, event, id) {

    var current_mouse_target = null;
    if (event.toElement) {
        current_mouse_target = event.toElement;
    } else if (event.relatedTarget) {
        current_mouse_target = event.relatedTarget;
    }
    if (!isChildOf(element, current_mouse_target) && element != current_mouse_target) {
        if (id == "next") {
            viewerReference.nextPanel.style.display = "none";
        }
        else {
            viewerReference.prevPanel.style.display = "none";
        }
    }
}

function showViewerButton(id) {
    if (id == "next") {
        if (viewerIndex < viewerReference.imageUrls.length - 1) {
            viewerReference.nextPanel.style.display = "inline";
        }
    }
    else {
        if (viewerIndex > 0) {
            viewerReference.prevPanel.style.display = "inline";
        }
    }
}

function closeViewerRollOver(onOff) {
    if (onOff == "on") {
        viewerReference.closePanel.style.backgroundImage = "url(http://image.locallinkup.com/console/close_viewer_on.png)";
    }
    else {
        viewerReference.closePanel.style.backgroundImage = "url(http://image.locallinkup.com/console/close_viewer_off.png)";
    }
}

function changeImage(dir) {
    if (dir == "up") {
        if (viewerIndex != viewerReference.imageUrls.length - 1) {
            viewerIndex++;
        }
    }
    if (dir == "down") {
        if (viewerIndex != 0) {
            viewerIndex--;
        }
    }
    if (viewerIndex == 0) {
        viewerReference.prevPanelOff.style.display = "none";
    }
    else {
        viewerReference.prevPanelOff.style.display = "inline";
    }
    if (viewerIndex == viewerReference.imageUrls.length - 1) {
        viewerReference.nextPanelOff.style.display = "none";
    }
    else {
        viewerReference.nextPanelOff.style.display = "inline";
    }
    if (document.body.offsetHeight > GetHeight()) {
        viewerReference.top = document.body.offsetHeight;
    }
    else {
        viewerReference.top = GetHeight();
    }
    viewerReference.modalPanel.style.height = viewerReference.top + "px";
    var imgWidth = parseInt(viewerReference.imageSize[viewerIndex].split("~~")[0]);
    var imgHeight = parseInt(viewerReference.imageSize[viewerIndex].split("~~")[1]);
    viewerReference.nextHoverPanel.style.height = imgHeight + "px";
    viewerReference.prevHoverPanel.style.height = imgHeight + "px";
    $(viewerReference.mainPanel).animate({ top: "10px",
        width: (imgWidth + 60) + "px", height: (imgHeight + 120) + "px",
        left: ((document.body.offsetWidth - (imgWidth + 60)) / 2) + "px"
    }, 500, "linear");
    $(viewerReference.nextPanel).animate({ top: ((imgHeight - 45) / 2) + "px" }, 500, "linear");
    $(viewerReference.prevPanel).animate({ top: ((imgHeight - 45) / 2) + "px" }, 500, "linear");
    $(viewerReference.nextPanelOff).animate({ top: (((imgHeight - 45) / 2) + 30) + "px" }, 500, "linear");
    $(viewerReference.prevPanelOff).animate({ top: (((imgHeight - 45) / 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.imagePanel.style.display = 'none';
    viewerReference.imagePanel.src = viewerReference.imageUrls[viewerIndex];
    viewerReference.imagePanel.alt = viewerReference.imageDesc[viewerIndex];
    $(viewerReference.descPanel).animate({ width: imgWidth + "px" }, 500, "linear", function () {
        viewerReference.imagePanel.style.display = "block";
    });
}

function GetHeight() {
    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;
}