/**
 * common function
 */
(function($){
	// on DOM ready
	$(function(){

		// init rollover(rollover.js)
		setRollovers();

		// init example(jquery.example.js)
		initExample();
		
		// hide js off 
		hideJsOffElements();
		
		// show hide item control
		initShowHideControl();

		// product img modal
		initProductImgModal();

		// product search combo on top page
		initProductSearchCombo();

		// auto submit on change 
		initAutoSubmitOnChange();

		// keyrods suggestion
		initKeywordSuggest();

		/**
		 * init example
		 */
		function initExample(){
			$('.js_exmple').example(function() {
				return $(this).attr('title'); 
			});
		}

		/**
		 * hide elements for js off
		 */
		function hideJsOffElements() {
			// js off tags
			var tagsJsOff = ["span", "div"];
			// js off class (with tagJsOff)
			var classJsOff = "js_off";
			// js on class
			var classJsOn = "js_on_display_none";

			var selectors = [];
			for(var i=0;i<tagsJsOff.length;i++){
				selectors.push(tagsJsOff[i] + "." + classJsOff);
			}
			// add js on class, remove js off class
			$(selectors.join(",")).addClass(classJsOn).removeClass(classJsOff);
		}

		/**
		 * control items display(show, hide)
		 */
		function initShowHideControl() {
			// controler selector
			var controlSelector = "p#showhide_control";
			// show button selector (in control)
			var controlShowSelector = "a.showhide_control_show";
			// hide button selector (in control)
			var controlHideSelector = "a.showhide_control_hide";
			// hidden item selector (in parent of control)
			var itemHiddenSelector = "tr.showhide_item_hidden";
			
			var $control = $(controlSelector);
			if (!$control.size()) {
				// no control, return
				return;
			}
			// find hidden item in parent of control
			var $itemHidden = $control.parent().not($control).find(itemHiddenSelector);
			if (!$itemHidden.size()) {
				// no hidden item, hide control, return
				$control.hide();
				return;
			}
			// open button
			var $btnOpen = $control.find(controlShowSelector);
			// close button
			var $btnClose = $control.find(controlHideSelector);
			// open button click event
			$btnOpen.click(function(ev){
				$itemHidden.show();
				$btnOpen.hide();
				$btnClose.show();
				ev.preventDefault();
				return false;
			});
			// close button click event, click to hide
			$btnClose.click(function(ev){
				$itemHidden.hide();
				$btnOpen.show();
				$btnClose.hide();
				ev.preventDefault();
				return false;
			}).click();
		}

		/**
		 * init product img modal
		 */
		function initProductImgModal(){
			// anchors of open modal
			var $ancs = $("a.open_product_img_modal");

			// modal target, selector
			var targetId = "#product_img_modal";
			// modal inside content
			var selectorContent = "#product_img_modal_content";
			// img outer
			var selectorImgWrapper = "td";
			// current counter
			var selectorCountCurrent = "#product_img_modal_count_current";
			// total counter
			var selectorCountTotal = "#product_img_modal_count_total";
			// prev
			var selectorNaviPrev = "#product_img_modal_navi_prev";
			// next
			var selectorNaviNext = "#product_img_modal_navi_next";
			// prev, next delimiter
			var selectorNaviDelm = "#product_img_modal_navi_delm";
			// close button
			var selectorBtnClose = "#product_img_modal_close";

			// msg
			var msgContentError = '読み込みに失敗しました';
			var msgContentLoading = '<a href="#" class="nyroModalClose">キャンセル</a>';
			var msgOutside = '<div id="product_img_modal_outside">[閉じる]、もしくはグレー背景をクリックすると元に戻ります。</div>';
			
			// modal padding outside
			var outerPadding = 50;
			
			if (!$ancs.size()) {
				// no ancs, return
				return;
			}
			// img number
			var countCurrent = 1;
			var countTotal = $ancs.size();

			// content DOM
			var $content = $(selectorContent);
			// img DOM
			var $imgWrapper = $content.find(selectorImgWrapper);
			var $img = $imgWrapper.find("img");
			if(!$img.size()){
				$img = $("<img>").appendTo($imgWrapper);
			}
			// current counter DOM
			var $countCurrent = $content.find(selectorCountCurrent);
			// total counter DOM
			var $countTotal = $content.find(selectorCountTotal);
			// prev DOM
			var $naviPrev = $content.find(selectorNaviPrev);
			// next DOM
			var $naviNext = $content.find(selectorNaviNext);
			// prev, next delimiter DOM
			var $naviDelm = $content.find(selectorNaviDelm);
			// close button DOM
			var $btnClose = $content.find(selectorBtnClose);

			// prev action
			$naviPrev.click(function(evt){
				// if have prev, decrement current, update
				if(1 < countCurrent) {
					countCurrent -= 1;
					_updateModal();
				}
				evt.preventDefault();
				return false;
			});
			// next action
			$naviNext.click(function(evt){
				// if have next, increment current, update
				if(countCurrent < countTotal) {
					countCurrent += 1;
					_updateModal();
				}
				evt.preventDefault();
				return false;
			});

			// anchor action
			$ancs.each(function(idx){
				var $anc = $(this);
				$anc.click(function(evt){
					// set counter
					countCurrent = idx + 1;
					// update
					_updateModal();

					// width with y scrollbar
					var widthWithScrollbar;
					
					// open modal
					$.nyroModalManual({
						contentError: msgContentError,
						contentLoading: msgContentLoading,
						padding: outerPadding,
						title: '',
						closeButton:  '',
						// targert DOM id hash
						url: targetId,
						// after fill content
						endFillContent: function(modal, settings) {
							// if having y scrollbar, add scrollbar width, resize
							modal.contentWrapper.show();
							var isResize = _hasYScrollbar(modal.content);
							// keep width with y scrollbar
							widthWithScrollbar = this.width + getScrollbarWidth();
							modal.contentWrapper.hide();
							// append outside msg
							var $msgOutside = $(msgOutside);
							// outside msg click
							$msgOutside.click(function(evt){
								$.nyroModalRemove();
								evt.preventDefault();
								return false;
							});
							modal.wrapper.append($msgOutside);
							if(isResize){
								$.nyroModalSettings({
									width: widthWithScrollbar
								});
							}
						},
						// end reisize
						endResize: function(modal, settings) {
							// keep originarl endResize
							var endResizeFunc = this.endResize;
							// if having y scrollbar, set width with y scrollbar, resize, restore original endResize
							var isResize = _hasYScrollbar(modal.content);
							if(isResize){
								$.nyroModalSettings({
									width: widthWithScrollbar,
									endResize: function(modal, settings) {this.endResize = endResizeFunc;}
								});
							}
						},
						debug: false
					});
					evt.preventDefault();
					return false;
				});
			});
			
			/**
			 * update product img modal(image src, counter)
			 */
			function _updateModal(){
				// update img src with anchor href
				$img.attr("src", $ancs.eq(countCurrent - 1).attr("href"));

				// update counter
				$countCurrent.html(countCurrent);
				$countTotal.html(countTotal);

				// hide navi
				$naviPrev.hide();
				$naviNext.hide();
				$naviDelm.hide();

				// if has prev, show prev
				if (1 < countCurrent){
					$naviPrev.show();
				}
				// if has prev, show next
				if (countCurrent < countTotal) {
					// if has prev(both), show delmiter
					if (1 < countCurrent){
						$naviDelm.show();
					}
					$naviNext.show();
				}
			}

			/**
			 * modal content has y scrollbar or not
			 */
			function _hasYScrollbar(target){
				return (target.height() < target.children().height());
			}
			
		}

		/**
		 * get scrollbar width
		 */
		function getScrollbarWidth() {
			// if already get, return value
			var scrollbarWidth = $(window).data("scrollbarWidth");
			if (scrollbarWidth != undefined) {
				return scrollbarWidth;
			}
			var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
			// Append our div, do our calculation and then remove it
			$('body').append(div);
			var w1 = $('div', div).innerWidth();
			div.css('overflow-y', 'scroll');
			var w2 = $('div', div).innerWidth();
			scrollbarWidth = w1 - w2;
			$(div).remove();
			// keep data on window
			$(window).data("scrollbarWidth", scrollbarWidth);
			return scrollbarWidth;
		}

		/**
		 * init product search combo form
		 */
		function initProductSearchCombo(){
			// combination form id
			var comboSelector = "#product_search_combo";

			// search form ids
			var searchSelectors = [
				"#product_search_name",
				"#product_search_ingredient",
				"#product_search_category",
				"#product_search_keyword"
			];

			// type input radio selector
			var typeSelector = "input:radio[name='type']";

			//type value(all, generic)
			var typeAllValue = "all";
			var typeGenValue = "gen";

			// all forms (cache)
			var $forms = $("form");

			// combo form
			var $comboForm = $forms.filter(comboSelector);
			if(!$comboForm.size()){
				// no combo form, return
				return;
			}
			// prevent combo form submit
			$comboForm.submit(function(evt){
				evt.preventDefault;
				return false;
			});

			// search forms
			var $searchForms = $forms.filter(searchSelectors.join(","));
			if(!$searchForms.size()){
				// no search form, return
				return;
			}

			// type radios in all search forms
			var $searchTypes = $searchForms.find(typeSelector);

			// type radios in combo form
			var $comboType = $comboForm.find(typeSelector);
			$comboType.change(function(evt){
				_updateTypes();
			});

			// update first time
			_updateTypes();

			/**
			 * update types
			 */
			function _updateTypes(){
				// default type all
				var checkedValue = typeAllValue;
				// checked type
				var $checkedType = $comboType.filter(":checked").eq(0);
				if($checkedType.size()){
					// if checked
					checkedValue = $checkedType.val();
				}else{
					// no checked, update same value in combo type
					$comboType.filter("[value='" + checkedValue + "']").attr("checked", "checked");
				}
				// update same value in search type
				$searchTypes.filter("[value='" + checkedValue + "']").attr("checked", "checked");
			}
		}

		/**
		 * init auto submit on change form elem
		 */
		function initAutoSubmitOnChange(){
			var $elems = $("input, textarea, select").filter(".auto_submit_on_change");
			$elems.change(function(evt){
				$(this).parents("form").submit();
				evt.preventDefault;
				return false;
			});
		}

		/**
		 * init keyword suggest input
		 */
		function initKeywordSuggest() {
			// text input
			var $input = $("#product_search_keyword_key");
			// keywords json path
			var url = "/common/js/keywords_json.php";
			// check interbal(IME)
			var loopCheckInterval = 1000;

			// window load action
			$(window).load(function(){
				//alert("load");
				//get json
				$.getJSON(
					url,
					function(data, textStatus){
						// build auto complete
						$input.autocompleteArray(data.keywords, {
							minChars: 1,
							delay: 1000,
							maxItemsToShow: 20,
							autoFill: false,
							matchCase: false,
							matchSubset: true,
							matchContains: false,
							mustMatch: false,
							selectFirst: false,
							selectOnly: false,
							lineSeparator: "\n",
							cellSeparator: "|",
							inputClass: "ac_input",
							resultClass: "ac_result",
							loadingClass: "ac_loading",
							formatItem: function (row, i, num) { return row[1]; },
							onItemSelect: function (li) { $input.val(li.extra[0]).focus(); },
							onFindValue: function (li) {}
						});

						//interval
						if (loopCheckInterval) {
							return;
						}

						//interval timeout id
						var timeoutId = null;
						
						//bind focus, unfocus
						$input
							.bind('focus.autocomplete_loopcheck', startLoopCheck)
							.bind('blur.autocomplete_loopcheck', stopLoopCheck)
						;

						//start check
						function startLoopCheck() {
							stopLoopCheck();
							//emulate key action
							$input.triggerHandler("keydown");
							//set next timeout
							timeoutId = setTimeout(startLoopCheck, loopCheckInterval);
						}
						//stop check
						function stopLoopCheck() {
							//clear timeout
							clearTimeout(timeoutId);
						}
					}
				);
			});
		}
	});
})(jQuery);