var viImgCount = 1; //图片总数
var viImgGroupArr = null; //图片数组
var viCurrImgIndex = 0; //当前图片索引
var viBorderWidth = 0; //浏览框宽度
var viBorderHeight = 0; //浏览框高度
var viCurrImgWidth = 0; //当前图片实际宽度
var viCurrImgHeight = 0; //当前图片实际高度
var $viLocationObj = null; //切换图片
var $viCountObj = null; //图片数量
var $viPrevObj = null; //上一张按钮
var $viNextObj = null; //下一张按钮
var $viOutObj = null; //放大按钮
var $viAutoObj = null; //实际大小按钮
var $viFixObj = null; //窗口大小按钮
var $viInObj = null; //缩小按钮
var $viCloseObj = null; //关闭按钮
var $viImgObj = null; //图片
var $viSelectObj = null; //选择图片
var $viTitleObj = null; //图片标题

$(document).ready(function () {

    $viLocationObj = $("#divViewImage").find('.location'); //切换图片
    $viCountObj = $("#divViewImage").find('.count'); //图片数量
    $viPrevObj = $("#divViewImage").find('.prev'); //上一张按钮
    $viNextObj = $("#divViewImage").find('.next'); //下一张按钮
    $viOutObj = $("#divViewImage").find('.out'); //放大按钮
    $viAutoObj = $("#divViewImage").find('.auto'); //实际大小按钮
    $viFixObj = $("#divViewImage").find('.fix'); //窗口大小按钮
    $viInObj = $("#divViewImage").find('.in'); //缩小按钮
    $viCloseObj = $("#divViewImage").find('.close'); //关闭按钮
    $viImgObj = $("#divViewImage").find('img'); //图片
    $viSelectObj = $("#divViewImage").find('.selindex'); //选择图片
    $viTitleObj = $("#divViewImage").find('.title'); //图片标题

    //上一张
    $viPrevObj.unbind().click(function () {
        VI_ToPrev();
    });

    //下一张
    $viNextObj.unbind().click(function () {
        VI_ToNext();
    });

    //放大
    $viOutObj.unbind().click(function () {
        VI_ImgZoomOut();
    });

    //实际大小
    $viAutoObj.unbind().click(function () {
        VI_ImgZoomAuto();
    });

    //窗口大小
    $viFixObj.unbind().click(function () {
        VI_ImgZoomFix();
    });

    //缩小
    $viInObj.unbind().click(function () {
        VI_ImgZoomIn();
    });

    //关闭
    $viCloseObj.unbind().click(function () {
        HideViewImage();
    });

    //键盘事件
    $(document).unbind('keydown').keydown(function (e) {
        var keycode = e == null ? event.keyCode : e.which;
        if (keycode == 27) { //Esc键:关闭
            if ($('#divViewImage').css('display') != 'none')
                HideViewImage();
        }
        else if (keycode == 37) { //左键:上一张
            if (viImgCount > 1) { VI_ToPrev(); }
        }
        else if (keycode == 39) { //右键:下一张
            if (viImgCount > 1) { VI_ToNext(); }
        }
        else if (keycode == 107 || keycode == 187) { //+:放大
            VI_ImgZoomOut();
        }
        else if (keycode == 109 || keycode == 189) { //-:縮小
            VI_ImgZoomIn();
        }
    });

    try {
        $viImgObj.unbind().mousewheel(function (objEvent, intDelta) {
            if (intDelta > 0)
                VI_ImgZoomOut();
            else if (intDelta < 0)
                VI_ImgZoomIn();
        });
    }
    catch (e) { }

    $viSelectObj.unbind().change(function () {
        viCurrImgIndex = $(this).val();
        VI_LoadCurrImg(); //载入当前图片
    });

    //获取所有可点击放大的图片对象
    $('.ShowBigImage').unbind().click(function () {
        var currImgObj = $(this).find('img');
        ShowLoading();
        ShowViewImage(currImgObj);
    });
});

