﻿//************************************************************************
// File: showPic.js
// ----------------
// Using /jsLib/detect.js;
// Using /jsLib/eventUtil.js;
//
// Author: Think Again (Tian Jie, DHL-sinotrans international couriers CO., LTD Suzhou branch)
//
// Author's E-mail: think_again@sina.com
//
// Author's Blog: http://blog.myfootprints.cn
//
// Author's Website: http://www.myfootprints.cn
//
// Created date: 2008/01/10
//
// Usage: controlling the layout of web page
//      EventUtil.addEventHandler(window, "load", function() {prepareGalleryAbstract(<pictureBoxID>, <pictureWidth>, <pictureHeight>);});
//      For Example, insert this statement in the javascript area of the source code:
//      EventUtil.addEventHandler(window, "load", function() {prepareGalleryAbstract("newSamplePics", parseInt(document.getElementById("newSamplePics").parentElement.offsetWidth)*8/10, 150);});
//*************************************************************************

function showPic(whichpic) {
    try {
        if (!document.getElementById("placeholder")) {
            return true;
        }
        //切换图片
        var source = whichpic.getAttribute("href");
        var placeholder = document.getElementById("placeholder");
        if (placeholder.nodeName != "IMG") return true;
        placeholder.setAttribute("src", source);
        
        if (!document.getElementById("description")) {
            return false;
        }
        
        //切换文字
        var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
        var description = document.getElementById("description");
        if (description.firstChild.nodeType == 3) {
            description.firstChild.nodeValue = text;
        }
        placeholder.setAttribute("alt", text);
        
        return false;
    } catch (oError) {
        // ignore
        //alert(oError.description);
        return true;
    } finally {
    }
}

function prepareGallery(galleryID) {
    prepareGalleryAbstract(galleryID, 350, 250);
}


function prepareGalleryAbstract(galleryID, width, height) {
    if (!document.getElementsByTagName) {
        return false;
    }
    if (!document.getElementById) {
        return false;
    }
    try {
        if (!document.getElementById(galleryID)) {
            return false;
        }
    } catch (e) {
    return false;
    }
    var gallery = document.getElementById(galleryID);
    var links = gallery.getElementsByTagName("a");
    
    for (var i = links.length - 1; i >= 0; i--) {
        insertImage(links[i], width, height, "img-wrapper");
        /*
        links[i].onclick = function () {
            return showPic(this);
        }*/
    }
}

function prepareGalleryAbstract2(galleryID, width, height, cssClassName) {
    if (!document.getElementsByTagName) {
        return false;
    }
    if (!document.getElementById) {
        return false;
    }
    try {
        if (!document.getElementById(galleryID)) {
            return false;
        }
    } catch (e) {
        return false;
    }
    var gallery = document.getElementById(galleryID);
    var links = gallery.getElementsByTagName("a");

    for (var i = links.length - 1; i >= 0; i--) {
        var sCssClassName;
        
        if (cssClassName) {
            sCssClassName = cssClassName;
        } else {
            sCssClassName = "img-wrapper";
        }
        insertImage2(links[i], width, height, sCssClassName);
        /*
        links[i].onclick = function () {
        return showPic(this);
        }*/
    }
}

function insertAfter(newElement, targetElement) {
    if (isMoz) {
        var parent = targetElement.parentNode;
    } else {
        var parent = targetElement.parentElement;
    }
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

function preparePlaceholder(galleryID, placeholderIMG, placeholderALT) {
    if (!document.createElement) return false;
    if (!document.createTextNode) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById(galleryID)) return false;
    
    var placeholderParent = document.createElement("div");
    // 设置placeholderParent的样式
    try {
        placeholderParent.className = "img-wrapper";
        // 设置float属性
        if (isIE) {
            placeholderParent.style.styleFloat = "right";
        } else {
            placeholderParent.style.cssFloat = "right";
        }
    } catch (oError) {
    }
    
    var placeholder = document.createElement("img");
    placeholder.setAttribute("id", "placeholder");
    placeholder.setAttribute("src", placeholderIMG);
    placeholder.setAttribute("alt", placeholderALT);
    placeholderParent.appendChild(placeholder);
    
    var description = document.createElement("p");
    description.setAttribute("id", "description");
    var descText = document.createTextNode("");
    description.appendChild(descText);
    try {
        description.style.textAlign = "center";
    } catch (oError) {
    }
    var gallery = document.getElementById(galleryID);
    
    gallery.appendChild(placeholderParent);
    gallery.insertBefore(description, placeholderParent.previousSibling);
}

