/*	mainImagesGallery.js
-------------------------------------------------------------------*/
$(function() {

	var mainImagesGallery = $('#mainImagesGallery');
	var galleryContents   = $('#galleryContents');
	var contents          = $('li',galleryContents);
	var galleryThumbnail  = $('#galleryThumbnail');
	var thumbnail         = $('li',galleryThumbnail);
	var slideContents     = $('#slideContents');
	var navUpBtn          = $('#navUp');
	var navDownBtn        = $('#navDown');

	var navOn             = 'navOn';
	var contentsOn        = 'contentsOn';
	var show              = 'show';

	var durationTime      = 4000;
	var slideSpeed        = 500;
	var fadeDuration      = 1000;
	var showNumber        = 3;
	var autoMove          = true;

	thumbnailLength       = thumbnail.length;
	thumbnailHeight       = thumbnail.outerHeight({margin: true});


	// --------------------------------
	// settings
	contents.hide().filter(':first').show().addClass(contentsOn);
	thumbnail.filter(':first').addClass(navOn).addClass(show)
	         .next().addClass(show).next().addClass(show);



	// --------------------------------
	// init
	if(showNumber < thumbnailLength){
		navDownBtn.live('click', navDown);
	}
	else{
		btnOff(navDownBtn);
	};

	btnOff(navUpBtn);
	thumbnail.each(function(){
		thumbnail.live('click', thumbnailSwitch).live('click', contentsSwitch);
	});




	// --------------------------------
	// function except 'px'
	function exceptPx(number){
		var exceptPxNumber = number.replace('px','');
		return exceptPxNumber;
	};


	// --------------------------------
	// navUp
	function navUp(){
		var tempTop = exceptPx(slideContents.css('marginTop'));
		slideContents.not(':animated').animate(
			{'marginTop':tempTop - -thumbnailHeight + 'px'},
			{duration: slideSpeed,
				 complete: function(){
					$('.' + show).filter(':last').removeClass(show).end()
					             .filter(':first').prev().addClass(show);
					judgeBtn();
				}
			}
		);
	};
	// navDown
	function navDown(){
		var tempTop = exceptPx(slideContents.css('marginTop'));
		slideContents.not(':animated').animate(
			{'marginTop':tempTop - thumbnailHeight + 'px'},
			{duration: slideSpeed,
				 complete: function(){
					$('.' + show).filter(':first').removeClass(show).end()
					             .filter(':last').next().addClass(show);
					judgeBtn();
				}
			}
		);
	};


	// --------------------------------
	// navBtn off
	function btnOff(element){
		element.addClass('navOff');
	};
	// navBtn on
	function btnOn(element){
		element.removeClass('navOff');
	};


	// --------------------------------
	// judge on/off nav
	function judgeBtn(){

		btnOn(navUpBtn);
		btnOn(navDownBtn);
		navUpBtn.live('click', navUp);
		navDownBtn.live('click', navDown);

		// btn off when thumbnail first/last
		if($('.' + show).filter(':last').html() == thumbnail.filter(':last').html()){
			btnOff(navDownBtn);
			navDownBtn.die('click', navDown);
		}
		else if($('.' + show).filter(':first').html() == thumbnail.filter(':first').html()){
			btnOff(navUpBtn);
			navUpBtn.die('click', navUp);
		};

	};


	// --------------------------------
	// thumbnail on/off
	function thumbnailSwitch(){
		thumbnail.removeClass(navOn);
		$(this).addClass(navOn);
	};


	// --------------------------------
	// contents fade
	function contentsSwitch(){
		var thisIndex = thumbnail.index(this);
		var contentsIndex = contents.index($('.' + contentsOn));

		if(thisIndex != contentsIndex){
			contents.stop(true,true).fadeOut(fadeDuration).removeClass(contentsOn);
			contents.filter(':eq(' + thisIndex + ')').fadeIn(fadeDuration).addClass(contentsOn);
		};
	};








	// --------------------------------
	// auto
	auto();

	// auto change
	function auto(){
		autoSwitch = setInterval(autoChange, durationTime);
	};

	// automove stop when thumbnail hover
	mainImagesGallery.hover(function(){
		clearInterval(autoSwitch);
	},
	function(){
		if(autoMove){
			auto();
		};
	});

	function autoChange(){

	if(thumbnail.filter(':first').html() == thumbnail.filter(':last').html()){
		return;
	}

		// auto thumbnail and contents change
		if(thumbnail.filter('.' + navOn).html() != thumbnail.filter(':last').html()){
			thumbnail.filter('.' + navOn).removeClass(navOn).next().addClass(navOn);
			contents.filter('.' + contentsOn).fadeOut(fadeDuration).removeClass(contentsOn)
					.next().fadeIn(fadeDuration).addClass(contentsOn);
		}
		else{
			thumbnail.filter('.' + navOn).removeClass(navOn).end()
			         .filter(':first').addClass(navOn);
			contents.filter('.' + contentsOn).fadeOut(fadeDuration).removeClass(contentsOn).end()
			        .filter(':first').fadeIn(fadeDuration).addClass(contentsOn);
			// autoMove = false;
			// clearInterval(autoSwitch);
		};

		// thumbnail up/down when auto change
		if(!thumbnail.filter('.' + navOn).hasClass(show)){

			var tOn        = thumbnail.index(thumbnail.filter('.' + navOn)) + 1;
			var tShowFirst = thumbnail.index(thumbnail.filter('.' + show + ':first')) + 1;
			var tShowLast  = thumbnail.index(thumbnail.filter('.' + show + ':last')) + 1;


			if(tShowFirst < tOn){
				var n = tShowLast - tOn;
				var tempTop = exceptPx(slideContents.css('marginTop'));
				slideContents.not(':animated').animate(
					{'marginTop':tempTop - n * -thumbnailHeight + 'px'},
					{duration: slideSpeed,
						 complete: function(){
							thumbnail.removeClass(show)
							thumbnail.filter('.' + navOn).addClass(show).prev().addClass(show).prev().addClass(show);
							judgeBtn();
						}
					}
				);

			}
			else if(tOn == 1){
				var n = tShowFirst - tOn;
				var tempTop = exceptPx(slideContents.css('marginTop'));
				slideContents.not(':animated').animate(
					{'marginTop':tempTop - n * -thumbnailHeight + 'px'},
					{duration: slideSpeed,
						 complete: function(){
							thumbnail.removeClass(show)
							thumbnail.filter(':first').addClass(show).next().addClass(show).next().addClass(show);
							judgeBtn();
						}
					}
				);

			}
			else if(tShowFirst > tOn){
				var n = tShowFirst - tOn;
				var tempTop = exceptPx(slideContents.css('marginTop'));
				slideContents.not(':animated').animate(
					{'marginTop':tempTop - n* -thumbnailHeight + 'px'},
					{duration: slideSpeed,
						 complete: function(){
							thumbnail.removeClass(show)
							thumbnail.filter('.' + navOn).addClass(show).next().addClass(show).next().addClass(show);
							judgeBtn();
						}
					}
				);

			};

		};

	};




});