/*
*currImgObj:当前点击图片/链接对象(取图片source属性)
*hideObj:隐藏图片组对象
*/
function InitViewImage(currImgObj, hideObj) {
    var imgUrl = currImgObj.attr('source');
    var imgTitle = currImgObj.attr('title');
    imgUrl = imgUrl == undefined ? currImgObj.attr('src') : imgUrl;
    imgTitle = currImgObj.attr('imagetitle') != undefined ? currImgObj.attr('imagetitle') : (imgTitle == undefined || imgTitle.length == 0 ? currImgObj.attr('alt') : imgTitle);
    viCurrImgIndex = 0;
    viImgCount = 0;
    if (hideObj != undefined) //存在图片组
    {
        var imgGroup = '';
        hideObj.find('a').each(function () {
            var source = $(this).attr('source');
            var title = $(this).attr('title');
            alert(title + "---" + source);
            imgGroup += "|" + source + "|" + title + ",";
        });
        viImgGroupArr = imgGroup.split(",");
        for (var i = 0; i < viImgGroupArr.length; i++) {
            if (viImgGroupArr[i].length > 0) {
                viImgCount++;
                if (viImgGroupArr[i].indexOf('|' + imgUrl + '|') != -1)
                    viCurrImgIndex = i;
            }
        }
    } else {
        viImgGroupArr = ["|" + imgUrl + "|" + imgTitle];
        viImgCount = 1;
    }

    //重置浏览框大小
    var pageSize = VI_GetPageSize();
    viBorderWidth = pageSize[0] - 150;
    viBorderHeight = pageSize[1] - 150;
    ShowTransparentBg();
    //if (!jQuery.browser.msie || isIE8) {
        $("#divViewImage").css({ position: 'fixed', marginTop: '-' + parseInt((viBorderHeight / 2), 10) + 'px' });
    //}
    $('#divViewImage').css({ width: viBorderWidth + 'px', marginLeft: '-' + parseInt((viBorderWidth / 2), 10) + 'px' })
                    .css({ height: viBorderHeight + 'px' })
                    .find('.m').css('height', viBorderHeight - 30);

    $('#divTransparentBg').unbind().click(function () {
        HideViewImage();
    });

    VI_LoadCurrImg(); //载入当前图片
}

//载入当前图片
function VI_LoadCurrImg() {
    var currImgGroupArr = viImgGroupArr[viCurrImgIndex].split('|');
    if (currImgGroupArr.length < 3 || currImgGroupArr[1] == undefined || currImgGroupArr[1].length == 0) {
        alert();
        if (viImgCount <= 1 || $('#divViewImage').css('display') == 'none') {
            HideViewImage();
            alert("提示 : 加載失敗,無法瀏覽該圖片!");
        } else {
            HideLoading();
            alert("提示 : 加載失敗,點擊跳過!");
        }
        return;
    }

    var imgPreloader = new Image();
    imgPreloader.onload = function () {
        imgPreloader.onload = null;
        viCurrImgWidth = imgPreloader.width;
        viCurrImgHeight = imgPreloader.height;

        var top = (viBorderHeight - 30 - viCurrImgHeight) / 2;
        var left = (viBorderWidth - viCurrImgWidth) / 2;

        $viImgObj.attr('src', imgPreloader.src);

        VI_ImgZoomAuto();

        $viTitleObj.html(currImgGroupArr[2].length == 0 ? "暫無標題" : currImgGroupArr[2]);
        if (viImgCount > 1)
            $viSelectObj[0].selectedIndex = $viSelectObj.find('option').index($viSelectObj.find('option[value=' + viCurrImgIndex + ']')[0]);

        HideLoading();

        if ($('#divViewImage').css('display') == 'none') {
            $('#divViewImage').show();
        }

        //只有一张图片
        if (viImgCount == 1) {
            $viLocationObj.hide();
            $viPrevObj.hide();
            $viNextObj.hide();
            $viImgObj.removeClass().addClass('clicktomove').attr('title', '移動').unbind('click').easydrag(true);
        } else {
            $viCountObj.html(viImgCount);
            $viLocationObj.show();
            $viPrevObj.show();
            $viNextObj.show();
            $viSelectObj.empty();
            var j = 0;
            for (var i = 1; i <= viImgCount; i++) {
                j = i - 1;
                $viSelectObj.append('<option value="' + j + '">第' + i + '張</option>');
            }

            //点击图片看上一张/下一张
            $viImgObj.unbind('mousemove').mousemove(function (event) {
                var x = event.clientX;
                var left = getABSLeft(this);
                var width = $(this).width();
                if (x - left < width / 2 - width / 3) {
                    $(this).removeClass().addClass('clicktoprev').attr('title', '上一張').unbind('click').click(function () {
                        VI_ToPrev();
                    });
                } else if (x - left > width / 2 + width / 3) {
                    $(this).removeClass().addClass('clicktonext').attr('title', '下一張').unbind('click').click(function () {
                        VI_ToNext();
                    });
                } else {
                    $(this).removeClass().addClass('clicktomove').attr('title', '移動圖片').unbind('click');
                    $(this).easydrag(true);
                }
            });
        }
    }
    imgPreloader.onerror = function () {
        if (viImgCount <= 1 || $('#divViewImage').css('display') == 'none') {
            HideViewImage();
            alert("提示 : 加載失敗,無法瀏覽該圖片");
        } else {
            HideLoading();
            alert("提示 : 加載失敗,點擊跳過!");
        }
        return;
    }
    ShowLoading();
    imgPreloader.src = currImgGroupArr[1];
}

