/**
 * carousel.js
 *
 * @version    1.11
 * @updated    2009-08-05
 * @author     takumi osada <http://groovy-times.com>
 * @copyright  Copyright (c) 2009 GROOVY-TIMES
 * @license    MIT License <http://www.opensource.org/licenses/mit-license.php>
 *
 * @requires   addLoadEvent
 * @see        http://book.mycom.co.jp/book/978-4-8399-2237-5/978-4-8399-2237-5.shtml
 */ 

/* -----------------------------------------------------------------------*/
// carousel
/* -----------------------------------------------------------------------*/
function carousel() {
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById) return false;
	if(!document.getElementById('slideshow')) return false;
	if(!document.getElementById('slideshowInner')) return false;

	// SETUP ///////////////////////////////////////////////

	/* 一度に表示する画像枚数 */
	var imgNum = 4;

	/* 移動距離（px） */
	var dist = 158;

	/* 乱数 */
	var random = 18;

	/* 実行の間隔 */
	var interval = 10;

	/* オートプレイの間隔（ミリ秒） */
	var autoTime = 10000000;

	////////////////////////////////////////////////////////

	var slide = document.getElementById('slideshow');
	var slideInner = document.getElementById('slideshowInner');

	/* 初期値設定 */
	var nextCount = 1;
	var prevCount = 1;
	var pos = 0;

	// アニメーションの範囲 ////////////////////////////////
	var min = 0;
	var max = 0;
	
	var imgs = (slide.getElementsByTagName('img').length);

	if(imgs <= imgNum) {
		max = 0;
	} else {
		max = (dist * imgs) - (dist * imgNum);
	}

	// JavaScript On/Offのスタイル調整 /////////////////////
	if(!slide.style.height) {
		/* スクロールバーを含めたスライドショーの高さ */
		slide.style.height = '160px';
	}
	var sHeight = parseInt(slide.style.height);
	
	/* スクロールバーの高さ */
	var scrollBar = 17;
	sHeight = sHeight - scrollBar;
	slide.style.height = sHeight + 'px';
	
	slideInner.style.marginRight = 'auto';
	slideInner.style.marginLeft = 'auto';
	slideInner.style.paddingBottom = '0';
	slideInner.style.overflow = 'hidden';


	// 左右ボタンのマークアップ ////////////////////////////
	var next = document.createElement('p');
	next.setAttribute('id', 'slideshowNext');

	var prev = document.createElement('p');
	prev.setAttribute('id', 'slideshowPrev');
	
	slide.appendChild(next);
	slide.appendChild(prev);


	// オートプレイ ///////////////////////////////////////
	var flg;

	function moveSlideshow() {
		if(flg == 'prev') {
			pos = pos + dist;
			if(pos > min) {
				pos = -max;
				moveElement('slideList', pos, random, interval);
				prevCount = 1;
			} else {
				moveElement('slideList', pos, random, interval);
				prevCount++;
			}
		} else {
			pos = pos + -dist;
			if(pos < -max) {
				pos = min;
				moveElement('slideList', pos, random, interval);
				nextCount = 1;
			} else {
				moveElement('slideList', pos, random, interval);
				nextCount++;
			}
		}
	}

	var autoPlay = setInterval(moveSlideshow, autoTime);
	
	var autoButton = document.getElementById('autoPlay');
	autoButton.checked = false;
	
	autoButton.onclick = function() {
		if(autoButton.checked == false) {
			clearInterval(autoPlay);
		} else {
			autoPlay = setInterval(moveSlideshow, autoTime);
		}
	}

	// ボタンクリック /////////////////////////////////////
	next.onclick = function() {
		pos = pos + -dist;
		flg = 'next';
		if(pos < -max) {
			pos = min;
			moveElement('slideList', pos, random, interval);
			nextCount = 1;
		} else {
			moveElement('slideList', pos, random, interval);
			nextCount++;
		}
	}
	prev.onclick = function() {
		pos = pos + dist;
		flg = 'prev'
		if(pos > min) {
			pos = -max;
			moveElement('slideList', pos, random, interval);
			prevCount = 1;
		} else {
			moveElement('slideList', pos, random, interval);
			prevCount++;
		}
	}
}


/* -----------------------------------------------------------------------*/
// moveElement
/* -----------------------------------------------------------------------*/
function moveElement(elementID, final_x, random, interval) {
	if(!document.getElementById) return false;
	if(!document.getElementById(elementID)) return false;
	
	var elem = document.getElementById(elementID);
	if(elem.movement) {
		clearTimeout(elem.movement);
	}
	if(!elem.style.left) {
		elem.style.left = '0px';
	}
	if(!elem.style.top) {
		elem.style.top = '0px';
	}
	var xpos = parseInt(elem.style.left);

	if(xpos == final_x) {
		return true;
	}
	if(xpos < final_x) {
		var distance = Math.ceil((final_x - xpos) / random);
		xpos = xpos + distance;
	}
	if(xpos > final_x) {
		var distance = Math.ceil((xpos - final_x) / random);
		xpos = xpos - distance;
	}
	elem.style.left = xpos + 'px';
	
	var repeat = "moveElement('"+elementID+"', "+final_x+", "+random+", "+interval+")";
	elem.movement = setTimeout(repeat, interval);
}


/* -----------------------------------------------------------------------*/
// addLoadEvent
/* -----------------------------------------------------------------------*/
addLoadEvent(carousel);