/* Function: It is compatible with IE and other browser (FireFox), 
return the object that contains the left, top, width and height value relate the coordinate of document.body.*/
function getLTWH(o) {
    function getCurrentStyle(style) {
        var number = parseInt(o.currentStyle[style]);
        return isNaN(number) ? 0 : number;
    }
    function getComputedStyle(style) {
        return parseInt(document.defaultView.getComputedStyle(o, null).getPropertyValue(style));
    }
    var oLTWH = { "left": o.offsetLeft, "top": o.offsetTop, "width": o.offsetWidth, "height": o.offsetHeight };
    while (true) {
        o = o.offsetParent;
        if (o == (document.body && null)) break;
        oLTWH.left += o.offsetLeft;
        oLTWH.top += o.offsetTop;
        if (navigator.userAgent.indexOf("MSIE") > 0) { // for ie
            oLTWH.left += getCurrentStyle("borderLeftWidth");
            oLTWH.top += getCurrentStyle("borderTopWidth");
        }
        else { // for ff and other
            oLTWH.left += getComputedStyle("border-left-width");
            oLTWH.top += getComputedStyle("border-top-width");
        }
    }
    return oLTWH;
}

/* Function: Show the product images panel.*/
function showPreview(sourceId, previewBoxId, contentId, containerId, list, path) {
    var obj = getLTWH($get(sourceId).getElementsByTagName('img')[0]);
    var positionX = obj.left + obj.width - 30;
    var positionY = obj.top - 36;
    if (window.screen.availWidth - obj.left - obj.width < 320) positionX = obj.left - 316;
    var previewBox = $get(previewBoxId);
    previewBox.style.left = positionX + 'px';
    previewBox.style.top = positionY + 'px';
    previewBox.style.display = 'block';
    var content = $get(contentId);
    var container = $get(containerId);
    if (list.length > 0) {
//        if (list.length == 1) {
//            //$get(previewImageId).src = path + list[0].substring(1, list[0].length);
//            attachImgAsyOnloadEvent(container, path + list[0].substring(1, list[0].length));
//            content.style.display = 'none';
//        }
//        else {
//            content.style.display = 'block';
            var lis = content.getElementsByTagName("li");
            if (lis.length == 0) {
                for (i = 0; i < list.length; i++) {
                    var itemBox = document.createElement('li');
                    itemBox.id = list[i];
                    var itemImg = document.createElement('img');
                    itemImg.src = path + list[i];
                    itemBox.onmouseover = function() {
                        var o = $get(contentId).getElementsByTagName("li");
                        for (j = 0; j < o.length; j++) {
                            $get(contentId).getElementsByTagName("img")[j].style.borderColor = o[j].id == this.id ? "#ff0000" : "#666666";
                            //$get(previewImageId).src = path + this.id.substring(1, this.id.length);
                            attachImgAsyOnloadEvent(container, path + this.id.substring(1, this.id.length));
                        }
                    }
                    itemBox.appendChild(itemImg);
                    content.appendChild(itemBox);
                }
            }
            var arr = $get(contentId).getElementsByTagName("img");
            if (arr.length > 0) {
                arr[0].style.borderColor = '#ff0000';
                for (i = 1; i < arr.length; i++) arr[i].style.borderColor = '#666666';
            }
            //$get(previewImageId).src = path + list[0].substring(1, list[0].length);
            attachImgAsyOnloadEvent(container, path + list[0].substring(1, list[0].length));
//        }        
    }
}

function attachImgAsyOnloadEvent(container, path) {
    if (container.getElementsByTagName('img').length > 1) container.getElementsByTagName('img')[1].style.display = 'none';
    container.getElementsByTagName('div')[0].style.display = 'block';
    var img = new Image();
    img.onload = function() {
        container.getElementsByTagName('div')[0].style.display = 'none';
        if (container.getElementsByTagName('img').length > 1) container.replaceChild(this, container.getElementsByTagName('img')[1]);
        else container.appendChild(this);
    };
    img.src = path;
}

/*Function: Hide the product images panel*/
function hidePreview(e, previewBoxId) {
    if (e) {
        var toElement = e.relatedTarget || e.toElement;
        while (toElement) {
            if (toElement.id == previewBoxId) return;
            toElement = toElement.parentNode;
        }
    }
    $get(previewBoxId).style.display = 'none';
}