var MultiProduct = function(src, contentID, bigimgID, pointerID, smallimgName) {
    this.m_PointerLocation = 0.3;
    this.m_ContentClassName = "pshow";
    this.m_BodyClassName = "pbody";
    this.m_BigImgClassName = "pbigimg";
    this.m_PointerClassName = "ppointer";
    this.m_SmallContentClassName = "psmallimgcontent";
    this.m_SmallImgClassName = "psmallimg";
    this.m_SmallImgSelectClassName = "psmallimg1";
    this.BigImgPath = "./Photo/Product_Detail_Image/";
    this.m_Content = document.getElementById(contentID);
    this.m_BigImage = document.getElementById(bigimgID);
    this.m_SmallImage = document.getElementsByName(smallimgName);
    this.m_Pointer = document.getElementById(pointerID);
    this.m_Source = src;
    this.m_IsPass = false;
    this.Initilatize();

}

MultiProduct.prototype = {
    Initilatize: function() {
        var _self = this;
        if (this.m_Content != null && this.m_BigImage != null && this.m_Pointer != null && this.m_Source != null) {
            this.m_IsPass = true;
            this.m_Content.onmouseout = this.m_Source.onmouseout = function() {
                _self.HideContent();
            }
            this.m_Content.onmouseover = function() {
                _self.ShowContent();
            }
            for (var i = 0; i < this.m_SmallImage.length; i++) {
                this.m_SmallImage[i].onmouseover = function() { _self.SmallImageOver(this); }
                this.m_SmallImage[i].onmouseout = function() { _self.SmallImageOut(this); }
            }
            if (this.m_SmallImage[0] != null) {
                for (var i = 0; i < this.m_SmallImage.length; i++) {
                    if (this.m_SmallImage[i].className == this.m_SmallImgSelectClassName) {
                        this.m_SmallImage[i].className = this.m_SmallImgClassName;
                        break;
                    }
                }
                this.m_SmallImage[0].className = this.m_SmallImgSelectClassName;
                this.ChangeImage(this.m_SmallImage[0]);
            }
        }
    },
    ShowContent: function() {
        if (this.m_IsPass) {
            this.m_Content.style.display = "inline";
            var plocation = parseInt((this.m_Source.clientHeight) * this.m_PointerLocation);
            var left = this.GetLeft(this.m_Source) + this.m_Source.clientWidth + "px";
            var top = this.GetTop(this.m_Source) - plocation;

            if (this.m_Content.clientHeight > document.documentElement.clientHeight - (top - this.GetScrollTop())) {
                top = this.GetTop(this.m_Source) - this.m_Content.clientHeight + plocation + this.m_Pointer.clientHeight;
                plocation = this.m_Content.clientHeight - plocation - this.m_Pointer.clientHeight;
            }
            top = top + "px";

            this.m_Content.style.left = left;
            this.m_Content.style.top = top;
            this.m_Pointer.style.marginTop = plocation + "px";
        }
    },
    HideContent: function() {
        if (this.m_IsPass) {
            this.m_Content.style.display = "none";
        }
    },
    ChangeImage: function(obj) {
        var filename = obj.src.split('/');
        this.m_BigImage.src = this.BigImgPath + filename[filename.length - 1];
    },
    SmallImageOver: function(obj) {
        for (var i = 0; i < this.m_SmallImage.length; i++) {
            if (this.m_SmallImage[i].className == this.m_SmallImgSelectClassName) {
                this.m_SmallImage[i].className = this.m_SmallImgClassName;
                break;
            }
        }
        obj.className = this.m_SmallImgSelectClassName;
        this.ChangeImage(obj);
    },
    SmallImageOut: function(obj) {

    },
    GetTop: function(o) {
        T = o.offsetTop;
        if (o.offsetParent != null) {
            T += GT(o.offsetParent);
        }
        return T;
    },
    GetLeft: function(o) {
        L = o.offsetLeft;
        if (o.offsetParent != null) {
            L += GL(o.offsetParent);
        }
        return L;
    },
    GetScrollTop: function() {
        return document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
    },
    GetScrollLeft: function() {
        return document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
    }
}
function Showpic(src, contentID, bigimgID, pointerID, smallimgName) {
    var x = new MultiProduct(src, contentID, bigimgID, pointerID, smallimgName);
    x.ShowContent();
}