﻿/*
 * jQuery Liquid Slide
 * Copyright 2010 Yuya Amano
 * Released under the MIT and GPL licenses.
 */

(function($){

	$.fn.liquidSlide = function(settings) {

		// default global vars
		var config = {
			autoPlay : false,
			changeSpeed : 2400,
			buttonWrapper : 'liquidSlideButtonWrapper',
			nextButton : 'liquidSlideButtonNext',
			prevButton : 'liquidSlideButtonBack'
		};
		
		var _timerId;
		var _slideFlag = true;
		var _isAnimating = false;
				
		if (settings) $.extend(true, config, settings);
			
		var _mainBox = $('#liquidSlideBox');
		var _moveBox = _mainBox.find('ul');
		var _buttonNext = $('#' + config.nextButton);
		var _buttonPrev = $('#' + config.prevButton);
		var _buttonWrapper = $('#' + config.buttonWrapper);

		var allListElement = _moveBox.find('li');
		var _boxWidth = 0;
		allListElement.each(function(){
			_boxWidth += $(this).outerWidth(true);
			$(this).mouseenter(function(){
				onMouseEnterEvent(this);
			});
			
			$(this).mouseleave(function(){
				onMouseLeaveEvent();
			});
		});
		
		$(window).resize(function(){
			if(_boxWidth > _mainBox.width()){
				if(_timerId){
					clearTimeout(_timerId);
				}
				//スライドする
				_slideFlag = true;
				_buttonWrapper.css('visibility','visible');
			}else{
				//スライドしない
				_slideFlag = false;
				_buttonWrapper.css('visibility','hidden');
			}
		});
		
		_moveBox.css({
			width : _boxWidth,
			position : 'absolute',
			top : '0px',
			left : '0px'
		});

		_buttonNext.click(function(){
			if(_isAnimating){
				return false;
			}
			_isAnimating = true;
			
			if(_timerId){
				clearTimeout(_timerId);
			}
			nextSlide();
			return false;
		});
		_buttonPrev.click(function(){
			if(_isAnimating){
				return false;
			}
			_isAnimating = true;
			
			if(_timerId){
				clearTimeout(_timerId);
			}
			prevSlide();
			return false;
		});
		
		//calculate the value for per move
		var _moveValue = _boxWidth / allListElement.length;
		//start animation only when its bigger
		if(_boxWidth > _mainBox.width()){
			setSlideAnimation(true);
		}else{
			//スライドしない
			_slideFlag = false;
			_buttonWrapper.css('visibility','hidden');
		}
		
		function nextSlide()
		{
			animateSlide();
		}

		function prevSlide()
		{
			animateSlide(true);
		}
		
		function animateSlide(directFlag)
		{
			if(!_slideFlag){
				return;
			}
			if(!directFlag){
				directFlag = false;
			}
			
			var directCalc = '-=';
			var _liElem;
			var _leftValue;
			

			//戻る場合の処理
			if(directFlag){
				directCalc = '+=';
				_liElem = _moveBox.find('li:last').clone();
				_liElem.mouseenter(function(){
					onMouseEnterEvent(this);
				});
				_liElem.mouseleave(function(){
					onMouseLeaveEvent();
				});
				_moveBox.prepend(_liElem);
				_moveBox.find('li:last').remove();
				_leftValue = _moveValue * -1;
				_moveBox.css('left', _leftValue);
			}

			
			_moveBox.animate({
				left : directCalc + _moveValue
				}, 1000, null, function(){
					setSlideAnimation(directFlag);
				});
		}
		
		/*
		*
		*/
		function setSlideAnimation(directFlag)
		{
			if(_timerId){
				clearTimeout(_timerId);
			}
			
			_moveBox.css('left','0px');
			
			if(!directFlag){
				var _li = _moveBox.find('li:first').clone();
				_li.mouseenter(function(){
					onMouseEnterEvent(this);
				});
				_li.mouseleave(function(){
					onMouseLeaveEvent();
				});

				_moveBox.append(_li);
				_moveBox.find('li:first').remove();
			}
			
			
			//一番左までいったら何もしない
			if(_moveBox.position().left <= ((_boxWidth - _moveValue) * -1)){
				return;
			}
			_timerId = setTimeout(function(){
				nextSlide();
			},config.changeSpeed);
			
			//次のアニメーションイベントを受け付ける
			_isAnimating = false;
		}
		
		function showImagePopup(elem)
		{			
			var _target = $(elem);
			var _popupElem = _target.find('.liquidSlidePopup');
			var _parentPos = _target.position();
			
			var _innerContent = _popupElem.find('.transparentBoxContent');
			_popupElem.show();
			var _boxHeight = _innerContent.height();
		
			_popupElem.find('.transparentBoxBottom').css('height',_boxHeight+'px');
			_popupElem.find('.transparentBoxTop').css('height',_boxHeight+'px');
			_popupElem.find('.transparentBox').css('height',_boxHeight+'px');
			
			var topPosition = _popupElem.find('.transparentBox').outerHeight() * -1;
			_innerContent.css({
				marginTop : topPosition
			});

			_popupElem.css({
				'position' : 'absolute',
				'top' : (_target.offset().top - _boxHeight) + 'px',
				'left' : (_target.offset().left + 10) + 'px'
			});
						
			var _clonedElem = _popupElem.clone();
			_popupElem.hide();
			_clonedElem.appendTo('body').attr('id','liquidSlidePopupCurrentPopup').css({
				overflow : 'hidden',
				height : (_boxHeight + 30) + 'px',
				opacity : 0.9
			}).show();
			
		}
		
		function hideImagePopup()
		{
			$('#liquidSlidePopupCurrentPopup').remove();
		}
		
		function onMouseEnterEvent(args)
		{
			if(_timerId){
				clearTimeout(_timerId);
			}
			showImagePopup(args);
		}

		function onMouseLeaveEvent()
		{
			if(_timerId){
				clearTimeout(_timerId);
			}
			_timerId = setTimeout(function(){
				nextSlide();
			},config.changeSpeed);
			hideImagePopup();
		}
				
	}
		
})(jQuery);



