var adCount = 0;
var timeCount = 0;
var numAds = 0;
var switchDelay = 0;
var commitDelay = 0;
var adverts = new Array();
var galleryPanel;
var thumbWidth;
var thumbHeight;
var filmStrip;
var filmStripContainer;
var index = 0;
var slideInterval = 10000;
var transSpeed = 1000;
var transType;
var imageCount = 0;
var mouseOver = false;
var transitioning = false;
var currentImage;
var nextImage;
var imageUrls = new Array();
var thumbUrls = new Array();
var imageName = new Array();
var imageDesc = new Array();
var imageSize = new Array();

$(document).ready(function() {
    if (document.getElementById('hfFullBlog').value == "true") {
        document.getElementById('dragMeBlogFull').innerHTML = document.getElementById('hfBlogData').value;
        document.getElementById('myContainer').style.height = document.getElementById('dragMeBlogFull').offsetHeight + "px";
    }
    if (document.getElementById('dragMeBlogHeaders') != null) {
        document.getElementById('dragMeBlogHeaders').innerHTML = document.getElementById('hfBlogHeaders').value;
        if (document.getElementById('dragMeBlogHeaders').offsetHeight > document.getElementById('myContainer').offsetHeight) {
            document.getElementById('myContainer').style.height = document.getElementById('dragMeBlogHeaders').offsetHeight + "px";
        }
    }
    if (document.getElementById('hfGalleryPanel').value != "") {

        imageUrls = document.getElementById('hfImages').value.split("^^");
        imageName = document.getElementById('hfNames').value.split("^^");
        imageDesc = document.getElementById('hfDescr').value.split("^^");
        imageSize = document.getElementById('hfSizes').value.split("^^");

        galleryPanel = document.getElementById(document.getElementById('hfGalleryPanel').value);
        if (parseInt(document.getElementById('hfGalleryType').value) > 5) {
            thumbWidth = galleryPanel.offsetWidth / 5;
            thumbHeight = thumbWidth * 0.75;
            if (document.getElementById('hfSlideShowOnOff').value == "1") {
                setTimeout("showNextImage()", slideInterval);
            }
            slideShowDelay = parseInt(document.getElementById('hfSlideDelay').value);
            transSpeed = parseInt(document.getElementById('hfTransSpeed').value);
            transType = document.getElementById('hfTransType').value;
            thumbUrls = document.getElementById('hfThumbs').value.split("^^");
            imageCount = imageUrls.length;
            setUpGallery();
            setBorders(document.getElementById('thumb' + index));
        }
        else {
            galleryPanel.innerHTML = document.getElementById('hfGalleryHTML').value;
            setUpViewer();
        }
    }
    numAds = parseInt(document.getElementById('hfNumAds').value);
    switchDelay = parseInt(document.getElementById('hfSwitchDelay').value);
    commitDelay = parseInt(document.getElementById('hfCommitDelay').value);
    adverts = document.getElementById('hfAdverts').value.split("^");
    getAd();
});

function getAd() {
    if (timeCount == commitDelay | timeCount == switchDelay + commitDelay) {
        var d = new Date();
        var time = d.getTime();
        var strURL = "http://" + document.getElementById('hfLLUDomain').value + "/commitServer.ashx?id=" +
                    adverts[adCount].split(';')[0] + "&page=" + window.location + "&d=" + time;
        $.get(strURL, function(data) { });
    }
    if (timeCount % switchDelay == 0) {
        var currCoName = adverts[adCount].split(';')[1];
        var currAdTitle = adverts[adCount].split(';')[2];
        var currAdText = adverts[adCount].split(';')[3];
        var currAdURL = adverts[adCount].split(';')[4];
        document.getElementById('mainLink').innerHTML = currAdTitle;
        document.getElementById('mainLink').href = currAdURL;
        document.getElementById('adText').innerHTML = currAdText;
        document.getElementById('subLink').innerHTML = "Visit Now";
        document.getElementById('subLink').href = currAdURL;
        adCount++;
    }
    timeCount += 10000;
    if (adCount == numAds) {
        adCount = 0;
    }
    setTimeout("getAd()", 10000);
}