function HideViewImage() {
    HideLoading();
    $('#divViewImage').hide();
    HideTransparentBg();
}

//上一张
function VI_ToPrev() {
    if (viCurrImgIndex > 0) {
        viCurrImgIndex--;
        VI_LoadCurrImg(); //载入当前图片
    }
    else {
        AlertTips("提示：", "已經是第一張");
    }
}

//下一张
function VI_ToNext() {
    if (viCurrImgIndex < viImgCount - 1) {
        viCurrImgIndex++;
        VI_LoadCurrImg(); //载入当前图片
    }
    else {
        AlertTips("提示：", "已經是最後一張");
    }
}

//放大
function VI_ImgZoomOut() {
    var width = parseInt($viImgObj.width()) * 1.3;
    var height = parseInt($viImgObj.height()) * 1.3;
    VI_ImgUpdatePosition(width, height);
}

//实际大小
function VI_ImgZoomAuto() {
    VI_ImgUpdatePosition(viCurrImgWidth, viCurrImgHeight);
}

//窗口大小
function VI_ImgZoomFix() {
    var width = viBorderWidth - 20;
    var height = (viBorderWidth - 20) * viCurrImgHeight / viCurrImgWidth;
    if (height > viBorderHeight - 50) {
        height = viBorderHeight - 50;
        width = (viBorderHeight - 50) * viCurrImgWidth / viCurrImgHeight;
    }
    VI_ImgUpdatePosition(width, height);
}

//缩小
function VI_ImgZoomIn() {
    var width = parseInt($viImgObj.width()) * 0.7;
    var height = parseInt($viImgObj.height()) * 0.7;
    if (width < 100 || height < 100)
        return;
    VI_ImgUpdatePosition(width, height);
}

function VI_ImgUpdatePosition(width, height) {
    var top = (viBorderHeight - 30 - height) / 2;
    var left = (viBorderWidth - width) / 2;
    $viImgObj.css('top', top)
                .css('left', left)
                .css('width', width)
                .css('height', height);
}

//获取页面大小
function VI_GetPageSize() {
    var d = document.documentElement;
    var w = window.innerWidth || self.innerWidth || (d && d.clientWidth) || document.body.clientWidth;
    var h = window.innerHeight || self.innerHeight || (d && d.clientHeight) || document.body.clientHeight;
    return [w, h];
}

(function ($) { var isMouseDown = false; var currentElement = null; var dropCallbacks = {}; var dragCallbacks = {}; var lastMouseX; var lastMouseY; var lastElemTop; var lastElemLeft; var dragStatus = {}; $.getMousePosition = function (e) { var posx = 0; var posy = 0; if (!e) var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop } return { 'x': posx, 'y': posy} }; $.updatePosition = function (e) { var pos = $.getMousePosition(e); var spanX = (pos.x - lastMouseX); var spanY = (pos.y - lastMouseY); $(currentElement).css("top", (lastElemTop + spanY)); $(currentElement).css("left", (lastElemLeft + spanX)) }; $(document).mousemove(function (e) { if (isMouseDown && dragStatus[currentElement.id] == 'on') { $.updatePosition(e); if (dragCallbacks[currentElement.id] != undefined) { dragCallbacks[currentElement.id](e, currentElement) } return false } }); $(document).mouseup(function (e) { if (isMouseDown && dragStatus[currentElement.id] == 'on') { isMouseDown = false; if (dropCallbacks[currentElement.id] != undefined) { dropCallbacks[currentElement.id](e, currentElement) } return false } }); $.fn.ondrag = function (callback) { return this.each(function () { dragCallbacks[this.id] = callback }) }; $.fn.ondrop = function (callback) { return this.each(function () { dropCallbacks[this.id] = callback }) }; $.fn.dragOff = function () { return this.each(function () { dragStatus[this.id] = 'off' }) }; $.fn.dragOn = function () { return this.each(function () { dragStatus[this.id] = 'on' }) }; $.fn.easydrag = function (allowBubbling) { return this.each(function () { if (undefined == this.id || !this.id.length) this.id = "easydrag" + (new Date().getTime()); dragStatus[this.id] = "on"; $(this).mousedown(function (e) { $(this).css("position", "absolute"); isMouseDown = true; currentElement = this; var pos = $.getMousePosition(e); lastMouseX = pos.x; lastMouseY = pos.y; lastElemTop = this.offsetTop; lastElemLeft = this.offsetLeft; $.updatePosition(e); return allowBubbling ? true : false }) }) } })(jQuery);

function ShowViewImage(currImgObj, hideObj) {
    if (hideObj == undefined || hideObj.length == 0)
        InitViewImage(currImgObj);
    else
        InitViewImage(currImgObj, hideObj);
}