/**
 *
 * 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
 *
 *
 */
jQuery(function($) {

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

	/**
	 * Configurations.
	 *
	 */
	var config = {
		// XML URL
		xmlUrl	: '/js/xml/config.xml',
		// default value
		time: {
			showImageInterval: 5000,
			showImageDuration: 1800
		},
		baseImageDir	: '/images-top/main'
	};

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

	/**
	 * 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);
				$sideImg = $('<a href="' + link + '" target="' + linkTarget + '" />').append($sideImg);

				// 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; 
					});
					$sideImg.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="hover" />').css('opacity', 0);

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

		$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 );

			var $h = $sideCurrent.clone(true);
			$item.find('a').append($h);

			$item.hover(
				function() {
					clearTimeout(scrollTimer);
					$h.stop(true, true).animate({opacity: 0.3}, 250, 'linear');
					showImage(i, null, true);
				},
				function() {
					$h.stop(true, true).animate({opacity: 0}, 250, 'linear');
					setScroll();
				}
			);
		});

		function showImage( i, interval, stop ) {
			if( i == currentIndex ) {
				return;
			} else if( i > $sideImgs.length - 1 ) {
				showImage(0);
				return;
			}

			currentIndex = i;

			var $targetMainImg = $mainImgs.eq(i);
			var $otherMainImgs = $mainImgs.not(':eq(' + i + ')');
			var $targetSideImg = $sideImgs.eq(i);
			var $otherSideImgs = $sideImgs.not(':eq(' + i + ')');

			// side (target)
			$targetSideImg.addClass('current');

			// side (others)
			$otherSideImgs.removeClass('current');

			// main
			$otherMainImgs.stop(true, true).fadeOut(500);
			$targetMainImg.fadeIn(config.time.showImageDuration, function() {
				if( !stop ) { setScroll(interval); }
			});
		}

		function setScroll( interval ) {
			clearTimeout(scrollTimer);

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

			scrollTimer = setTimeout(function(){
				showImage(currentIndex + 1);
			}, interval);
		}

		/**
		 * Start!
		 *
		 */
		$mainImgs.eq(0).fadeIn(1200, function() {

			// for end loading
			$mainLoading.removeClass('loading');

			$sideImgs.eq(0).addClass('current');

			var length = $sideImgs.length;
			for( var i = 0; i < length; i++ ) {
				(function(i) {
					setTimeout(function() {
						$sideImgs.eq(i).fadeIn(300, function() {
							if( i == length - 1 ) {
								showImage(0, config.time.showImageInterval + 900);
							}
						});
					}, 200 * i);
				})(i);
			}
		});
	}
});