var SV = {
    "MARGIN1":15,
    "MARGIN2":30,
    "BTNW1":14,
    "BTNW2":28,
    "BTNH1":50,
    "BTNH2":100,
    "NAVION":252,
    "NAVIOFF":25,
    "IMGBORDER1":2,
    "IMGBORDER2":4,
    "IMGDOMAIN": 'http://image.yes24.com/Preview/PreviewResize.aspx'
};
var NAVIHEIGHT;
function sleep(timeout) {
    var loop = true;
    var current = new Date();
    var now;
    var cTimestamp = current.getTime();
    while (loop) {
        now = new Date();
        nTimestamp = now.getTime();
        if (nTimestamp - cTimestamp > timeout) { loop = false; }
    }
} 

function checkLengthByte(txt, limit, shorten) {
    var bytes = txt.length + (escape(txt) + "%u").match(/%u/g).length - 1;
    var length = txt.length;

    if (bytes > limit) {
        var tmpTxt = txt;
        var tmpBytes = bytes;
        do {
            tmpTxt = tmpTxt.slice(0, -1);
            tmpBytes = tmpTxt.length + (escape(tmpTxt) + "%u").match(/%u/g).length - 1;
        } while (!(tmpBytes < limit))
        txt = tmpTxt;
        if (shorten) { txt += '...'; }
    }
    return txt;
}

function imageView(imgsrc, attachID) {
    $("#" + attachID + " img").remove();
    $("#" + attachID).addClass('loading');
    var img = new Image();
    $(img).load(function() {
        $(this).hide();
        $("#" + attachID).removeClass('loading').append(this);
        //$(this).fadeIn(2500);
        $(this).show();
    }).error(function() { alert("error : " + imgsrc); }).attr('src', imgsrc);
}

jQuery.fn.extend({
    tooltip: function(content, classname) {
        $(this).mouseover(function() {
            this.tooltiparea = document.createElement("div");
            if (classname != null) {
                $(this.tooltiparea).addClass(classname);
            } else {
                $(this.tooltiparea).css("border", "1px solid gray");
                $(this.tooltiparea).css("background", "#edeef0");
                $(this.tooltiparea).css("color", "#000");
            }
            $(this.tooltiparea).css("position", "absolute");
            $(this.tooltiparea).css("zIndex", "100");
            $(this.tooltiparea).text(content);
            $(this.tooltiparea).css("left", $("#Navion").position().left + $(this).position().left);
            $(this.tooltiparea).css("top", $(this).position().top - 20);
            $(this.tooltiparea).css("display", "block");
            $(this.tooltiparea).appendTo(document.body);
        }).mouseout(function() {
            $(this.tooltiparea).remove();
        });

    }
});

