var cbLang = 'en';
var cbGroupShow = true;
var items = [];
$(document).ready(function () {
    setCaption();
    photosPopUp();
	//htmlPopUp();
});

function photosPopUp() {
    var colorBoxArr = ["prettyphoto"];
    if ($('a.prettyphoto').length > 0) {
        $('.prettyphoto').each(function () {
            if ($(this).find('img').attr('src')) {
                if (!$(this).hasClass('noMagnifier')) {
                    //$(this).addClass('magnifier');
                }
            }
        });
        $(".prettyphoto").each(function () {
            if ($(this).attr('data-class') != null && $(this).attr('data-class') != "") {
                var mTem = $(this).attr('data-class');
                if (colorBoxArr.indexOf(mTem) > -1) {
                } else {
                    colorBoxArr.push(mTem);
                }
            }
        });
        photoSwipeMobileImg();
        /*
        if ((isMobile() || navigator.userAgent.match(/Android/i))) {
            photoSwipeMobileImg();
        }
        else {
            if ($('.prettyphoto').length > 0) {
                for (i = 0; i < colorBoxArr.length; i++) {
                    var colorBoxGrp = colorBoxArr[i];
                    $("." + colorBoxGrp).colorbox({
                        rel: (cbGroupShow) ? colorBoxGrp : null,
                        transition: 'fade',
                        maxWidth: '100%',
                        maxHeight: '100%',
                        initialWidth: 300,
                        initialHeight: 100,
                        onComplete: function () {
                            $('#cboxClose').show();
                            $('#cboxNext').css({ 'left': parseInt($('#cboxLoadedContent').css('width')) - 29 + 'px' }, 100);

                            var titleHeight = parseInt($("#cboxTitle").height()) + 30;

                            $("#cboxLoadedContent").append("<div class='titltHolder' style='height:" + titleHeight + "px;'></div>");
                            $("#cboxLoadedContent").css({ "overflow": "hidden" });
                            $("#cboxTitle").css({ "bottom": "30px" });
                            $.fn.colorbox.resize();
                        }
                    , onClosed: function () {
                        $('#cboxClose').hide();
                        $("#cboxTitle").css({ "bottom": "0px" });
                    }
                    , current: (cbGroupShow) ? (cbLang == 'en' || cbLang == '') ? "{current} of {total}" : "{current} 之 {total}" : null
                    });
                }
            }
        }
        */
    }
}

/*function htmlPopUp() {
	$(".vt").colorbox({iframe:true, innerWidth:770, innerHeight:595}); 
}*/


function isMobile() {
    if (navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/iPad/i)) {
        return true;
    } else {
        return false;
    }
}

