// Anker
$(function(){
	$('a[href^=#]').click(function(){
		var speed = 400;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});

// Header
$(function(){
  var s = $('.s_header');
  $(window).scroll(function () {
    if ( $(this).scrollTop() > 100 ) {
      s.addClass('roll');
    } else {
      s.removeClass('roll');
    }
  });
});

$(function(){
	$(".i_search").on("click", function() {
		$(".s_header .g_search").toggleClass('letsgo');
		$(".modal_menu.letsgo").toggleClass('letsgo');
		$(".i_menu_sp.active").toggleClass('active');
		return false;
	});
});

$(function() {
	$('.i_menu_sp').on('click', function(){
		$(this).toggleClass('active');
		return false;
	});
});
$(function(){
	$(".i_menu_sp").on("click", function() {
		$(".modal_menu").toggleClass('letsgo');
		$(".s_header .g_search.letsgo").toggleClass('letsgo');
		return false;
	});
});

// Slider
$('.g_slide_list_article').slick({
	slidesToShow: 1,
	infinite: true,
	autoplay: true,
	arrows: false,
	dots: true
});

$('.g_gallery').slick({
	slidesToShow: 1,
	infinite: true,
	autoplay: true,
	arrows: true,
	dots: false,
	centerMode: true,
	variableWidth: true
});

if (matchMedia('only screen and (max-width: 768px)').matches) {
$(window).load(function () {
$('.g_sub_recommend').slick({
	slidesToShow: 1,
	infinite: true,
	autoplay: true,
	arrows: true,
	dots: true,
	centerMode: true
});
});
}




// -----------------------------------------------------
// js-favorite-btn
// -----------------------------------------------------

let articleFavoriteBtns = function(){
  this.$targets = document.querySelectorAll( '.js-favorite-btn' );
  this.debug = false;
};

articleFavoriteBtns.prototype = {
  
  //log
  log: function( str, type ){
    if( this.debug ){
      if( type === 'error' ){
        console.error( str );
      } else {
        console.log( str );
      }
    }
  },
  
  //init
  init: function(){
    
    let self = this;
    
    self.log( 'favoriteBtns INIT -------------------' );
    
    if( !self.$targets.length ) {
      return;
    }
    
    for( let i = 0; i < self.$targets.length; i++ ){
      
      let $this = self.$targets[i];

      //state update
      self.get_data( $this, function( data ){
        self.update( $this, data )
      });
      
      //click
      $this.addEventListener( 'click', function(){
          self.toggle_favorite( $this );
      }, false );
    }
  },
  
  //get_data
  get_data: function( $target, callback ){
    
    let self = this;
    
    self.log( 'favoriteBtns GET DATA -------------------' );
    
    let json_url = $target.getAttribute( 'data-favorite-json-url' );
    self.log( json_url );
    if( !json_url ) return;
    let request = new XMLHttpRequest();
    request.open('GET', json_url, true);
    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    request.onload = function() {
      if (request.status >= 200 && request.status < 400) {
        let data = JSON.parse( request.responseText );
        if( callback ){
          callback( data );
        }
      }
    };
    request.send();
    
  },
  
  //update
  update: function( $target, data ){
    
    let self = this;
    
    self.log( 'favoriteBtns UPDATE -------------------' );

    let favorite_id = $target.getAttribute( 'data-favorite-id' );
    self.log( 'data-favorite-id: ' + favorite_id );
    
    if( favorite_id ){
      
      let $items = document.querySelectorAll('[data-favorite-id="' + favorite_id + '"]');

      for( let i = 0; i < $items.length; i++ ){
        
        if( data.myFavorite ){
        
          $items[i].classList.add( 'added' );
  
        } else {
          
          $items[i].classList.remove( 'added' );
        }
      }
    
    } else {
      
      if( data.myFavorite ){
        
        $target.classList.add( 'added' );

      } else {
        
        $target.classList.remove( 'added' );
      }
    }



  },
  
  //toggle_favorite
  toggle_favorite: function( $target ){
    
    let self = this;
    
    self.log( 'favoriteBtns TOGGLE FAVORITE -------------------' );
    
    self.get_data( $target, function( data ){
      
      let favorite_toggle_url = data.toggleFavoriteUrl;
      
      let request = new XMLHttpRequest();
      request.open('GET', favorite_toggle_url, true);
      request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      request.onload = function() {
        if (request.status >= 200 && request.status < 400) {
          
          let data = JSON.parse( request.responseText );
          self.update( $target, data );

        } else {
          location.href = '/users/sign_in';
        }
      };
      request.send();
    });
  },
};

(function () {

  let article_favorite_btns = new articleFavoriteBtns();
  article_favorite_btns.debug = false;
  article_favorite_btns.init();

}());


//---------------------------------------
// infiniteLoad
//---------------------------------------
/*
(function () {
	let infiniteLoad = function(){
		this.options = {
			container_selector: null,
			load_btn_selector: null,
			next_link_selector: null,
			item_selector: null,
		};
		this.$target = null;
		this.$container = null;
		this.$load_btn = null;
	}
	infiniteLoad.prototype = {
		// INIT -------------------------------------
		init: function( $target, options ){
			console.log( 'infiniteLoad - Init' );
			let self = this;
			//get options
			if( options ){
				for( let key in options ){
					this.options[key] = options[key];
				}
			} 
			//get targets
			this.$target = $target;
			//get container
			this.$container = document.querySelector( this.options.container_selector );
			//get load btn
			this.$load_btn = document.querySelector( this.options.load_btn_selector );
			//load
			this.load(); 
			//append
			this.append();
			//click
			this.$load_btn.addEventListener( 'click', function(){
				self.load(); 
			}, false );
		},
		// LOAD -------------------------------------
		load: function(){
			console.log( 'infiniteLoad - Load' );
			//this
			let self = this;
			//get url
			let url = this.$load_btn.getAttribute('data-url');
			//add loading class
			this.$load_btn.classList.add('loading');
			//request
			let request = new XMLHttpRequest();
			request.open('GET', url, true);
			request.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
			request.onreadystatechange = function() {
				if ( request.readyState === 4 ) { // 通信の完了時
					if ( request.status === 200 ) { // 通信の成功時
						let parser = new DOMParser();
						let response_doc = parser.parseFromString ( request.responseText, 'text/html' );
						//get container
						let $container = response_doc.querySelector( self.options.container_selector );
						//get items
						let $items = $container.querySelectorAll( self.options.item_selector );
						//get next link
						let $next_link = null;
  					$next_link = response_doc.querySelector( self.options.next_link_selector );
  					//get next url
  					let next_url;
  				  if( $next_link !== null ){
  					  next_url = $next_link.getAttribute( 'href' );
  				  } else {
  				    next_url = null;
  				  }
  				  if( next_url === '#' ){
    						next_url = null;
    				}
  					self.$load_btn.setAttribute( 'data-url', next_url );
  					//if last page
  					if( next_url === null ){
  						self.$load_btn.style.display = 'none';
  						console.log( 'last_page' );
  					}
						//remove loading class
						self.$load_btn.classList.remove('loading');
						//trigger event
						let detail = { $items: $items };
						let event;
						try {
							event = new CustomEvent('infiniteLoad_loaded', { detail: detail });
						} catch (e) {
							event = document.createEvent('CustomEvent');
							event.initCustomEvent('infiniteLoad_loaded', false, false, detail);
						}
						console.log( 'infiniteLoad - loaded' );
						window.dispatchEvent(event);
					}
				}
			};
			request.send();
		},
		// APPEND -------------------------------------
		append: function(){
			console.log( 'infiniteLoad - Append' );
			let self = this;
			window.addEventListener( 'infiniteLoad_loaded', loaded_handler, false );
			//event_handler
			function loaded_handler( event ){
				//get items
				let $items = event.detail.$items;
				if( !$items.length ) return;
				//trigger before event
				let detail = { $items: $items };
				let before_event;
				try {
					before_event = new CustomEvent('infiniteLoad_append_before', { detail: detail });
				} catch (e) {
					before_event = document.createEvent('CustomEvent');
					before_event.initCustomEvent('infiniteLoad_append_before', false, false, detail);
				}
				console.log( 'infiniteLoad - append_before' );
				window.dispatchEvent(before_event);
				//append
				for( let i = 0; i < $items.length; i++ ){
					self.$container.appendChild( $items[i] );
				}
				//trigger after event
				let after_event;
				try {
					after_event = new CustomEvent('infiniteLoad_append_after', { detail: detail });
				} catch (e) {
					after_event = document.createEvent('CustomEvent');
					after_event.initCustomEvent('infiniteLoad_append_after', false, false, detail);
				}
				console.log( 'infiniteLoad - append_after' );
				window.dispatchEvent(after_event);
			}	
		}
	}
	let $target = document.querySelector( '.js-infinite-load' );
	let options = {
		container_selector: '.js-infinite-load__container',
		load_btn_selector: '.js-infinite-load__load-btn',
		next_link_selector: '.js-infinite-load__pagination .next_page a',
		item_selector: 'article',
	}
	let infite_load = new infiniteLoad;
	infite_load.init( $target, options );
	window.addEventListener( 'infiniteLoad_append_after', function( event ){
		let $items = event.detail.$items;
		let cnt = 0;
		let timer = setInterval( function(){
			$items[cnt].classList.add('appended');
			if( cnt === $items.length - 1 ){
				clearInterval( timer );
			}
			cnt++;
		}, 100);
	}, false );
}());
*/