jQuery.extend({
    preview: function(input) {
        this.goodsno = input.goodsno;
        this.pagedomain = input.pagedomain;
        this.pages = input.pages;
        this.isonepagemode = input.isonepagemode;
        this.pageindex = 0; // right page index
        this.pagecount = this.pages.PAGE.length;
        this.zoomRatio = 1;
        this.zoomcount = 0;
        this.c_pagesize = null;
        this.pagesize = { 'W': 400, 'H': 595, 'R': 1.4875 };
        this.s_pagesize = null;
        this.m_pagesize = null;
        this.l_pagesize = null;
        this.imagetype = "M";
        this.Navioff = $("#Navioff");
        this.Navion = $("#Navion");
        this.PageArea = $("#PageArea");
        this.Btnbox = $("#btnbox");
        this.Wrapperpage = $("#wrapperpage");
        this.WrapperpageDIV = $("#pageimage");
        this.PageImg = $("#pnlpage img");
        this.Navi_page = $("#Navi_page");
        this.BookmarkArea = $("#BookmarkArea");
        this.BtnViewOnePage = $("#btnViewonepage");
        this.BtnViewTwoPage = $("#btnViewtwopage");
        this.BtnZoomIn = $("#btnZoomin");
        this.BtnZoomOut = $("#btnZoomout");
        this.isopeninfo = true;
        if (this.pages.PAGE.length > 0) {
            var w = this.pages.PAGE[0].MiddleImage.Width;
            var h = this.pages.PAGE[0].MiddleImage.Height;
            this.pagesize = { 'W': w, 'H': h, 'R': h / w };
            this.s_pagesize = { 'W': this.pages.PAGE[0].SmallImage.Width, 'H': this.pages.PAGE[0].SmallImage.Height, 'R': 1 };
            this.m_pagesize = { 'W': this.pages.PAGE[0].MiddleImage.Width, 'H': this.pages.PAGE[0].MiddleImage.Height, 'R': 1 };
            this.l_pagesize = { 'W': this.pages.PAGE[0].LargeImage.Width, 'H': this.pages.PAGE[0].LargeImage.Height, 'R': 1 };
        }
        this.optImgWidth = this.pagesize.W;
        this.optImgHeight = this.pagesize.H;

        this.initBookmark = function() {
            var tag = "";
            for (var i = 0; i < this.pagecount; i++) {
                if (this.pages.PAGE[i].Bookmark != "") {
                    tag += '<li class="Barogo_list" alt="' + (this.pages.PAGE[i].OrderNo - 1) + '"><a>' + checkLengthByte(this.pages.PAGE[i].Bookmark, 25, true) + '</a></li>';
                }
            }
            if (tag != "") {
                var header = '<h1 id="baro">바로가기</h1><ul id="Barogo">';
                this.BookmarkArea.html(header + tag + "</ul>");
            }
        },

        this.getImageURL = function(index) {
            var filename = "";
            if (this.imagetype == "S" && this.pages.PAGE[index].LargeImage.Width == 0) { filename = this.pages.PAGE[index].SmallImage.Name; }
            else if (this.imagetype == "M" && this.pages.PAGE[index].LargeImage.Width == 0) { filename = this.pages.PAGE[index].MiddleImage.Name; }
            else { filename = this.pages.PAGE[index].LargeImage.Name; }
            return SV.IMGDOMAIN + "?no=" + this.goodsno + "&fn=" + filename + "&size=" + this.optImgWidth + "|" + this.optImgHeight;
        },

        this.initPage = function() {
            if (this.isonepagemode) {
                imageView(this.getImageURL(0), "loader1");
            } else {
                imageView("../../Content/img/white.jpg", "loader1");
                imageView(this.getImageURL(0), "loader2");
            }
            this.changeFocus();
        },

        this.changeFocus = function() {
            if (this.isonepagemode) {
                this.BtnViewOnePage.attr({ src: this.BtnViewOnePage.attr("src").replace("_off.gif", "_on.gif") });
                this.BtnViewTwoPage.attr({ src: this.BtnViewTwoPage.attr("src").replace("_on.gif", "_off.gif") });
            } else {
                this.BtnViewOnePage.attr({ src: this.BtnViewOnePage.attr("src").replace("_on.gif", "_off.gif") });
                this.BtnViewTwoPage.attr({ src: this.BtnViewTwoPage.attr("src").replace("_off.gif", "_on.gif") });
            }

            this.BtnZoomIn.attr({ src: this.BtnZoomIn.attr("src").replace("_on.gif", "_off.gif") });
            this.BtnZoomOut.attr({ src: this.BtnZoomOut.attr("src").replace("_on.gif", "_off.gif") });
        },

        this.controlGoodsInfo = function(isShow) {
            this.isopeninfo = isShow;
            if (isShow) {
                this.Navioff.hide();
                this.Navion.show();
            } else {
                this.Navion.hide();
                this.Navioff.show();
            }
        },

        this.isInfoStatus = function() {
            return this.isopeninfo;
        },

        this.onlySetWidth = function(isShow) {
            this.isopeninfo = isShow;
            var totalWidth = $(window).width();
            if (totalWidth < 664) { totalWidth = 664; }
            var pageareaWidth = 0;
            if (isShow) {
                pageareaWidth = totalWidth - SV.NAVION;
            } else {
                pageareaWidth = totalWidth - SV.NAVIOFF;
            }
            this.PageArea.css("width", pageareaWidth);
            this.setNaviHeight();
        },

        this.setNaviHeight = function() {
            //document.getElementById('DebugInfo').innerHTML = NAVIHEIGHT + ' : ' + $(window).height();
            var tempNaviHeight = NAVIHEIGHT > $(window).height() ? NAVIHEIGHT : $(window).height(); ;
            this.Navion.css("height", tempNaviHeight);
            this.Navioff.css("height", tempNaviHeight - 24);
        },

        this.setNaviHeightConst = function() {
            NAVIHEIGHT = this.Navion.height();
        },

        this.setPageSize = function(isShow) {
            this.onlySetWidth(isShow);
            this.setPosition();
            this.changeCurrentPage();
        },

        this.getImageType = function(_sourceWidth) {
            var temp = "M";
            if (_sourceWidth < this.s_pagesize.W) { // smallimage
                temp = "S";
            }
            if (_sourceWidth < this.m_pagesize.W) { // middleimage
                temp = "M";
            }
            if (_sourceWidth < this.l_pagesize.W) { // largeimage
                temp = "L";
            }
            return temp;
        },

        this.setPosition = function() {
            this.c_pagesize = this.optimizePageSize();
            this.optImgWidth = this.c_pagesize.W - SV.IMGBORDER1;
            this.optImgHeight = this.c_pagesize.H - SV.IMGBORDER1;

            this.imagetype = this.getImageType(this.c_pagesize.W);
            $("#pageimage div").css("width", this.optImgWidth); //??
            $("#pageimage div").css("height", this.optImgHeight); //??
            this.PageImg.attr("width", this.optImgWidth);
            this.PageImg.attr("height", this.optImgHeight);

            var mtop = ($(window).height() - this.c_pagesize.H) / 2;
            this.Btnbox.css("top", mtop + (this.c_pagesize.H / 2) - SV.BTNH1); //+ SV.MARGIN1
            this.Wrapperpage.css("height", this.c_pagesize.H);
            this.Wrapperpage.css("margin-top", mtop);
            if (this.isonepagemode) {
                this.Btnbox.css("width", this.c_pagesize.W + SV.BTNW2);
                this.Btnbox.css("left", (this.PageArea.width() / 2) - (this.c_pagesize.W / 2) - SV.BTNW1);
                this.Wrapperpage.css("width", this.c_pagesize.W + SV.BTNW2);
                this.WrapperpageDIV.css("width", this.c_pagesize.W + SV.BTNW2);
            } else {
                this.Btnbox.css("width", (this.c_pagesize.W * 2) + SV.BTNW2);
                this.Btnbox.css("left", (this.PageArea.width() / 2) - (this.c_pagesize.W) - SV.BTNW1);
                this.Wrapperpage.css("width", (this.c_pagesize.W * 2) + SV.BTNW2);
                this.WrapperpageDIV.css("width", (this.c_pagesize.W * 2) + SV.BTNW2);
            }
            if (this.isonepagemode) {
                this.Btnbox.css("display", "block");
                $("#loader1").css("display", "block");
                $("#loader2").css("display", "none");
            } else {
                this.Btnbox.css("display", "block");
                $("#loader1").css("display", "block");
                $("#loader2").css("display", "block");
            }
        },

        this.optimizePageSize = function(isFirst) {
            var paWidth = this.PageArea.width() - SV.BTNH1; // - (button area + margin)
            if (!this.isonepagemode) { paWidth = paWidth / 2; }
            var paHeight = $(window).height(); // - (margin SV.MARGIN2)
            if (paHeight < 500) { paHeight = 500; }
            var pageASize = { W: paWidth, H: paHeight, R: paHeight / paWidth };
            var optSize = { W: 0, H: 0, R: 1 };
            var wr = (pageASize.W / this.pagesize.W);
            var hr = (pageASize.H / this.pagesize.H);
            if (wr <= hr) {
                this.zoomRatio = wr;
                optSize.W = Math.floor(this.pagesize.W * wr);
                optSize.H = Math.floor(optSize.W * this.pagesize.R);
            } else { // height fix
                this.zoomRatio = hr;
                optSize.H = Math.floor(this.pagesize.H * hr);
                optSize.W = Math.floor(optSize.H / this.pagesize.R);
            }
            return optSize;
        },

        this.changeMode = function(isonepagemode) {
            this.isonepagemode = isonepagemode;
            if (this.zoomcount > 0) { this.zoomcount = 0; }
            this.changeFocus();
            this.setPosition();

            if (this.isonepagemode) {
                if (this.pageindex == this.pagecount) {
                    this.pageindex = this.pagecount - 1;
                    this.movePage(this.pageindex, true);
                } else {
                    this.movePage(this.pageindex, true);
                }
            } else {
                if (this.pageindex % 2 == 1) { // odd
                    this.movePage(this.pageindex + 1);
                } else {
                    this.movePage(this.pageindex);
                }
            }
        },

        this.resizePage = function(_isimageload) {
            this.zoomRatio = (this.c_pagesize.R + (0.3 * this.zoomcount));
            var _optimgwidth = Math.floor(this.c_pagesize.W * this.zoomRatio);
            var _optimgheight = Math.floor(this.c_pagesize.H * this.zoomRatio);
            this.optImgWidth = _optimgwidth - SV.IMGBORDER1;
            this.optImgHeight = _optimgheight - SV.IMGBORDER1;

            this.imagetype = this.getImageType(this.optImgWidth);

            $("#pageimage div").css("width", this.optImgWidth);
            $("#pageimage div").css("height", this.optImgHeight);
            this.PageImg.attr("width", this.optImgWidth);
            this.PageImg.attr("height", this.optImgHeight);

            var zoomWidth = 0;
            var btnLeft = 0;
            if (this.isonepagemode) {
                zoomWidth = _optimgwidth + SV.BTNW2;
                btnLeft = (this.PageArea.width() / 2) - (_optimgwidth / 2) - SV.BTNW1;
            }
            else {
                zoomWidth = (_optimgwidth * 2) + SV.BTNW2;
                btnLeft = (this.PageArea.width() / 2) - (_optimgwidth) - SV.BTNW1;
            }
            this.WrapperpageDIV.css("width", zoomWidth);
            if (this.PageArea.width() - SV.BTNW1 >= zoomWidth) {
                this.Btnbox.css("width", zoomWidth);
                this.Btnbox.css("left", btnLeft);
                this.Wrapperpage.css("width", zoomWidth);
            } else {
                this.Btnbox.css("left", 7);
                this.Btnbox.css("width", this.PageArea.width() - SV.BTNW1);
                this.Wrapperpage.css("width", this.PageArea.width() - SV.BTNW1);
            }

            if (this.optImgHeight >= $(window).height()) {
                this.Wrapperpage.css("margin-top", 0);
                this.Wrapperpage.css("height", $(window).height());
            } else {
                var mtop = ($(window).height() - _optimgheight) / 2;
                this.Btnbox.css("top", mtop + (_optimgheight / 2) - SV.BTNH1); //+ SV.MARGIN1
                this.Wrapperpage.css("margin-top", mtop);
                this.Wrapperpage.css("height", _optimgheight);
            }

            if (_isimageload) {
                if (this.isonepagemode) {
                    imageView(this.getImageURL(this.pageindex), "loader1");
                } else {
                    if (this.pageindex - 1 < 0) {
                        imageView("../../Content/img/white.jpg", "loader1");
                    } else {
                        imageView(this.getImageURL(this.pageindex - 1), "loader1");
                    }
                    sleep(1000);
                    if (this.pageindex == this.pagecount) {
                        imageView("../../Content/img/white.jpg", "loader2");
                    } else {
                        imageView(this.getImageURL(this.pageindex), "loader2");
                    }
                }
            }
        },

        this.isZoomInOK = function(tempzoomcount) {
            var tempRatio = (this.c_pagesize.R + (0.3 * (tempzoomcount + 1)));
            var tempWidth = Math.floor(this.c_pagesize.W * tempRatio);
            if (this.l_pagesize.W > 0) { //largeimage
                if ((this.l_pagesize.W) < tempWidth) {
                    return false;
                } else {
                    return true;
                }
            } else {
                if ((this.m_pagesize.W * 1.1) < tempWidth) {
                    return false;
                } else {
                    return true;
                }
            }
        },

        this.zoomIn = function() {
            if (this.zoomcount > 2 || !(this.isZoomInOK(this.zoomcount))) {
                alert("최대 확대한 상태입니다.");
                return;
            }
            this.zoomcount = this.zoomcount + 1;
            this.resizePage(true);
        },

        this.zoomOut = function() {
            if (this.zoomcount < 1) {
                alert("최소 축소된 상태입니다.");
                return;
            }
            this.zoomcount = this.zoomcount - 1;
            this.resizePage(true);
        },

        this.maxZoomIn = function() {
            if (this.zoomcount == 0) {
                var tempzoomcount = 3;
                if (!this.isZoomInOK(3)) {
                    tempzoomcount = 2;
                    if (!this.isZoomInOK(2)) {
                        tempzoomcount = 1;
                    }
                }
                this.zoomcount = tempzoomcount;
            }
            this.resizePage(true);
        },

        this.maxZoomOut = function() {
            this.zoomcount = 0;
            this.resizePage(true);
        },

        this.movePageCheck = function(movepageindex) {
            if (this.isonepagemode) {
                this.movePage(movepageindex);
            } else { //two
                if (movepageindex % 2 == 1) { //odd
                    this.movePage(movepageindex + 1);
                } else {
                    this.movePage(movepageindex);
                }
            }
        },

        this.movePage = function(movepageindex, notcheck) { //movepageindex | (movepageindex-1, movepageindex)
            if (movepageindex < 0) { alert("첫페이지 입니다."); return; }
            if (notcheck != true) {
                if (this.isonepagemode) {
                    if (movepageindex > this.pagecount - 1) { alert("마지막페이지 입니다."); return; }
                } else {
                    if (movepageindex > this.pagecount) { alert("마지막페이지 입니다."); return; }
                }
            }

            this.pageindex = movepageindex;
            if (this.isonepagemode) {
                imageView(this.getImageURL(this.pageindex), "loader1");
            } else {
                if (this.pageindex - 1 < 0) {
                    imageView("../../Content/img/white.jpg", "loader1");
                } else {
                    imageView(this.getImageURL(this.pageindex - 1), "loader1");
                }
                sleep(1000);
                if (this.pageindex == this.pagecount) {
                    imageView("../../Content/img/white.jpg", "loader2");
                } else {
                    imageView(this.getImageURL(this.pageindex), "loader2");
                }
            }
            this.changeCurrentPage();
        },

        this.prevPage = function() {
            if (this.isonepagemode) {
                if (this.pageindex >= this.pagecount) {
                    this.pageindex = this.pagecount - 1;
                }
                this.movePage(this.pageindex - 1);
            } else {
                if (this.pageindex % 2 == 1) { // odd
                    this.movePage(this.pageindex - 1);
                } else {
                    this.movePage(this.pageindex - 2);
                }
            }
        },

        this.nextPage = function() {
            if (this.isonepagemode) {
                this.movePage(this.pageindex + 1);
            } else {
                if (this.pageindex % 2 == 1) { // odd
                    this.movePage(this.pageindex + 1);
                } else {
                    this.movePage(this.pageindex + 2);
                }
            }
        },

        this.changeCurrentPage = function() {
            if (this.pageindex >= this.pagecount) {
                this.Navi_page.text((this.pagecount) + "/" + (this.pagecount));
            } else {
                this.Navi_page.text((this.pageindex + 1) + "/" + (this.pagecount));
            }
        },

        this.firstPage = function() {
            this.movePage(0);
        },

        this.lastPage = function() {
            if (this.isonepagemode) {
                this.movePage(this.pagecount - 1);
            } else {
                this.movePage(this.pagecount);
            }
        }
    }
});