/**
 *
 * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
 *
 * TERMS OF USE - jQuery Easing
 *
 * Open source under the BSD License. 
 *
 * Copyright c 2008 George McGinley Smith
 * All rights reserved.
 *
 */
jQuery.extend(jQuery.easing, { easeOutExpo: function (x, t, b, c, d) { return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; } });

/**
 * for JavaScript Off
 *
 * @link http://d.hatena.ne.jp/miya2000/20070327/p0
 */
var _wrap = document.createElement('div');
_wrap.innerHTML = 'a<style type="text\/css">#mainimage .mainArea { background: none; }<\/style>';
document.getElementsByTagName('head')[0].appendChild(_wrap.lastChild);

/**
 *
 * for #mainimage
 *
 *
 */
$(document).ready(function($) {

	// for loading
	var $mainLoading = $('#mainimage > div.mainArea').addClass('loading');

	/**
	 * Configurations.
	 *
	 */
	var config = {
		// XML URL
		xmlArea		: window.checkArea || 'tokai',
		xmlUrls		: {
			tokai	: '/js/xml/top_info_tokai.xml',
			kanto	: '/js/xml/top_info_kanto.xml',
			shizuoka: '/js/xml/top_info_shizuoka.xml'
		},
		// side blank image
		sideBlankImg	: '<img src="/images/main/main_side_blank.gif" width="155" height="57" />',
		// default value
		time: {
			showImageInterval: 5000,
			showImageDuration: 1200
		},
		baseImageDir	: '/images/main'
	};

	config.xmlUrl = config.xmlUrls[config.xmlArea];

	/**
	 * Defining Areas.
	 *
	 */
	var $mainimageArea = $('#mainimage');
	var $mainWrap = $mainimageArea.find('div.mainArea > ul.mainImages');
	var $sideArea = $mainimageArea.find('div.sideArea');
	var $sideWrap = $sideArea.find('div.sideImagesWrapper > ul.sideImages');
	var $sidePrev = $sideArea.find('p.arrow_prev');
	var $sideNext = $sideArea.find('p.arrow_next');

	/**
	 * Load XML
	 *
	 */
	$.get(config.xmlUrl, null, function(data, status) {
		var $data = $(data);

		if( $data.find('config > time > interval').text() ) {
			config.time.showImageInterval = parseInt($data.find('config > time > interval').text(), 10);
		}

		if( $data.find('config > time > duration').text() ) {
			config.time.showImageDuration = parseInt($data.find('config > time > duration').text(), 10);
		}

		if( $data.find('config > path > images').text() ) {
			config.baseImageDir =  $data.find('config > path > images').text();
		}

		var $items = $data.find('items > item');

		var i = 0;
		var itemsLength = $items.length;

		function loadItems( i ) {
			var $item = $items.eq(i);
			var $mainImg = $('<img src="' + config.baseImageDir + '/' + $item.find('main').text() + '" />');
			var $sideImg = $('<img src="' + config.baseImageDir + '/' + $item.find('side').text() + '" />');

			if( $item.find('link').text() ) {
				var link	= $item.find('link').text();
				var linkTarget	= $item.find('link').attr('target') || '_self';
				$mainImg = $('<a href="' + link + '" target="' + linkTarget + '" />').append($mainImg);

				// Google Analytics track page view
				if( $item.find('link').attr('google') ) {
					var trackUrl = $item.find('link').attr('google') ;
					$mainImg.click(function() {
						// for debug
						// console.log(trackUrl); return false;
						try { _gaq.push(['_trackPageview', trackUrl]);	} catch( e ) {
						try { pageTracker._trackPageview(trackUrl);	} catch( e ) {
						}}
						return; 
					});
				}
			}

			var $mainItem = $('<li />').append($mainImg);
			var $sideItem = $('<li />').append($sideImg);

			$mainWrap.append($mainItem);
			$sideWrap.append($sideItem);

			$mainItem.find('img').load(function() {
				i++;
				if( i == itemsLength ) {
					startMainimage();
				} else {
					loadItems( i );
				}
			});
		}

		// start
		loadItems(0);

	}, 'xml');
	
	/**
	 * load, then...
	 *
	 */
	function startMainimage() {

		// images
		var $mainImgs = $mainWrap.find('li').hide().css('background-color', '#fff');
		var $sideImgs = $sideWrap.find('li').hide();

		// for mask
		var $sideCurrent = $('<span class="current" />').css('opacity', 0);
		var $sideHover	 = $('<span class="hover" />').css('opacity', 0.6);

		$mainImgs.each(function(i) {
			$item = $(this);

			$item.hover(
				function() {
					$mainImgs.eq(i).animate({opacity: 0.7}, 250, 'linear');
				},
				function() {
					$mainImgs.eq(i).animate({opacity: 1}, 250, 'linear');
				}
			);
		});

		$sideImgs.each(function(i) {
			$item = $(this);
			$item.addClass('imageIndex-' + i );
			$sideCurrent.clone().appendTo($item);
			$sideHover.clone().appendTo($item);
		});

		// Add blank images
		if( $sideImgs.length % 5 !== 0 ) {
			var addNum = 5 - $sideImgs.length % 5;
			for( i = 0; i < addNum; i++ ) {
				$sideWrap.append('<li class="blank">' + config.sideBlankImg + '</li>');
			}
		}

		// flag
		var currentIndex = -1;
		var scrollTimer;
		var arrowsTimer;

		// for scroll
		var $_even = $sideWrap.find('li');
		$_even.clone(true).prependTo($sideWrap);
		$_even.clone(true).appendTo($sideWrap);

		function resetSide() {
			$sideWrap.css({
				'top'	: ( $_even.length * -60 ) + 'px',
				'height': ( $_even.length * 60 * 3 ) + 'px'
			});

			$sideWrap.find('li').show();

			$sideWrap.find('li:not(.blank)').each(function(i) {
				$item = $(this);
				$item.unbind();

				var _i = parseInt($(this).attr('class').replace('imageIndex-', ''), 10);
				var $c = $item.find('span.current');
				var $h = $item.find('span.hover');

				var hTimer;

				$item.hover(
					function() {
						if( _i == currentIndex ) { return; }
						hTimer = setTimeout(function() {
							hTimer = null;
							$h.stop(true, true).animate({top: '0px', left: '0px', width: '147px', height: '49px'}, 250, 'linear');
						}, 100);
					},
					function() {
						if( _i == currentIndex ) { return; }
						if( hTimer ) {
							clearTimeout(hTimer);
						} else {
							$h.removeClass('on').stop(true, true).animate({top: '-4px', left: '-4px', width: '155px', height: '57px'}, 250, 'linear');
						}
					}
				);

				$item.click(function() {
					clearTimeout(scrollTimer);
					showImage(_i);
				});
			});
		}

		function showImage( i ) {
			if( i == currentIndex ) {
				return;
			} else if( i > $sideImgs.length - 1 ) {
				$sideNext.trigger('click');
			} else if( i !== 0 && i % 5 === 0 && i - currentIndex > 0 ) {
				$sideNext.trigger('click');
			} else {
				_show(i);
			}
			return;
		}

		function initArrow() {
			// @TODO
			var offset = $sideWrap.find('li').length / 3 * 2 + Math.floor( $sideImgs.length / 5 ) * 5 - 1;

			$sidePrev.click(function() {
				clearTimeout(scrollTimer);
	
				$sideWrap.stop(true, true).animate({top: '+=300px', height: '+=300px'}, 700, 'easeOutExpo', function() {
					var $_even = $sideWrap.find('li:gt(' + offset + ')');
					$_even.clone(true).prependTo($sideWrap);
					$_even.remove();
					resetSide();
				});
	
				currentIndex = ( Math.floor( currentIndex / 5 ) - 1 ) * 5;
				if( currentIndex < 0 ) { currentIndex = Math.floor( $sideImgs.length / 5 ) * 5; }
	
				clearTimeout(arrowsTimer);
				arrowsTimer = setTimeout(function(){
					_show(currentIndex);
				}, 700);
			});
	
			$sideNext.click(function() {
				clearTimeout(scrollTimer);
	
				$sideWrap.stop(true, true).animate({top: '-=300px', height: '+=300px'}, 700, 'easeOutExpo', function() {
					var $_even = $sideWrap.find('li:lt(5)');
					$_even.clone(true).appendTo($sideWrap);
					$_even.remove();
					resetSide();
				});
	
				currentIndex = ( Math.floor( currentIndex / 5 ) + 1 ) * 5;
				if( currentIndex > $sideImgs.length - 1 ) { currentIndex = 0; }
	
				clearTimeout(arrowsTimer);
				arrowsTimer = setTimeout(function(){
					_show(currentIndex);
				}, 700);
			});
		}

		function _show( i, interval ) {

			currentIndex = i;

			var $targetMainImg = $mainImgs.eq(i);
			var $otherMainImgs = $mainImgs.not(':eq(' + i + ')');
			var $targetSideImg = $sideWrap.find('li.imageIndex-' + i );
			var $otherSideImgs = $sideWrap.find('li:not(.imageIndex-' + i + ')');

			// side (target)
			$targetSideImg.find('.hover').stop(true, true).animate({top: '0px', left: '0px', width: '147px', height: '49px'}, 250, 'linear');
			$targetSideImg.find('.current').stop(true, true).animate({opacity: 0.3}, 250, 'linear');

			// side (others)
			$otherSideImgs.find('.hover').animate({top: '-4px', left: '-4px', width: '155px', height: '57px'}, 250, 'linear');
			$otherSideImgs.find('.current').animate({opacity: 0}, 250, 'linear');

			// main
			if( !interval ) { interval = config.time.showImageInterval; }

			$otherMainImgs.stop(true, true).fadeOut(80);
			$targetMainImg.fadeIn(config.time.showImageDuration, function() {
				clearTimeout(scrollTimer);
				scrollTimer = setTimeout(function(){
					showImage(currentIndex + 1);
				}, interval);
			});
		}

		/**
		 * Start!
		 *
		 */
		$sidePrev.fadeIn(500);
		$sideNext.fadeIn(500, function() {
			$mainImgs.eq(0).fadeIn(1200, function() {
				// for end loading
				$mainLoading.removeClass('loading');
			});
			var $targetSideImg = $sideWrap.find('li.imageIndex-0');
			$targetSideImg.find('.hover').css({top: '0px', left: '0px', width: '147px', height: '49px'});
			$targetSideImg.find('.current').css({opacity: 0.3});

			$sideItems = $sideWrap.find('li');

			for( var i = 0; i < 5; i++ ) {
				(function(i) {
					setTimeout(function() {
						$sideItems.eq(i).fadeIn(300, function() {
							if( i == 4 || i == $sideItems.length ) {
								resetSide();
								initArrow();
								showImage(0, config.time.showImageInterval + 1200);
							}
						});
					}, 200 * i);
				})(i);
			}
		});
	}
});