/*
 * jQuery Liquid Slide PickUp
 * Copyright 2010 Yuya Amano
 * Released under the MIT and GPL licenses.
 */
(function($){

	$.fn.liquidSlidePickUp = function(settings) {

		// default global vars
		var config = {
			autoPlay : false,
			changeSpeed : 2400,
			buttonWrapper : 'liquidSlidePickUpButtonWrapper',
			nextButton : 'liquidSlidePickUpButtonNext',
			prevButton : 'liquidSlidePickUpButtonBack'
		};
		
		var _timerId;
		var _slideFlag = true;
		var _isAnimating = false;
		
		if (settings) $.extend(true, config, settings);
			
		var _mainBox = $('#liquidSlidePickUpBox');
		var _moveBox = _mainBox.find('ul');
		var _buttonNext = $('#' + config.nextButton);
		var _buttonPrev = $('#' + config.prevButton);
		var _buttonWrapper = $('#' + config.buttonWrapper);

		var allListElement = _moveBox.find('li');
		var _boxWidth = 0;
		allListElement.each(function(){
			_boxWidth += $(this).outerWidth(true);
			$(this).mouseenter(function(){
				onMouseEnterEvent(this);
			});
			$(this).mouseleave(function(){
				onMouseLeaveEvent();
			});
		});
		
		$(window).resize(function(){
			if(_boxWidth > _mainBox.width()){
				if(_timerId){
					clearTimeout(_timerId);
				}
				//スライドする
				_slideFlag = true;
				_buttonWrapper.css('visibility','visible');
			}else{
				//スライドしない
				_slideFlag = false;
				_buttonWrapper.css('visibility','hidden');
			}
		});

		
		_moveBox.css({
			width : _boxWidth,
			position : 'absolute',
			top : '0px',
			left : '0px'
		});

		_buttonNext.click(function(){
			if(_isAnimating){
				return false;
			}
			_isAnimating = true;
			
			if(_timerId){
				clearTimeout(_timerId);
			}
			nextSlide();
			return false;
		});
		_buttonPrev.click(function(){
			if(_isAnimating){
				return false;
			}
			_isAnimating = true;
			
			if(_timerId){
				clearTimeout(_timerId);
			}
			prevSlide();
			return false;
		});
		
		//calculate the value for per move
		var _moveValue = _boxWidth / allListElement.length;
		//start animation only when its bigger
		if(_boxWidth > _mainBox.width()){
			setTimeout(function(){
				setSlideAnimation(true);
			},2400)
		}else{
			//スライドしない
			_slideFlag = false;
			_buttonWrapper.css('visibility','hidden');
		}
		
		
		function nextSlide()
		{
			animateSlide();
		}

		function prevSlide()
		{
			//prev方向にスライド
			animateSlide(true);
		}
		
		function animateSlide(directFlag)
		{
			if(!_slideFlag){
				return;
			}
			if(!directFlag){
				directFlag = false;
			}
			
			var directCalc = '-=';
			
			//戻る場合の処理
			if(directFlag){
				directCalc = '+=';				
				var _li = _moveBox.find('li:last').clone();
				_li.mouseenter(function(){
					onMouseEnterEvent(this);
				});
				_li.mouseleave(function(){
					onMouseLeaveEvent();
				});
				_moveBox.prepend(_li);
				_moveBox.find('li:last').remove();
				_moveBox.css('left', (_moveValue * -1));
			}
			
			_moveBox.animate({
				left : directCalc + _moveValue
				}, 1000, null, function(){
					setSlideAnimation(directFlag);
				});
		}
		
		function setSlideAnimation(directFlag)
		{
			if(_timerId){
				clearTimeout(_timerId);
			}
			
			_moveBox.css('left','0px');

			if(!directFlag){
				var _li = _moveBox.find('li:first').clone();
				_li.mouseenter(function(){
					onMouseEnterEvent(this);
				});
				_li.mouseleave(function(){
					onMouseLeaveEvent();
				});
				_moveBox.append(_li);
				_moveBox.find('li:first').remove();
			}
			
			
			//一番左までいったら何もしない
			if(_moveBox.position().left <= ((_boxWidth - _moveValue) * -1)){
				return;
			}
			_timerId = setTimeout(function(){
				nextSlide();
			},config.changeSpeed);

				
			//次のアニメーションイベントを受け付ける
			_isAnimating = false;
		}
		
		function showImagePopup(elem)
		{
			return;
			var _target = $(elem);
			var _popupElem = _target.find('.liquidSlidePopup');
			var _parentPos = _target.position();
			
			var _innerContent = _popupElem.find('.transparentBoxContent');
			_popupElem.show();
			var _boxHeight = _innerContent.height();
		
			_popupElem.find('.transparentBoxBottom').css('height',_boxHeight+'px');
			
			var topPosition = _popupElem.find('.transparentBox').outerHeight() * -1;
			_innerContent.css({
				top : topPosition
			});

			_popupElem.css({
				'position' : 'absolute',
				'top' : (_target.offset().top - _boxHeight) + 'px',
				'left' : (_target.offset().left + 10) + 'px'
			});
						
			var _clonedElem = _popupElem.clone();
			_popupElem.hide();
			_clonedElem.appendTo('body').attr('id','liquidSlidePopupCurrentPopup').css({
				overflow : 'hidden',
				height : (_boxHeight + 30) + 'px',
				opacity : 0.9
			}).show();
			
		}
		
		function hideImagePopup()
		{
			return;
			$('#liquidSlidePopupCurrentPopup').remove();
		}
		
		function onMouseEnterEvent(args)
		{
			if(_timerId){
				clearTimeout(_timerId);
			}
			//showImagePopup(args);
		}

		function onMouseLeaveEvent()
		{
			if(_timerId){
				clearTimeout(_timerId);
			}
			_timerId = setTimeout(function(){
				nextSlide();
			},config.changeSpeed);
			//hideImagePopup();
		}
				
	}
		
})(jQuery);





jQuery(document).ready(function(){
	jQuery.event.add(window, "load", function(){
		jQuery.fn.liquidSlide();
		jQuery.fn.liquidSlidePickUp();
	});
});

