;(function ($, document, window) {
    $.pictureviewer = function (options) {
        var pictureviewer_html =    '<div id="pictureviewer">' +
                                    '<div class="content">' +
                                    '<div class="menu-bar">' +
                                    '<div class="handel close-view" title="\u5173\u95ed(esc)"></div>' +
                                    '<div class="handel maximization" title="\u6700\u5927\u5316"></div>' +
                                    '<div class="handel miniaturization hide" title="\u5c0f\u7a97\u53e3"></div>' +
                                    '<div class="clear-flex"></div>' +
                                    '</div>' +
                                    '<div class="handel-prev left" title="\u4e0a\u4e00\u5f20(\u2190)"></div>' +
                                    '<div class="picture-content">' +
                                    '<img class="item" src="">' +
                                    '</div>' +
                                    '<div class="handel-next right" title="\u4e0b\u4e00\u5f20(\u2192)"></div>' +
                                    '<div class="counter">' +
                                    '<span class="num"></span> of <span class="total"></span>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>';
        //init param
        var $images = options.images,
            $initimageindex = options.initimageindex,
            $scrollswitch = options.scrollswitch;

        if (!$images || !$images.length) return;
        if (!$initimageindex) $initimageindex = 1;
        var $nowimageindex = $initimageindex;
        //init dom
        if (!$('#pictureviewer').length) $('body').append(pictureviewer_html);
        //definition variable
        var body = $('body');
        var esc_key_code = 27;
        var left_key_code = 37;
        var right_key_code = 39;
        var $pictureviewer = $('#pictureviewer');
        var $pictureviewercontent = $pictureviewer.children('.content');
        var $cover = $pictureviewer.find('.picture-content .item');
        var $closebtn = $pictureviewer.find('.close-view');
        var $maximizationbtn = $pictureviewer.find('.maximization');
        var $miniaturizationbtn = $pictureviewer.find('.miniaturization');
        var $prevbtn = $pictureviewer.find('.handel-prev');
        var $nextbtn = $pictureviewer.find('.handel-next');
        var $num = $pictureviewer.find('.counter .num');
        var $total = $pictureviewer.find('.counter .total');
        var defaultviewwidth = $pictureviewercontent.css('width');
        var defaultviewheight = $pictureviewercontent.css('height');
        var $imagestotal = $images.length;
        //view is show
        var viewisshow = function viewisshow() {
            return $pictureviewer.is(':visible');
        };
        //lock body
        var lockbody = function lockbody() {
            return body.css('overflow', 'hidden');
        };
        //unlock body
        var unlockbody = function unlockbody() {
            return body.css('overflow', 'auto');
        };
        //show view
        var showview = function showview() {
            $pictureviewer.show();
            lockbody();
        };
        //hide view
        var hideview = function hideview() {
            $pictureviewer.hide();
            $maximizationbtn.show();
            $miniaturizationbtn.hide();
            $pictureviewercontent.css({ 'width': defaultviewwidth, 'height': defaultviewheight });
            unlockbody();
        };
        //change image
        var changeimage = function changeimage(index) {
            $cover.attr('src', $images[index]);
            $nowimageindex = index;
            changeimagenum();
        };
        //change image num
        var changeimagenum = function changeimagenum() {
            $num.text($nowimageindex + 1);
        };
        //to prev image
        var toprevimage = function toprevimage() {
            return changeimage($nowimageindex === 0 ? $imagestotal - 1 : $nowimageindex - 1);
        };
        //to next image
        var tonextimage = function tonextimage() {
            return changeimage($nowimageindex === $imagestotal - 1 ? 0 : $nowimageindex + 1);
        };
        //init state
        showview();
        changeimage($initimageindex - 1);
        $total.text($imagestotal);
        //handle close click
        $closebtn.on('click', hideview);
        //handel maximization click
        $maximizationbtn.on('click', function () {
            $(this).hide();
            $miniaturizationbtn.show();
            $pictureviewercontent.css({ 'width': '100%', 'height': '100%' });
        });
        //handel miniaturization click
        $miniaturizationbtn.on('click', function () {
            $(this).hide();
            $maximizationbtn.show();
            $pictureviewercontent.css({ 'width': defaultviewwidth, 'height': defaultviewheight });
        });
        //handle document keydown
        $(document).on('keydown', function (event) {
            if (!viewisshow()) return;
            var keycode = event.keycode;

            if (keycode === esc_key_code) hideview();
            if (keycode === left_key_code) toprevimage();
            if (keycode === right_key_code) tonextimage();
        });
        //handel prev click
        $prevbtn.on('click', toprevimage);
        //handel next click
        $nextbtn.on('click', tonextimage);

        if ($scrollswitch) {
            try {
                $pictureviewercontent.mousewheel(function (event, delta) {
                    if (delta === 1) toprevimage();
                    if (delta === -1) tonextimage();
                });
            } catch (e) {
                throw 'mousewheel plugin no import!';
            }
        }
    };
})(jquery, document, window);