var max = 12;
var maxY = 1;
var minY = 1;
var folder = "http://www.img360.net/360sample/admin" + "/data/img/imgcube0100003";
var width = "500";
var height = "500";
var sizes = [{w:500, h:500}];

;(function($) {
    $.fn.imglotate = function(options){
    
        var mode = 0;
        var moveMode = 0;
        var cycleMode = 0;
        var gestureMode = 0;
        var zoom = 0;
        var picEl = this;
        var startX = 0;
        var startY = 0;
        var startLeft = 0;
        var startHeight = 0;
        var dragMode = 0;
        var startScale = null;
        
        var scale = 100;
        var fromScale = 0;
        var tmpScale = 0;
        var startX2 = 0;
        var startY2 = 0;
        var centerX = 0;
        var centerY = 0;
        var dbTapFlg = 0;
        
        var scrollStartX = 0;
        var scrollStartY = 0;
        
        var loadedImageCount = 0;
        
        //引数を設定する
        var defaults = {
            max:1,
            maxY:1,
            minY:1,
            moveX:20,
            moveY:20,
            folder:"img",
            maxZoom: 2,
            isMobile: false,
            scale:100,
            sizes: [{w:500, h:750}, {w:1000, h:1500}, {w:1500, h:2250}, {w:2832, h:4225}]
        };
        var setting = $.extend(defaults, options);
        
        //data-img-lotate-folder属性があればsetting.folderを書き換える
        if ($(picEl).data("imgLotateFolder")) {
            setting.folder = $(picEl).data("imgLotateFolder");
        }
        
        var curNo = 1;
        var curNoY = 1;
        
        //画面リサイズに対応
        var timer = false;
		$(window).resize(function() {
			if (timer !== false) {
				clearTimeout(timer);
			}
			timer = setTimeout(function() {
				//リロードする
				//リサイズ時の再描画
				/*
				var w = $(picEl).width();
				var h = 500 * (w / 500);
				$(picEl).height(h);
				*/
				
				//alert($(picEl).width());
				if (500 >= 500) {
					if ($(picEl).parent("div").width() > 543) {
						$(picEl).width(543);
					} else {
						$(picEl).width($(picEl).parent("div").width());
					}
					var w = $(picEl).width();
					var h = 500 * (w / 500);
					$(picEl).height(h);
					//alert(w);
				} else {
					if (500 > 543) {
						$(picEl).height(543);
					}
					var h = $(picEl).height();
					var w = 500 * (h / 500);
					$(picEl).width(w);
				}
				
				sizes = [{w:w, h:h}];
        	
	        	//回転用エリア
	        	$(cycleArea).css("width", $(picEl).width() + "px");
	        	
	        	//拡大・縮小エリア
	        	if (isTouch && !isGesture) {
	        		$(html).css("width", $(picEl).width() + "px");
		        }
	        
			}, 200);
		});
        
        //画像描画関数
        function printImage() {
            //alert ("url(" + setting.folder + "/" + zoom + "/" + curNoY + " (" + curNo + ").JPG" + ")") ;
            //$("#testInput").val("url(" + setting.folder + "/" + zoom + "/" + curNoY + " (" + curNo + ").JPG" + ")");
            //$(picEl).css("background-image", "url('" + setting.folder + "/" + zoom + "/" + curNoY + " (" + curNo + ").JPG" + "')");
            $(picEl).find(".preloadArea").addClass("img360HideVisible");
            $(picEl).find(".preloadArea_" + curNoY + "_" + curNo).removeClass("img360HideVisible");
            //画像の位置を計算
            //var tmp = $(picEl).css("background-position");
            //var tmpAry = tmp.split(" ");
            var tmpL = $(picEl).find(".preloadArea").css("left");
            var tmpT = $(picEl).find(".preloadArea").css("top");
            var tmpAry = [tmpL, tmpT];
            startLeft = tmpAry[0].replace("px", "");
            startLeft = startLeft.replace("%", "");
            startHeight = tmpAry[1].replace("px", "");
            startHeight = startHeight.replace("%", "");
            
             //比率を計算して、表示するサイズを変更する
            var tmpZoom = zoom;
            if (isGesture) {
            	tmpZoom = 0;
            }
            
            var diffX = (centerX - startLeft) / (fromScale / 100) * (scale / 100);
            var tmpX = centerX - diffX;
            var tmpXWidth = tmpX + setting.sizes[0].w * (scale / 100) - $(picEl).width();
            
            //var tmpXWidth = centerX + ((setting.sizes[0].w * (scale / 100)) / 2) - $(picEl).width();
            //var tmpX = centerX - ((setting.sizes[0].w * (scale / 100)) / 2);
            //alert(tmpXWidth);
            if (tmpX > 0) {
            	tmpX = 0;
            	//alert(1);
            } else if (tmpXWidth < 0) {
            	tmpX = tmpX - tmpXWidth;
            	//alert(2);
            }
            
            var diffY = (centerY - startHeight) / (fromScale / 100) * (scale / 100);
            var tmpY = centerY - diffY;
            var tmpYHeight = tmpY + setting.sizes[0].h * (scale / 100) - $(picEl).height();
            
            //var tmpYHeight = centerY + ((setting.sizes[0].h * (scale / 100)) / 2) - $(picEl).height();
            //var tmpY = centerY - ((setting.sizes[0].h * (scale / 100)) / 2);
            if (tmpY > 0) {
            	tmpY = 0;
            } else if (tmpYHeight < 0) {
            	tmpY = tmpY - tmpYHeight;
            }
            //$(picEl).css("background-position", tmpX + 'px ' + tmpY + 'px');
            //$(picEl).css("background-size", scale + '% ' + scale + '%');
            $(picEl).find(".preloadArea").css("left", (tmpX / (scale / 100) * - 1) + 'px');
            $(picEl).find(".preloadArea").css("top", (tmpY / (scale / 100) * - 1) + 'px');
            $(picEl).find(".preloadArea").css("transform", "scale(" + scale / 100 + ")");
        }
        
        //タッチができる環境か判定
        var isTouch = ('ontouchstart' in window);
        //ジェスチャーができる環境か判定
        var isGesture = ('ongesturestart' in window);
        //縦回転できるか
        var yFlg = (setting.minY < 1 || setting.maxY > 1);
        
        if (isGesture) {
        	//zoom = setting.maxZoom;
        }

        //表示状態の確認
        if ($(picEl).is(':visible')) {
            
            //回転用エリアの表示
            if (yFlg) {
        		var cycleArea = $('<div id="imglotate_area" class="imglotate_y_area" style="margin: 0 auto; width: ' + $(picEl).width() + 'px;">&nbsp;</div>').insertAfter(this);
        	} else {
        		var cycleArea = $('<div id="imglotate_area" class="imglotate_area" style="margin: 0 auto; width: ' + $(picEl).width() + 'px;">&nbsp;</div>').insertAfter(this);
        	}
        	
        	cycleArea.on("touchstart mousedown", this, function(e){
	            cycleMode = 1;
	            if (!isTouch) {
	                scrollStartX = e.clientX;
	                scrollStartY = e.clientY;
	            } else {
                    scrollStartX = e.originalEvent.changedTouches[0].clientX;
                    scrollStartY = e.originalEvent.changedTouches[0].clientY;
                }
	            //var tmp = $(picEl).css("background-position");
	            var tmpL = $(picEl).find(".preloadArea").css("left");
	            var tmpT = $(picEl).find(".preloadArea").css("top");
	            var tmpAry = [tmpL, tmpT];
	            //var tmpAry = tmp.split(" ");
	            startLeft = tmpAry[0].replace("px", "");
	            startLeft = startLeft.replace("%", "");
	            startHeight = tmpAry[1].replace("px", "");
	            startHeight = startHeight.replace("%", "");
	            
	            return false;
	        })

	        cycleArea.on("touchmove mousemove", null, function(e){
	            //回転のみ
	            if (gestureMode != 1 && cycleMode == 1) {
	                var x;
	                var y;
	                if (!isTouch) {
	                    x = e.clientX;
	                    y = e.clientY;
	                } else {
	                    x = e.originalEvent.changedTouches[0].clientX;
	                    y = e.originalEvent.changedTouches[0].clientY;
	                }
	            
	                //画像の回転
	                //X座標
	                if (scrollStartX + setting.moveX < x) {
	                    scrollStartX += setting.moveX;
	                    curNo++;
	                    moveMode = 1;
	                    if (curNo > setting.max) {
	                        curNo = 1;
	                    }
	                } else if (scrollStartX - setting.moveX > x) {
	                    scrollStartX -= setting.moveX;
	                    curNo--;
	                    moveMode = 1;
	                    if (curNo < 1) {
	                        curNo = setting.max;
	                    }
	                }
	                $("#aaa").val(curNo);
	                $("#bbb").val(scrollStartX);
	                
	                //Y座標
	                //alert((scrollStartY + " - " + $(this).height()) + " - " + setting.moveY + " < " + y);
	                if (scrollStartY + setting.moveY < y) {
	                    scrollStartY += setting.moveY;
	                    curNoY++;
	                    moveMode = 1;
	                    if (curNoY > setting.maxY) {
	                        //curNoY = 1;
	                        curNoY = setting.maxY;
	                    }
	                } else if (scrollStartY - setting.moveY > y) {
	                
	                    scrollStartY -= setting.moveY;
	                    curNoY--;
	                    moveMode = 1;
	                    if (curNoY < setting.minY) {
	                        //curNoY = setting.maxY;
	                        curNoY = setting.minY;
	                    }
	                }
	                //$(picEl).css("background-image", "url('" + setting.folder + "/" + zoom + "/" + curNoY + " (" + curNo + ").JPG" + "')");
	                $(picEl).find(".preloadArea").addClass("img360HideVisible");
                	$(picEl).find(".preloadArea_" + curNoY + "_" + curNo).removeClass("img360HideVisible");
	                if (isTouch && isGesture) {
	                    //$(picEl).css("background-size", scale + '% ' + scale + '%');
	                } else if (isTouch) {
		            	//$(picEl).css("background-size", setting.sizes[zoom].w + 'px ' + setting.sizes[zoom].h + 'px');
		            }
	            }
	            return false;
	        });
	        
	        cycleArea.on("mouseup", null, function(e){
	            cycleMode = 0;
	        });
	        
	        cycleArea.on("touchend", null, function(e){
	            cycleMode = 0;
	            
	            //回転させずに手を離したか判定
	            if (moveMode == 0) {
		            var x;
	                var y;
	                if (!isTouch) {
	                    x = e.clientX;
	                    y = e.clientY;
	                } else {
	                    x = e.originalEvent.changedTouches[0].clientX;
	                    y = e.originalEvent.changedTouches[0].clientY;
	                }
	                if (x > $(this).offset().left + ($(this).width() / 2)) {
	                    curNo++;
	                    if (curNo > setting.max) {
	                        curNo = 1;
	                    }
	                } else {
	                	curNo--;
	                    if (curNo < 1) {
	                        curNo = setting.max;
	                    }
	                }
	                //$(picEl).css("background-image", "url('" + setting.folder + "/" + zoom + "/" + curNoY + " (" + curNo + ").JPG" + "')");
	                $(picEl).find(".preloadArea").addClass("img360HideVisible");
                	$(picEl).find(".preloadArea_" + curNoY + "_" + curNo).removeClass("img360HideVisible");
	            }
	            
	            moveMode = 0;
	        });
	        
	        cycleArea.on("click", null, function(e){
	        	//回転させずに手を離したか判定
	            if (moveMode == 0) {
		        	var x;
	                var y;
	                if (!isTouch) {
	                    x = e.clientX;
	                    y = e.clientY;
	                } else {
	                    x = e.originalEvent.changedTouches[0].clientX;
	                    y = e.originalEvent.changedTouches[0].clientY;
	                }
	                if (x > $(this).offset().left + ($(this).width() / 2)) {
	                    curNo++;
	                    if (curNo > setting.max) {
	                        curNo = 1;
	                    }
	                } else {
	                	curNo--;
	                    if (curNo < 1) {
	                        curNo = setting.max;
	                    }
	                }
	                //$(picEl).css("background-image", "url('" + setting.folder + "/" + zoom + "/" + curNoY + " (" + curNo + ").JPG" + "')");
	                $(picEl).find(".preloadArea").addClass("img360HideVisible");
                	$(picEl).find(".preloadArea_" + curNoY + "_" + curNo).removeClass("img360HideVisible");
		        }
	            
	            moveMode = 0;
	        
	        });
	        
	        
	        //Android用拡大・縮小エリアの表示
	        if (isTouch && !isGesture) {
	        	var html = '<div id="big_small_area" style="margin: 0 auto; width: ' + $(picEl).width() + 'px;"></div>';
	        	if (yFlg) {
	        		var htmlB = $('<div id="big_area" class="big_y_area">&nbsp;</div>');
	        		var htmlS = $('<div id="small_area" class="small_y_area">&nbsp;</div>');
	        	} else {
	        		var htmlB = $('<div id="big_area" class="big_area">&nbsp;</div>');
	        		var htmlS = $('<div id="small_area" class="small_area">&nbsp;</div>');
	        	}
	        	
        		var resizeArea = $(html).insertAfter(this);
        		
        		htmlB.bind("click", function(e){
        				centerX = $(picEl).width() / 2;
            			centerY = $(picEl).height() / 2;
        		 
                        if (scale < ((setting.maxZoom + 1) * 100)) {
                        	fromScale = scale;
                            scale += 30;
                            printImage();
                        }
                    });
                var resizeBigArea = $("#big_small_area").append(htmlB);
        		
        		htmlS.bind("click", function(e){ 
        				centerX = $(picEl).width() / 2;
            			centerY = $(picEl).height() / 2;
        		
                        if (scale > 100) {
                        	fromScale = scale;
                            scale -= 30;
                            printImage();
                        }
                    });
                   var resizeSmallArea = $("#big_small_area").append(htmlS);
        	}
            
            //プリロード処理
            //var preloadArea = $('<img class="preloadArea" width="' + $(picEl).width() + '" height="' + $(picEl).height() + '" style="z-index: 0;">').appendTo(this);
            var dialogArea = $('<div class="preloadDialog" style="display: none;">Image Loading... ' + loadedImageCount + '/' + setting.max + '</div>').insertAfter(this);
            //プリロード中ダイアログ
			dialogArea.dialog({
				autoOpen: false,
				title: '',
				closeOnEscape: false,
				modal: true,
				width:"auto",
				height:"80",
				resizable:false,
				open: function(event, ui){
			        $('.ui-dialog-titlebar').hide();;
				    $(".ui-dialog-titlebar-close").hide();
				}
			});
			
			$(dialogArea).dialog('open');
			
			var visibility = "";
			for (loadedImageCount = 1; loadedImageCount <= setting.max; loadedImageCount++) {
				//alert((loadedImageCount + 1));
				
				
				var preloadArea = $('<img class="' + visibility + ' preloadArea preloadArea_' + curNoY + '_' + loadedImageCount + '" width="' + $(picEl).width() + '" height="' + $(picEl).height() + '" style="z-index: 0; position: absolute; transition: transform 0s default, top 0s default, left 0s default;">').appendTo(this);
        		visibility = "img360HideVisible";
        		$(preloadArea).attr("src", setting.folder + "/" + zoom + "/" + curNoY + " (" + loadedImageCount + ").JPG");
			}
			
			$(dialogArea).dialog('close');
			
			/*
			$(preloadArea).on("load", function(){
			
		      	loadedImageCount++;
		      	$(dialogArea).text('Image Loading... ' + loadedImageCount + '/' + setting.max);
		      	if (loadedImageCount < setting.max){
					setTimeout(loadImages, 10);
		      	} else {
		      		//$(picEl).css("background-image", "url('" + setting.folder + "/" + zoom + "/" + curNoY + " (1).JPG" + "')");
		      		$(dialogArea).dialog('close');
		      		setTimeout(hidepPreloadArea, 0);
		      		//preloadArea.hide();
		      	}
		    });
			
			$(dialogArea).dialog('open');
			
			setTimeout(loadImages, 10);
			*/
        }
        
        function loadImages() {
        	if ((loadedImageCount + 1) <= setting.max) {
        		//alert((loadedImageCount + 1));
        		$(preloadArea).attr("src", setting.folder + "/" + zoom + "/" + curNoY + " (" + (loadedImageCount + 1) + ").JPG");
        	}
        }
        
        function hidepPreloadArea() {
        	preloadArea.hide();
        }
        
        /*
        $(picEl).on("dblclick", this, function(e){
            if (dragMode == 1) {
                dragMode = 0;
                $(picEl).css("cursor", "pointer");
            } else {
                dragMode = 1;
                $(picEl).css("cursor", "move");
            }
            return false;
        })
        */
        
        $(picEl).on("touchstart mousedown", this, function(e){
        	
        	moveMode = 0;
            
            //拡大時か判定
            if (zoom > 0 || scale > 100) {
            
	            mode = 1;
	            if (!isTouch) {
	                startX = e.clientX;
	                startY = e.clientY;
	            } else {
	                startX = e.originalEvent.changedTouches[0].clientX;
	                startY = e.originalEvent.changedTouches[0].clientY;
	                
	                if (e.originalEvent.changedTouches.length > 1) {
	                	//2本目の指
	                	startX2 = e.originalEvent.changedTouches[1].clientX;
	                	startY2 = e.originalEvent.changedTouches[1].clientY;
	                }
	                
	            }
	            var tmp = $(picEl).css("background-position");
	            var tmpL = $(picEl).find(".preloadArea").css("left");
            	var tmpT = $(picEl).find(".preloadArea").css("top");
            	var tmpAry = [tmpL, tmpT];
	            //var tmpAry = tmp.split(" ");
	            startLeft = tmpAry[0].replace("px", "");
	            startLeft = startLeft.replace("%", "");
	            startHeight = tmpAry[1].replace("px", "");
	            startHeight = startHeight.replace("%", "");
	            
	        } else {
            	//未拡大時
            	cycleMode = 1;
	            if (!isTouch) {
	                scrollStartX = e.clientX;
	                scrollStartY = e.clientY;
	            } else {
                    scrollStartX = e.originalEvent.changedTouches[0].clientX;
                    scrollStartY = e.originalEvent.changedTouches[0].clientY;
                }
	            var tmp = $(picEl).css("background-position");
	            var tmpL = $(picEl).find(".preloadArea").css("left");
	            var tmpT = $(picEl).find(".preloadArea").css("top");
	            var tmpAry = [tmpL, tmpT];
	            //var tmpAry = tmp.split(" ");
	            startLeft = tmpAry[0].replace("px", "");
	            startLeft = startLeft.replace("%", "");
	            startHeight = tmpAry[1].replace("px", "");
	            startHeight = startHeight.replace("%", "");
            }
            
            return false;
        })

        $(document).on("touchmove mousemove", null, function(e){
            //移動のみに変更
            if (gestureMode != 1 && mode == 1 && (zoom > 0 || scale > 100)) {
            	//未拡大時
                var x;
                var y;
                if (!isTouch) {
                    x = e.clientX;
                    y = e.clientY;
                } else {
                    x = e.originalEvent.changedTouches[0].clientX;
                    y = e.originalEvent.changedTouches[0].clientY;
                }
                
                //画像の移動
                var tmpZoom = zoom;
	            if (isGesture) {
	            	tmpZoom = 0;
	            }
	            
                var tmpX = 0;
                if ((parseInt(startLeft) + (x - startX)) > 0) {
                    tmpX = 0;
                } else if ((parseInt(startLeft) + (x - startX)) < (0 - ((setting.sizes[tmpZoom].w * (scale / 100)) - $(picEl).width()))) {
                    tmpX = ($(picEl).width() - (setting.sizes[tmpZoom].w * (scale / 100)));
                } else {
                    tmpX = (parseInt(startLeft) + (x - startX));
                }
                
                var tmpY = 0;
                if ((parseInt(startHeight) + (y - startY)) > 0) {
                    tmpY = 0;
                } else if ((parseInt(startHeight) + (y - startY)) < (0 - ((setting.sizes[tmpZoom].h * (scale / 100)) - $(picEl).height()))) {
                    tmpY = ($(picEl).height() - (setting.sizes[tmpZoom].h * (scale / 100)));
                } else {
                    tmpY = (parseInt(startHeight) + (y - startY));
                }
                moveMode = 1;
                //$(picEl).css("background-position", tmpX + 'px ' + tmpY + 'px');
                $(picEl).find(".preloadArea").css("left", tmpX + 'px');
                $(picEl).find(".preloadArea").css("top", tmpY + 'px');
            } else if (gestureMode != 1 && cycleMode == 1 && (zoom == 0 && scale == 100)) {
            	//拡大時
                var x;
                var y;
                if (!isTouch) {
                    x = e.clientX;
                    y = e.clientY;
                } else {
                    x = e.originalEvent.changedTouches[0].clientX;
                    y = e.originalEvent.changedTouches[0].clientY;
                }
            
                //画像の回転
                //X座標
                if (scrollStartX + setting.moveX < x) {
                    scrollStartX += setting.moveX;
                    curNo++;
                    moveMode = 1;
                    if (curNo > setting.max) {
                        curNo = 1;
                    }
                } else if (scrollStartX - setting.moveX > x) {
                    scrollStartX -= setting.moveX;
                    curNo--;
                    moveMode = 1;
                    if (curNo < 1) {
                        curNo = setting.max;
                    }
                }
                $("#aaa").val(curNo);
                $("#bbb").val(scrollStartX);
                
                //Y座標
                //alert((scrollStartY + " - " + $(this).height()) + " - " + setting.moveY + " < " + y);
                if (scrollStartY + setting.moveY < y) {
                    scrollStartY += setting.moveY;
                    curNoY++;
                    moveMode = 1;
                    if (curNoY > setting.maxY) {
                        //curNoY = 1;
                        curNoY = setting.maxY;
                    }
                } else if (scrollStartY - setting.moveY > y) {
                
                    scrollStartY -= setting.moveY;
                    curNoY--;
                    moveMode = 1;
                    if (curNoY < setting.minY) {
                        //curNoY = setting.maxY;
                        curNoY = setting.minY;
                    }
                }
                //$(picEl).css("background-image", "url('" + setting.folder + "/" + zoom + "/" + curNoY + " (" + curNo + ").JPG" + "')");
                $(picEl).find(".preloadArea").addClass("img360HideVisible");
                $(picEl).find(".preloadArea_" + curNoY + "_" + curNo).removeClass("img360HideVisible");
                if (isTouch && isGesture) {
                    //$(picEl).css("background-size", scale + '% ' + scale + '%');
                } else if (isTouch) {
	            	//$(picEl).css("background-size", setting.sizes[zoom].w + 'px ' + setting.sizes[zoom].h + 'px');
	            }
            }
        });
        
        $(document).on("touchend mouseup", null, function(e){
            mode = 0;
            cycleMode = 0;
        });
        
        $(picEl).on("mouseup", null, function(e){
            if (moveMode == 0) {
            	$(cycleArea).toggle();
            	$(resizeArea).toggle();
            }
            moveMode = 0;
            
        });
        
        $(picEl).on("touchend", null, function(e){
	            if (moveMode == 0) {
	            	$(cycleArea).toggle();
	            	$(resizeArea).toggle();
	            }
        });
        
        $(picEl).on('mousewheel', function(event) {
        
        	centerX = event.offsetX;
            centerY = event.offsetY;
            
            //alert(centerX + ", " + centerY);
        
        
            if (event.deltaY > 0 && scale < ((setting.maxZoom + 1) * 100)) {
            	fromScale = scale;
                scale += 10;
                printImage();
            } else if(event.deltaY < 0 && scale >100) {
            	fromScale = scale;
                scale -= 10;
                printImage();
            }
            
            return false;
        });
        
        $(document).on("keydown", null, function(e){
                //画像の回転
                //X座標
                //→
                if (e.keyCode == 39) {
                    curNo++;
                    if (curNo > setting.max) {
                        curNo = 1;
                    }
                }
                //←
                if (e.keyCode == 37) {
                    curNo--;
                    if (curNo < 1) {
                        curNo = setting.max;
                    }
                }
                
                //Y座標
                //↑
                if (e.keyCode == 38) {
                    curNoY--;
                    if (curNoY < setting.minY) {
                        //curNoY = setting.maxY;
                        curNoY = setting.minY;
                    }
                }
                //↓
                if (e.keyCode == 40) {
                    curNoY++;
                    if (curNoY > setting.maxY) {
                        curNoY = setting.maxY;
                    }
                }
                
                //$(picEl).css("background-image", "url('" + setting.folder + "/" + zoom + "/" + curNoY + " (" + curNo + ").JPG" + "')");
                $(picEl).find(".preloadArea").addClass("img360HideVisible");
                $(picEl).find(".preloadArea_" + curNoY + "_" + curNo).removeClass("img360HideVisible");
                if (isTouch && isGesture) {
            		$(picEl).css("background-size", scale + '% ' + scale + '%');
            	} else if (isTouch) {
	            	$(picEl).css("background-size", setting.sizes[zoom].w + 'px ' + setting.sizes[zoom].h + 'px');
	            }
	            
	            if (yFlg && (e.keyCode == 38 || e.keyCode == 40)) {
	            	return false;
	            }
        })
        
        //2本指の対応
        $(picEl).on("gesturestart", this, function(e){
            if (isGesture) {
                gestureMode = 1;
                //2本の指の中心点を計算
                centerX = (startX + startX2) / 2;
                centerY = (startY + startY2) / 2;
                $("#aaa").val(centerX + ", " + centerY);
                
                //var tmp = $(picEl).css("background-position");
	            //var tmpAry = tmp.split(" ");
	            var tmpL = $(picEl).find(".preloadArea").css("left");
            	var tmpT = $(picEl).find(".preloadArea").css("top");
            	var tmpAry = [tmpL, tmpT];
	            startLeft = tmpAry[0].replace("px", "");
	            startLeft = startLeft.replace("%", "");
	            startHeight = tmpAry[1].replace("px", "");
	            startHeight = startHeight.replace("%", "");
                
            }
        })
        
        $(picEl).on("gesturechange", this, function(e){
            if (isGesture) {
                var eo = e.originalEvent;
                var gestureScale = eo.scale;
                tmpScale = scale * gestureScale;
                
                if (tmpScale < 100) {
                	tmpScale = 100;
                } else if (tmpScale > ((setting.maxZoom + 1) * 100)) {
                	tmpScale = ((setting.maxZoom + 1) * 100);
                }
                
                //比率を計算して、表示するサイズを変更する
                var tmpZoom = zoom;
	            if (isGesture) {
	            	tmpZoom = 0;
	            }
	            
                var diffX = (centerX - startLeft) / (scale / 100) * (tmpScale / 100);
	            var tmpX = centerX - diffX;
	            var tmpXWidth = tmpX + setting.sizes[0].w * (tmpScale / 100) - $(picEl).width();
	            if (tmpX > 0) {
	            	tmpX = 0;
	            	//alert(1);
	            } else if (tmpXWidth < 0) {
	            	tmpX = tmpX - tmpXWidth;
	            	//alert(2);
	            }
	            
	            var diffY = (centerY - startHeight) / (scale / 100) * (tmpScale / 100);
	            var tmpY = centerY - diffY;
	            var tmpYHeight = tmpY + setting.sizes[0].h * (tmpScale / 100) - $(picEl).height();
	            if (tmpY > 0) {
	            	tmpY = 0;
	            } else if (tmpYHeight < 0) {
	            	tmpY = tmpY - tmpYHeight;
	            }
                //$(picEl).css("background-position", tmpX + 'px ' + tmpY + 'px');
                //$(picEl).css("background-size", tmpScale + '% ' + tmpScale + '%');
                
                $(picEl).find(".preloadArea").css("left", (tmpX / (scale / 100) * - 1) + 'px');
            	$(picEl).find(".preloadArea").css("top", (tmpY / (scale / 100) * - 1) + 'px');
            	$(picEl).find(".preloadArea").css("transform", "scale(" + scale / 100 + ")");
                
                $("#bbb").val(eo.scale);
                
                moveMode = 1;
            }
        })
        
        $(picEl).on("gestureend", this, function(e){
            if (isGesture) {
                gestureMode = 0;
                scale = tmpScale;
                //$("#aaa").val(0);
            }
        })
        
        //画像をセット
        printImage();
        
        //メソッドチェーン
        return(this);
    };
})(jQuery);

jQuery(function(){
	var ob = jQuery(".imglotate-360view").get(0);
		jQuery(ob).attr("style", "background-repeat: no-repeat; cursor: pointer; margin: 0 auto; overflow: hidden; position: relative");
//高さをセットする
	if (width >= height) {
		if (jQuery(ob).width() > 543) {
			jQuery(ob).width(543);
		}
		var w = jQuery(ob).width();
		var h = height * (w / width);
		jQuery(ob).height(h);
	} else {
		if (height > 543) {
			jQuery(ob).height(543);
		} else {
			jQuery(ob).height(height);
		}
		var h = jQuery(ob).height();
		var w = width * (h / height);
		jQuery(ob).width(w);
	}
	sizes = [{w:w, h:h}];

	jQuery(ob).imglotate({"max":max,"maxY":maxY,"minY":minY,"moveY":30,"folder":"http://www.img360.net/360sample/admin" + "/data/img/imgcube0100003","maxZoom":2, isMobile:false, "sizes":sizes });
	jQuery(ob).removeClass("imglotate-360view");
});