//
// 在一个图片链接前将它链接的图片显示出来
//
function insertImage(whichLink, width, height, className) {
    var strImgSource = whichLink.href;
    var nodeImg = document.createElement("img");
    var nodeImgWrapper = document.createElement("div");
    var nodeImgWrapperDiv = document.createElement("div");
    var nodeImgWrapperClear = document.createElement("div");
    try {
        nodeImgWrapperDiv.style.padding = "5px";
        nodeImgWrapperDiv.style.height = "100%";
        nodeImgWrapperDiv.style.position = "relative";
        nodeImgWrapperDiv.style.clear = "both";
        if (fIEVersion > 6.0 || !isIE) {
            // IE 6.0 及以下不能加以下这句，否则一行只能显示一张图片
            nodeImgWrapperDiv.style.display = "block";
        }
        nodeImgWrapperClear.style.clear = "both";
        if (isIE) {
            nodeImgWrapperDiv.style.styleFloat = "none";
        } else {
            nodeImgWrapperDiv.style.cssFloat = "none";
        }
    } catch (e) {
    //alert(e);
    }
    nodeImg.setAttribute("src", strImgSource);
    if (width) {
        nodeImg.setAttribute("width", width);
    }
    if (height) {
        nodeImg.setAttribute("height", height);
    }
    nodeImg.setAttribute("alt", whichLink.title);
    nodeImgWrapper.className = className;
    nodeImgWrapper.appendChild(nodeImg);
    nodeImgWrapperDiv.appendChild(nodeImgWrapper);
    nodeImgWrapperDiv.appendChild(nodeImgWrapperClear);

    if (isMoz) {
        whichLink.parentNode.appendChild(nodeImgWrapperDiv);
    } else {
        whichLink.parentElement.appendChild(nodeImgWrapperDiv);
    }
}

//
// 在一个图片链接前将它链接的图片显示出来，以另一种方式
//
function insertImage2(whichLink, width, height, className) {
    // 之所以加入这么多的 div 结点，都是因为需要给图片一个 CSS
    if (className != ' ') {
        var strImgSource = whichLink.title;
        var nodeImg = document.createElement("img");
        var nodeImgWrapper = document.createElement("div");
        var nodeImgWrapperDiv = document.createElement("div");
        var nodeImgWrapperClear = document.createElement("div");
        try {
            nodeImgWrapperDiv.style.padding = "5px";
            nodeImgWrapperDiv.style.height = "100%";
            nodeImgWrapperDiv.style.position = "relative";
            nodeImgWrapperDiv.style.clear = "both";
            nodeImgWrapperClear.style.clear = "both";

            if (isIE) {
                nodeImgWrapperDiv.style.styleFloat = "none";
            } else {
                nodeImgWrapperDiv.style.cssFloat = "none";
            }
        } catch (e) {
            //alert(e);
        }
        nodeImg.setAttribute("src", strImgSource);
        if (width) {
            nodeImg.setAttribute("width", width);
        }
        if (height) {
            nodeImg.setAttribute("height", height);
        }
        nodeImg.setAttribute("alt", whichLink.innerText);
        whichLink.title = whichLink.innerText;
        nodeImgWrapper.className = className;
        // 将链接的文字内容替换成图片内容
        whichLink.replaceChild(nodeImg, whichLink.firstChild);
        if (isMoz) {
            var oOldParent = whichLink.parentNode;
        } else {
            var oOldParent = whichLink.parentElement;
        }
        // 将<a />元素插入img-wrapper div结构中
        nodeImgWrapper.appendChild(whichLink);
        nodeImgWrapperDiv.appendChild(nodeImgWrapper);
        nodeImgWrapperDiv.appendChild(nodeImgWrapperClear);
        oOldParent.appendChild(nodeImgWrapperDiv);
    } else {
    // 如果没有 className，那么就可以省去很多 div
        var strImgSource = whichLink.title;
        var nodeImg = document.createElement("img");
        nodeImg.setAttribute("src", strImgSource);
        if (width) {
            nodeImg.setAttribute("width", width);
        }
        if (height) {
            nodeImg.setAttribute("height", height);
        }
        nodeImg.setAttribute("alt", whichLink.innerText);
        whichLink.title = whichLink.innerText;
        // 将链接的文字内容替换成图片内容
        whichLink.replaceChild(nodeImg, whichLink.firstChild);
    }
}