/*
 * progressmodal.js
 *
 * initProgressModal( selector
 *                  ,{  message: "Loading..."
 *                    , width: "220px"
 *                    , height: "100px"
 *                    , fontsize: "20px"
 *                    , fontfamily: "Century"
 *                    , spinopts : {   // spin option ==> http://fgnass.github.io/spin.js
 *                                   lines: 12,            // The number of lines to draw
 *                                   length: 7,            // The length of each line
 *                                   width: 5,             // The line thickness
 *                                   radius: 10,           // The radius of the inner circle
 *                                   rotate: 0,            // Rotation offset
 *                                   corners: 1,           // Roundness (0..1)
 *                                   color: '#000000',     // #rgb or #rrggbb
 *                                   direction: 1,         // 1: clockwise, -1: counterclockwise
 *                                   speed: 1,             // Rounds per second
 *                                   trail: 100,           // Afterglow percentage
 *                                   opacity: 1/4,         // Opacity of the lines
 *                                   fps: 20,              // Frames per second when using setTimeout()
 *                                   zIndex: 2e9,          // Use a high z-index by default
 *                                   className: 'spinner', // CSS class to assign to the element
 *                                   top: 'auto',          // center vertically
 *                                   left: 'auto',         // center horizontally
 *                                   position: 'relative'  // element position
 *                                 }
 *                   }
 *    );
 *  displayProgressModal("div#modal", true);
 *
 */
var _progressmodal_spinner;
function initProgressModal(selector, options){
	var container = selector + " div.progressmodal-container";

	$(selector).append('<div class="progressmodal-background"></div>');
	$(selector).append('<div class="progressmodal-container"></div>');
	var spinopts = {};
	if ($.isEmptyObject(options)){
		$(container).append('<table><tr><td class="progressmodal-spin"><div id="progressmodal-spin"></div></td><td>Loading...</td></tr></table>');
		// CSS 初期化
		initProgressModalCSS(selector);
	}else{
		if ($.isEmptyObject(options['message'])){
			$(container).append('<table><tr><td class="progressmodal-spin"><div id="progressmodal-spin"></div></td><td>Loading...</td></tr></table>');
		}else{
			$(container).append('<table><tr><td class="progressmodal-spin"><div id="progressmodal-spin"></div></td><td>'+options['message']+'</td></tr></table>');
		}
		// CSS 初期化
		initProgressModalCSS(selector);
		if (!$.isEmptyObject(options['width'])){
			$(container).width(options['width']);
		}
		if (!$.isEmptyObject(options['height'])){
			$(container).height(options['height']);
		}
		if (!$.isEmptyObject(options['fontsize'])){
			$(container+" table td").css('font-size', options['fontsize']);
		}
		if (!$.isEmptyObject(options['fontfamily'])){
			$(container+" table td").css('font-family', options['fontfamily']);
		}
		if (!$.isEmptyObject(options['spinopts'])){
			spinopts = options['spinopts'];
		}
	}
	_progressmodal_spinner = new Spinner(spinopts);
	adjustProgressModalCenter(container);
	$(window).resize(function(){
		adjustProgressModalCenter(container);
	});
}
function initProgressModalCSS(selector){
	var divModalObj = new Object();
	divModalObj.display = "none";
	divModalObj.position = "fixed";
	divModalObj.width = "100%";
	divModalObj.height = "100%";
	$(selector).css(divModalObj);

	$(selector+" div.progressmodal-background").css("position", "fixed");
	$(selector+" div.progressmodal-background").css("width", "100%");
	$(selector+" div.progressmodal-background").css("height", "100%");
	$(selector+" div.progressmodal-background").css("background-color", "#000000");
	$(selector+" div.progressmodal-background").css("opacity", "0.55");
	$(selector+" div.progressmodal-background").css("filter", "alpha(opacity=55)");
	$(selector+" div.progressmodal-background").css("-ms-filter", "alpha(opacity=55)");

	$(selector+" div.progressmodal-container").css("position", "relative");
	$(selector+" div.progressmodal-container").css("width", "200px");
	$(selector+" div.progressmodal-container").css("height", "80px");
	$(selector+" div.progressmodal-container").css("background-color", "#ffffff");

	$(selector+" div.progressmodal-container table").css("border-collapse", "collapse");
	$(selector+" div.progressmodal-container table").css("border-spacing", "0");
	$(selector+" div.progressmodal-container table").css("white-space", "nowrap");
	$(selector+" div.progressmodal-container table").css("position", "relative");
	$(selector+" div.progressmodal-container table").css("height", "100%");
	$(selector+" div.progressmodal-container table").css("margin", "auto auto auto auto");

	$(selector+" div.progressmodal-container table td").css("font-size", "20px");
	$(selector+" div.progressmodal-container table td").css("font-weight", "bold");
	$(selector+" div.progressmodal-container table td").css("font-family", "'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif");

	$(selector+" div.progressmodal-container table td.progressmodal-spin").css("width", "48px");
}
// プログレスモーダル open/close
function displayProgressModal(selctor, toOpen){
	if (toOpen){
		$(selctor).fadeIn(500);
		_progressmodal_spinner.spin($('#progressmodal-spin').get(0));
	}else{
		_progressmodal_spinner.stop();
		$(selctor).fadeOut(250);
	}
}
//ウィンドウの位置をセンターに調整
function adjustProgressModalCenter(target){
	var margin_top = ($(window).height()-$(target).height())/2;
	var margin_left = ($(window).width()-$(target).width())/2;
	$(target).css({top:margin_top+"px", left:margin_left+"px"});
}