var v2viewer = function(){
	this.width = 0;
	this.height = 0;
	this.page = 0;
	this.info = null;
	this.element = '';
	this.fileId = null;
	this.hash = '';
	this.shadow = 0;
	this.zoom = 100;
	this.occupancy = 0.85;  // 縦幅の画面占有率
};

v2viewer.prototype = {

	isEnable: function(){
		return document.fullscreenEnabled ||
			document.webkitFullscreenEnabled ||
			document.mozFullScreenEnabled ||
			document.msFullscreenEnabled;
	},
	
	getHash: function(){
		var l = 8;
		var c = "abcdefghijklmnopqrstuvwxyz0123456789";
		var cl = c.length;
		var r = "";
		for (var i=0; i<l; i++) {
			r += c[Math.floor(Math.random() * cl)];
		}
		return r;
	},
	
	open: function(fileId, element, w, h, hash) {
		if (!w) {
			w = 0;
		}
		if (!h) {
			h = 0;
		}
		
		if (!hash) {
			hash = this.getHash();
		}

		this.hash = hash;
		this.fileId = fileId;
		this.width = w;
		this.height = h;
		this.element = element;
		var my = this;
		
		glexa.ajax({
			action: 'glexa_viewer_api',
			withoutLoading: true,
			params: {
				api: 'open',
				file_id: fileId,
				width: w,
				height: h,
				hash: my.hash,
			},
			onSuccess: function(res) {
				// var w = res.data.size[0];
				// var h = res.data.size[1];
				//
				// if (my.width == 0) {
				// 	my.width = w;
				// }
				// if (my.height == 0) {
				// 	my.height = h;
				// }
				
				my.info = res.data;

				$(element).html(res.html);
				
				if (my.info) {
					
					$(element + ' .fast-backword-' + my.hash).off().on('click', function () {
						my.load(0);
					});
					$(element + ' .backword-' + my.hash).off().on('click', function () {
						my.load(my.page - 1);
					});
					$(element + ' .fast-forward-' + my.hash).off().on('click', function () {
						my.load(my.info.pages);
					});
					$(element + ' .forward-' + my.hash).off().on('click', function () {
						my.load(my.page + 1);
					});
					
					$('#slider-' + my.hash + ' .slider').slider({
						min : 0,
						max : my.info.pages - 1,
						step : 1,
						change : function(e, ui) {
							my.load(ui.value, true);
						},
						slide : function(e, ui) {
							my.pager(ui.value, true);
						},
					});
					
					my.load(0);
					
					$(element + ' .on-fullscreen').off().on('click', function(){
						$(element).fullscreen();
					});
					
					$(element + ' .off-fullscreen').off().on('click', function(){
						$.fullscreen.exit();
					});
					
					$(document).on('fscreenchange', function() {
						if ($.fullscreen.isFullScreen()) {
							$(element).addClass('fullscreen');
							$(element).find('[id^="panel-"], [id^="slider-"]').wrapAll('<div class="div-controller">');
						} else {
							$(element).find('[id^="panel-"]').unwrap();
							$(element).removeClass('fullscreen');
						}
					});
					
					if (!my.isEnable()) {
						$(element + ' .on-fullscreen').hide();
						$(element + ' .off-fullscreen').hide();
					}
					
				} else {
					var w = Math.min(
						$('#viewer-' + my.hash).width(),
						$(window).width()
					);
					var h = $(window).height() * my.occupancy;
					$('#viewer-' + my.hash).css('width', w + 'px');
					$('#viewer-' + my.hash).css('max-height', h + 'px');
				}
				// $(element + ' .zoom-in-' + my.hash).off().on('click', function(){
				// 	my.zoomArea(5);
				// });
				//
				// $(element + ' .zoom-out-' + my.hash).off().on('click', function(){
				// 	my.zoomArea(-5);
				// });
			},
			onError : function(res) {
				if (res.data) {
					if (res.data.error) {
						$(element).html('<div class="viewer-message">' + res.data.error + '</div>');
					}
					
					if (res.data.reload) {
						// 変換中なので間隔を空けて再挑戦
						setTimeout(
							function(){
								my.open(fileId, element, w, h, my.hash);
							},
							10000
						);
					}
				}
			}
		});
	},
	
	load: function(page, isSlider) {
		var my = this;
		
		if (page < 0) {
			page = 0;
		}
		if (page >= this.info.pages) {
			page = this.info.pages - 1;
		}
		
		this.page = page;
		var img = $('#img-' + this.hash).html('<img src="' + window.urlbase + '?action=glexa_viewer_api&file_id=' + this.fileId + '&api=load&p=' + this.page + '" style="width: 100%; max-width: 100%; background-color: white; pointer-events: none;" class="undraggable" />');
		this.pager(this.page, isSlider);//$('#panel-' + this.hash + ' input[type=text]').val((this.page+1) + '/' + this.info.pages);
		
		$('#img-' + this.hash + ' img').one('load', function(){
			
			var divWidth = Math.min(
				$('#viewer-container-' + my.hash).width(),
				$(window).width()
			);
			var docWidth = my.info.size[0];
			
			var rate = divWidth / docWidth;
			var docHeight = rate * my.info.size[1];
			var maxHeight = $(window).height() * my.occupancy;
			
			if (docHeight > maxHeight) {
				docWidth = divWidth * maxHeight / docHeight;
				docHeight = maxHeight;
			} else {
				if (docWidth > divWidth) {
					docWidth = divWidth;
				}
			}
			$('#viewer-container-' + my.hash).css('width', docWidth + 'px');
			//$('#viewer-container-' + my.hash).css('height', docHeight + 'px');
			$(img).css('height', docHeight + 'px');
			
			$(img).on('contextmenu dragstart', function(e){
				return false;
			});
		}).on('load');
		
		// if (!this.shadow) {
		// 	$('#shadow-' + this.hash).html($('#img-' + this.hash).html());
		// 	$('#shadow-' + this.hash + ' img').css('filter', 'brightness(0) invert(1)');
		// 	this.shadow = 1;
		// }
	},
	
	pager: function(page, isSlider) {
		$('#panel-' + this.hash + ' input[type=text]').val((page+1) + '/' + this.info.pages);
		$('#slider-' + this.hash + ' input[type=range]').val(page+1);
		
		if (!isSlider) {
			$('#slider-' + this.hash + ' .slider').slider('value', page);
		}
	},
	
	zoomArea: function(diff) {
		this.zoom += diff;
		$('#viewer-' + this.hash).css('zoom', this.zoom + '%');
	}
	
};