function intPhotoSwipeTemplate() {
    if (isMobile()) {
        var tpl = '<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">';
    } else {
        var tpl = '<div class="pswp desktop-mode" tabindex="-1" role="dialog" aria-hidden="true">';
    }
    tpl += '<div class="pswp__bg"></div>\
                    <div class="pswp__scroll-wrap">\
                        <div class="pswp__container">\
                            <div class="pswp__item"></div>\
                            <div class="pswp__item"></div>\
                            <div class="pswp__item"></div>\
                        </div>\
                        <div class="pswp__ui pswp__ui--hidden">\
                            <div class="pswp__top-bar">\
                                <div class="pswp__counter"></div>\
                                <button class="pswp__button pswp__button--close"></button>\
                                <button class="pswp__button pswp__button--share"></button>\
                                <button class="pswp__button pswp__button--fs"></button>\
                                <button class="pswp__button pswp__button--zoom"></button>\
                                <div class="pswp__preloader">\
                                    <div class="pswp__preloader__icn">\
                                      <div class="pswp__preloader__cut">\
                                        <div class="pswp__preloader__donut"></div>\
                                      </div>\
                                    </div>\
                                </div>\
                            </div>\
                            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">\
                                <div class="pswp__share-tooltip"></div>\
                            </div>\
                            <button class="pswp__button pswp__button--arrow--left"></button>\
                            <button class="pswp__button pswp__button--arrow--right"></button>\
                            <div class="pswp__caption">\
                                <div class="pswp__caption__center"></div><div class="counterDesktop"></div>\
                            </div>\
                        </div>\
                    </div>\
                </div>';
    $('#main').append(tpl);
}
function photoSwipeMobileImg() {
    intPhotoSwipeTemplate();
    $('.prettyphoto').click(function () {
        items = [];
        var myImgSrc = $(this).attr('href');
        var mIndex = 0;
        var mCnt = 0;
        var mSelector = $(".prettyphoto");
        var mTem = $(this).attr('data-class');
        if (cbGroupShow) {
            if (mTem) {
                mSelector = $("." + mTem);
            } else {
                mSelector = $(".prettyphoto");
            }
        } else {
            mSelector = $(this);
        }
        mSelector.each(function () {
            var mSrc = $(this).attr('href');
            var mW = $(this).find("img").width();
            var mH = $(this).find("img").height();
            var mTitle = $(this).attr('title');
            mW = parseInt(mW) * 2;
            mH = parseInt(mH) * 2;
            var mTem = {
                src: mSrc,
                w: 2001,
                h: 2001,
                title: mTitle
            };
            items.push(mTem);
            if (mSrc == myImgSrc) {
                mIndex = mCnt;
            }
            mCnt++;
        });
        openPhotoSwipe(mIndex);
        return false;
    })
}
if (location.href.indexOf('/english/') > -1) {
    var mPhotoSwipeErrorMsg = '<div class="pswp__error-msg">The image could not be loaded.</div>';
} else {
    var mPhotoSwipeErrorMsg = '<div class="pswp__error-msg">圖像無法加載。</div>';
}
function openPhotoSwipe(mIndex) {
    var pswpElement = document.querySelectorAll('.pswp')[0];
    var options = {
        index: mIndex,
        history: isMobile(),
        focus: true,
        escKey: true,
        showAnimationDuration: 0,
        hideAnimationDuration: 0,
        fullscreenEl: false,
        zoomEl: false,
        shareEl: false,
        pinchToClose: false,
        closeOnScroll: false,
        closeOnVerticalDrag: false,
        errorMsg: mPhotoSwipeErrorMsg
    };
    var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
    resizePhotoswipeImage(gallery);
    if (!isMobile()) {
        $('.pswp__bg').click(function () { gallery.close(); });
    }
    
};


function resizePhotoswipeImage(gallery) {
    gallery.listen('imageLoadComplete', function (index, item) {
        if (item.w == 2001 && item.h == 2001) {
            var img = new Image();
            img.src = item.src;
            if (img.naturalWidth && img.naturalHeight) {
                if (img.naturalWidth > 2000 || img.naturalHeight > 2000) {
                    item.w = img.naturalWidth;
                    item.h = img.naturalHeight;
                } else {
                    if (img.naturalWidth > img.naturalHeight) {
                        var mRat = 2000 / img.naturalWidth
                        item.w = 2000;
                        item.h = parseInt(img.naturalHeight * mRat);
                    } else {
                        var mRat = 2000 / img.naturalHeight
                        item.h = 2000;
                        item.w = parseInt(img.naturalWidth * mRat);
                    }
                }
                gallery.invalidateCurrItems();
                gallery.updateSize(true);
                if ($('.pswp__counter').html() && $('.pswp__counter').html() != "1 / 1") {
                    $('.counterDesktop').html($('.pswp__counter').html());
                } else {
                    $('.counterDesktop').html('');
                }
            }
        }
    });
    gallery.listen('afterChange', function (index, item) {
        if ($('.pswp__counter').html() && $('.pswp__counter').html() != "1 / 1") {
            $('.counterDesktop').html($('.pswp__counter').html());
        } else {
            $('.counterDesktop').html('');
        }
    });
}

/**** Put caption to overlay ****/
function setCaption() {
    
    for (var i = 0; i < $('.prettyphoto img').length; i++) {
        var focusImg = $($('.prettyphoto img')[i]);
        var imgAlt = focusImg.attr('alt');
        
        $($('.prettyphoto')[i]).attr('title', imgAlt);
    }
}
/**** Put caption to overlay ****/