/////////////////////////////////////////////////////Form script/////////////////////////////////////
function setRollOver(element, imageURL) {
    element.style.backgroundImage = imageURL;
}

function checkCount(element, count) {
    if (count != "no") {
        if (element.value.length > parseInt(count)) {
            element.value = element.value.substring(0, element.value.length - 1);
        }
    }
}

var dataToSend = "";
var currentInputPanel;

function validateData(clickedButton) {
    var bValid = true;
    dataToSend = "";
    var inputPanel = clickedButton.parentNode;
    currentInputPanel = inputPanel;
    for (var i9 = 0; i9 < inputPanel.childNodes.length; i9++) {
        if (inputPanel.childNodes[i9].id != null) {
            if (inputPanel.childNodes[i9].id.indexOf("inputText") > -1) {
                var inputField = inputPanel.childNodes[i9];
                var temp4 = document.getElementById(inputField.id.replace("inputText", "inputLabel")).innerHTML;
                var textVal = temp4.substring(0, temp4.indexOf("<")).replace("\r", "").replace("\n", "");
                if (inputField.value != "") {
                    if (inputField.getAttribute("valid") == "Numbers") {
                        if (validateNumbers(inputField)) {
                            dataToSend += textVal + "--" + inputField.value + "--Numbers__";
                        }
                    }
                    if (inputField.getAttribute("valid") == "Email") {
                        if (validateEmail(inputField)) {
                            dataToSend += textVal + "--" + inputField.value + "--Email__";
                        }
                    }
                    if (inputField.getAttribute("valid") == "Postcode") {
                        if (validatePostcode(inputField)) {
                            dataToSend += textVal + "--" + inputField.value + "--Postcode^__";
                        }
                    }
                    if (inputField.getAttribute("valid") == "Any Text") {
                        if (document.getElementById(inputField.id.replace("inputText", "compStar"))) {
                            if (document.getElementById(inputField.id.replace("inputText", "compStar")).style.display == "inline") {
                                inputPanel.childNodes[i9].style.backgroundColor = "";
                            }
                        }
                        dataToSend += textVal + "--" + inputField.value + "--Any__";
                    }
                }
                else {
                    if (document.getElementById(inputField.id.replace("inputText", "compStar"))) {
                        if (document.getElementById(inputField.id.replace("inputText", "compStar")).style.display == "inline") {
                            inputPanel.childNodes[i9].style.backgroundColor = "#fbcce8";
                        }
                        else {
                            dataToSend += textVal + "--No Information Provided--Any__";
                        }
                    }
                    else {
                        dataToSend += textVal + "--No Information Provided--Any__";
                    }
                }
            }
            if (inputPanel.childNodes[i9].id.indexOf("inputCombo") > -1) {
                var temp4 = document.getElementById(inputPanel.childNodes[i9].id.replace("inputCombo", "inputLabel")).innerHTML;
                var textVal = temp4.substring(0, temp4.indexOf("<")).replace("\r", "").replace("\n", "");
                var selIndex = inputPanel.childNodes[i9].selectedIndex;
                var selectedVal = inputPanel.childNodes[i9].getAttribute("options").split("^^")[selIndex];
                dataToSend += textVal + "--" + selectedVal + "__";
            }
            if (inputPanel.childNodes[i9].id.indexOf("inputCheck") > -1) {
                dataToSend += inputPanel.childNodes[i9].getAttribute("text") + "--" + inputPanel.childNodes[i9].getAttribute("checked") + "__";
            }
        }
    }
    for (var j3 = 0; j3 < inputPanel.childNodes.length; j3++) {
        if (inputPanel.childNodes[j3].id != null) {
            if (inputPanel.childNodes[j3].style.backgroundColor == "#fbcce8") {
                bValid = false;
            }
        }
    }
    if (bValid) {
        sendData();
    }
}

