// イメージヘッダー　時間差表示
// ----------------------------------------------------------------------------------
$(function(){
	$('.makeMeScrollable img').each(function(i){
		var item = $(this);
		item.css('opacity', 0);
		setTimeout(function(){
			item.animate({
				opacity: 1
			}, 300, 'linear', function(){
				if (!$.support.opacity) {
					if (this.style.filter && this.style.removeAttribute) {
						this.style.removeAttribute('filter');
					}
				}
			});
		}, i * 100);
	});
});



// イメージヘッダー　スライダー
// ----------------------------------------------------------------------------------
$(window).load(function() {
	$(".makeMeScrollable").smoothDivScroll({
		autoScroll: "onstart",
		autoScrollDirection: "backandforth",
		autoScrollStep: 1,
		autoScrollInterval: 50,
		startAtElementId: "startAtMe"
	});
});



// イメージヘッダー　画像をaltタグをツールチップに
// ----------------------------------------------------------------------------------
$(function(){
// 全要素をからALT属性を持っている要素だけに絞る
$(".makeMeScrollable img").filter(function(){
	return this.alt && this.alt.length>0;
}).each(function(){
	// ALT属性を持っている要素に適用する
	
	// あとで使う
	var self = $(this), alt = self.attr("alt");
	
	// ALT属性を持っている要素にhover()で
	self.hover(
	
		// mouseover
		function(e){ // このeはevent自体を意味する
		
			// ALTがあるとブラウザのチップが出るので一時的に空にしておく
			self.attr("alt","");
		
			// とりあえず表示するtip要素を生成しておく
			$("body").append("<div id='alt-tip'>"+alt+"</div>");
			$("#alt-tip").css({
				position: "absolute",
				
				// e.pageX(Y)でカーソルが要素に乗った時点でのX(Y)座標を取得する
				top: e.pageY+(-30), // カーソルと表示したtipが重なるとチラつくので少しずらす
				left: e.pageX+(10)
			});
		},
		
		// mouseout
		function(){
		
			// mouseoverで空にしたALTを戻す
			self.attr("alt",alt);
		
			// 要素から離れた場合はtipを非表示にして削除しておく
			$("#alt-tip").hide().remove();
		}
	);
	
	// 要素上でカーソルが移動した場合は、逐一tipの位置を変える
	self.mousemove(function(e){
		$("#alt-tip").css({
			top: e.pageY+(-30),
			left: e.pageX+(10)
		});
	});
});
});



// ブログ記事のスライダー1
// ----------------------------------------------------------------------------------
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 303;
  var slides = $('#presidentblog .slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#presidentblog .slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div class="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#presidentblog .slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#presidentblog .slideshow')
    .prepend('<span class="control png" id="leftControl">前の記事</span>')
    .append('<span class="control png" id="rightControl">次の記事</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('#presidentblog .control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#presidentblog .slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#presidentblog #leftControl').hide() } else{ $('#presidentblog #leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#presidentblog #rightControl').hide() } else{ $('#presidentblog #rightControl').show() }
  }	
});


// ブログ記事のスライダー2
// ----------------------------------------------------------------------------------
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 303;
  var slides = $('#staffblog .slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#staffblog .slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div class="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#staffblog .slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#staffblog .slideshow')
    .prepend('<span class="control png" id="leftControl">前の記事</span>')
    .append('<span class="control png" id="rightControl">次の記事</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('#staffblog .control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#staffblog .slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#staffblog #leftControl').hide() } else{ $('#staffblog #leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#staffblog #rightControl').hide() } else{ $('#staffblog #rightControl').show() }
  }	
});