/**
 * by MonsterDuang
 */
;(function($) {
    /**
     * 1, 縮略圖大小和父容器大小一致
     * 2, 父容器 href 屬性為高清圖片路徑
     */
    $.fn.zoomImage = function(paras) {
        /*默認參數*/
        var defaultParas = {
            layerW: 100, // 遮罩寬度
            layerH: 100, // 遮罩高度
            layerOpacity: 0.2, // 遮罩透明度
            layerBgc: '#000', // 遮罩背景顏色
            showPanelW: 500, // 顯示放大區域寬
            showPanelH: 500, // 顯示放大區域高
            marginL: 5, // 放大區域離縮略圖右側距離
            marginT: 0 // 放大區域離縮略圖上側距離
        };

        paras = $.extend({}, defaultParas, paras);

        $(this).each(function() {
            var self = $(this).css({position: 'relative'});
            var selfOffset = self.offset();
            var imageW = self.width(); // 圖片高度
            var imageH = self.height();

           /*/ self.find('img').css({
                width: '100%',
                height: '100%'
            }); */

            // 寬放大倍數
            var wTimes = paras.showPanelW / paras.layerW;
          // 高放大倍數
            var hTimes = paras.showPanelH / paras.layerH;
            



            // 放大圖片
            var img = $('<img>').attr('src', self.attr("href")).css({
                position: 'absolute',
                left: '0',
                top: '0',
                width: imageW * wTimes,
                height: imageH * hTimes
            }).attr('id', 'big-img');

           // 遮罩
            var layer = $('<div>').css({
                display: 'none',
                position: 'absolute',
                left: '0',
                top: '0',
                backgroundColor: paras.layerBgc,
                width: paras.layerW,
                height: paras.layerH,
                opacity: paras.layerOpacity,
                border: '1px solid #ccc',
                cursor: 'crosshair'
            }).attr('id', 'big-layer');

           // 放大區域
            var showPanel = $('<div>').css({
                display: 'none',
                position: 'absolute',
                overflow: 'hidden',
                left: imageW + paras.marginL,
                top: paras.marginT,
                width: paras.showPanelW,
                height: paras.showPanelH
            }).append(img).attr('id', 'big-img-box');

            self.append(layer).append(showPanel);

            self.on('mousemove', function(e) {
                // 鼠標相對於縮略圖容器的坐標
        //       var $zoom = $("#toplayerdiv").attr("zoom"); 
               var $zoom=($("#toplayerdiv").attr("zoom") == '') ? "1" :$("#toplayerdiv").attr("zoom"); //放大縮小倍數 
               var $showbox = $(".showbox").offset(); //件為位置   
                
                var x = e.pageX - selfOffset.left;
                var y = e.pageY - $showbox.top;
                
                x=x / $zoom;
                y=y / $zoom;

                if(x <= paras.layerW / 2) {
                    x = 0;
                }else if(x >= imageW - paras.layerW / 2) {
                    x = imageW - paras.layerW;
                }else {
                    x = x - paras.layerW / 2;
                }

                if(y < paras.layerH / 2) {
                    y = 0;
                } else if(y >= imageH - paras.layerH / 2) {
                    y = imageH - paras.layerH;
                } else {
                    y = y - paras.layerH / 2;
                }

                layer.css({
                    left: x,
                    top: y
                });

                img.css({
                    left: -x * wTimes,
                    top: -y * hTimes
                });
            }).on('mouseenter', function() {
                layer.show();
                showPanel.show();
            }).on('mouseleave', function() {
                layer.hide();
                showPanel.hide();
            });
        });
    }
})(jQuery);