function sendData() {
    var d = new Date();
    var time = d.getTime();
    var strURL = "http://" + document.getElementById('hfLLUDomain').value + "/sendFormDataHandler.ashx?d=" + time;
    $.post(strURL, {
        CompanyID: document.getElementById('hfCompanyID').value,
        Data: dataToSend
    }, function (data) {
        if (data == "success") {
            for (var j4 = 0; j4 < currentInputPanel.childNodes.length; j4++) {
                if (currentInputPanel.childNodes[j4].id != null) {
                    if (currentInputPanel.childNodes[j4].id.indexOf("inputText") > -1) {
                        currentInputPanel.childNodes[j4].value = "";
                    }
                    if (currentInputPanel.childNodes[j4].id.indexOf("inputCombo") > -1) {
                        currentInputPanel.childNodes[j4].selectedIndex = 0;
                    }
                    if (currentInputPanel.childNodes[j4].id.indexOf("inputCheck") > -1) {
                        var checkPanel = currentInputPanel.childNodes[j4];
                        for (var i10 = 0; i10 < checkPanel.childNodes.length; i10++) {
                            if (checkPanel.childNodes[i10].id != null) {
                                if (checkPanel.childNodes[i10].id.indexOf("checkBox") > -1) {
                                    var temp = currentInputPanel.childNodes[j4].getAttribute("checked");
                                    if (temp == "checked") {
                                        checkPanel.childNodes[i10].removeAttribute("checked");
                                    }
                                    else {
                                        checkPanel.childNodes[i10].setAttribute("checked", "checked");
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    });
}

function setRadio(element) {
    var parentDiv = element.parentNode;
    for (var i11 = 0; i11 < parentDiv.childNodes.length; i11++) {
        if (parentDiv.childNodes[i11].id != null) {
            if (parentDiv.childNodes[i11].id.indexOf("radio") > -1) {
                var tempDiv = parentDiv.childNodes[i11];
                for (var j5 = 0; j5 < tempDiv.childNodes.length; j++) {
                    if (tempDiv.childNodes[j5].id != null) {
                        if (tempDiv.childNodes[j5].id.indexOf("radioBtn") > -1) {
                            tempDiv.childNodes[j5].removeAttribute("checked");
                        }
                    }
                }
            }
        }
    }
    var textElement;
    for (var k = 0; k < element.childNodes.length; k++) {
        if (element.childNodes[k].id != null) {
            if (element.childNodes[k].id.indexOf("radioBtn") > -1) {
                element.childNodes[k].setAttribute("checked", "checked");
            }
            if (element.childNodes[k].id.indexOf("radioText") > -1) {
                textElement = element.childNodes[k];
                parentDiv.setAttribute("checked", textElement.innerHTML);
            }
        }
    }
}

function setComboOption(element) {
    var text = element.innerHTML;
    if (text == "") {
        element.style.backgroundColor = "#fbcce8";
    }
    else {
        element.style.backgroundColor = "";
    }
}

function validateTextComp(element) {
    var text = element.value;
    if (text == "" || text == " ") {
        element.style.backgroundColor = "#fbcce8";
    }
    else {
        element.style.backgroundColor = "";
    }
}

function validateNumbers(element) {
    var ValidChars = "0123456789";
    var text = element.value.replace(" ", "");
    var valid = true;
    var Char;
    for (var i13 = 0; i13 < text.length && valid == true; i13++) {
        Char = text.charAt(i13);
        if (ValidChars.indexOf(Char) == -1) {
            valid = false;
        }
    }
    if (!valid || text == "") {
        element.style.backgroundColor = "#fbcce8";
    }
    else {
        element.style.backgroundColor = "";
    }
    return valid;
}

function validateEmail(element) {
    var text = element.value;
    var valid = true;
    if (text.indexOf("@") > -1 && text.indexOf(".") > -1) {
        element.style.backgroundColor = "";
    }
    else {
        element.style.backgroundColor = "#fbcce8";
        valid = false;
    }
    return valid;
}

function validatePostcode(element) {
    var rePostCode = new RegExp(/[A-Za-z]{1,2}[0-9]{1,2}[A-Za-z]{0,1}[ ]{1}[0-9]{1,2}[A-Za-z]{2}$/);
    var valid = true;
    if (rePostCode.test(element.value)) {
        element.style.backgroundColor = "";
    }
    else {
        element.style.backgroundColor = "#fbcce8";
        valid = false;
    }
    return valid;
}

function clearSelection() {
    if (selectedElement != "") {
        deselect(document.getElementById(selectedElement));
    }
}

/////////////////////////////////////////////////////Gallery script/////////////////////////////////////
function mouseOverChanged(inOut) {
    if (document.getElementById('hfSlideShowOnOff').value == "1") {
        if (inOut == "over") {
            mouseOver = true;
        }
        else {
            mouseOver = false;
        }
    }
}

function setUpGallery() {
    if (document.getElementById('hfFilmStripOnOff').value == "1") {
        galleryPanel.setAttribute("onmouseover", "mouseOverChanged('over')");
        galleryPanel.setAttribute("onmouseout", "mouseOverChanged('out')");
        filmStripContainer = document.createElement("div");
        filmStripContainer.setAttribute("id", "filmStripContainer");
        filmStripContainer.setAttribute("onmouseover", "mouseOverChanged('over')");
        filmStripContainer.setAttribute("onmouseout", "mouseOverChanged('out')");
        filmStripContainer.style.position = "absolute";
        filmStripContainer.style.top = galleryPanel.offsetHeight + "px";
        filmStripContainer.style.left = galleryPanel.style.left;
        filmStripContainer.style.height = thumbHeight + "px";
        filmStripContainer.style.width = galleryPanel.style.width;
        filmStripContainer.style.overflow = "hidden";

        filmStrip = document.createElement("div");
        filmStrip.setAttribute("id", "filmStrip");
        filmStrip.style.position = "relative";
        filmStrip.style.height = thumbHeight + "px";
        filmStrip.style.width = (thumbWidth * imageUrls.length) + "px";

        filmStripContainer.appendChild(filmStrip);
        galleryPanel.appendChild(filmStripContainer);

    }
    for (var i = 0; i < imageUrls.length; i++) {
        var previewPanel = document.createElement("div");
        previewPanel.style.position = "absolute";
        previewPanel.style.top = "0px";
        previewPanel.style.left = "0px";
        previewPanel.style.width = galleryPanel.style.width;
        previewPanel.style.height = galleryPanel.offsetHeight * 0.75 + "px";

        var previewImage = document.createElement("img");
        previewImage.setAttribute("id", "preview" + i);
        previewImage.style.position = "relative";
        previewImage.style.top = "0px";
        previewImage.style.left = "0px";
        previewImage.style.width = galleryPanel.offsetWidth;
        previewImage.style.height = galleryPanel.offsetWidth * 0.75 + "px";
        previewImage.setAttribute("src", imageUrls[i]);
        previewImage.setAttribute("alt", imageTxts[i]);
        previewImage.setAttribute("title", imageTxts[i]);
        previewImage.setAttribute("onclick", "showMainImage('" + i + "')");
        if (i == 0) {
            previewImage.style.display = "inline";
        }
        else {
            previewImage.style.display = "none";
        }
        previewPanel.appendChild(previewImage);
        galleryPanel.appendChild(previewPanel);

        if (document.getElementById('hfFilmStripOnOff').value == "1") {
            var thumbPanel = document.createElement("div");
            thumbPanel.className = "thumbDivs";
            thumbPanel.style.position = "relative";
            thumbPanel.style.height = thumbHeight + "px";
            thumbPanel.style.width = thumbWidth + "px";

            var thumbImage = document.createElement("img");
            thumbImage.setAttribute("id", "thumb" + i);
            thumbImage.style.position = "absolute";
            thumbImage.style.top = "0px";
            thumbImage.style.left = "0px";
            thumbImage.style.height = (thumbHeight - 4) + "px";
            thumbImage.style.width = (thumbWidth - 4) + "px";
            thumbImage.style.border = "solid 2px #929396";
            thumbImage.style.cursor = "pointer";
            thumbImage.setAttribute("src", thumbUrls[i]);
            thumbImage.setAttribute("alt", imageTxts[i]);
            thumbImage.setAttribute("title", imageTxts[i]);
            thumbImage.setAttribute("onclick", "showNextOnClick('" + i + "')");

            thumbPanel.appendChild(thumbImage);
            filmStrip.appendChild(thumbPanel);
        }
    }
}

function move(newPos) {
    $(filmStrip).animate({ marginLeft: newPos }, 1000, "easeOutBounce");
}

function showNextImage() {
    if (document.getElementById('hfSlideShowOnOff').value == "1") {
        if (!mouseOver) {
            if ((filmStrip.offsetLeft + filmStrip.offsetWidth) > filmStripContainer.offsetWidth) {
                var newPos = (filmStrip.offsetLeft - thumbWidth).toString() + "px";
                move(newPos);
                currentImage = document.getElementById('preview' + index);
                index++;
                nextImage = document.getElementById('preview' + index);
                showPreviewImage();
            }
            else {
                if (index < imageUrls.length - 1) {
                    currentImage = document.getElementById('preview' + index);
                    index++;
                    nextImage = document.getElementById('preview' + index);
                    showPreviewImage();
                }
                else {
                    move("0px");
                    currentImage = document.getElementById('preview' + index);
                    index = 0;
                    nextImage = document.getElementById('preview' + index);
                    showPreviewImage();
                }
            }
        }
        setTimeout("showNextImage()", slideInterval);
    }
}

function showNextOnClick(id) {
    if (!transitioning) {
        currentImage = document.getElementById('preview' + index);
        index = parseInt(id);
        nextImage = document.getElementById('preview' + index);
        showPreviewImage();
    }
}

function setBorders(element) {
    for (var i = 0; i < imageUrls.length; i++) {
        var thumbNail = document.getElementById('thumb' + i);
        thumbNail.style.border = "solid 2px #929396";
    }
    element.style.border = "solid 2px #24a3f7";
}

function showPreviewImage() {
    setBorders(document.getElementById('thumb' + index));
    var nextImageLeft = nextImage.style.left;
    var nextImageTop = nextImage.style.top;
    var nextImageWidth = nextImage.style.width;
    var nextImageHeight = nextImage.style.height;
    var currImageLeft = currentImage.style.left;
    var currImageTop = currentImage.style.top;
    var currImageWidth = currentImage.style.width;
    var currImageHeight = currentImage.style.height;
    nextImage.style.zIndex = "39";
    currentImage.style.zIndex = "40";
    nextImage.style.display = "inline";
    currentImage.style.display = "inline";
    var centerW = (currentImage.offsetWidth / 2) + "px";
    var centerH = (currentImage.offsetHeight / 2) + "px";
    transitioning = true;
    if (transType == "Normal") {
        currentImage.style.display = "none";
        nextImage.style.display = "inline";
    }
    if (transType == "Fade") {
        $(nextImage).animate({ opacity: 0.0 }, 1, "linear");
        $(currentImage).animate({ opacity: 0.0 }, transSpeed, "linear",
                    function() {
                        $(nextImage).animate({ opacity: 1.0 }, transSpeed, "linear",
                            function() {
                                $(currentImage).animate({ opacity: 1.0 }, 1, "linear");
                                currentImage.style.display = "none";
                                transitioning = false;
                            }
                        );
                    }
                );
    }
    if (transType == "Zoom") {
        nextImage.style.left = centerW;
        nextImage.style.top = centerH;
        nextImage.style.width = "0px";
        nextImage.style.height = "0px";
        $(currentImage).animate({ width: "0px", height: "0px", left: centerW, top: centerH }, transSpeed, "linear",
                    function() {
                        nextImage.style.zIndex = "40";
                        currentImage.style.zIndex = "39";
                        $(nextImage).animate({ width: nextImageWidth, height: nextImageHeight, left: nextImageLeft, top: nextImageTop }, transSpeed, "linear",
                            function() {
                                currentImage.style.left = currImageLeft;
                                currentImage.style.top = currImageTop;
                                currentImage.style.width = currImageWidth;
                                currentImage.style.height = currImageHeight;
                                currentImage.style.display = "none";
                                transitioning = false;
                            }
                        );
                    }
                );
    }
    if (transType == "Shutter") {
        nextImage.style.top = centerH;
        nextImage.style.height = "0px";
        $(currentImage).animate({ height: "0px", top: centerH }, transSpeed, "linear",
                    function() {
                        nextImage.style.zIndex = "40";
                        currentImage.style.zIndex = "39";
                        $(nextImage).animate({ height: currImageHeight, top: currImageTop }, transSpeed, "linear",
                            function() {
                                currentImage.style.top = currImageTop;
                                currentImage.style.height = currImageHeight;
                                currentImage.style.display = "none";
                                transitioning = false;
                            }
                        );
                    }
                );
    }
    if (transType == "Curtain") {
        nextImage.style.left = centerW;
        nextImage.style.width = "0px";
        $(currentImage).animate({ width: "0px", left: centerW }, transSpeed, "linear",
                    function() {
                        nextImage.style.zIndex = "40";
                        currentImage.style.zIndex = "39";
                        $(nextImage).animate({ width: currImageWidth, left: currImageLeft }, transSpeed, "linear",
                            function() {
                                currentImage.style.left = currImageLeft;
                                currentImage.style.width = currImageWidth;
                                currentImage.style.display = "none";
                                transitioning = false;
                            }
                        );
                    }
                );
    }
    if (transType == "Shuffle") {
        var tempTop = (parseInt(currImageTop.replace("px", "")) - 30) + "px";
        var tempLeft = ((parseInt(currImageWidth.replace("px", "")) * -1) - 10) + "px";
        $(currentImage).animate({ top: tempTop, left: tempLeft }, transSpeed, "linear",
            function() {
                currentImage.style.zIndex = "39";
                nextImage.style.zIndex = "40";
                $(currentImage).animate({ top: currImageTop, left: currImageLeft }, transSpeed, "linear",
                    function() {
                        currentImage.style.display = "none";
                        transitioning = false;
                    }
                );
            }
        );
    }
    if (transType == "Revolve") {
        var bot = (currentImage.offsetTop + currentImage.offsetHeight) + "px";
        nextImage.style.height = "0px";
        $(currentImage).animate({ top: bot, height: "0px" }, transSpeed, "linear");
        $(nextImage).animate({ height: nextImageHeight }, transSpeed, "linear",
            function() {
                currentImage.style.zIndex = "40";
                nextImage.style.zIndex = "39";
                currentImage.style.display = "none";
                currentImage.style.top = currImageTop;
                currentImage.style.width = currImageWidth;
                transitioning = false;
            }
        );
    }
}

function scroll(elem, dir) {
    if (dir == "right") {
        if ((filmStrip.offsetLeft + filmStrip.offsetWidth) > (filmStripContainer.offsetWidth)) {
            var newPos = (filmStrip.offsetLeft - thumbWidth).toString() + "px";
            move(newPos);
            currentImage = document.getElementById('preview' + index);
            index++;
            nextImage = document.getElementById('preview' + index);
            showPreviewImage(elem);
        }
    }
    if (dir == "left") {
        if (filmStrip.offsetLeft < ((thumbWidth - 6) * -1)) {
            var newPos = (filmStrip.offsetLeft + thumbWidth).toString() + "px";
            move(newPos);
            currentImage = document.getElementById('preview' + index);
            index--;
            nextImage = document.getElementById('preview' + index);
            showPreviewImage(elem);
        }
    }
}

//////////////////////////////////////////////////Gallery Image Viewer///////////////////////////////////////

function setUpViewer() {
    var modalPanel = document.createElement("div");
    modalPanel.setAttribute("id", "modalPanel");
    modalPanel.style.position = "absolute";
    modalPanel.style.top = "-1000px";
    modalPanel.style.left = "0px";
    modalPanel.style.backgroundColor = "#000000";
    modalPanel.style.filter = "alpha(opacity=70)";
    modalPanel.style.opacity = "0.7";
    modalPanel.style.height = GetHeight();
    modalPanel.style.width = GetWidth();

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

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

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

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

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

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

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

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

    modalPanel.appendChild(mainPanel);
    document.getElementById('container').parentNode.appendChild(modalPanel);

    changeImage(""); //Delete me
}

function hideViewer() {
    $(document.getElementById('modalPanel')).animate({ top: "-1000px" }, 1000, "linear");
}

function showViewer(id) {
    $(document.getElementById('modalPanel')).animate({ top: "0px" }, 1000, "linear");
    index = parseInt(id);
    changeImage("");

}

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

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;
}

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